fix: removed module id for non-scoped component (#1146)

Jinjiang · yyx990803 · commit 0b36a2c13abc · 2018-03-07T00:48:41.000-05:00
* removed module id for non-scoped component (close #853) * improved test case for style import twice * Update helpers.js
diff --git a/lib/helpers.js b/lib/helpers.js
@@ -95,7 +95,7 @@ function resolveLoaders (
   const templateCompilerOptions =
     '?' +
     JSON.stringify({
-      id: moduleId,
+      id: hasScoped ? moduleId : undefined,
       hasScoped,
       hasComment,
       optionsId,
@@ -310,7 +310,7 @@ module.exports = function createHelpers (
           // a marker for vue-style-loader to know that this is an import from a vue file
           optionsId,
           vue: true,
-          id: moduleId,
+          id: scoped ? moduleId : undefined,
           scoped: !!scoped,
           sourceMap: needCssSourceMap
         }) +
diff --git a/test/fixtures/style-import-twice-sub.vue b/test/fixtures/style-import-twice-sub.vue
@@ -0,0 +1,3 @@
+<template><div></div></template>
+<style src="./style-import.css"></style>
+<style src="./style-import-scoped.css" scoped></style>
diff --git a/test/fixtures/style-import-twice.vue b/test/fixtures/style-import-twice.vue
@@ -0,0 +1,9 @@
+<template><SubComponent></SubComponent></template>
+<style src="./style-import.css"></style>
+<style src="./style-import-scoped.css" scoped></style>
+<script>
+import SubComponent from './style-import-twice-sub.vue'
+export default {
+  components: { SubComponent }
+}
+</script>
diff --git a/test/test.js b/test/test.js
@@ -121,6 +121,19 @@ function interopDefault (module) {
     : module
 }
 
+function initStylesForAllSubComponents (module) {
+  if (module.components) {
+    for (const name in module.components) {
+      const sub = module.components[name]
+      const instance = {}
+      if (sub && sub.beforeCreate) {
+        sub.beforeCreate.forEach(hook => hook.call(instance))
+      }
+      initStylesForAllSubComponents(sub)
+    }
+  }
+}
+
 describe('vue-loader', () => {
   it('basic', done => {
     test({
@@ -256,6 +269,23 @@ describe('vue-loader', () => {
     })
   })
 
+  it('style import for a same file twice', done => {
+    test({
+      entry: 'style-import-twice.vue'
+    }, (window, module) => {
+      initStylesForAllSubComponents(module)
+      const styles = window.document.querySelectorAll('style')
+      expect(styles.length).to.equal(3)
+      expect(styles[0].textContent).to.contain('h1 { color: red;\n}')
+      // import with scoped
+      const id = 'data-v-' + genId('style-import-twice.vue')
+      expect(styles[1].textContent).to.contain('h1[' + id + '] { color: green;\n}')
+      const id2 = 'data-v-' + genId('style-import-twice-sub.vue')
+      expect(styles[2].textContent).to.contain('h1[' + id2 + '] { color: green;\n}')
+      done()
+    })
+  })
+
   it('template import', done => {
     test({
       entry: 'template-import.vue'

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template><div></div></template>`
	`2`	`+<style src="./style-import.css"></style>`
	`3`	`+<style src="./style-import-scoped.css" scoped></style>`