fix(css): use aliased exports for CSS module keys (#840)

Co-authored-by: Kevin Deng <sxzz@sxzz.moe>

Author: wChenonly

packages/css/src/__snapshots__/modules.test.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`modulesToEsm > exports arbitrary module keys via aliased bindings 1`] = `
+"const _key0 = "mod_title";
+export { _key0 as "title" };
+const _key1 = "mod_await";
+export { _key1 as "await" };
+const _key2 = "mod_foo_bar";
+export { _key2 as "foo-bar" };
+export default {"default":"mod_default","title":"mod_title","await":"mod_await","foo-bar":"mod_foo_bar"};"
+`;

packages/css/src/modules.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, test } from 'vitest'
+import { modulesToEsm } from './modules.ts'
+
+describe('modulesToEsm', () => {
+  test('exports arbitrary module keys via aliased bindings', () => {
+    const code = modulesToEsm({
+      default: 'mod_default',
+      title: 'mod_title',
+      await: 'mod_await',
+      'foo-bar': 'mod_foo_bar',
+    })
+
+    expect(code).matchSnapshot()
+    expect(code).toContain('const _key0 = "mod_title";')
+    expect(code).toContain('export { _key0 as "title" };')
+    expect(code).not.toContain('const _default = "mod_default";')
+    expect(code).not.toContain('export { _default as "default" };')
+    expect(code).toContain('const _key1 = "mod_await";')
+    expect(code).toContain('export { _key1 as "await" };')
+    expect(code).toContain('const _key2 = "mod_foo_bar";')
+    expect(code).toContain('export { _key2 as "foo-bar" };')
+    expect(code).toContain(
+      'export default {"default":"mod_default","title":"mod_title","await":"mod_await","foo-bar":"mod_foo_bar"};',
+    )
+  })
+})

packages/css/src/modules.ts

@@ -1,13 +1,17 @@
 import type { CSSModuleExports } from 'lightningcss'
 
-const VALID_ID_RE = /^[$_a-z][$\w]*$/i
-
 export function modulesToEsm(modules: Record<string, string>): string {
   const lines: string[] = []
+  let index = 0
   for (const [key, value] of Object.entries(modules)) {
-    if (VALID_ID_RE.test(key)) {
-      lines.push(`export const ${key} = ${JSON.stringify(value)};`)
+    if (key === 'default') {
+      continue
     }
+    const binding = `_key${index++}`
+    lines.push(
+      `const ${binding} = ${JSON.stringify(value)};`,
+      `export { ${binding} as ${JSON.stringify(key)} };`,
+    )
   }
   lines.push(`export default ${JSON.stringify(modules)};`)
   return lines.join('\n')

tests/__snapshots__/css-modules/css-module-supports-class-named-default.snap.md

@@ -0,0 +1,19 @@
+## index.mjs
+
+```mjs
+//#endregion
+//#region index.ts
+console.log({ "default": "design-system-default" }.default);
+//#endregion
+export {};
+
+```
+
+## style.css
+
+```css
+.design-system-default {
+  color: red;
+}
+
+```

tests/css.test.ts

@@ -1647,5 +1647,28 @@ describe('css', () => {
       const js = fileMap['index.mjs']
       expect(js).toContain('mod_title')
     })
+
+    test('css module supports class named default', async (context) => {
+      const { fileMap } = await testBuild({
+        context,
+        files: {
+          'index.ts': `import styles from './app.module.css'\nconsole.log(styles.default)`,
+          'app.module.css': `.default { color: red }`,
+        },
+        options: {
+          css: {
+            modules: { generateScopedName: 'design-system-[local]' },
+          },
+        },
+      })
+
+      const js = fileMap['index.mjs']
+      const css = fileMap['style.css']
+
+      expect(js).not.toContain('export const default')
+      expect(js).toMatch(/"default"\s*:\s*"design-system-default"/)
+      expect(js).toContain('.default')
+      expect(css).toContain('.design-system-default')
+    })
   })
 })