feat: supported cascading postcss config (#1147)

close #1063

Author: Jinjiang

lib/style-compiler/load-postcss-config.js

@@ -14,13 +14,16 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
     })
   }
 
-  if (process.env.VUE_LOADER_TEST || !loaded) {
+  if (process.env.VUE_LOADER_TEST || inlineConfig.cascade || !loaded) {
     const config = inlineConfig.config || {}
     const ctx = { webpack: loaderContext }
     if (config.ctx) {
       ctx.options = config.ctx
     }
-    loaded = load(ctx, config.path, { argv: false }).catch(err => {
+    const configPath = (inlineConfig.cascade && !config.path)
+      ? loaderContext.resourcePath
+      : config.path
+    loaded = load(ctx, configPath, { argv: false }).catch(err => {
       // postcss-load-config throws error when no config file is found,
       // but for us it's optional. only emit other errors
       if (err.message.indexOf('No PostCSS Config found') >= 0) {

package.json

@@ -61,6 +61,7 @@
     "vue-template-compiler": "^2.0.0"
   },
   "devDependencies": {
+    "autoprefixer": "^7.2.5",
     "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",
     "babel-preset-env": "^1.6.0",

test/fixtures/sub/.postcssrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

test/fixtures/sub/postcss-cascade.vue

@@ -0,0 +1,3 @@
+<style>
+body { display: flex }
+</style>

test/test.js

@@ -488,6 +488,20 @@ describe('vue-loader', () => {
     })
   })
 
+  it('load cascading postcss config file', done => {
+    fs.writeFileSync('.postcssrc', JSON.stringify({ parser: 'sugarss' }))
+    test({
+      entry: 'sub/postcss-cascade.vue',
+      vue: { postcss: { cascade: true }}
+    }, (window) => {
+      let style = window.document.querySelector('style').textContent
+      style = normalizeNewline(style)
+      expect(style).to.contain('display: -webkit-box')
+      fs.unlinkSync('.postcssrc')
+      done()
+    })
+  })
+
   it('load postcss config file by path', done => {
     fs.writeFileSync('test/.postcssrc', JSON.stringify({ parser: 'sugarss' }))
     test({