From 0a7066252fd747669ae5754d02024f3c5e6d173d Mon Sep 17 00:00:00 2001
From: sunnylost <sunnylost@gmail.com>
Date: Sun, 1 Oct 2017 23:53:19 +0800
Subject: [PATCH] add `postcss` document; make `postcss`'s option consistent
 with `vue-loader`; fix a build warning;

---
 config/build.js       |  1 +
 docs/en/2.3/README.md | 66 +++++++++++++++++++++++++++++++++++++++++++
 src/style/postcss.js  |  6 ++--
 test/test.js          |  2 +-
 4 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/config/build.js b/config/build.js
index 52edda6..9cffff4 100644
--- a/config/build.js
+++ b/config/build.js
@@ -39,6 +39,7 @@ rollup.rollup({
                         'parse5',
                         'path',
                         'postcss',
+                        'postcss-load-config',
                         'postcss-modules',
                         'postcss-selector-parser',
                         'posthtml',
diff --git a/docs/en/2.3/README.md b/docs/en/2.3/README.md
index e8fcdb5..c76a8d0 100644
--- a/docs/en/2.3/README.md
+++ b/docs/en/2.3/README.md
@@ -227,6 +227,72 @@ The output CSS will be like:
 }
 ```
 
+#### PostCSS
+
+<p class="tip">
+Available in `rollup-plugin-vue@^2.5+`.
+</p>
+
+`rollup-plugin-vue` use `PostCSS` to handle `Scoped CSS` and `CSS Module`, you can also add other `PostCSS` plugins, like [Autoprefixer](https://github.com/postcss/autoprefixer) or [cssnext](http://cssnext.io/).
+
+##### Configuration
+
+We use [postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config) to load config file, that means:
+- `postcss` field in your `package.json`
+- `.postcssrc` file in JSON or YAML format
+- `postcss.config.js` or `.postcssrc.js`
+
+##### Inline Options
+
+You can also use a `postcss` option, it accepts three types:
+- `Function`: return an array of plugins
+- `Array`: an array of plugins
+- `Object`: `postcss`'s configuration, has the most priority
+
+For example, if you want to use `Autoprefixer`, that means something like
+
+``` js
+import Autoprefixer from 'autoprefixer'
+
+export default {
+    ...
+    postcss: [Autoprefixer()],
+    ...
+}
+```
+
+or
+
+``` js
+import Autoprefixer from 'autoprefixer'
+
+export default {
+    ...
+    postcss() {
+      return [Autoprefixer()]
+    },
+    ...
+}
+```
+
+or this:
+
+``` js
+import Autoprefixer from 'autoprefixer'
+
+export default {
+    ...
+    postcss {
+      plugins: [Autoprefixer()],
+      options: {
+        // postcss's option goes here
+        ...
+      }
+    },
+    ...
+}
+```
+
 ### Template
 Templates are processed into `render` function by default. You can disable this by setting:
 ``` js
diff --git a/src/style/postcss.js b/src/style/postcss.js
index 2e81e36..df8ce01 100644
--- a/src/style/postcss.js
+++ b/src/style/postcss.js
@@ -1,5 +1,6 @@
 import postcssrc from 'postcss-load-config'
 
+/* eslint-disable complexity */
 export default async function (postcssOpt) {
     let options = {}
     let plugins = []
@@ -7,9 +8,10 @@ export default async function (postcssOpt) {
     if (typeof postcssOpt === 'function') {
         plugins = postcssOpt.call(this)
     } else if (Array.isArray(postcssOpt)) {
-        plugins = plugins.concat(postcssOpt)
+        plugins = postcssOpt
     } else if (typeof postcssOpt === 'object') {
-        options = Object.assign({}, options, postcssOpt)
+        plugins = (typeof postcssOpt.plugins === 'function') ? postcssOpt.plugins.call(this) : postcssOpt.plugins || []
+        options = postcssOpt.options || {}
     }
 
     return postcssrc().then((config) => {
diff --git a/test/test.js b/test/test.js
index d0bbcc6..4afa7f6 100644
--- a/test/test.js
+++ b/test/test.js
@@ -34,7 +34,7 @@ function test(name) {
                 modules: {
                     generateScopedName: '[name]__[local]'
                 },
-                postcss: [autoprefixer()],
+                postcss: { plugins: [autoprefixer()] },
                 compileTemplate: [
                     'compileTemplate',
                     'compileTemplateLocalComponent',