feat: change to allow non-identifiers when selecting default export

Author: apple-yagi

examples/1-basic/generated/src/a.module.css.d.ts

@@ -6,6 +6,7 @@ declare const styles = {
   a_2: '' as readonly string,
   a_3: '' as readonly string,
   a_4: '' as readonly string,
+  'a-1': '' as readonly string,
   ...blockErrorType((await import('./b.module.css')).default),
   c_1: (await import('./c.module.css')).default.c_1,
   c_alias: (await import('./c.module.css')).default.c_2,

examples/1-basic/src/a.module.css

@@ -7,5 +7,7 @@
   100% { transform: translateY(-100%); }
 }
 
+.a-1 { color: red; }
+
 @import './b.module.css';
 @value c_1, c_2 as c_alias from './c.module.css';

examples/1-basic/src/a.tsx

@@ -7,6 +7,7 @@ styles.a_4;
 styles.b_1;
 styles.b_2;
 styles.c_1;
+styles['a-1'];
 styles.c_alias;
 styles.unknown; // Expected TS2339 error
 

packages/core/src/checker.test.ts

@@ -51,16 +51,6 @@ describe('checkCSSModule', () => {
     const diagnostics = check(readAndParseCSSModule(iff.paths['a.module.css'])!);
     expect(formatDiagnostics(diagnostics, iff.rootDir)).toMatchInlineSnapshot(`
       [
-        {
-          "category": "error",
-          "fileName": "<rootDir>/a.module.css",
-          "length": 3,
-          "start": {
-            "column": 2,
-            "line": 1,
-          },
-          "text": "css-modules-kit does not support invalid names as JavaScript identifiers.",
-        },
         {
           "category": "error",
           "fileName": "<rootDir>/a.module.css",
@@ -69,7 +59,7 @@ describe('checkCSSModule', () => {
             "column": 8,
             "line": 2,
           },
-          "text": "css-modules-kit does not support invalid names as JavaScript identifiers.",
+          "text": "css-modules-kit does not support invalid names as JavaScript identifiers when \`cmkOptions.namedExports\` is set to \`true\`.",
         },
         {
           "category": "error",
@@ -79,7 +69,7 @@ describe('checkCSSModule', () => {
             "column": 13,
             "line": 2,
           },
-          "text": "css-modules-kit does not support invalid names as JavaScript identifiers.",
+          "text": "css-modules-kit does not support invalid names as JavaScript identifiers when \`cmkOptions.namedExports\` is set to \`true\`.",
         },
         {
           "category": "error",
@@ -89,7 +79,7 @@ describe('checkCSSModule', () => {
             "column": 20,
             "line": 2,
           },
-          "text": "css-modules-kit does not support invalid names as JavaScript identifiers.",
+          "text": "css-modules-kit does not support invalid names as JavaScript identifiers when \`cmkOptions.namedExports\` is set to \`true\`.",
         },
       ]
     `);

packages/core/src/checker.ts

@@ -26,7 +26,7 @@ export function checkCSSModule(cssModule: CSSModule, args: CheckerArgs): Diagnos
 
   for (const token of cssModule.localTokens) {
     // Reject special names as they may break .d.ts files
-    if (!isValidAsJSIdentifier(token.name)) {
+    if (config.namedExports && !isValidAsJSIdentifier(token.name)) {
       diagnostics.push(createInvalidNameAsJSIdentifiersDiagnostic(cssModule, token.loc));
     }
     if (token.name === '__proto__') {
@@ -106,7 +106,7 @@ function createModuleHasNoExportedTokenDiagnostic(
 
 function createInvalidNameAsJSIdentifiersDiagnostic(cssModule: CSSModule, loc: Location): Diagnostic {
   return {
-    text: `css-modules-kit does not support invalid names as JavaScript identifiers.`,
+    text: `css-modules-kit does not support invalid names as JavaScript identifiers when \`cmkOptions.namedExports\` is set to \`true\`.`,
     category: 'error',
     file: { fileName: cssModule.fileName, text: cssModule.text },
     start: { line: loc.start.line, column: loc.start.column },

packages/core/src/dts-generator.test.ts

@@ -85,6 +85,7 @@ describe('generateDts', () => {
     expect(generateDts(readAndParseCSSModule(iff.paths['test.module.css'])!, options).text).toMatchInlineSnapshot(`
       "// @ts-nocheck
       declare const styles = {
+        'a-1': '' as readonly string,
       };
       export default styles;
       "

packages/core/src/dts-generator.ts

@@ -17,6 +17,8 @@ interface CodeMapping {
   lengths: number[];
   /** The generated offsets of the tokens in the *.d.ts file. */
   generatedOffsets: number[];
+  /** The lengths of the tokens in the *.d.ts file. */
+  generatedLengths?: number[];
 }
 
 /** The map linking the two codes in *.d.ts */
@@ -43,7 +45,7 @@ interface GenerateDtsResult {
  */
 export function generateDts(cssModule: CSSModule, options: GenerateDtsOptions): GenerateDtsResult {
   // Exclude invalid tokens
-  const localTokens = cssModule.localTokens.filter((token) => isValidName(token.name, options));
+  const localTokens = cssModule.localTokens.filter((token) => isValidName(token.name, options, false));
   const tokenImporters = cssModule.tokenImporters
     // Exclude invalid imported tokens
     .map((tokenImporter) => {
@@ -52,8 +54,8 @@ export function generateDts(cssModule: CSSModule, options: GenerateDtsOptions):
           ...tokenImporter,
           values: tokenImporter.values.filter(
             (value) =>
-              isValidName(value.name, options) &&
-              (value.localName === undefined || isValidName(value.localName, options)),
+              isValidName(value.name, options, true) &&
+              (value.localName === undefined || isValidName(value.localName, options, true)),
           ),
         };
       } else {
@@ -265,7 +267,7 @@ function generateDefaultExportDts(
   localTokens: Token[],
   tokenImporters: TokenImporter[],
 ): { text: string; mapping: CodeMapping; linkedCodeMapping: LinkedCodeMapping } {
-  const mapping: CodeMapping = { sourceOffsets: [], lengths: [], generatedOffsets: [] };
+  const mapping: CodeMapping = { sourceOffsets: [], lengths: [], generatedOffsets: [], generatedLengths: [] };
   const linkedCodeMapping: LinkedCodeMapping = {
     sourceOffsets: [],
     lengths: [],
@@ -310,13 +312,31 @@ function generateDefaultExportDts(
      *   |   ^ mapping.generatedOffsets[1]
      *   |
      * 4 | };
+     *
+     * invalid as js identifier:
+     * a.module.css:
+     * 1 | .a-123 { color: red; }
+     *   |  ^ mapping.sourceOffsets[0]
+     *
+     * a.module.css.d.ts:
+     * 1 | declare const styles = {
+     * 2 |   'a-123': '' as readonly string,
+     *   |   ^ mapping.generatedOffsets[0]
+     * 3 | };
      */
 
     text += `  `;
     mapping.sourceOffsets.push(token.loc.start.offset);
     mapping.generatedOffsets.push(text.length);
     mapping.lengths.push(token.name.length);
-    text += `${token.name}: '' as readonly string,\n`;
+    if (isValidAsJSIdentifier(token.name)) {
+      mapping.generatedLengths!.push(token.name.length);
+      text += `${token.name}: '' as readonly string,\n`;
+    } else {
+      // Include quotes in the mapping for invalid JS identifiers
+      mapping.generatedLengths!.push(token.name.length + 2);
+      text += `'${token.name}': '' as readonly string,\n`;
+    }
   }
   for (const tokenImporter of tokenImporters) {
     if (tokenImporter.type === 'import') {
@@ -347,6 +367,7 @@ function generateDefaultExportDts(
       mapping.sourceOffsets.push(tokenImporter.fromLoc.start.offset - 1);
       mapping.lengths.push(tokenImporter.from.length + 2);
       mapping.generatedOffsets.push(text.length);
+      mapping.generatedLengths!.push(tokenImporter.from.length + 2);
       text += `'${tokenImporter.from}')).default),\n`;
     } else {
       /**
@@ -393,19 +414,22 @@ function generateDefaultExportDts(
         mapping.sourceOffsets.push(localLoc.start.offset);
         mapping.lengths.push(localName.length);
         mapping.generatedOffsets.push(text.length);
+        mapping.generatedLengths!.push(localName.length);
         linkedCodeMapping.sourceOffsets.push(text.length);
         linkedCodeMapping.lengths.push(localName.length);
         text += `${localName}: (await import(`;
         if (i === 0) {
           mapping.sourceOffsets.push(tokenImporter.fromLoc.start.offset - 1);
           mapping.lengths.push(tokenImporter.from.length + 2);
           mapping.generatedOffsets.push(text.length);
+          mapping.generatedLengths!.push(tokenImporter.from.length + 2);
         }
         text += `'${tokenImporter.from}')).default.`;
         if ('localName' in value) {
           mapping.sourceOffsets.push(value.loc.start.offset);
           mapping.lengths.push(value.name.length);
           mapping.generatedOffsets.push(text.length);
+          mapping.generatedLengths!.push(value.name.length);
         }
         linkedCodeMapping.generatedOffsets.push(text.length);
         linkedCodeMapping.generatedLengths.push(value.name.length);
@@ -417,8 +441,8 @@ function generateDefaultExportDts(
   return { text, mapping, linkedCodeMapping };
 }
 
-function isValidName(name: string, options: GenerateDtsOptions): boolean {
-  if (!isValidAsJSIdentifier(name)) return false;
+function isValidName(name: string, options: GenerateDtsOptions, isTokenImport: boolean): boolean {
+  if ((options.namedExports || isTokenImport) && !isValidAsJSIdentifier(name)) return false;
   if (name === '__proto__') return false;
   if (options.namedExports && name === 'default') return false;
   return true;

packages/ts-plugin/e2e-test/feature/go-to-definition.test.ts

@@ -14,6 +14,7 @@ describe('Go to Definition', async () => {
       styles.b_1;
       styles.c_1;
       styles.c_alias;
+      styles['d-1'];
     `,
     'a.module.css': dedent`
       @import './b.module.css';
@@ -23,6 +24,7 @@ describe('Go to Definition', async () => {
       .a_2 { color: red; }
       @value a_3: red;
       @import url(./b.module.css);
+      .d-1 { color: red; }
     `,
     'b.module.css': dedent`
       .b_1 { color: red; }
@@ -300,6 +302,19 @@ describe('Go to Definition', async () => {
         { file: formatPath(iff.paths['b.module.css']), start: { line: 1, offset: 1 }, end: { line: 1, offset: 1 } },
       ],
     },
+    {
+      name: 'd-1 in index.ts',
+      file: iff.paths['index.ts'],
+      line: 8,
+      offset: 8,
+      expected: [
+        {
+          file: formatPath(iff.paths['a.module.css']),
+          start: { line: 8, offset: 2 },
+          end: { line: 8, offset: 5 },
+        },
+      ],
+    },
   ])('Go to Definition for $name', async ({ file, line, offset, expected }) => {
     const res = await tsserver.sendDefinitionAndBoundSpan({
       file,

packages/ts-plugin/e2e-test/feature/semantic-diagnostics.test.ts

@@ -8,7 +8,7 @@ test('Semantic Diagnostics', async () => {
   const iff = await createIFF({
     'index.ts': dedent`
       import styles from './a.module.css';
-      type Expected = { a_1: string, a_2: string, b_1: string, c_1: string, c_alias: string, c_3: string };
+      type Expected = { a_1: string, a_2: string, b_1: string, c_1: string, c_alias: string, c_3: string, 'a-3': string };
       const t1: Expected = styles;
       const t2: typeof styles = t1;
       styles.unknown;
@@ -55,7 +55,7 @@ test('Semantic Diagnostics', async () => {
           "line": 5,
           "offset": 8,
         },
-        "text": "Property 'unknown' does not exist on type '{ c_1: string; c_alias: string; c_3: any; b_1: string; a_1: string; a_2: string; }'.",
+        "text": "Property 'unknown' does not exist on type '{ c_1: string; c_alias: string; c_3: any; b_1: string; a_1: string; a_2: string; 'a-3': string; }'.",
       },
     ]
   `);
@@ -65,20 +65,6 @@ test('Semantic Diagnostics', async () => {
   });
   expect(res2.body).toMatchInlineSnapshot(`
     [
-      {
-        "category": "error",
-        "code": 0,
-        "end": {
-          "line": 5,
-          "offset": 5,
-        },
-        "source": "css-modules-kit",
-        "start": {
-          "line": 5,
-          "offset": 2,
-        },
-        "text": "css-modules-kit does not support invalid names as JavaScript identifiers.",
-      },
       {
         "category": "error",
         "code": 0,

packages/ts-plugin/e2e-test/file-operation.test.ts

@@ -137,24 +137,7 @@ test('updating file', async () => {
   const res2 = await tsserver.sendSemanticDiagnosticsSync({
     file: iff.paths['a.module.css'],
   });
-  expect(res2.body).toMatchInlineSnapshot(`
-    [
-      {
-        "category": "error",
-        "code": 0,
-        "end": {
-          "line": 2,
-          "offset": 5,
-        },
-        "source": "css-modules-kit",
-        "start": {
-          "line": 2,
-          "offset": 2,
-        },
-        "text": "css-modules-kit does not support invalid names as JavaScript identifiers.",
-      },
-    ]
-  `);
+  expect(res2.body).toMatchInlineSnapshot(`[]`);
 
   // The diagnostics of files importing a.module.css are updated.
   const res3 = await tsserver.sendSemanticDiagnosticsSync({