PostCSS plugin to prefix selector with a scope if matched selector exists (.no-touchevents :hover)
npm install postcss-scope-selector:hover
.no-touchevents class to prevent hover effects from affecting
css
/ Input example /
.foo:hover {}
`
`css
/ Output example /
.no-touchevents .foo:hover {}
`
Usage
`js
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('./'));
});
``