feat: support multiple css-modules imports

escaton · escaton · commit eec08e46346d · 2025-07-25T00:34:47.000+02:00
diff --git a/src/cssModules.ts b/src/cssModules.ts
@@ -1,3 +1,13 @@
+export function genInitCSSModulesCode() {
+  return `
+const cssModules = {}
+const cssModulesStore = {}
+const getCssModules = (name) => {
+  return Object.values(cssModulesStore[name]).reduce((acc, style) => Object.assign(acc, style), {})
+}
+`
+}
+
 export function genCSSModulesCode(
   id: string,
   index: number,
@@ -6,17 +16,24 @@ export function genCSSModulesCode(
   needsHotReload: boolean
 ): string {
   const styleVar = `style${index}`
-  let code = `\nimport ${styleVar} from ${request}`
-
   // inject variable
   const name = typeof moduleName === 'string' ? moduleName : '$style'
-  code += `\ncssModules["${name}"] = ${styleVar}`
+  let code = `
+import ${styleVar} from ${request}
+
+if (!cssModulesStore["${name}"]) {
+  cssModulesStore["${name}"] = {}
+}
+cssModulesStore["${name}"]["${styleVar}"] = ${styleVar}
+cssModules["${name}"] = getCssModules("${name}")
+`
 
   if (needsHotReload) {
     code += `
 if (module.hot) {
   module.hot.accept(${request}, () => {
-    cssModules["${name}"] = ${styleVar}
+    cssModulesStore["${name}"]["${styleVar}"] = ${styleVar}
+    cssModules["${name}"] = getCssModules("${name}")
     __VUE_HMR_RUNTIME__.rerender("${id}")
   })
 }`
diff --git a/src/index.ts b/src/index.ts
@@ -13,7 +13,7 @@ import type {
 } from 'vue/compiler-sfc'
 import { selectBlock } from './select'
 import { genHotReloadCode } from './hotReload'
-import { genCSSModulesCode } from './cssModules'
+import { genCSSModulesCode, genInitCSSModulesCode } from './cssModules'
 import { formatError } from './formatError'
 
 import VueLoaderPlugin from './plugin'
@@ -273,7 +273,7 @@ export default function loader(
             )
           }
           if (!hasCSSModules) {
-            stylesCode += `\nconst cssModules = {}`
+            stylesCode += genInitCSSModulesCode()
             propsToAttach.push([`__cssModules`, `cssModules`])
             hasCSSModules = true
           }
diff --git a/test/fixtures/css-modules-multiple.vue b/test/fixtures/css-modules-multiple.vue
@@ -0,0 +1,14 @@
+<style module>
+.red {
+  color: red;
+}
+</style>
+<style module>
+.green {
+  color: green;
+}
+</style>
+
+<script>
+export default {}
+</script>
diff --git a/test/style.spec.ts b/test/style.spec.ts
@@ -204,6 +204,39 @@ test('CSS Modules Extend', async () => {
   expect(style).toContain(`.${escapedClassName} {\n  color: #FF0000;\n}`)
 })
 
+test('Multiple CSS Modules', async () => {
+  const baseLoaders = [
+    'style-loader',
+    {
+      loader: 'css-loader',
+      options: {
+        modules: true,
+      },
+    },
+  ]
+
+  const { instance } = await mockBundleAndRun({
+    entry: 'css-modules-multiple.vue',
+    modify: (config: any) => {
+      config!.module!.rules = [
+        {
+          test: /\.vue$/,
+          use: [DEFAULT_VUE_USE],
+        },
+        {
+          test: /\.css$/,
+          use: baseLoaders,
+        },
+      ]
+    },
+  })
+
+  console.log(instance.$style)
+
+  expect(instance.$style.red).toBeDefined()
+  expect(instance.$style.green).toBeDefined()
+})
+
 test('v-bind() in CSS', async () => {
   const { window, instance } = await mockBundleAndRun({
     entry: 'style-v-bind.vue',

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ import type {`
`13`	`13`	`} from 'vue/compiler-sfc'`
`14`	`14`	`import { selectBlock } from './select'`
`15`	`15`	`import { genHotReloadCode } from './hotReload'`
`16`		`-import { genCSSModulesCode } from './cssModules'`
	`16`	`+import { genCSSModulesCode, genInitCSSModulesCode } from './cssModules'`
`17`	`17`	`import { formatError } from './formatError'`
`18`	`18`
`19`	`19`	`import VueLoaderPlugin from './plugin'`
`@@ -273,7 +273,7 @@ export default function loader(`
`273`	`273`	`)`
`274`	`274`	`}`
`275`	`275`	`if (!hasCSSModules) {`
`276`		- stylesCode += `\nconst cssModules = {}`
	`276`	`+ stylesCode += genInitCSSModulesCode()`
`277`	`277`	propsToAttach.push([`__cssModules`, `cssModules`])
`278`	`278`	`hasCSSModules = true`
`279`	`279`	`}`