Autoprefixer Not Working

[michaelHeimes]

This is my first time using JointsWP. I'm using the newest version 5 and am not a Gulp expert by any means.

I was able to get thins rolling nicely and am enjoying the theme. However, I just realized that the autoprefixer is not working. I changed it to the last 5 versions just to be sure and I'm still not seeing any prefixes in the complied and minified css.

The only errors I still have are as follows:

[garretthyder]

Hello @michaelHeimes

Could you share your autoprefixer options from your Gulpfile.js to make sure it's not a syntax issue.

With most major browsers now supporting the non-prefixed CSS names for some time now it may simply not be prefixing as there's no need. For instance border-radius which originally needed the -moz- prefix for Firefox and the -webkit- prefix for Safari hasn't needed them for ~70 versions on Firefox and ~8 versions for Safari so your 5 versions wouldn't be enough to force them in this example.

That being said you can find the Full List of browser options here; https://github.com/browserslist/browserslist#queries

And can setup more granular controls to attempt to force prefixes like; '> 1%', 'last 2 versions', 'firefox >= 3', 'safari >= 4', 'IE 8', 'IE 9', 'IE 10', 'IE 11'

Hope that helps.

[michaelHeimes]

@garretthyder Thanks for the quick response!

You may be onto something. I changes the options to the one you posted and did notice some prefixes for display: flex.

But I'm still not seeing them for transform or transition.

My settings now are:

// Compile Sass, Autoprefix and minify gulp.task('styles', function() { return gulp.src(SOURCE.styles) .pipe(plugin.plumber(function(error) { gutil.log(gutil.colors.red(error.message)); this.emit('end'); })) .pipe(plugin.sourcemaps.init()) .pipe(plugin.sass()) .pipe(plugin.autoprefixer({ browsers: [ '> 1%', 'last 4 versions', 'firefox >= 3', 'safari >= 4', 'IE 8', 'IE 9', 'IE 10', 'IE 11' ], cascade: false })) .pipe(plugin.cssnano({safe: true, minifyFontValues: {removeQuotes: false}})) .pipe(plugin.sourcemaps.write('.')) .pipe(gulp.dest(ASSETS.styles)) .pipe(touch()); });

[garretthyder]

No worries @michaelHeimes that's good news.

Taking a look at transform and transition on caniuse.com it appears most can be used without requiring the prefixes.

transform is supported without prefix as of IE10, Firefox 16, Safari 9 and Chrome 36. Reference - https://caniuse.com/#search=transform

transition was supported without a prefix on most browsers out of the gate except Chrome which gained non-prefixed support in Chrome 27.

In my opinion you can pretty well ignore prefixing moving forward. *Going to close this as it's not an issue with JointWP itself, but feel free to continue the discussion here.