From 61407fec1df7cf38f87d36988336c14d674e3f09 Mon Sep 17 00:00:00 2001
From: Clark Du <clark.duxin@gmail.com>
Date: Tue, 9 Oct 2018 13:26:11 +0100
Subject: [PATCH] refactor: config Postcss preset and plugins together (#3927)

---
 examples/with-purgecss/nuxt.config.js    | 10 +++---
 examples/with-purgecss/package.json      |  1 -
 examples/with-purgecss/postcss.config.js |  6 ----
 lib/builder/webpack/utils/postcss.js     | 39 +++++++++++++++---------
 test/fixtures/basic/nuxt.config.js       | 12 +++++---
 5 files changed, 37 insertions(+), 31 deletions(-)
 delete mode 100644 examples/with-purgecss/postcss.config.js

diff --git a/examples/with-purgecss/nuxt.config.js b/examples/with-purgecss/nuxt.config.js
index 86da6d8683..26b6617790 100644
--- a/examples/with-purgecss/nuxt.config.js
+++ b/examples/with-purgecss/nuxt.config.js
@@ -11,10 +11,12 @@ class TailwindExtractor {
 export default {
   build: {
     extractCSS: true,
-    postcss: [
-      require('tailwindcss')('./tailwind.js'),
-      require('autoprefixer')
-    ],
+    postcss: {
+      plugins: {
+        tailwindcss: path.resolve('./tailwind.js')
+      },
+      preset: { autoprefixer: { grid: true } }
+    },
     extend(config, { isDev }) {
       if (!isDev) {
         config.plugins.push(
diff --git a/examples/with-purgecss/package.json b/examples/with-purgecss/package.json
index 0e9f8bd68f..98ee993323 100644
--- a/examples/with-purgecss/package.json
+++ b/examples/with-purgecss/package.json
@@ -10,7 +10,6 @@
     "nuxt-edge": "latest"
   },
   "devDependencies": {
-    "autoprefixer": "^7.1.6",
     "glob-all": "^3.1.0",
     "purgecss-webpack-plugin": "^0.20.1",
     "tailwindcss": "^0.1.3"
diff --git a/examples/with-purgecss/postcss.config.js b/examples/with-purgecss/postcss.config.js
deleted file mode 100644
index 6b4212984e..0000000000
--- a/examples/with-purgecss/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: [
-    require('tailwindcss')('./tailwind.js'),
-    require('autoprefixer')
-  ]
-}
diff --git a/lib/builder/webpack/utils/postcss.js b/lib/builder/webpack/utils/postcss.js
index fd984ce654..ba57fb9cb6 100644
--- a/lib/builder/webpack/utils/postcss.js
+++ b/lib/builder/webpack/utils/postcss.js
@@ -19,7 +19,6 @@ export default class PostcssConfig {
 
   get defaultConfig() {
     return {
-      useConfigFile: false,
       sourceMap: this.cssSourceMap,
       plugins: {
         // https://github.com/postcss/postcss-import
@@ -49,7 +48,7 @@ export default class PostcssConfig {
     }
   }
 
-  configFromFile() {
+  searchConfigFile() {
     // Search for postCSS config file and use it if exists
     // https://github.com/michael-ciniawsky/postcss-load-config
     for (const dir of [this.srcDir, this.rootDir]) {
@@ -60,19 +59,26 @@ export default class PostcssConfig {
         '.postcssrc.json',
         '.postcssrc.yaml'
       ]) {
-        if (fs.existsSync(path.resolve(dir, file))) {
-          const postcssConfigPath = path.resolve(dir, file)
-          return {
-            sourceMap: this.cssSourceMap,
-            config: {
-              path: postcssConfigPath
-            }
-          }
+        const configFile = path.resolve(dir, file)
+        if (fs.existsSync(configFile)) {
+          return configFile
         }
       }
     }
   }
 
+  configFromFile() {
+    const loaderConfig = (this.postcss && this.postcss.config) || {}
+    loaderConfig.path = loaderConfig.path || this.searchConfigFile()
+
+    if (loaderConfig.path) {
+      return {
+        sourceMap: this.cssSourceMap,
+        config: loaderConfig
+      }
+    }
+  }
+
   normalize(config) {
     if (Array.isArray(config)) {
       config = { plugins: config }
@@ -115,11 +121,14 @@ export default class PostcssConfig {
         this.preset = config.preset
         delete config.preset
       }
-      _.defaults(config, this.defaultConfig)
-
-      this.loadPlugins(config)
+      if (Array.isArray(config.plugins)) {
+        _.defaults(config, this.defaultConfig)
+      } else {
+        // Keep the order of default plugins
+        config = _.merge({}, this.defaultConfig, config)
+        this.loadPlugins(config)
+      }
+      return config
     }
-
-    return config
   }
 }
diff --git a/test/fixtures/basic/nuxt.config.js b/test/fixtures/basic/nuxt.config.js
index 0048ded112..cd338b5b4c 100644
--- a/test/fixtures/basic/nuxt.config.js
+++ b/test/fixtures/basic/nuxt.config.js
@@ -67,13 +67,15 @@ export default {
   ],
   build: {
     scopeHoisting: true,
-    postcss: [
-      require('postcss-preset-env')({
+    postcss: {
+      preset: {
         features: {
           'custom-selectors': true
         }
-      }),
-      require('cssnano')
-    ]
+      },
+      plugins: {
+        cssnano: {}
+      }
+    }
   }
 }