Roots Discourse

Removing unused CSS with Purgecss/UnCSS

Hi all,
I’ve been fighting with this for years, I used to use Uncss with a wget-spidered sitemap, later Purgecss with elaborate regexes… until I realized that I pretty much always want to

  • whitelist everything in resources/assets/styles/
  • purgify everything from node_modules (usually a CSS framework)

I haven’t found a clean option or plugin to do just this, but a workaround with purgecss start ignore. It needs more setup, which I detailed in this gist.

(I hope it’s OK to just link it here – this is my first post. HMU if I should unwrap it here & feel free to do so yourself!)

3 Likes

I had a similar setup to yours with purgecss start ignore comments but sometimes they weren’t reliable and styles got purged anyway.

I switched to whitelister and it works perfectly so far. Also, it keeps stylesheets cleaner and config is where it should be, that is in JS not CSS.

Here is an example how to whitelist contents of a folder:

whitelist: [
  "fade",
  "collapse",
  "collapsing",
  "in",
  "show",
  "modal-open",
  "modal-backdrop",
  "lazyloaded",
  "is-active",
  ...whitelister([
    "resources/assets/styles/common/*.scss",
    "resources/assets/styles/components/*.scss",
    "resources/assets/styles/layouts/*.scss",
    "resources/assets/styles/objects/*.scss",
  ]),
],

Thanks @mmirus for the tip!

2 Likes