Why is TinyMCE 4.x not using updated CSS even with forced reload? [closed]

Question

I'm running TinyMCE Version 4.9.11 in a ClassicPress V2.1 site.

This is (part of) my code to setup tinyMCE:

function my_mce_before_init_insert_formats( $init_array ) {  
    $style_formats = [
        ['title' => 'Headings', 'items' => [
            [ 'title' => 'Heading 2', 'format' => 'h2' ],
            [ 'title' => 'Heading 3', 'format' => 'h3' ],
            [ 'title' => 'Heading 4', 'format' => 'h4' ],
            [ 'title' => 'Heading 5', 'format' => 'h5' ],
            [ 'title' => 'Heading 6', 'format' => 'h6' ]
        ]
    ],
        ['title' => 'Styles', 'items' => [
            ['title' => 'Accent1', 'inline' => 'span', 'styles' => ['color' => 'var(--clr-accent)']],
            ['title' => 'Zitat', 'inline' => 'q', 'styles' => ['color' => 'var(--clr-quote)']]
            ]
        ]
    ];
    $init_array['content_css'] = '/wp-content/themes/qpoolbasic/styles/textbasic.css';
    $init_array['style_formats'] = json_encode( $style_formats );
    $init_array['preview_styles'] = 'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow';
    return $init_array;
} 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

The textbasic.css looks like this:

:root {
    --clr-accent:#f00;
    --clr-quote:#00f;
}
h2 {background:#ff0; border-bottom:1px solid #f0f;}
h3 {background:#ff0; border-bottom:1px solid #f0f;}

The :root-colors get applied and I can see them in the inspector. However, the h2/h3-settings dont get applied and if I inspect the tags, the setting are not listed.

Does someone know, why this is?

Answer 1

I found it. My god, is this poorly documented :D

TinyMCE not only applies your given stylesheet, it caches an additional copy of it. Because reasons. So if you change something like I did and then control reload everything, you reload the copied cached version. The solution is to add another parameter that you change every time you actually change something in the css. That parameter is called cache_suffix:

$init_array['cache_suffix'] = 'v=SomeVersionNumber';

That parameter is nowhere mentioned in the content_css section – because why should it? – so if you stumble upon this having the same issue, that is how you do it.