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