Nougat Predominant Middleware

    postcss-cherrypicker

    0.1.0 • Public • Published

    PostCSS Cherrypicker Build Status

    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:

    postcss([
        require('postcss-cherrypicker')(
            {
                files: [
                    "src/index.html",           // single file
                    "src/pages/**/*.html",      // glob with html files
                    "src/more-pages",           // directory
                    "src/jsx/*.js",             // glob with js files
                    "src/vue/*.vue",            // glob with vue files
                    {
                        path: "src/js/*.js",    // glob
                        contains: true          // in contains mode
                    }
                ]
            }
        )
    ])

    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.

    Install

    npm i postcss-cherrypicker

    DownloadsWeekly Downloads

    2

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    10.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • mrbbot