docs: add postcss document; (#139)

sunnylost · znck · commit 071c11a6dddf · 2017-10-06T17:00:24.000Z
make `postcss`'s option consistent with `vue-loader`;
fix a build warning;
diff --git 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
@@ -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
@@ -1,15 +1,17 @@
 import postcssrc from 'postcss-load-config'
 
+/* eslint-disable complexity */
 export default async function (postcssOpt) {
     let options = {}
     let plugins = []
 
     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
@@ -34,7 +34,7 @@ function test(name) {
                 modules: {
                     generateScopedName: '[name]__[local]'
                 },
-                postcss: [autoprefixer()],
+                postcss: { plugins: [autoprefixer()] },
                 compileTemplate: [
                     'compileTemplate',
                     'compileTemplateLocalComponent',
