CSS

How to prevent PurgeCSS from removing certain CSS rules

You may run into edge cases when using PurgeCSS where you might really want to keep some css in the final build files.

Post Image

You may run into edge cases when using PurgeCSS where you might really want to keep some css in the final build files. These can be for various reasons :

  • These styled will be used after some kind of JS parser has operated, hence it wasn't detected during the build time.
  • You have elements that will load at run time(essentially same as above)
  • You really want people to see that line of CSS in devtools.

The feature and all of it's options are very well documented here

The most useful one for me would be :

/* purgecss start ignore */
h5 {
  color: pink;
}

h6 {
  color: lightcoral;
}

/* purgecss end ignore */

That's it, this bit of CSS will make it to the final build file. These comments will shield the lines of CSS they contain with their life !

© 2020 | Sandeep Ramgolam