vuejs · RaphaelDDL · May 17, 2023 · May 18, 2023
diff --git a/src/cssModules.ts b/src/cssModules.ts
@@ -10,13 +10,20 @@ export function genCSSModulesCode(

  // inject variable
  const name = typeof moduleName === 'string' ? moduleName : '$style'
-  code += `\ncssModules["${name}"] = ${styleVar}`
+
+  const moduleAdd = `
+  if(cssModules["${name}"]){
+      Object.assign(cssModules["${name}"], ${styleVar});
+  } else {
+      cssModules["${name}"] = ${styleVar};
+  }`
+  code += `${moduleAdd}`

  if (needsHotReload) {
    code += `
 if (module.hot) {
  module.hot.accept(${request}, () => {
-    cssModules["${name}"] = ${styleVar}
+    ${moduleAdd}
    __VUE_HMR_RUNTIME__.rerender("${id}")
  })
 }`

diff --git a/test/advanced.spec.ts b/test/advanced.spec.ts
@@ -187,10 +187,10 @@ test('support rules with oneOf', async () => {
  )
  expect(style).toContain('comp-a h2 {\n  color: #f00;\n}')

-  const { window, instance } = await run('css-modules-simple.vue')
+  const { window, instance } = await run('css-modules/default.vue')

  const className = instance.$style.red
-  expect(className).toMatch(/^red_\w{5}/)
+  expect(className).toMatch(/^red_[\w-+]{5}/)
  style = normalizeNewline(window.document.querySelector('style')!.textContent!)
  expect(style).toContain('.' + className + ' {\n  color: red;\n}')
 })

diff --git a/test/fixtures/css-modules.vue b/test/fixtures/css-modules.vue
diff --git a/test/fixtures/css-modules/default-extend-composes-css.vue b/test/fixtures/css-modules/default-extend-composes-css.vue
@@ -0,0 +1,16 @@
+<style module>
+.black {
+  composes: red from './red.css';
+  font-weight: bold;
+}
+</style>
+
+<script>
+/* composes directly import a class in style */
+export default {
+}
+</script>
+
+<template>
+  <div>{{ $style.black }}</div>
+</template>
diff --git a/test/fixtures/css-modules/default-extend-diffclass.vue b/test/fixtures/css-modules/default-extend-diffclass.vue
@@ -0,0 +1,17 @@
+<style module>
+.black {
+  color: #000000;
+}
+</style>
+
+<script>
+import CssModuleSimple from './default.vue'
+
+export default {
+  extends: CssModuleSimple
+}
+</script>
+
+<template>
+  <div>{{ $style.red }} | {{ $style.black }}</div>
+</template>
diff --git a/test/fixtures/css-modules-extend.vue → test/fixtures/css-modules/default-extend.vue b/test/fixtures/css-modules-extend.vue → test/fixtures/css-modules/default-extend.vue
@@ -5,13 +5,13 @@
 </style>

 <script>
-import CssModuleSimple from './css-modules-simple.vue'
+import CssModuleSimple from './default.vue'

 export default {
  extends: CssModuleSimple
 }
 </script>

 <template>
-  <div :class="$style.red"></div>
-</template>
+  <div>{{ $style.red }}</div>
+</template>
diff --git a/test/fixtures/css-modules/default-multiple.vue b/test/fixtures/css-modules/default-multiple.vue
@@ -0,0 +1,19 @@
+<style module>
+.red {
+  color: red;
+}
+</style>
+
+<style module>
+.blue {
+  color: blue;
+}
+</style>
+
+<script>
+export default {}
+</script>
+
+<template>
+    <div>{{ $style }}</div>
+</template>
diff --git a/test/fixtures/css-modules-simple.vue → test/fixtures/css-modules/default.vue b/test/fixtures/css-modules-simple.vue → test/fixtures/css-modules/default.vue
@@ -7,3 +7,7 @@
 <script>
 export default {}
 </script>
+
+<template>
+    <div>{{ $style }}</div>
+</template>
diff --git a/test/fixtures/css-modules/named-multiple-diffname-diffclass.vue b/test/fixtures/css-modules/named-multiple-diffname-diffclass.vue
@@ -0,0 +1,19 @@
+<style module="name1">
+.red {
+  color: red;
+}
+</style>
+
+<style module="name2">
+.blue {
+  color: blue;
+}
+</style>
+
+<script>
+export default {}
+</script>
+
+<template>
+    <div>{{ name1 }} | {{ name2 }}</div>
+</template>
diff --git a/test/fixtures/css-modules/named-multiple-diffname-sameclass.vue b/test/fixtures/css-modules/named-multiple-diffname-sameclass.vue
@@ -0,0 +1,19 @@
+<style module="name1">
+.red {
+  color: red;
+}
+</style>
+
+<style module="name2">
+.red {
+  color: red;
+}
+</style>
+
+<script>
+export default {}
+</script>
+
+<template>
+    <div>{{ name1 }} | {{ name2 }}</div>
+</template>
diff --git a/test/fixtures/css-modules/named-multiple-samename-diffclass.vue b/test/fixtures/css-modules/named-multiple-samename-diffclass.vue
@@ -0,0 +1,19 @@
+<style module="named">
+.red {
+  color: red;
+}
+</style>
+
+<style module="named">
+.blue {
+  color: blue;
+}
+</style>
+
+<script>
+export default {}
+</script>
+
+<template>
+    <div>{{ named }}</div>
+</template>
diff --git a/test/fixtures/css-modules/named-multiple-samename-sameclass.vue b/test/fixtures/css-modules/named-multiple-samename-sameclass.vue
@@ -0,0 +1,19 @@
+<style module="named">
+.red {
+  color: red;
+}
+</style>
+
+<style module="named">
+.red {
+  color: blue;
+}
+</style>
+
+<script>
+export default {}
+</script>
+
+<template>
+    <div>{{ named }}</div>
+</template>
diff --git a/test/fixtures/css-modules/named.vue b/test/fixtures/css-modules/named.vue
@@ -0,0 +1,13 @@
+<style module="named">
+.red {
+  color: red;
+}
+</style>
+
+<script>
+export default {}
+</script>
+
+<template>
+    <div>{{ named }}</div>
+</template>
diff --git a/test/fixtures/css-modules/red.css b/test/fixtures/css-modules/red.css
@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}