Css2modernizr NPM

css2modernizr

Creates a Modernizr config file that requires only the tests that your CSS uses.

Install

As command line tool:

$ npm install -g css2modernizr

If you haven't sufficient permissions may be you should use sudo

As node.js module for using in your project:

$ npm install --save css2modernizr

Usage

As command line tool:

$ css2modernizr /path/to/your/css/file.css

Or if you use Modernizr's prefixes in your css:

$ css2modernizr --prefix prfx- /path/to/your/css/file.css

Where prfx- is part in class name .prfx-no-flexbox or .prfx-rgba

As node.js module:

var css2modernizr = require('css2modernizr');
var result = css2modernizr(css, prefix).usage();

Example

Let's imagine we have the following CSS:

.block {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  z-index: 20;
  left: 50%;
  margin: 15px 0 0 0;
  padding: 20px 20px 15px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  backface-visibility: hidden;
  transform: translate(-50%, 0);
  visibility: hidden;
}

.no-boxshadow .block {
  border: 1px solid #bfbfbf;
  border-top: none;
  margin-top: 14px;
}

.no-rgba .block {
  background-color: white;
}

.no-csstransforms .block {
  left: 0;
}

.no-flexbox .block {
  display: block;
  z-index: 10;
}

.block__element {
  position: absolute;
  top: -10px;
  left: calc(50% - 10px);
  display: block;
  height: 0;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

.no-csstransforms .block__element {
  left: 0;
}

If you run css2modernizr on this CSS, then result will be:

$ ./bin/css2modernizr test/example.css                                                                                                                                 develop [2deb29d] modified untracked

No prefix (e.g. .no-flexbox, .rgba)

┌───────────────┬─────────────────┐
│ Name          │ Count of usages │
├───────────────┼─────────────────┤
│ csstransforms │ 2               │
├───────────────┼─────────────────┤
│ flexbox       │ 1               │
├───────────────┼─────────────────┤
│ rgba          │ 1               │
├───────────────┼─────────────────┤
│ boxshadow     │ 1               │
└───────────────┴─────────────────┘

Download your Modernizr custom build by URL:
http://modernizr.com/download/#-boxshadow-csstransforms-domprefixes-flexbox-rgba-testallprops-testprop