Skip to content

Eliminates unused CSS rules. Built for single-page apps.

License

Notifications You must be signed in to change notification settings

patrickhulce/nukecss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>