[PoC] Support non js identifier token

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

@@ -1,13 +1,13 @@
 // @ts-nocheck
 function blockErrorType<T>(val: T): [0] extends [(1 & T)] ? {} : T;
 declare const styles = {
-  a_1: '' as readonly string,
-  a_2: '' as readonly string,
-  a_2: '' as readonly string,
-  a_3: '' as readonly string,
-  a_4: '' as readonly string,
+  'a_1': '' as readonly string,
+  'a_2': '' as readonly string,
+  'a_2': '' as readonly string,
+  'a_3': '' as readonly string,
+  'a_4': '' 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,
+  'c_1': (await import('./c.module.css')).default['c_1'],
+  'c_alias': (await import('./c.module.css')).default['c_2'],
 };
 export default styles;

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

@@ -1,6 +1,6 @@
 // @ts-nocheck
 declare const styles = {
-  b_1: '' as readonly string,
-  b_2: '' as readonly string,
+  'b_1': '' as readonly string,
+  'b_2': '' as readonly string,
 };
 export default styles;

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

@@ -1,6 +1,6 @@
 // @ts-nocheck
 declare const styles = {
-  c_1: '' as readonly string,
-  c_2: '' as readonly string,
+  'c_1': '' as readonly string,
+  'c_2': '' as readonly string,
 };
 export default styles;

examples/3-import-alias/generated/src/b.module.css.d.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
 declare const styles = {
-  b_1: '' as readonly string,
+  'b_1': '' as readonly string,
 };
 export default styles;

packages/codegen/e2e-test/index.test.ts

@@ -48,7 +48,7 @@ test('generates .d.ts', async () => {
     "// @ts-nocheck
     function blockErrorType<T>(val: T): [0] extends [(1 & T)] ? {} : T;
     declare const styles = {
-      a1: '' as readonly string,
+      'a1': '' as readonly string,
       ...blockErrorType((await import('./b.module.css')).default),
       ...blockErrorType((await import('./unmatched.module.css')).default),
     };
@@ -58,15 +58,15 @@ test('generates .d.ts', async () => {
   expect(await iff.readFile('generated/src/b.module.css.d.ts')).toMatchInlineSnapshot(`
     "// @ts-nocheck
     declare const styles = {
-      b1: '' as readonly string,
+      'b1': '' as readonly string,
     };
     export default styles;
     "
   `);
   expect(await iff.readFile('generated/src/c.module.css.d.ts')).toMatchInlineSnapshot(`
     "// @ts-nocheck
     declare const styles = {
-      c1: '' as readonly string,
+      'c1': '' as readonly string,
     };
     export default styles;
     "
@@ -158,7 +158,7 @@ test('generates .d.ts with circular import', async () => {
     "// @ts-nocheck
     function blockErrorType<T>(val: T): [0] extends [(1 & T)] ? {} : T;
     declare const styles = {
-      a1: '' as readonly string,
+      'a1': '' as readonly string,
       ...blockErrorType((await import('./b.module.css')).default),
     };
     export default styles;
@@ -168,7 +168,7 @@ test('generates .d.ts with circular import', async () => {
     "// @ts-nocheck
     function blockErrorType<T>(val: T): [0] extends [(1 & T)] ? {} : T;
     declare const styles = {
-      b1: '' as readonly string,
+      'b1': '' as readonly string,
       ...blockErrorType((await import('./a.module.css')).default),
     };
     export default styles;
@@ -178,7 +178,7 @@ test('generates .d.ts with circular import', async () => {
     "// @ts-nocheck
     function blockErrorType<T>(val: T): [0] extends [(1 & T)] ? {} : T;
     declare const styles = {
-      c1: '' as readonly string,
+      'c1': '' as readonly string,
       ...blockErrorType((await import('./c.module.css')).default),
     };
     export default styles;

packages/codegen/src/project.test.ts

@@ -197,7 +197,7 @@ describe('updateFile', () => {
     expect(await iff.readFile('generated/src/a.module.css.d.ts')).toMatchInlineSnapshot(`
       "// @ts-nocheck
       declare const styles = {
-        a_1: '' as readonly string,
+        'a_1': '' as readonly string,
       };
       export default styles;
       "
@@ -537,15 +537,15 @@ describe('emitDtsFiles', () => {
     expect(await iff.readFile('generated/src/a.module.css.d.ts')).toMatchInlineSnapshot(`
       "// @ts-nocheck
       declare const styles = {
-        a1: '' as readonly string,
+        'a1': '' as readonly string,
       };
       export default styles;
       "
     `);
     expect(await iff.readFile('generated/src/b.module.css.d.ts')).toMatchInlineSnapshot(`
       "// @ts-nocheck
       declare const styles = {
-        b1: '' as readonly string,
+        'b1': '' as readonly string,
       };
       export default styles;
       "
@@ -562,7 +562,7 @@ describe('emitDtsFiles', () => {
     expect(await iff.readFile('generated/src/a.module.css.d.ts')).toMatchInlineSnapshot(`
       "// @ts-nocheck
       declare const styles = {
-        a1: '' as readonly string,
+        'a1': '' as readonly string,
       };
       export default styles;
       "

packages/codegen/src/runner.test.ts

@@ -30,15 +30,15 @@ describe('runCMK', () => {
     expect(await iff.readFile('generated/src/a.module.css.d.ts')).toMatchInlineSnapshot(`
       "// @ts-nocheck
       declare const styles = {
-        a_1: '' as readonly string,
+        'a_1': '' as readonly string,
       };
       export default styles;
       "
     `);
     expect(await iff.readFile('generated/src/b.module.css.d.ts')).toMatchInlineSnapshot(`
       "// @ts-nocheck
       declare const styles = {
-        b_1: '' as readonly string,
+        'b_1': '' as readonly string,
       };
       export default styles;
       "
@@ -133,15 +133,15 @@ describe('runCMKInWatchMode', () => {
     expect(await iff.readFile('generated/src/a.module.css.d.ts')).toMatchInlineSnapshot(`
       "// @ts-nocheck
       declare const styles = {
-        a_1: '' as readonly string,
+        'a_1': '' as readonly string,
       };
       export default styles;
       "
     `);
     expect(await iff.readFile('generated/src/b.module.css.d.ts')).toMatchInlineSnapshot(`
       "// @ts-nocheck
       declare const styles = {
-        b_1: '' as readonly string,
+        'b_1': '' as readonly string,
       };
       export default styles;
       "

packages/core/src/checker.test.ts

@@ -36,7 +36,7 @@ function prepareChecker(args?: Partial<CheckerArgs>): Checker {
 }
 
 describe('checkCSSModule', () => {
-  test('report diagnostics for invalid name as js identifier', async () => {
+  test('do not report diagnostics for invalid name as js identifier when namedExports is false', async () => {
     const iff = await createIFF({
       'a.module.css': dedent`
         .a-1 { color: red; }
@@ -49,6 +49,21 @@ describe('checkCSSModule', () => {
     });
     const check = prepareChecker();
     const diagnostics = check(readAndParseCSSModule(iff.paths['a.module.css'])!);
+    expect(formatDiagnostics(diagnostics, iff.rootDir)).toMatchInlineSnapshot(`[]`);
+  });
+  test('report diagnostics for invalid name as js identifier when namedExports is true', async () => {
+    const iff = await createIFF({
+      'a.module.css': dedent`
+        .a-1 { color: red; }
+        @value b-1, b-2 as a-2 from './b.module.css';
+      `,
+      'b.module.css': dedent`
+        @value b-1: red;
+        @value b-2: red;
+      `,
+    });
+    const check = prepareChecker({ config: fakeConfig({ namedExports: true }) });
+    const diagnostics = check(readAndParseCSSModule(iff.paths['a.module.css'])!);
     expect(formatDiagnostics(diagnostics, iff.rootDir)).toMatchInlineSnapshot(`
       [
         {
@@ -59,7 +74,7 @@ describe('checkCSSModule', () => {
             "column": 2,
             "line": 1,
           },
-          "text": "css-modules-kit does not support invalid names as JavaScript identifiers.",
+          "text": "Token names must be valid JavaScript identifiers when \`cmkOptions.namedExports\` is set to \`true\`.",
         },
         {
           "category": "error",
@@ -69,7 +84,7 @@ describe('checkCSSModule', () => {
             "column": 8,
             "line": 2,
           },
-          "text": "css-modules-kit does not support invalid names as JavaScript identifiers.",
+          "text": "Token names must be valid JavaScript identifiers when \`cmkOptions.namedExports\` is set to \`true\`.",
         },
         {
           "category": "error",
@@ -79,7 +94,7 @@ describe('checkCSSModule', () => {
             "column": 13,
             "line": 2,
           },
-          "text": "css-modules-kit does not support invalid names as JavaScript identifiers.",
+          "text": "Token names must be valid JavaScript identifiers when \`cmkOptions.namedExports\` is set to \`true\`.",
         },
         {
           "category": "error",
@@ -89,7 +104,7 @@ describe('checkCSSModule', () => {
             "column": 20,
             "line": 2,
           },
-          "text": "css-modules-kit does not support invalid names as JavaScript identifiers.",
+          "text": "Token names must be valid JavaScript identifiers when \`cmkOptions.namedExports\` is set to \`true\`.",
         },
       ]
     `);
@@ -190,6 +205,31 @@ describe('checkCSSModule', () => {
       ]
     `);
   });
+  test('report diagnostics for backslash in name when namedExports is false', async () => {
+    // NOTE: The backslash is valid syntax in class selectors, but it is invalid syntax in `@value`.
+    // Therefore, it is sufficient for diagnostics to be reported only for class selectors.
+    const iff = await createIFF({
+      'a.module.css': dedent`
+        .a\\1 { color: red; }
+      `,
+    });
+    const check = prepareChecker();
+    const diagnostics = check(readAndParseCSSModule(iff.paths['a.module.css'])!);
+    expect(formatDiagnostics(diagnostics, iff.rootDir)).toMatchInlineSnapshot(`
+      [
+        {
+          "category": "error",
+          "fileName": "<rootDir>/a.module.css",
+          "length": 4,
+          "start": {
+            "column": 2,
+            "line": 1,
+          },
+          "text": "Backslash (\\) is not allowed in names when \`cmkOptions.namedExports\` is set to \`false\`.",
+        },
+      ]
+    `);
+  });
   test('report diagnostics for non-exported token', async () => {
     const iff = await createIFF({
       'a.module.css': `@value b_1, b_2 from './b.module.css';`,

packages/core/src/checker.ts

@@ -69,14 +69,17 @@ function createTokenNameDiagnostic(cssModule: CSSModule, loc: Location, violatio
   let text: string;
   switch (violation) {
     case 'invalid-js-identifier':
-      text = `css-modules-kit does not support invalid names as JavaScript identifiers.`;
+      text = `Token names must be valid JavaScript identifiers when \`cmkOptions.namedExports\` is set to \`true\`.`;
       break;
     case 'proto-not-allowed':
       text = `\`__proto__\` is not allowed as names.`;
       break;
     case 'default-not-allowed':
       text = `\`default\` is not allowed as names when \`cmkOptions.namedExports\` is set to \`true\`.`;
       break;
+    case 'backslash-not-allowed':
+      text = `Backslash (\\) is not allowed in names when \`cmkOptions.namedExports\` is set to \`false\`.`;
+      break;
     default:
       throw new Error('unreachable: unknown TokenNameViolation');
   }

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

@@ -33,8 +33,8 @@ describe('generateDts', () => {
     expect(generateDts(readAndParseCSSModule(iff.paths['test.module.css'])!, options).text).toMatchInlineSnapshot(`
       "// @ts-nocheck
       declare const styles = {
-        local1: '' as readonly string,
-        local2: '' as readonly string,
+        'local1': '' as readonly string,
+        'local2': '' as readonly string,
       };
       export default styles;
       "
@@ -52,8 +52,8 @@ describe('generateDts', () => {
       function blockErrorType<T>(val: T): [0] extends [(1 & T)] ? {} : T;
       declare const styles = {
         ...blockErrorType((await import('./a.module.css')).default),
-        imported1: (await import('./b.module.css')).default.imported1,
-        aliasedImported2: (await import('./b.module.css')).default.imported2,
+        'imported1': (await import('./b.module.css')).default['imported1'],
+        'aliasedImported2': (await import('./b.module.css')).default['imported2'],
       };
       export default styles;
       "
@@ -77,9 +77,9 @@ describe('generateDts', () => {
   test('does not generate types for invalid name', async () => {
     const iff = await createIFF({
       'test.module.css': dedent`
-        .a-1 { color: red; }
-        @value b-1 from './b.module.css';
-        @value b_2 as a-2 from './b.module.css';
+        .__proto__ { color: red; }
+        @value __proto__ from './b.module.css';
+        @value b_1 as __proto__ from './b.module.css';
       `,
     });
     expect(generateDts(readAndParseCSSModule(iff.paths['test.module.css'])!, options).text).toMatchInlineSnapshot(`