diff --git a/README.md b/README.md
index 61e3561bd..e8172fc6c 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ export default {
- [Basic Usage](#basic-usage)
- [ES2015 by Default](#es2015-by-default)
- [CSS Pre-Processors](#css-pre-processors)
-- [Autoprefixing](#autoprefixing)
+- [PostCSS](#postcss)
- [Template Pre-Processors](#template-pre-processors)
- [Style Imports](#style-imports)
- [Asset URL Handling](#asset-url-handling)
@@ -133,19 +133,35 @@ You can also include Webpack loader queries in the `lang` attribute:
```
-## Autoprefixing
+## PostCSS
-Starting in 6.0.0, Any CSS output via `vue-loader` is piped through [autoprefixer](https://github.com/postcss/autoprefixer) by default. You can customize this behavior in the `vue` section of your webpack config:
+Any CSS output via `vue-loader` 6.0+ is piped through [PostCSS](https://github.com/postcss/postcss) for [scoped CSS](#scoped-css) rewriting and aut-prefixed by default using [autoprefixer](https://github.com/postcss/autoprefixer). You can configure autoprefixer or provide your own PostCSS plugins in the `vue` section of your webpack config:
``` js
// webpack.config.js
module.exports = {
// other configs...
vue: {
- // disable autoprefixing
- autoprefixer: false,
- // OR: custom options
- autoprefixer: { browsers: ['last 2 versions'] }
+ // configure autoprefixer
+ autoprefixer: {
+ browsers: ['last 2 versions']
+ }
+ }
+}
+```
+
+Using other PostCSS plugins:
+
+``` js
+// webpack.config.js
+module.exports = {
+ // other configs...
+ vue: {
+ // use custom postcss plugins
+ postcss: [require('cssnext')()],
+ // disable vue-loader autoprefixing.
+ // this is a good idea since cssnext comes with it too.
+ autoprefixer: false
}
}
```
@@ -180,7 +196,7 @@ For more details, see the respective documentations for [vue-html-loader](https:
> Experimental
-When a `
- hi
+ hi
```
@@ -212,7 +228,9 @@ Into the following:
2. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
-3. Partials are not affected by scoped styles.
+3. If you are nesting a component inside itself, the styles may still leak down since they are considered the same component.
+
+4. Partials are not affected by scoped styles.
## Hot Reload
diff --git a/lib/style-rewriter.js b/lib/style-rewriter.js
index 74975ffef..d8edb3e1f 100644
--- a/lib/style-rewriter.js
+++ b/lib/style-rewriter.js
@@ -37,7 +37,7 @@ module.exports = function (css, map) {
var query = loaderUtils.parseQuery(this.query)
var options = this.options.vue || {}
var autoprefixOptions = options.autoprefixer
- var plugins = []
+ var plugins = options.postcss || []
// scoped css
if (query.scoped) {
diff --git a/package.json b/package.json
index 44860ce87..ec3bd6b63 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-loader",
- "version": "6.0.4",
+ "version": "6.0.5",
"description": "Vue.js component loader for Webpack",
"main": "index.js",
"repository": {