css-razor
css-razor is a fast way to remove unused selectors from css. Essentially, it accomplishes the same goal as uncss. However, it accomplishes this goal differently. Rather than loading a webpage in phantomjs and using document.querySelector
to determine if a selector is being used, css-razor uses cheeriojs to parse static html and css files to removed unused selectors.
- Helps trim down CSS so you only keep the necessary parts
- Built for speed using the amazing cheeriojs
- has an ignore list that can be added to
- ignores common pseudo elements & pseudo selectors by default
- Supports multiple files / globs
- Supports raw html & css input
- Supports html paths from URLs
- Reporting stats detailing how many selectors are removed.
Getting Started
Install with npm
npm install --save-dev css-razor
You can then use the cli
css-razor build/css/index.css build/index.html --stdout > build/css/index.min.css
And you can even pass globs
css-razor build/css/*.css build/*.html --stdout > build/css/index.min.css
Or you can use the js api
const cssRazor = default
Options
moduleexports = // Array of HTML file globs. html: // Array of CSS file globs. css: // Raw HTML string. htmlRaw: '' // Raw CSS string. cssRaw: '' // Array of webpages to add to HTML. webpages: // Strings in CSS classes to ignore. Pass `false` // (or `--no-ignore` via cli) to not ignore these. ignore: 'html' // global element 'body' // global element 'button' // global element 'active' // state class 'inactive' // state class 'collapsed' // state class 'expanded' // state class 'show' // state class 'hide' // state class 'hidden' // state class 'is-' // state class // Where to output outputFile: 'dist/index.css' // Disable output via stdout w/ `--no-stdout`. stdout: false // Report Stats about used vs unused selectors. report: false // Detailed Report Stats including every selector used vs unused. // Note: this also depends on the `report` option being true. reportDetails: false // Overwrite the input css file if there is only one. overwriteCss: false
Usage with Postcss
const postcssRazor = postcss
React to HTML Example
Below is an example of building an html file from a react app created with create-react-app
. The resulting HTML file can then be used for server rendering and detecting selectors with css-razor.
index.js:
if typeof window !== 'undefined' // Web ReactDOM else // Node / server render globalappToRender = App
buildStatic.js:
const app = globalappToRenderconst markup = ReactDOM; const html = fsconst newHtml = html fs
Todo
- html input via stdin?
- more tests for raw and globs
- test for postcss plugin usage