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!

3 Likes

Hi, does someone know how to use the rejected function of Purgecss with Sage? I’m trying to see which css is stripped out. I don’t get it working.

new Purgecss({
....
    rejected: true
})

https://www.purgecss.com/configuration#options