wp_add_inline_style in plugin not working

I am trying to use wp_add_inline_style in plugin. I want to add some style when shortcode runs.

add_action('wp_enqueue_scripts', 'cod_enqueue_scripts');
add_shortcode('cod', 'cod_process_shortcode');

function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/style.css', __FILE__));
}

function cod_process_shortcode(){
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style('cod-style', $inline_css);
}

This doesn’t work, It will not hook to ‘cod-style’.

It works if I do this: (first enqueue CSS then call wp_add_inline_style immediately afterwards)

function cod_process_shortcode(){
    wp_enqueue_style('cod-custom', plugins_url('css/blank.css', __FILE__));
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style('cod-custom', $inline_css);
}

In the above example, I used an empty CSS file (blank.css) for testing.

I though maybe my original css file is not loaded yet, but even if I enqueue empty css in cod_enqueue_scripts, it will wont do it, like this:

function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/blank.css', __FILE__));
}

function cod_process_shortcode(){
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style('cod-style', $inline_css);
}

I don’t know what inline CSS I need until shortcode runs, and seems odd that the wp_add_inline_style will not hook to original wp_enqueue_style.

Here’s a solution based on this post, which allows the inline CSS to be rendered by a shortcode using a dependency without a path (basically a null file).

// Optional base styles
add_action( 'wp_enqueue_scripts', 'cod_enqueue_scripts' );
function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/style.css', __FILE__));
}

// Shortcode handler which also outputs inline styles.
add_shortcode( 'cod', 'cod_process_shortcode');
function cod_process_shortcode() {
    $color="#ff0000";
    $css="body { background-color: " . $color . '; }';

    wp_register_style( 'cod-inline-style', false );
    wp_enqueue_style( 'cod-inline-style' );
    wp_add_inline_style( 'cod-inline-style', $css );

    return "<p>Shortcode output...</p>";
}

Alternatively, Rarst pointed out that the WordPress gallery shortcode outputs dynamic styles. The gallery shortcode does not make use of wp_add_inline_style(), but the end result is essentially the same.

Edit: Here’s an alternate version where the inline styles use the dependency of the original styles.

// Base styles
add_action( 'wp_enqueue_scripts', 'cod_enqueue_scripts' );
function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/style.css', __FILE__));
}

// Shortcode handler which also outputs inline styles.
add_shortcode( 'cod', 'cod_process_shortcode');
function cod_process_shortcode() {
    $color="#bada55";
    $css="body { background-color: " . $color . '; }';

    wp_register_style( 'cod-inline-style', false, array( 'cod-style' )  );
    wp_enqueue_style( 'cod-inline-style' );
    wp_add_inline_style( 'cod-inline-style', $css );

    return "<p>Shortcode output...</p>";
}