PurgeCSS 3.0

Safelist and blocklist options. CLI changes

PurgeCSS is now a stable library, and while the bugs will keep being worked on and fixed, there’s a new major version introducing a few breaking changes.

If you don’t know what PurgeCSS is, the previous release article will explain what problem PurgeCSS is trying to solve and how it works: link.

Simplifying whitelist option

Whitelist started as a simple option named `whitelist` but grew up with the different use-cases and needs that appear with time. Another option called `whitelistPatterns` appeared, then `whitelistPatternsChildren`, …
It is now more complex and complicated, and somewhat difficult to remember how to use it with different options.

To summarize the changes, the whitelist options are now grouped in one option called safelist. And the most used options can be defined in one array.

Two forms are available. The simple form is:

safelist: [‘invisibleClass’, /^nav-/]

In this form, safelist is an array that can take a string or a regex.

The complex form is:

safelist: {
 standard: [‘invisibleClass’, /^nav-/],
 deep: [],
 greedy: [],
 keyframes: [],
 variables: []
}

In this form, safelist is an object taking optional properties:

• standard is the same as the simple form and replaces whitelist and whitelistPatterns
• deep replaces whitelistPatternsChildren
• greedy is a new option coming from https://github.com/FullHuman/purgecss/pull/424
• keyframes can be used to add keyframes to the safelist, when using keyframes: true (https://github.com/FullHuman/purgecss/issues/418)
• variables can be used to add CSS variables to the safelist, when using variables: true

New Option: Blocklist

Blocklist will block the CSS selectors from appearing in the final output CSS. The selectors will be removed even when they are seen as used by PurgeCSS.

blocklist: [‘usedClass’, /^nav-/]

Even if `nav-links` and `usedClass` are found in your content files (HTML, Javascript), they will be removed.

CLI

PurgeCSS is using commander.js for its CLI. The recent version of commander.js introduced the possibility of making an option variadic. This means when specifying multiple option arguments, the parsed option value will be an array.
A few options are now taking advantage of this new feature: content, css, and the newly introduced option safelist and blocklist. It is no longer necessary to separate the list items with a comma.

Usage: purgecss --css <css> --content <content> [options]

Options:
  -con, --content <files>  glob of content files
  -css, --css <files>      glob of css files
  -c, --config <path>      path to the configuration file
  -o, --output <path>      file path directory to write purged css files to
  -font, --font-face       option to remove unused font-faces
  -keyframes, --keyframes  option to remove unused keyframes
  -rejected, --rejected    option to output rejected selectors
  -s, --safelist <list>   list of classes that should not be removed
  -b, --blocklist <list>  list of selectors that should be removed
  -h, --help               display help for command

FullHuman/purgecss

Introduction | PurgeCSS

About the author
I’m Floriel. You can follow me on GitHub and Twitter.