Do not inject the same style block more than once

vuejs · tcnijmeijer · Jul 6, 2021 · Jul 7, 2021 · Jul 7, 2021 · Jul 7, 2021
commit f966c81709274f80fd897b38e8949cbf80205019
diff --git a/src/index.ts b/src/index.ts
@@ -25,7 +25,6 @@ import {
 } from '@vue/compiler-sfc'
 import { selectBlock } from './select'
 import { genHotReloadCode } from './hotReload'
-import { genCSSModulesCode } from './cssModules'
 import { formatError } from './formatError'

 import VueLoaderPlugin from './plugin'
@@ -187,27 +186,38 @@ export default function loader(
    descriptor.styles
      .filter((style) => style.src || nonWhitespaceRE.test(style.content))
      .forEach((style: SFCStyleBlock, i: number) => {
-        const src = style.src || resourcePath
        style.attrs.module = true
+
+        const src = style.src || resourcePath
        const attrsQuery = attrsToQuery(style.attrs, 'css')
        // make sure to only pass id when necessary so that we don't inject
        // duplicate tags when multiple components import the same css file
        const idQuery = !style.src || style.scoped ? `&id=${id}` : ``
        const query = `?vue&type=style&index=${i}${idQuery}${attrsQuery}${resourceQuery}`
        const styleRequest = stringifyRequest(src + query)

+        const styleVar = `style${i}`
+        const styleId = style.src && !style.scoped ? style.src : `${id}-${i}`
+
+        stylesCode += `\nimport ${styleVar} from ${styleRequest}`
+        stylesCode += `\n${styleVar}.id = "${styleId}"`
+        stylesCode += `\ncssBlocks['${styleVar}'] = ${styleVar}`
+
        if (style.module) {
-          stylesCode += genCSSModulesCode(
-            id,
-            i,
-            styleRequest,
-            style.module || true,
-            needsHotReload
-          )
-        } else {
-          const styleVar = `style${i}`
-          stylesCode += `\nimport ${styleVar} from ${styleRequest}`
-          stylesCode += `\ncssBlocks['${styleVar}'] = ${styleVar}`
+          const name =
+            typeof style.module === 'string' ? style.module : '$style'
+          stylesCode += `\ncssModules["${name}"] = ${styleVar}.locals`
+
+          if (needsHotReload) {
+            stylesCode += `
+              if (module.hot) {
+                module.hot.accept(${styleRequest}, () => {
+                  cssModules["${name}"] = ${styleVar}
+                  __VUE_HMR_RUNTIME__.rerender("${id}")
+                })
+              }
+            `
+          }
        }

        // TODO SSR critical CSS collection

diff --git a/src/styleInjection.ts b/src/styleInjection.ts
@@ -1,18 +1,26 @@
 export const addStyleInjectionCode = `
 var options = typeof script === 'function' ? script.options : script

+function getStyleElement(id) {
+  var existing = document.querySelector("[data-style-id='" + id + "']")
+  if (existing) return existing
+
+  var styleElement = document.createElement('style')
+  styleElement.setAttribute("data-style-id", id)
+  styleElement.setAttribute("type", "text/css")
+  document.head.appendChild(styleElement)
+  return styleElement
+}
 function injectStyles() {
  Object.values(cssBlocks).forEach(function(cssBlock) {
-    var styleElement = document.createElement('style')
-    styleElement.type = 'text/css'
+    var styleElement = getStyleElement(cssBlock.id)
    styleElement.innerHTML = cssBlock.toString()
-    document.head.appendChild(styleElement)
  })
 }

-var existing = options.beforeMount
-options.beforeMount = function() {
+var beforeCreate = options.beforeCreate
+options.beforeCreate = function beforeCreate() {
  injectStyles()
-  existing && existing()
+  beforeCreate && beforeCreate()
 }
 `
diff --git a/test/core.spec.ts b/test/core.spec.ts
@@ -92,9 +92,9 @@ test('style import for a same file twice', async () => {
  expect(styles[0].textContent).toContain('h1 { color: red;\n}')

  // import with scoped
-  const id = 'data-v-' + genId('style-import-twice-sub.vue')
+  const id = 'data-v-' + genId('style-import-twice.vue')
  expect(styles[1].textContent).toContain('h1[' + id + '] { color: green;\n}')
-  const id2 = 'data-v-' + genId('style-import-twice.vue')
+  const id2 = 'data-v-' + genId('style-import-twice-sub.vue')
  expect(styles[2].textContent).toContain('h1[' + id2 + '] { color: green;\n}')
 })


diff --git a/test/fixtures/duplicate-cssm.js b/test/fixtures/duplicate-cssm.js
@@ -1,7 +1,17 @@
+import { createApp } from 'vue'
+
 import values from './duplicate-cssm.css'
-import Comp from './duplicate-cssm.vue'
+import Component from './duplicate-cssm.vue'
+
+if (typeof window !== 'undefined') {
+  window.componentModule = Component
+
+  const app = createApp(Component)
+  const container = window.document.createElement('div')
+  window.instance = app.mount(container)
+}

 export { values }
-export default Comp
+export default Component

 window.exports = values
diff --git a/test/fixtures/style-import-twice-sub.vue b/test/fixtures/style-import-twice-sub.vue
@@ -1,3 +1,3 @@
 <template><div></div></template>
-<style src="./style-import.css"></style>
 <style src="./style-import-scoped.css" scoped></style>
+<style src="./style-import.css"></style>