modernizr-stylus

Modernizr-Stylus

Modernizr-Stylus is a handy utility plugin for the Stylus CSS preprocessor that makes feature detection with Modernizr.js a lot easier.

It turns this...:

.test
  +yep(csstransforms, csstransforms3d)
    transform: translate3d(100px, 0, 0)
  +nope(csstransforms, csstransforms3d)
    left: 100px

...into this:

.csstransforms.csstransforms3d .test
  transform: translate3d(100px, 0, 0)
.no-js .test,
.no-csstransforms .test,
.no-csstransforms3d .test
  left: 100px

Installation

You can install Modernizr-Stylus through NPM:

$ npm install modernizr-stylus

Usage

Modernizr-Stylus is a Stylus plugin, and can be integrated in any way that Stylus plugins normally are. If you are curious how to use Stylus plugins, feel free to check out this guide.

By default, Modernizr-Stylus' mixins will be included automatically into all parsed stylesheets when included as above. If you'd like to import Modernizr-Stylus manually in Stylus when you want to use it, you can pass { implicit: false } to the Modernizr-Stylus call:

modernizr({ implicit: false })

If you do it this way, you'll need to @import Modernizr-Stylus manually wherever you'd like access to the mixins:

@import 'modernizr-stylus'

.test, .test2
  +yep(boxshadow)
    box-shadow: 0 0 3px #000;

...etc...

Miscellaneous

• Details on the license can be found here

Credits

Daniel Guillan - initial idea / scss mixins