PostCSS Cherrypicker
PostCSS plugin to reduce the size of CSS files by removing unused styles from them.
Installation
Install it using npm or Yarn.
npm install postcss-cherrypicker yarn add postcss-cherrypicker
Usage
Cherrypicker works by checking every CSS selector against your markup and removing any that don't match anything.
Here is an example configuration:
See PostCSS docs for examples on how to configure your environment.
You must provide an options object to the plugin containing a files
array of all of the markup files you would like to
compare your CSS against. Internally, Globby is used so you can use files, directories, or globs. As shown above, you
can use a string or an object with a path
field to represent a file set.
The file will be parsed differently depending on the extension.
Extension | Parsing |
---|---|
html | The entire file is parsed |
vue | The template section of the single file component is parsed |
js | The file is scanned for JSX which is then converted to HTML and parsed |
If you're using an object to specify a file path, and you set the contains
field to true, Cherrypicker won't parse
your file and will instead check if it contains the class name, id, or tag name. This can be helpful when adding classes
with element.classList.add(...)
or with frameworks that use a virtual DOM and require calls to createElement
or h
.