mizdra · mizdra · Aug 4, 2025 · Aug 4, 2025 · Aug 4, 2025
diff --git a/.changeset/lazy-loops-find.md b/.changeset/lazy-loops-find.md
@@ -0,0 +1,5 @@
+---
+'@css-modules-kit/core': minor
+---
+
+feat: improve non-JS identifier error message
diff --git a/packages/core/src/parser/css-module-parser.test.ts b/packages/core/src/parser/css-module-parser.test.ts
@@ -647,7 +647,7 @@ describe('parseCSSModule', () => {
               "line": 1,
               "offset": 0,
             },
-            "text": "\`:local\` is not supported. Use \`:local(...)\` instead.",
+            "text": "css-modules-kit does not support \`:local\`. Use \`:local(...)\` instead.",
           },
           {
             "category": "error",

diff --git a/packages/core/src/parser/key-frame-parser.test.ts b/packages/core/src/parser/key-frame-parser.test.ts
@@ -156,7 +156,7 @@ describe('parseAtKeyframes', () => {
                 "line": 4,
                 "offset": 140,
               },
-              "text": "css-modules-kit does not support non-JavaScript identifier keyframe names.",
+              "text": "css-modules-kit does not support non-JavaScript identifier as keyframe names.",
             },
           ],
         },

diff --git a/packages/core/src/parser/key-frame-parser.ts b/packages/core/src/parser/key-frame-parser.ts
@@ -67,7 +67,7 @@ export function parseAtKeyframes(atKeyframes: AtRule): ParseAtKeyframesResult {
         {
           start: keyframeNameLoc.start,
           length: keyframeName.length,
-          text: `css-modules-kit does not support non-JavaScript identifier keyframe names.`,
+          text: `css-modules-kit does not support non-JavaScript identifier as keyframe names.`,
           category: 'error',
         },
       ],

diff --git a/packages/core/src/parser/rule-parser.test.ts b/packages/core/src/parser/rule-parser.test.ts
@@ -917,7 +917,7 @@ describe('parseRule', () => {
                   "line": 1,
                   "offset": 0,
                 },
-                "text": "\`:local\` is not supported. Use \`:local(...)\` instead.",
+                "text": "css-modules-kit does not support \`:local\`. Use \`:local(...)\` instead.",
               },
             ],
           },
@@ -960,7 +960,7 @@ describe('parseRule', () => {
                   "line": 2,
                   "offset": 18,
                 },
-                "text": "\`:global\` is not supported. Use \`:global(...)\` instead.",
+                "text": "css-modules-kit does not support \`:global\`. Use \`:global(...)\` instead.",
               },
             ],
           },
@@ -1013,7 +1013,7 @@ describe('parseRule', () => {
                 "line": 1,
                 "offset": 0,
               },
-              "text": "\`a-1\` is not allowed because it is not a valid JavaScript identifier.",
+              "text": "css-modules-kit does not support non-JavaScript identifier as class names.",
             },
             {
               "category": "error",
@@ -1023,7 +1023,7 @@ describe('parseRule', () => {
                 "line": 1,
                 "offset": 5,
               },
-              "text": "\`a_\\u0032\` is not allowed because it is not a valid JavaScript identifier.",
+              "text": "css-modules-kit does not support non-JavaScript identifier as class names.",
             },
           ],
         },

diff --git a/packages/core/src/parser/rule-parser.ts b/packages/core/src/parser/rule-parser.ts
@@ -35,7 +35,7 @@ function convertClassNameToCollectResult(rule: Rule, node: selectorParser.ClassN
   if (!JS_IDENTIFIER_PATTERN.test(name)) {
     const diagnostic: DiagnosticWithDetachedLocation = {
       ...calcDiagnosticsLocationForSelectorParserNode(rule, node),
-      text: `\`${name}\` is not allowed because it is not a valid JavaScript identifier.`,
+      text: `css-modules-kit does not support non-JavaScript identifier as class names.`,
       category: 'error',
     };
     return { classNames: [], diagnostics: [diagnostic] };
@@ -75,7 +75,7 @@ function collectLocalClassNames(rule: Rule, root: selectorParser.Root): CollectR
         // We don't support `:local` and `:global` (without any arguments) because they are complex.
         const diagnostic: DiagnosticWithDetachedLocation = {
           ...calcDiagnosticsLocationForSelectorParserNode(rule, node),
-          text: `\`${node.value}\` is not supported. Use \`${node.value}(...)\` instead.`,
+          text: `css-modules-kit does not support \`${node.value}\`. Use \`${node.value}(...)\` instead.`,
           category: 'error',
         };
         return { classNames: [], diagnostics: [diagnostic] };

diff --git a/packages/ts-plugin/e2e/feature/syntactic-diagnostics.test.ts b/packages/ts-plugin/e2e/feature/syntactic-diagnostics.test.ts
@@ -69,7 +69,7 @@ test('Syntactic Diagnostics', async () => {
           "line": 3,
           "offset": 1,
         },
-        "text": "\`:local\` is not supported. Use \`:local(...)\` instead.",
+        "text": "css-modules-kit does not support \`:local\`. Use \`:local(...)\` instead.",
       },
       {
         "category": "error",
@@ -83,7 +83,7 @@ test('Syntactic Diagnostics', async () => {
           "line": 4,
           "offset": 1,
         },
-        "text": "\`a-3\` is not allowed because it is not a valid JavaScript identifier.",
+        "text": "css-modules-kit does not support non-JavaScript identifier as class names.",
       },
     ]
   `);