JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q47832F
  • License MIT

Eliminates unused CSS rules.

Package Exports

  • nukecss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nukecss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>