refactor: config Postcss preset and plugins together (#3927)

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(

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"

examples/with-purgecss/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: [
-    require('tailwindcss')('./tailwind.js'),
-    require('autoprefixer')
-  ]
-}

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,15 +59,22 @@ export default class PostcssConfig {
         '.postcssrc.json',
         '.postcssrc.yaml'
       ]) {
-        if (fs.existsSync(path.resolve(dir, file))) {
-          const postcssConfigPath = path.resolve(dir, file)
+        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: {
-              path: postcssConfigPath
-            }
-          }
-        }
+        config: loaderConfig
       }
     }
   }
@@ -115,11 +121,14 @@ export default class PostcssConfig {
         this.preset = config.preset
         delete config.preset
       }
+      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
     }
+  }
 }

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: {}
+      }
+    }
   }
 }