Prevent removing CSS rules

Hello @spacetime

I am sorry about the issue you are experiencing and I am happy to help.
Can you please share so examples and your website URL so we can check this?
Thank you!

I experienced the problem on a test site that is not public.

The problem occurs when I use fragment caching with AMP plugin.

I insert inline CSS into header. This is then placed into <style amp-custom=""> by AMP plugin.
All the CSS rules used only inside code generated by PHP code of fragment caching are removed.

This can easily be reproduced.

Configure W3TC to use fragment caching and put some short piece of code on the page, for example (you can replace php code with W3TC_DYNAMIC_SECURITY with your ID):

<!-- mfunc <?php echo W3TC_DYNAMIC_SECURITY; ?> -->
echo '<div class="test-', 'w3tc">AMP TEST</div>';
<!-- /mfunc <?php echo W3TC_DYNAMIC_SECURITY; ?> -->

and put this code into header:

<style>
.test-w3tc {
background: #0ff;
}
</style>

It seems that since class test-w3tc is not present in the HTML code (split into two parts – before processed by W3TC) the CSS rule for .test-w3tc is removed on AMP pages.

I’m using fragment caching a lot and the CSS is dynamically generated.

Now I’m not sure whether the CSS code is removed by AMP plugin or W3TC.

Since W3TC has many options to optimize CSS I was wondering if it also “optimizes” CSS.
If not, then it must be the AMP plugin that removes CSS rules.

Anyway, I need to find a solution.
Please advise.

Hello @spacetime

Thank you for the information. What settings do you have enabled in Performance>Minify under HTML minify and CSS minify?
And does the issue persist if you disable those two options?
Thank you!

Both are disabled.

Hello @spacetime

Thank you for the information.
So to confirm the issue persists if those two settings are disabled?
Does the issue persist if you completely disable minify? Are you using any other minify plugin?

1. Yes.

2. Yes.

3. No other minify plugin.

Hello @spacetime

Thank you for the info. It appears that you are not calling the class correctly.
Have you tried E.G:

<!-- mfunc <?php echo W3TC_DYNAMIC_SECURITY; ?> -->
echo '<div class="test-w3tc">AMP TEST</div>';
<!-- /mfunc <?php echo W3TC_DYNAMIC_SECURITY; ?> -->

Thanks!

No, you are wrong.

After the code executes it will generate:

<div class="test-w3tc">AMP TEST</div>

What is wrong with this code?

I prepared a test code so you can reproduce the problem. It makes no sense to modify test code so the problem does not appear.

If you test with a code where the class name is present in the PHP code then the problem does not appear. Please read my post above.

I would only like to prevent the plugin from removing CSS rules I create.

Here is another real example to reproduce the problem – use the same header style code:

<!-- mfunc <?php echo W3TC_DYNAMIC_SECURITY; ?> -->
echo base64_decode ('PGRpdiBjbGFzcz0idGVzdC13M3RjIj5BTVAgVEVTVDwvZGl2Pg==');
<!-- /mfunc <?php echo W3TC_DYNAMIC_SECURITY; ?> -->

Any solution?

Hello @spacetime

We are unable to replicate this issue. W3 Total Cache does not remove CSS rules. Especially not if minify is not enabled!

But have you tested together with AMP plugin?
The CSS rule gets removed.

It could be AMP plugin, I just need your confirmation that is not W3TC that removes CSS rules.

Hello @spacetime

Yes, all tested. W3 Total Cache does not remove CSS rules.
Thank you!

Great, thank you very much!