gulp postcss cssnext autoprefixer not working

609 views Asked by At

gulp file:

var gulp = require('gulp');

var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('postcss-cssnext');
var precss = require('precss');
var csswring = require('csswring');
var concat = require('gulp-concat');

gulp.task('css', function () {
  var processors = [
    //autoprefixer('last 6 versions'),
    cssnext({ browsers: ['last 6 versions'] }),
    precss,
    csswring
  ];
  return gulp.src('./src/main.css')
    .pipe(postcss(processors))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('.'));
});

gulp.task('watch', function() {
    gulp.watch('src/*.css', ['css']);
});

I'm having an issue getting autoprefixer to work. I'm doing a transform on an element, but I see no vendor prefixes being added. Apparently with postcss-cssnext, autoprefixer is supposed to be included in it, so I passed the options through that. I'd tried regular autoprefixer and no luck, either. I get no warnings in the command line when I run my watch task.

UPDATE By moving autoprefixer to the end, I got it to work, using the same syntax I did for cssnext. However, I would like it if I could stop using autoprefixer altogether, since it's supposed to be included in cssnext anyway. I'm still not sure how to do this.

0

There are 0 answers