Skip to content

patrickhulce/nukecss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 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 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

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; }

nuke.js

const fs = require('fs')
const nukecss = require('nukecss')

const javascript = fs.readFileSync('myfile.js')
const css = fs.readFileSync('myfile.css')
const html = '<div id="primary" class="html-class">html-ignored</div>'

nukecss([
  {content: javascript, type: 'js'},
  {content: html, type: 'html'},
], css)
// .js-class { color: white; }
// .other-class { color: white; }
// .still-works { color: white; }
// #primary { color: white; }

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published