Use autoprefixer for postcss instead of gulp-autoprefixer

Use `autoprefixer` for postcss
(https://www.npmjs.com/package/autoprefixer) instead of
`gulp-autoprefixer`.

Changes:
- Use postcss and autoprefixer in the gulp sass tasks
- By using `autoprefixer` directly, `autoprefixer` version is updated
from `5.0` to the latest version `6.5.3`.

Changes in the CSS:
- Improve the `transition: transform…` and `transition: box-shadow…`
support

Full diff of `foundation.css`: https://www.diffchecker.com/iMxTO2UH

diff --git a/gulp/tasks/customizer.js b/gulp/tasks/customizer.js
index a70659b65bc3f03c82c007c8b748d4b01d356a08..d0b7810bd0cc73d7f14ecd48664f86a1612f375b 100644 (file)
--- a/gulp/tasks/customizer.js
+++ b/gulp/tasks/customizer.js
@@ -13,13 +13,14 @@ var replace = require('gulp-replace');
 var rename = require('gulp-rename');
 var rimraf = require('rimraf');
 var sass = require('gulp-sass');
-var autoprefixer = require('gulp-autoprefixer');
 var source = require('vinyl-source-stream');
 var touch = require('touch');
 var uglify = require('gulp-uglify');
 var yaml = require('js-yaml').safeLoad;
 var yargs = require('yargs');
 var zip = require('gulp-zip');
+var postcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
 
 var ARGS = require('yargs').argv;
 var FOUNDATION_VERSION = require('../../package.json').version;
@@ -75,9 +76,9 @@ gulp.task('customizer:sass', ['customizer:loadConfig', 'customizer:prepareSassDe
         'node_modules/motion-ui/src'
       ]
     }))
-    .pipe(autoprefixer({
+    .pipe(postcss([autoprefixer({
       browsers: COMPATIBILITY
-    }))
+    })]))
     .pipe(gulp.dest(path.join(OUTPUT_DIR, 'css')))
     .pipe(cssnano())
     .pipe(rename('foundation.min.css'))

diff --git a/gulp/tasks/sass.js b/gulp/tasks/sass.js
index c98a7df0601f8bb258d96b0d4d23421e750d3213..acc215932c165fa09a6ffba213c5383a8ff267f1 100644 (file)
--- a/gulp/tasks/sass.js
+++ b/gulp/tasks/sass.js
@@ -5,10 +5,11 @@ var gulp = require('gulp');
 var Parker = require('parker/lib/Parker');
 var prettyJSON = require('prettyjson');
 var sass = require('gulp-sass');
-var autoprefixer = require('gulp-autoprefixer');
 var plumber = require('gulp-plumber');
 var sourcemaps = require('gulp-sourcemaps');
 var sassLint = require('gulp-sass-lint');
+var postcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
 
 var CONFIG = require('../config.js');
 
@@ -27,9 +28,9 @@ gulp.task('sass:foundation', ['sass:deps'], function() {
     .pipe(sourcemaps.init())
     .pipe(plumber())
     .pipe(sass().on('error', sass.logError))
-    .pipe(autoprefixer({
+    .pipe(postcss([autoprefixer({
       browsers: CONFIG.CSS_COMPATIBILITY
-    }))
+    })]))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest('_build/assets/css'))
     .on('finish', function() {
@@ -48,9 +49,9 @@ gulp.task('sass:docs', ['sass:deps'], function() {
     .pipe(sass({
       includePaths: CONFIG.SASS_DOC_PATHS
     }).on('error', sass.logError))
-    .pipe(autoprefixer({
+    .pipe(postcss([autoprefixer({
       browsers: CONFIG.CSS_COMPATIBILITY
-    }))
+    })]))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest('_build/assets/css'));
 });

diff --git a/package.json b/package.json
index 32fde7d037704d794935f71da5cb110195a926b5..0bf7c2196d3fac9f188545e9e590bfeec9bc7a1e 100644 (file)
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   "license": "MIT",
   "devDependencies": {
     "array-uniq": "^1.0.2",
+    "autoprefixer": "^6.5.3",
     "babel-core": "^6.3.26",
     "babel-eslint": "^5.0.0",
     "babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
@@ -42,7 +43,6 @@
     "foundation-docs": "zurb/foundation-docs",
     "gulp": "^3.8.10",
     "gulp-add-src": "^0.2.0",
-    "gulp-autoprefixer": "^2.3.1",
     "gulp-babel": "^6.1.1",
     "gulp-cache-bust": "1.0.2",
     "gulp-check-deps": "^1.4.1",