automate adding flexibility declaration with gulp

Question

I want to add flexibility polyfill in my build to support ie8 & 9. Is there a way with gulp to add in the -js-display: flex; before display: flex; as required?

.container {
    -js-display: flex;
    display: flex;
}

https://github.com/10up/flexibility

Thanks!

Answer 1

You can use gulp-postcss in combination with the postcss-flexibility plugin:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var flexibility = require('postcss-flexibility');

gulp.task('css', function() {
  return gulp.src('src/**/*.css')
    .pipe(postcss([flexibility]))
    .pipe(gulp.dest('dist'));
});