Gulp plugin to transform css selectors
First, install gulp-transform-selectors
as a development dependency:
npm install --save-dev gulp-transform-selectors
Then, add it to your gulpfile.js
:
var transformSelectors = require("gulp-transform-selectors");
gulp.src("./src/*.css")
.pipe(transformSelectors(function (selector) {
return '.ie8 ' + selector;
}))
.pipe(gulp.dest("./dist"));
A hash of options may be passed to the transform selectors function as the second parameter;
While the plugin will normally run the passed in function once for each selector, it's sometimes preferable to run it once for each comma seperated group within each selector.
h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
text-rendering: optimizelegibility;
}
With splitOnCommas set to false (default), the function would receive "h1, h2, h3, h4, h5, h6" as an argument. When true, h1, h2, h3, h4, h5 and h6 would each be passed as arguments and transformed individually.
Example config:
var transformSelectors = require("gulp-transform-selectors");
gulp.src("./src/*.css")
.pipe(transformSelectors(function (selector) {
return '.ie8 ' + selector;
}, {
splitOnCommas: true
}))
.pipe(gulp.dest("./dist"));