PurgeCSS 2.0 - Full Human

By Floriel Fedry

The process is simple to understand. But one of the main challenge and considerations is the diverse types of files that can be used to define the structure of your web applications or websites. You need to be able to get the selectors from HTML files, but also templating languages such as pug, twig, blade, and potential selectors can be hidden in script files like Javascript and Typescript.

To make sure you are able to work with every type of file you want, PurgeCSS has a concept of extractors. An extractor is just a function that takes the content of a file and returns the list of potential selectors. You can then define smart functions that will parse the files, get the class names, ids, tag names, and attributes. Or you can do something simpler like the default extractor, using a regex to get every word on the page.

PurgeCSS 2.0 is the second major version bump. Some of the changes and improvements made required breaking changes. If you are using a plugin (Webpack, Nuxt.js, postCSS, …), you will probably not be affected by those changes as the plugin will be modified.

Asynchronous

The previous version of PurgeCSS worked synchronously. You would typically instantiate PurgeCSS and execute the process.

The new version of PurgeCSS works asynchronously. Thanksfully, async/await is well supported in the LTS versions of NodeJS. If you are using PurgeCSS on multiple websites or pages in the same times, you will see a difference in time of execution.

Font Faces and Keyframes

In the previous version of PurgeCSS, it was possible to remove unused font-faces and keyframes with two respective options. Due to the consequences, those features could bring if not working correctly, the options were set to by default because of reports of issues.
While the options are still deactivated by default, those issues are now fixed.

CSS Variables

If you used PurgeCSS with BootstrapCSS, you might have noticed a list of CSS variables that were still present in the CSS files despite the fact they were not used. CSS variables are quite useful and are now well supported. A new option is available to remove unused CSS variables.

Extractor is a function

Bad design choices for an API happens. That was the case for the extractor; they needed to be a class with a static method. It is now a simple function that takes the as an argument and returns either a precise object containing classes, ids, attributes names and values, and tags; or an array of selectors.
This allows PurgeCSS to make the distinction between and .

Monorepo and Typescript

The new version has been written in Typescript to provide better support for types and improve the developer experience. The repo has been reorganized to simplify the maintenance of the project. You can find most of the plugins in the PurgeCSS repository. It will make it easier to maintain the plugins and to ensure they are using the latest version of PurgeCSS.

Drop support of NodeJS < 8

NodeJS 8’s End of Life is December 31, 2019. It means it will no longer receive updates. While PurgeCSS might work on NodeJS < 8, it will be tested on NodeJS ≤ 8, including NodeJS 8, 10 and 12.