fix(builder): remove extra quote from generated CSS module types (#4639)

.changeset/few-icons-scream.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/builder-shared': patch
+---
+
+fix(builder): remove extra quote from generated CSS module types
+
+fix(builder): 移除生成的 CSS module 类型中多余的引号

packages/builder/builder-shared/src/loaders/css-modules-typescript-loader.ts

@@ -47,10 +47,20 @@ const getTypeMismatchError = ({
   );
 };
 
+export function wrapQuotes(key: string) {
+  // Check if key is a valid identifier
+  const isValidIdentifier = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key);
+  if (isValidIdentifier) {
+    return key;
+  }
+
+  return `'${key}'`;
+}
+
 const cssModuleToInterface = (cssModuleKeys: string[]) => {
   const interfaceFields = cssModuleKeys
     .sort()
-    .map(key => `  '${key}': string;`)
+    .map(key => `  ${wrapQuotes(key)}: string;`)
     .join('\n');
 
   return `interface CssExports {\n${interfaceFields}\n}`;

packages/builder/builder-shared/tests/loaders/wrapQuotes.test.ts

@@ -0,0 +1,20 @@
+import { expect, it } from 'vitest';
+import { wrapQuotes } from '../../src/loaders/css-modules-typescript-loader';
+
+it('should wrap key correctly', () => {
+  // do not need wrap
+  expect(wrapQuotes('foo')).toBe(`foo`);
+  expect(wrapQuotes('f1o')).toBe(`f1o`);
+  expect(wrapQuotes('Foo')).toBe(`Foo`);
+  expect(wrapQuotes('$foo')).toBe(`$foo`);
+  expect(wrapQuotes('_foo')).toBe(`_foo`);
+  expect(wrapQuotes('foo1')).toBe(`foo1`);
+  expect(wrapQuotes('fooBar')).toBe(`fooBar`);
+
+  // need wrap
+  expect(wrapQuotes('#foo')).toBe(`'#foo'`);
+  expect(wrapQuotes('1foo')).toBe(`'1foo'`);
+  expect(wrapQuotes('-bar')).toBe(`'-bar'`);
+  expect(wrapQuotes('foo-bar')).toBe(`'foo-bar'`);
+  expect(wrapQuotes('foo~bar')).toBe(`'foo~bar'`);
+});

tests/e2e/builder/cases/css/css-modules-dom/index.test.ts

@@ -30,7 +30,7 @@ test('enableCssModuleTSDeclaration', async () => {
       .readFileSync(join(fixtures, 'src/App.module.less.d.ts'), {
         encoding: 'utf-8',
       })
-      .includes(`'title': string;`),
+      .includes(`title: string;`),
   ).toBeTruthy();
 
   expect(
@@ -42,7 +42,7 @@ test('enableCssModuleTSDeclaration', async () => {
       .readFileSync(join(fixtures, 'src/App.module.scss.d.ts'), {
         encoding: 'utf-8',
       })
-      .includes(`'header': string;`),
+      .includes(`header: string;`),
   ).toBeTruthy();
 });
 

tests/e2e/builder/cases/css/css-modules-ts-declaration/index.test.ts

@@ -37,9 +37,9 @@ test('should generator ts declaration correctly for css modules auto true', asyn
   });
 
   expect(content).toMatch(/'the-b-class': string;/);
-  expect(content).toMatch(/'theBClass': string;/);
-  expect(content).toMatch(/'primary': string;/);
-  expect(content).toMatch(/'btn': string;/);
+  expect(content).toMatch(/theBClass: string;/);
+  expect(content).toMatch(/primary: string;/);
+  expect(content).toMatch(/btn: string;/);
 
   await clear();
 });