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 ` ``` @@ -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": {