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

* removed module id for non-scoped component (close #853)

* improved test case for style import twice

* Update helpers.js

Author: Jinjiang

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
         }) +

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>

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>

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'