feat(css-modules): added multiple modules support; re-write tests & add more css module scenarios

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}")
   })
 }`

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

test/fixtures/css-modules/red.css

@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}