feat: supported cascading postcss config (#1147)

close #1063
vuejs · Mar 6, 2018 · dddd911 · dddd911
1 parent 2c8d1fb
commit dddd911
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 2 deletions.
diff --git a/lib/style-compiler/load-postcss-config.js b/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) {

diff --git a/package.json b/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",

diff --git a/test/fixtures/sub/.postcssrc.js b/test/fixtures/sub/.postcssrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
diff --git a/test/fixtures/sub/postcss-cascade.vue b/test/fixtures/sub/postcss-cascade.vue
@@ -0,0 +1,3 @@
+<style>
+body { display: flex }
+</style>
diff --git a/test/test.js b/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({