support loading postcss config file (close #585)

Author: yyx990803

lib/style-rewriter.js

@@ -1,6 +1,7 @@
 var postcss = require('postcss')
-var selectorParser = require('postcss-selector-parser')
 var loaderUtils = require('loader-utils')
+var loadPostcssConfig = require('postcss-load-config')
+var selectorParser = require('postcss-selector-parser')
 
 var addId = postcss.plugin('add-id', function (opts) {
   return function (root) {
@@ -42,67 +43,75 @@ module.exports = function (css, map) {
   var cb = this.async()
 
   var query = loaderUtils.parseQuery(this.query)
-  var options = this.options.__vueOptions__
-  var postcssOptions = options.postcss
+  var vueOptions = this.options.__vueOptions__
 
-  // postcss plugins
-  var plugins
-  if (Array.isArray(postcssOptions)) {
-    plugins = postcssOptions
-  } else if (typeof postcssOptions === 'function') {
-    plugins = postcssOptions.call(this, this)
-  } else if (isObject(postcssOptions) && postcssOptions.plugins) {
-    plugins = postcssOptions.plugins
-  }
-  plugins = [trim].concat(plugins || [])
+  // use the same config loading interface as postcss-loader
+  loadPostcssConfig({ webpack: this }).catch(() => {
+    // postcss-load-config throws error when no config file is found,
+    // but for us it's optional.
+  }).then(config => {
+    var plugins
+    var options
 
-  // scoped css
-  if (query.scoped) {
-    plugins.push(addId({ id: query.id }))
-  }
+    // inline postcss options for vue-loader
+    var rawInlineOptions = vueOptions.postcss
+    if (typeof rawInlineOptions === 'function') {
+      rawInlineOptions = rawInlineOptions.call(this, this)
+    }
+    if (Array.isArray(rawInlineOptions)) {
+      plugins = rawInlineOptions
+    } else if (isObject(rawInlineOptions)) {
+      plugins = rawInlineOptions.plugins
+      options = rawInlineOptions.options
+    }
 
-  // postcss options, for source maps
-  var file = this.resourcePath
-  var opts
-  opts = {
-    from: file,
-    to: file,
-    map: false
-  }
-  if (
-    this.sourceMap &&
-    !this.minimize &&
-    options.cssSourceMap !== false &&
-    process.env.NODE_ENV !== 'production' &&
-    !(isObject(postcssOptions) && postcssOptions.options && postcssOptions.map)
-  ) {
-    opts.map = {
-      inline: false,
-      annotation: false,
-      prev: map
+    plugins = [trim].concat(plugins || [])
+    options = Object.assign({
+      to: this.resourcePath,
+      from: this.resourcePath,
+      map: false
+    }, options)
+
+    // merge postcss config file
+    if (config && config.plugins) {
+      plugins = plugins.concat(config.plugins)
+    }
+    if (config && config.options) {
+      options = Object.assign({}, config.options, options)
+    }
+
+    // add plugin for vue-loader scoped css rewrite
+    if (query.scoped) {
+      plugins.push(addId({ id: query.id }))
     }
-  }
 
-  // postcss options from configuration
-  if (isObject(postcssOptions) && postcssOptions.options) {
-    for (var option in postcssOptions.options) {
-      if (!opts.hasOwnProperty(option)) {
-        opts[option] = postcssOptions.options[option]
+    // source map
+    if (
+      this.sourceMap &&
+      !this.minimize &&
+      vueOptions.cssSourceMap !== false &&
+      process.env.NODE_ENV !== 'production' &&
+      !options.map
+    ) {
+      options.map = {
+        inline: false,
+        annotation: false,
+        prev: map
       }
     }
-  }
 
-  postcss(plugins)
-    .process(css, opts)
-    .then(function (result) {
-      var map = result.map && result.map.toJSON()
-      cb(null, result.css, map)
-      return null // silence bluebird warning
-    })
-    .catch(function (e) {
-      console.log(e)
-      cb(e)
-    })
+    postcss(plugins)
+      .process(css, options)
+      .then(function (result) {
+        var map = result.map && result.map.toJSON()
+        cb(null, result.css, map)
+        return null // silence bluebird warning
+      })
+      .catch(function (e) {
+        console.log(e)
+        cb(e)
+      })
+  })
 }
 
 function isObject (val) {

package.json

@@ -35,6 +35,7 @@
     "loader-utils": "^0.2.10",
     "lru-cache": "^4.0.1",
     "postcss": "^5.0.10",
+    "postcss-load-config": "^1.1.0",
     "postcss-selector-parser": "^2.0.0",
     "source-map": "^0.5.6",
     "vue-hot-reload-api": "^2.0.1",