JosephClay / postcss-scope-selector

PostCSS plugin to prefix selector with a scope if matched selector exists (.no-touchevents :hover)

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.