0.1.0 • Published 9 years ago

postcss-scope-selector v0.1.0

Weekly downloads
17
License
MIT
Repository
github
Last release
9 years ago

PostCSS ScopeSelector

PostCSS plugin to prefix selector with a scope if matched selector exists. Current main use is to prefix :hover selectors with modernizr's .no-touchevents class to prevent hover effects from affecting touch devices.

/* Input example */
.foo:hover {}
/* Output example */
.no-touchevents .foo:hover {}

Usage

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var scopeSelector = require('postcss-scope-selector');

gulp.task('css', function() {
    var prefix = '.no-touchevents';
    var selector = ':hover';

    return gulp.src('./styles.css')
        .pipe( postcss([ scopeSelector(prefix, selector) ]) )
        .pipe(gulp.dest('./'));
});

See PostCSS docs for examples for your environment.