cssgulpautoprefixergulp-autoprefixer

autoprefixer not prefixing @keyframes?


I just copied the sample at https://www.npmjs.com/package/gulp-autoprefixer after I installed gulp and gulp-autoprefixer:

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function () {
    return gulp.src('src/a.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dest'));
});

and I have following in my a.css:

@keyframes x {
    from { left: 0; }
    to { left: 100%; }
}

after I gulp, I get a.css in desc, but with the exact same code as the original. No -webkit- is added, but from http://caniuse.com/#search=keyframes it should be prefixed for Android Browser, which is my target device.

Am I missing something?


Solution

  • The caniuse site specifies that keyframes are supported back to 4.3 without the need to prefix.

    In gulp you have specified that prefixing should occur for the last 2 versions of browsers. Meaning prefixing will be based on rules set out by browsers from two versions previous:

    browsers: ['last 2 versions']
    

    If you want to support Android from a much earlier version then play around with the browsers option in the autoprefixer module:

    browsers: ['last 5 versions']