Merge pull request #6 from zyishai/2024-04-03-zyishai-fix-class-names

[FIX] Extract class names with hyphens

packages/vite-plugin/README.md

@@ -29,7 +29,7 @@ export default function MyCustomButton() {
 ```
 
 **Important note**  
-This plugin only supports importing from **CSS modules.** So make sure your files ends with `.module.css` or `.module.scss`.
+This plugin only supports importing from **CSS modules.** So make sure your files end with `.module.css` or `.module.scss`.
 
 ## Typescript Support
 This plugin comes with support for Typescript built-in! Modify your `vite.config.ts` as follows:
@@ -43,7 +43,7 @@ export default defineConfig({
 });
 ```
 
-This plugin detects files that ends with `.module.css` or `.module.scss` in your project and creates matching `.d.ts` files alongside them. For example, if your source code directory has this structure:
+This plugin detects files that end with `.module.css` or `.module.scss` in your project and creates matching `.d.ts` files alongside them. For example, if your source code directory has this structure:
 ```
 |-- src
   |-- components

packages/vite-plugin/src/index.ts

@@ -1,6 +1,6 @@
 import {type Plugin} from 'vite'
 import {readFileSync} from 'node:fs'
-import {parseComments} from './parser.js'
+import {extractClassNames, parseComments} from './parser.js'
 import {createFilter} from '@rollup/pluginutils'
 import type {MSA} from './types'
 
@@ -18,16 +18,7 @@ function compileCSS(options: { id: string; code: string }) {
   const rawCSS = readFileSync(id, `utf-8`)
   const msa = parseComments(rawCSS)
 
-  const exportReg = /export const (.*);/g
-  let result: RegExpExecArray | null
-  const mapping = {} as Record<string, string>
-  while ((result = exportReg.exec(code)) !== null) {
-    const parse = /(.*) = \"(.*)\"/.exec(result[1])
-    if (parse) {
-      const [, key, value] = parse
-      mapping[key] = value
-    }
-  }
+  const mapping = extractClassNames(code)
 
   return {
     mapping,

packages/vite-plugin/src/parser.ts

@@ -178,4 +178,24 @@ function parseComments(text: string): MSA[] {
   return match(reComment)
 }
 
-export {parseComments}
+function extractClassNames(code: string): Record<string, string> {
+  const reDefaultExportClassNames = /['"]([\w-]+)['"]:\s+['"]([\w-]+)['"]/gs
+  const reNamedExportsClassNames = /export const (\w+) = ['"]([\w-]+)['"];/g
+
+  const match: (re: RegExp) => Record<string, string> = (re: RegExp) => {
+    const matches = re.exec(code)
+    if (!matches) return {}
+    const [, key, value] = matches
+    return R.assoc(
+      key,
+      value,
+      match(re)
+    )
+  }
+  return R.mergeDeepRight(
+    match(reDefaultExportClassNames),
+    match(reNamedExportsClassNames)
+  )
+}
+
+export {parseComments, extractClassNames}