Modify the CSS generated by Remove Unused CSS

By default, the Remove Unused CSS feature removes all inline CSS and CSS files from your pages to leave only the resulting optimized Used CSS block.

In this article, you will find the helper plugin which you can use to:

• Preserve specific inline styles or CSS files
• Modify the resulting Used CSS block - Only needed in very specific cases.

Note: In most cases, display issues can be resolved using the CSS safelist box, as shown here.

Use the plugin in this article only when the safelist box doesn't work.

Helper plugin

The following plugin will help you modify the Used CSS by excluding external and inline CSS, adding custom styles, and filtering out unneeded styles from the Used CSS.

📥 Download (.zip): WP Rocket | Modify the Used CSS
Developers: You can find the code for this plugin on GitHub.

Heads up! The helper plugin doesn't work on its own. Manual code edit is required before use!

Use the README.md file for the specific details about how to apply each customization.

To customize the helper plugin, please:

1. Download the helper plugin ZIP file and extract it.
2. Open the wp-rocket-modify-the-used-css.php file using a text/code editor.
3. Apply the required customization(s) as per the README.md file.
   
4. Save changes.
5. Compress the helper files into a ZIP file.
6. On your site - go to Plugins → Add New → Upload plugin, and select the ZIP file.
7. Activate the plugin.

Upon activation, this helper plugin will automatically clear either the cache or the Used CSS, whichever is necessary to implement the changes.

And, that's it!

To verify that the solution works, confirm the Used CSS is effectively applied to the page, as per this.

If you need further help, please contact support.