Preserve certain CSS when using 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 instructions to preserve specific inline styles or CSS files when needed, using a helper plugin.

In addition to this, the helper plugin can be used to modify the resulting Used CSS block, which is needed in very specific cases.

Note: In most cases, display issues should be resolved with the CSS safelist box, as shown here The approaches on this page should only be used when the safelist box will not 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!

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).
4. Save changes.
5. Compress the helper files into a ZIP file.

The type of customization depends on what you need to achieve, and the specific instructions for each case be found in the below sections.

Exclude CSS files

To exclude specific CSS files from being removed from their original location, follow these steps:

1. Uncomment the line 33 by removing the first two // characters.
2. Replace /wp-content/plugins/plugin-name/css/file.css with the file you need to preserve.
3. To exclude multiple CSS files, copy the entire line into a new line for each style file you want to exclude.

The content of the CSS file will still be added to the Used CSS.

Tip: To exclude a dynamically generated file, for example: /wp-content/plugins/some-plugin/0/some-css-123456.css, don't use full file name and path, or wildcards since they don't work in this case. Instead, use a partial matching string, such as /wp-content/plugins/some-plugin/0/.

Exclude inline CSS by content

To exclude inline CSS within specific <style> elements from being removed from their original location, by targeting specific CSS selectors, use these steps:

1. Choose one CSS selector from inside the <style> declaration, the more specific the better, this way only the inline style you want will be preserved in the HTML code.
2. Uncomment the line 45 by removing the first two // characters.
3. Replace .targetSelector with the selector you choose to use.
4. To exclude multiple inline CSS blocks, copy the entire line into a new line for each style declaration you want you exclude, and set the selectors.

The content of the CSS block will still be added to the Used CSS.

Note: Wildcards do not work in this helper plugin. Instead, you can use a partial match. For example, if you have a dynamically generated class like .button-widget-wuoy0oa where wuoy0oa is the dynamic part, you can use .button-widget- to cover all cases.

Exclude inline CSS by attribute

To prevent inline CSS within specific <style> elements from being removed, and by targeting specific attributes found in their <style> tag, you can follow similar steps as the above section.

However, in this case, to target the attributes of the tag, please work on the line 56.

In this case, the content of the CSS block will still be added to the Used CSS block.

Skip styles from the Used CSS

To target by attribute any styles from external CSS files or <style> elements, and completely exclude them from being added to the resulting Used CSS, follow the steps below:

1. Uncomment the line 73 by removing the first two // characters.
2. Replace data-example-1 with the attribute of the CSS element you need to exclude.
3. To exclude multiple CSS element, copy the entire line into a new line for each style element you want to exclude, and customize them

Note: Wildcards, and other regex items do not work here.

Heads up! With this approach, the targeted external CSS files are removed from their original spots, the inline <style> elements are emptied (their tags still remain in the HTML), but also, these will not be added to the resulting Used CSS block.

This approach is useful in cases when certain CSS is not supposed to be added to all pages, but applied only when very specific conditions are met.

If you use this option along with any of the first 3 options above to target the same CSS file or inline style, then it will be kept in the original location in the page, but its styles will not be added to the Used CSS block. This can be useful to prevent styles from being applied twice to pages.

Prepend styles to the Used CSS

To add specified styles at the beginning of the Used CSS block, please:

1. Uncomment the line 83 by removing the first two // characters.
2. Replace .new_css {background: red;} with your own CSS rule.

Append styles to the Used CSS

To add specified styles at the end of the Used CSS block, use these steps:

1. Uncomment the line 91 by removing the first two // characters.
2. Replace .new_css {background: red;} with your own CSS rule.

Filter the content of the Used CSS

To target a CSS rule from the Used CSS block, and replace it with your own rule, you should:

1. Uncomment the line 100 by removing the first two // characters.
2. Replace .to-be-removed{padding:10px} with the existent CSS rule you want to remove.
3. Uncomment the line 101 by removing the first two // characters.
4. Uncomment the line 102 by removing the first two // characters.
5. Replace .to-be-inserted{padding:20px} with the CSS rule you want to insert.

Installation

Once the helper has been customized with the above sections, you can install the helper plugin, like this:

1. On your site - go to Plugins → Add New → Upload plugin and select the zip file.
2. Activate the plugin.
3. Clear the Used CSS.