Skip to content
Use uncss as a postcss plugin
Branch: master
Clone or download
aculligan and RyanZim 0.17.0
Update peerDependencies to new version of uncss (#13)

Fix for #12.
Latest commit 0016908 Jun 29, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit May 27, 2016
LICENSE Initial commit May 27, 2016
README.md Update after moving repo Feb 16, 2018
index.js 0.14.0 Jul 9, 2016
package.json 0.17.0 Jun 29, 2019

README.md

postcss-uncss

npm npm

Use uncss as a PostCSS plugin.

About

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.

Example:

html:

<body>
  <p class="red">Hello World!</p>
</body>

css before:

.red {
  color: red;
}
.blue {
  color: blue;
}

css after:

.red {
  color: red;
}

How?

The HTML files are loaded by jsdom and JavaScript is executed. UnCSS filters out selectors that are not found in the HTML files.

See the UnCSS docs for more information.

Installation

postcss-uncss specifies UnCSS as a peerDependency, so you will have to install UnCSS as well.

npm install postcss-uncss uncss

postcss-uncss' MAJOR & MINOR version numbers correspond to UnCSS' version numbers; however, the PATCH version number may differ.

Usage

postcss([ require('postcss-uncss') ])

See PostCSS docs for examples for your environment.

Options

  • html (Array): provide a list of html files to parse for selectors and elements. Usage of globs is allowed.

  • ignore (Array): provide a list of selectors that should not be removed by UnCSS. For example, styles added by user interaction with the page (hover, click), since those are not detectable by UnCSS yet. Both literal names and regex patterns are recognized. Otherwise, you can add a comment before specific selectors in your css:

    /* uncss:ignore */
    .selector1 {
        /* this rule will be ignored */
    }
    
    .selector2 {
        /* this will NOT be ignored */
    }

Example Configuration

{
  html: ['index.html', 'about.html', 'team/*.html'],
  ignore: ['.fade']
}
You can’t perform that action at this time.