PostCSS plugin to reduce the size of CSS files by removing unused styles from them.
Install it using npm or Yarn.
npm install postcss-cherrypickeryarn add postcss-cherrypicker
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.
|html||The entire file 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
element.classList.add(...) or with frameworks that use a virtual DOM and require calls to