Merge branch 'postcss' (PR #582)

Author: olets

gulpfile.js/lib/addPostCssPlugin.js

@@ -0,0 +1,6 @@
+module.exports = function addPostCssPlugin(name, config) {
+  let hasPlugin = !!TASK_CONFIG.stylesheets.postcss.plugins.find(p => p.postcssPlugin === name)
+  if (!hasPlugin) {
+    TASK_CONFIG.stylesheets.postcss.plugins.push(config)
+  }
+}

gulpfile.js/lib/task-defaults.js

@@ -40,7 +40,17 @@ module.exports = {
         "./node_modules"
       ]
     },
-    extensions: ["sass", "scss", "css"]
+    extensions: ["sass", "scss", "css", "pcss"],
+    cssnano: {
+      // deprecated. configure cssnano in stylesheets.postcss.plugins
+    },
+    postcss: {
+      plugins: [
+        // Autoprefixer and cssnano are added automatically,
+        // with default settings, if not given custom configuration here
+      ],
+      options: {}
+    }
   },
 
   html: {

gulpfile.js/tasks/stylesheets.js

@@ -1,14 +1,16 @@
 if(!TASK_CONFIG.stylesheets) return
 
-var gulp         = require('gulp')
-var gulpif       = require('gulp-if')
-var browserSync  = require('browser-sync')
-var sass         = require('gulp-sass')
-var sourcemaps   = require('gulp-sourcemaps')
-var handleErrors = require('../lib/handleErrors')
-var autoprefixer = require('gulp-autoprefixer')
-var projectPath  = require('../lib/projectPath')
-var cssnano      = require('gulp-cssnano')
+var gulp             = require('gulp')
+var addPostCssPlugin = require('../lib/addPostCssPlugin')
+var autoprefixer     = require('autoprefixer')
+var browserSync      = require('browser-sync')
+var cssnano          = require('cssnano')
+var gulpif           = require('gulp-if')
+var handleErrors     = require('../lib/handleErrors')
+var postcss          = require('gulp-postcss')
+var projectPath      = require('../lib/projectPath')
+var sass             = require('gulp-sass')
+var sourcemaps       = require('gulp-sourcemaps')
 
 var sassTask = function () {
 
@@ -17,21 +19,41 @@ var sassTask = function () {
     dest: projectPath(PATH_CONFIG.dest, PATH_CONFIG.stylesheets.dest)
   }
 
-  if(TASK_CONFIG.stylesheets.sass && TASK_CONFIG.stylesheets.sass.includePaths) {
+  if (TASK_CONFIG.stylesheets.sass && TASK_CONFIG.stylesheets.sass.includePaths) {
     TASK_CONFIG.stylesheets.sass.includePaths = TASK_CONFIG.stylesheets.sass.includePaths.map(function(includePath) {
       return projectPath(includePath)
     })
   }
 
-  var cssnanoConfig = TASK_CONFIG.stylesheets.cssnano || {}
-  cssnanoConfig.autoprefixer = false // this should always be false, since we're autoprefixing separately
+  TASK_CONFIG.stylesheets.autoprefixer = TASK_CONFIG.stylesheets.autoprefixer || {}
+
+  TASK_CONFIG.stylesheets.cssnano = TASK_CONFIG.stylesheets.cssnano || {}
+  TASK_CONFIG.stylesheets.cssnano.autoprefixer = false // this should always be false, since we're autoprefixing separately
+
+  TASK_CONFIG.stylesheets.postcss.options = TASK_CONFIG.stylesheets.postcss.options || {}
+  TASK_CONFIG.stylesheets.postcss.plugins = TASK_CONFIG.stylesheets.postcss.plugins || []
+
+  var preprocess = !!TASK_CONFIG.stylesheets.sass
+
+  // when watching files, only run once
+  if (!TASK_CONFIG.stylesheets.configured) {
+    // ensure Autoprefixer is in the PostCSS config
+    addPostCssPlugin('autoprefixer', autoprefixer(TASK_CONFIG.stylesheets.autoprefixer))
+
+    if (global.production) {
+      // ensure cssnano is in the PostCSS config
+      addPostCssPlugin('cssnano', cssnano(TASK_CONFIG.stylesheets.cssnano))
+    }
+  }
+
+  TASK_CONFIG.stylesheets.configured = true
 
   return gulp.src(paths.src)
     .pipe(gulpif(!global.production, sourcemaps.init()))
-    .pipe(sass(TASK_CONFIG.stylesheets.sass))
+    .pipe(gulpif(preprocess, sass(TASK_CONFIG.stylesheets.sass)))
+    .on('error', handleErrors)
+    .pipe(postcss(TASK_CONFIG.stylesheets.postcss.plugins, TASK_CONFIG.stylesheets.postcss.options))
     .on('error', handleErrors)
-    .pipe(autoprefixer(TASK_CONFIG.stylesheets.autoprefixer))
-    .pipe(gulpif(global.production, cssnano(cssnanoConfig)))
     .pipe(gulpif(!global.production, sourcemaps.write()))
     .pipe(gulp.dest(paths.dest))
     .pipe(browserSync.stream())

package.json

@@ -25,25 +25,26 @@
   },
   "dependencies": {
     "ansi-colors": "^3.2.4",
+    "autoprefixer": "^9.6.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.1",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-1": "^6.24.1",
     "browser-sync": "^2.26.3",
+    "cssnano": "^4.1.10",
     "del": "4.0.0",
     "es6-promise": "^4.2.6",
     "fancy-log": "^1.3.3",
     "gulp": "3.9.1",
-    "gulp-autoprefixer": "6.0.0",
     "gulp-changed": "^3.2.0",
-    "gulp-cssnano": "2.1.3",
     "gulp-data": "1.3.1",
     "gulp-gh-pages": "0.5.4",
     "gulp-htmlmin": "5.0.1",
     "gulp-if": "2.0.2",
     "gulp-notify": "^3.2.0",
     "gulp-nunjucks-render": "^2.2.2",
-    "gulp-rename": "1.4.0",
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^1.4.0",
     "gulp-replace": "^1.0.0",
     "gulp-rev": "9.0.0",
     "gulp-rev-delete-original": "^0.2.3",