Eliminates unused CSS rules. Built for single-page apps.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
lib
test
.gitignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

nukecss

NPM Package Build Status Coverage Status Commitizen friendly Dependencies

Eliminates unused CSS rules. Built from the ground up for single-page apps. Inspired by purifycss and uncss.

How It Works

  • Parses the CSS with postcss and gonzales-pe and walks the AST to find the IDs, classes, and DOM types used in selectors.
  • Parses HTML and JavaScript sources to find rule usage in strings and attributes, falling back to simple RegExp search when parsing fails.
  • Removes rules whose selectors cannot be found in the source set.

Usage

npm install --save nukecss

nuke.js

const fs = require('fs')
const nukecss = require('nukecss')
const css = fs.readFileSync('myfile.css')

nukecss('./**/*.@(js|html)', css)
// .js-class { color: white; }
// .other-class { color: white; }
// .still-works { color: white; }
// #primary { color: white; }

myfile.js

const jsignored = "js-class other-class"
const woah = ["still", "works"].join("-")

myfile.css

.jsignored { color: white; }
.html-ignored { color: white; }
.js-class { color: white; }
.other-class { color: white; }
.still-works { color: white; }
#primary { color: white; }
#primary > .unused { color: white; }
.also-unused { color: white; }

myfile.html

<html>
<body>
  <div id="primary" class="html-class">html-ignored</div>
</body>
</html>