You can still use this code, and it still should work (with Parcel v1). Please do fork it and continue work on it if you want, I'm happy to donate the npm name to a well-maintained fork.
A Parcel plugin to remove unused rules from your bundled CSS files.
This plugin uses purgecss to remove unused CSS rules.
It works by reading your source files and checking which CSS selectors are mentioned in your HTML and Javascript code.
This is very useful if you're using a full-featured CSS framework like Bootstrap or Materialize, or even Atomic CSS libraries like Tachyons or BassCSS since you might not use all the provided components and helpers.
- Install the plugin as a dependency in your
package.json. - Create a
purgecss.config.jsfile in the root of your module and fill it out with the options you need from PurgeCSS. Note that thecontentoption is required. You can also add your options to apurgecsskey on yourpackage.json. - Build normally
This plugin is only enabled when minify: true, which means it won't run on
parcel serve.
They are passed directly to the purgecss postcss plugin. Here's a list of the available options.
purgecss.config.js:
module.exports = {
content: ["src/**/*.html"], // Be careful not to include the `node_modules` folder in your globs.
whitelist: ["my-very-special-class"],
}Note that whitelisting applies to any element, id, or class that matches the provided names, as mentioned in the purgecss docs.
yarn add --dev parcel-bundler parcel-plugin-purgecssor
npm install -D parcel-bundler parcel-plugin-purgecssparcel-bundler is a peer dependency.
The entry stylesheet must be in your package. That means that if you have a stylesheet of your npm dependencies directly from a JS or HTML file, it will not be purged. If you import it directly or indirectly from another stylesheet in your main package (or SASS, Stylus, etc.), it's fine.