Add ability to load custom PostCSS plugins

README.md

@@ -165,6 +165,25 @@ You can combine multiple `<svg>`s you use into one sprite. Just drop the files i
 
 The [RFS](https://github.com/twbs/rfs) PostCSS plugin is included by default which allows you to use the `rfs()` function in your Sass.
 
+## PostCSS plugins
+
+Loading extra PostCSS plugins can be done by overriding the default config. This can be done in multiple ways documented on the [postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config) repository.
+
+For example you could place a `postcss.config.js` in your document root.
+
+```javascript
+module.exports = () => {
+  return {
+        plugins: {
+          'rfs': {},
+          'autoprefixer': {},
+          'cssnano': {}
+        }
+    }
+};
+
+```
+
 ## Copy
 
 Additionally files can be copied before if needed. Useful whenever you need some files from the `node_modules` folder which you don't have available on production.

lib/gulp/css.js

@@ -3,6 +3,7 @@ const autoprefixer = require('autoprefixer');
 const rfs = require('rfs');
 const cssnano = require('cssnano');
 const postcss = require('gulp-postcss');
+const loadPostCSSConfig = require('postcss-load-config');
 const sass = require('gulp-sass');
 const gulp = require('gulp');
 const plumber = require('gulp-plumber');
@@ -16,7 +17,23 @@ function css(cb) {
   cb();
 }
 
-function cssCompile({src, dest, minified = true, browserSync = false}) {
+async function getPostCSSConfiguration(minified) {
+  try {
+    // Get PostCSS config from user
+    return await loadPostCSSConfig();
+  } catch (error) {
+    // Catch no config found from postcss-load-config in order to set default
+    // values for our PostCSS instance.
+    if (minified) {
+      return {plugins: [rfs(), autoprefixer(), cssnano()]};
+    }
+
+    return {plugins: [rfs(), autoprefixer()]};
+  }
+}
+
+async function cssCompile({src, dest, minified = true, browserSync = false}) {
+  const {plugins, options = {}} = await getPostCSSConfiguration(minified);
   let stream = gulp
     .src(src);
 
@@ -28,12 +45,12 @@ function cssCompile({src, dest, minified = true, browserSync = false}) {
   if (minified) {
     stream = stream
       .pipe(sass({outputStyle: 'compressed'}))
-      .pipe(postcss([rfs(), autoprefixer(), cssnano()]));
+      .pipe(postcss(plugins, options));
   } else {
     stream = stream
       .pipe(sourcemaps.init())
       .pipe(sass({outputStyle: 'expanded'}))
-      .pipe(postcss([rfs(), autoprefixer()]))
+      .pipe(postcss(plugins, options))
       .pipe(sourcemaps.write('.'));
   }
 

package.json

@@ -27,6 +27,7 @@
     "gulp-svg-sprite": "^1.5.0",
     "gulp-terser": "^1.2.0",
     "js-yaml": "^3.13.1",
+    "postcss-load-config": "^2.1.0",
     "rfs": "^9.0.0",
     "rimraf": "^3.0.0",
     "yargs": "^14.0.0"