node package manager

Introducing npm Enterprise add-ons. Integrate third-party dev tools into npm…

css2modernizr

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

css2modernizr

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

$ npm install -g css2modernizr

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

$ npm install --save css2modernizr
$ 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

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

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

(Coming soon)

  • Fixed bug with lastIndex in regular expression.
  • Update dependencies:
    • PostCSS to 5.0.12
    • lodash to 3.10.1
  • Example is added to README.
  • Initial releases, just CLI-tool, without main idea.

Copyright © 2014—2015 Vladimir Bolshakov. Licensed under the MIT license.