fix: sanitize class names of css modules (#32)

OEvgeny · web-flow · commit 2f855ee4f55b · 2025-05-22T12:05:41.000+08:00
diff --git a/src/core/transform.ts b/src/core/transform.ts
@@ -42,17 +42,23 @@ export async function transformCssModule(
   const compiledId = actualId
     .replaceAll('\\', '/')
     .replace(/\.module\.css$/, '.module_built.css')
+
+  const classes = Object.fromEntries(
+    Object.entries(res.exports ?? {}).map(([key, value]) => [key, value.name]),
+  )
+  let exports = `const classes = ${JSON.stringify(classes)}\nexport default classes\n`
+  const i = 0
+  for (const key of Object.keys(classes)) {
+    const sanitizedKey = `_${key.replaceAll(/\W/g, '_')}${i}`
+    exports +=
+      `\nconst ${sanitizedKey} = classes[${JSON.stringify(key)}]\n` +
+      `export { ${sanitizedKey} as ${JSON.stringify(key)} }\n`
+  }
+
   return {
     code: res.code.toString(),
     map: 'map' in res ? res.map?.toString() : undefined,
     id: compiledId,
-    exports: res.exports
-      ? Object.entries(res.exports)
-          .map(
-            ([name, { name: className }]) =>
-              `export const ${name} = "${className}";`,
-          )
-          .join('\n')
-      : '',
+    exports,
   }
 }
