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.