Skip to content

css-razor uses cheerio.js to parse static html to remove unused selectors in CSS.

License

Notifications You must be signed in to change notification settings

tscanlin/css-razor

Repository files navigation

css-razor

Build Status

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 = require('css-razor').default

cssRazor({
  html: ['build/index.html'],
  css: ['build/css/index.css'],
}, function(err, data) {
  console.log(data.css)
})

Options

module.exports = {
  // 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 = require('css-razor').postcss

postcss([
    postcssRazor({
      html: "<html>your html string</html>",
    })
  ])
  .process(css, {
    from: 'index.css',
    to: 'output.css'
  })

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:

import App from './components/App'
import './index.css'

if (typeof window !== 'undefined') { // Web
  ReactDOM.render(
    <App />,
    window.document.getElementById('root')
  )
} else { // Node / server render
  global.appToRender = App
}

buildStatic.js:

const app = global.appToRender
const markup = ReactDOM.renderToString(ReactDOM.createElement(app));

const html = fs.readFileSync(HTML_FILE)
const newHtml = html.toString().split('<div id="root"></div>').join(
  '<div id="root">' + markup + '</div>'
)

fs.writeFileSync(HTML_FILE, newHtml, 'utf8')

Todo

  • html input via stdin?
  • more tests for raw and globs
  • test for postcss plugin usage

About

css-razor uses cheerio.js to parse static html to remove unused selectors in CSS.

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published