Skip to content
Analyze your CSS and output only used Modernizr's settings
JavaScript
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
lib
test
.editorconfig
.gitignore
.jscs.json
.jshintrc
.npmignore
README.md
gulpfile.js
package.json

README.md

css2modernizr

NPM version Dependency Status Coverage Status

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

API

(Coming soon)

Contributing

Release History

0.1.0

  • Fixed bug with lastIndex in regular expression.
  • Update dependencies:
    • PostCSS to 5.0.12
    • lodash to 3.10.1
  • Example is added to README.

0.0.X

  • Initial releases, just CLI-tool, without main idea.

License

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

You can’t perform that action at this time.