Support multiple rule definitions

lib/loader.js

@@ -69,6 +69,23 @@ module.exports = function (content) {
     options.esModule = false
   }
 
+  if (!this.options.__vueOptionsList__) {
+    const list = []
+    list.queryList = []
+    Object.defineProperty(this.options, '__vueOptionsList__', {
+      value: list,
+      enumerable: false,
+      configurable: true
+    })
+  }
+  const vueOptionList = this.options.__vueOptionsList__
+  const vueQueryList = vueOptionList.queryList
+  let vueOptionId = vueQueryList.indexOf(query)
+  if (vueOptionId < 0) {
+    vueQueryList.push(query)
+    vueOptionId = vueOptionList.push(options) - 1
+  }
+
   // #824 avoid multiple webpack runs complaining about unknown option
   Object.defineProperty(this.options, '__vueOptions__', {
     value: options,
@@ -134,6 +151,7 @@ module.exports = function (content) {
       transformToRequire: options.transformToRequire,
       preserveWhitespace: options.preserveWhitespace,
       buble: bubleTemplateOptions,
+      optionId: vueOptionId,
       // only pass compilerModules if it's a path string
       compilerModules:
         typeof options.compilerModules === 'string'
@@ -585,7 +603,8 @@ module.exports = function (content) {
           vue: true,
           id: moduleId,
           scoped: !!scoped,
-          hasInlineConfig: !!query.postcss
+          hasInlineConfig: !!query.postcss,
+          optionId: vueOptionId
         }) +
         '!'
       // normalize scss/sass/postcss if no specific loaders have been provided
@@ -642,6 +661,8 @@ module.exports = function (content) {
             templatePreprocessorPath +
             '?engine=' +
             lang +
+            '&optionId=' +
+            vueOptionId +
             '!'
           )
         case 'styles':

lib/style-compiler/index.js

@@ -10,7 +10,9 @@ module.exports = function (css, map) {
   const cb = this.async()
 
   const query = loaderUtils.getOptions(this) || {}
-  let vueOptions = this.options.__vueOptions__
+  let vueOptions = this.options.__vueOptionsList__ && this.options.__vueOptionsList__[query.optionId]
+    ? this.options.__vueOptionsList__[query.optionId]
+    : this.options.__vueOptions__
 
   if (!vueOptions) {
     if (query.hasInlineConfig) {

lib/template-compiler/index.js

@@ -11,8 +11,10 @@ module.exports = function (html) {
   this.cacheable()
   const isServer = this.target === 'node'
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
-  const vueOptions = this.options.__vueOptions__ || {}
   const options = loaderUtils.getOptions(this) || {}
+  const vueOptions = this.options.__vueOptionsList__ && this.options.__vueOptionsList__[options.optionId]
+    ? this.options.__vueOptionsList__[options.optionId]
+    : (this.options.__vueOptions__ || {})
   const needsHotReload = !isServer && !isProduction && vueOptions.hotReload !== false
   const defaultModules = [transformRequire(options.transformToRequire), transformSrcset()]
   let userModules = vueOptions.compilerModules || options.compilerModules

lib/template-compiler/preprocessor.js

@@ -19,9 +19,12 @@ module.exports = function (content) {
     )
   }
 
+  const vueOptions = this.options.__vueOptionsList__ && this.options.__vueOptionsList__[opt.optionId]
+    ? this.options.__vueOptionsList__[opt.optionId]
+    : this.options.__vueOptions__
   // allow passing options to the template preprocessor via `template` option
-  if (this.options.__vueOptions__) {
-    Object.assign(opt, this.options.__vueOptions__.template)
+  if (vueOptions) {
+    Object.assign(opt, vueOptions.template)
   }
 
   // for relative includes

test/fixtures/multiple-rules-1.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="multiple-rule">Hello World</div>
+</template>
+
+<style>
+.multiple-rule-1 {
+  font-size: 7px;
+}
+</style>

test/fixtures/multiple-rules-2.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="multiple-rule">Hello World</div>
+</template>
+
+<style>
+.multiple-rule-2 {
+  font-size: 28px;
+}
+</style>

test/fixtures/multiple-rules.js

@@ -0,0 +1,4 @@
+import Rule1 from './multiple-rules-1.vue'
+import Rule2 from './multiple-rules-2.vue'
+
+window.rules = [Rule1, Rule2]

test/test.js

@@ -1088,4 +1088,69 @@ describe('vue-loader', () => {
       done()
     })
   })
+
+  it('multiple rule definitions', done => {
+    test({
+      entry: './test/fixtures/multiple-rules.js',
+      module: {
+        rules: [
+          {
+            test: /\.vue$/,
+            oneOf: [
+              {
+                include: /-1\.vue$/,
+                loader: rawLoaderPath,
+                options: {
+                  postcss: [
+                    css => {
+                      css.walkDecls('font-size', decl => {
+                        decl.value = `${parseInt(decl.value, 10) * 2}px`
+                      })
+                    }
+                  ],
+                  compilerModules: [{
+                    postTransformNode: el => {
+                      el.staticClass = '"multiple-rule-1"'
+                    }
+                  }]
+                }
+              },
+              {
+                include: /-2\.vue$/,
+                loader: rawLoaderPath,
+                options: {
+                  postcss: [
+                    css => {
+                      css.walkDecls('font-size', decl => {
+                        decl.value = `${parseInt(decl.value, 10) / 2}px`
+                      })
+                    }
+                  ],
+                  compilerModules: [{
+                    postTransformNode: el => {
+                      el.staticClass = '"multiple-rule-2"'
+                    }
+                  }]
+                }
+              }
+            ]
+          }
+        ]
+      }
+    }, (window, module) => {
+      const vnode1 = mockRender(window.rules[0])
+      const vnode2 = mockRender(window.rules[1])
+      expect(vnode1.data.staticClass).to.equal('multiple-rule-1')
+      expect(vnode2.data.staticClass).to.equal('multiple-rule-2')
+      const styles = window.document.querySelectorAll('style')
+      const expr = /\.multiple-rule-\d\s*\{\s*font-size:\s*([.0-9]+)px;/
+      for (let i = 0, l = styles.length; i < l; i++) {
+        const content = styles[i].textContent
+        if (expr.test(content)) {
+          expect(parseFloat(RegExp.$1)).to.be.equal(14)
+        }
+      }
+      done()
+    })
+  })
 })