modernizr helper mixins for stylus

modernizr.styl

/* private modernizr mixin
 *
 * downside - only works on single-element selectors. nesting still works though.
 *
 * @param features - a list of modernizr test classes e.g.: csstransitions opacity OR csstransitions, opacity
 * @param declaration - the {block} of content passed by the block mixins +yep()/+nope()
 * @param support - boolean, true if testing support, false if testing no support
 *
 * 1. if testing for support, set selector to empty string
 *    if testing for no support, set selector to ".no-js" appended by
 *    the current class/id/element e.g.: .no-js .item
 * 2. if testing for support, append selector with feature test classes
 *    e.g.: .opacity.csstransitions
 *    if testing for no support, append selector with comma separated
 *    of .no-feature test classes and current class/id/element
 *    e.g. .no-js .item, .no-opacity .item, .no-csstransitions .item
 * 3. append the current class/id/element to the feature test ruleset
 *    if testing for support
 * 4. declare selector at root. the '/' is the same as Sass' "@at-root" directive.
 * 5. interpolate the declaration block passed by +yep/+nope
 */

_modernizr(features, declaration, support)
  selector = support ? '' : ('.no-js ' + selector()) /* 1 */
  for feature in features
    selector += support ? ('.' + feature) : (', .no-' + feature + ' ' + selector()) /* 2 */
  selector += (' ' + selector()) if support /* 3 */
  /{selector} /* 4 */
    {declaration} /* 5 */

yep()
  _modernizr(arguments, block, true)
    
nope()
  _modernizr(arguments, block, false)

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

output.css

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