Calculate the correct range of CSS syntax errors (#196)

* update postcss

* update snapshot

* add test

* calculate the correct range of CSS syntax errors

* add changelog

Author: mizdra

.changeset/modern-turtles-give.md

@@ -0,0 +1,6 @@
+---
+'@css-modules-kit/codegen': patch
+'@css-modules-kit/core': patch
+---
+
+fix: calculate the correct range of CSS syntax errors

package-lock.json

@@ -1,4 +1,5 @@
 import { spawnSync } from 'node:child_process';
+import { stripVTControlCharacters } from 'node:util';
 import { join } from '@css-modules-kit/core';
 import dedent from 'dedent';
 import { expect, test } from 'vitest';
@@ -87,6 +88,23 @@ test('prints version number', () => {
   expect(cmk.status).toBe(0);
 });
 
+test('reports CSS syntax error', async () => {
+  const iff = await createIFF({
+    'src/a.module.css': `badword`,
+    'tsconfig.json': '{}',
+  });
+  const cmk = spawnSync('node', [binPath, '--pretty'], { cwd: iff.rootDir });
+  expect(cmk.status).toBe(1);
+  expect(stripVTControlCharacters(cmk.stderr.toString())).toMatchInlineSnapshot(`
+    "src/a.module.css:1:1 - error: Unknown word badword
+
+    1 badword
+      ~~~~~~~
+
+    "
+  `);
+});
+
 test('reports system error', async () => {
   const iff = await createIFF({});
   const cmk = spawnSync('node', [binPath], {

packages/codegen/e2e/index.test.ts

@@ -43,7 +43,7 @@
     "dist"
   ],
   "dependencies": {
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.5",
     "postcss-safe-parser": "^7.0.1",
     "postcss-selector-parser": "^7.1.0",
     "postcss-value-parser": "^4.2.0"

packages/core/package.json

@@ -495,6 +495,31 @@ describe('parseCSSModule', () => {
         ],
       }
     `);
+    expect(parseCSSModule('badword', options)).toMatchInlineSnapshot(`
+      {
+        "cssModule": {
+          "fileName": "/test.module.css",
+          "localTokens": [],
+          "text": "badword",
+          "tokenImporters": [],
+        },
+        "diagnostics": [
+          {
+            "category": "error",
+            "file": {
+              "fileName": "/test.module.css",
+              "text": "badword",
+            },
+            "length": 7,
+            "start": {
+              "column": 1,
+              "line": 1,
+            },
+            "text": "Unknown word badword",
+          },
+        ],
+      }
+    `);
   });
   test('parses CSS in a fault-tolerant manner if safe is true', () => {
     const parsed = parseCSSModule(

packages/core/src/parser/css-module-parser.test.ts

@@ -82,15 +82,14 @@ export function parseCSSModule(text: string, { fileName, safe }: ParseCSSModuleO
     ast = parser(text, { from: fileName });
   } catch (e) {
     if (e instanceof CssSyntaxError) {
-      const start = { line: e.line ?? 1, column: e.column ?? 1 };
+      const { line, column, endColumn } = e.input!;
       return {
         cssModule: { fileName, text, localTokens: [], tokenImporters: [] },
         diagnostics: [
           {
             file: diagnosticSourceFile,
-            start,
-            // TODO: Assign correct length (e.g. `e.endOffset - e.offset`)
-            length: 1,
+            start: { line, column },
+            length: endColumn !== undefined ? endColumn - column : 1,
             text: e.reason,
             category: 'error',
           },

packages/core/src/parser/css-module-parser.ts

@@ -56,6 +56,7 @@ describe('calcDiagnosticsLocationForSelectorParserNode', () => {
           "start": {
             "column": 3,
             "line": 1,
+            "offset": 2,
           },
           "type": "combinator",
         },
@@ -65,6 +66,7 @@ describe('calcDiagnosticsLocationForSelectorParserNode', () => {
           "start": {
             "column": 4,
             "line": 1,
+            "offset": 3,
           },
           "type": "class",
         },
@@ -108,6 +110,7 @@ describe('calcDiagnosticsLocationForSelectorParserNode', () => {
           "start": {
             "column": 3,
             "line": 1,
+            "offset": 2,
           },
           "type": "combinator",
         },
@@ -117,6 +120,7 @@ describe('calcDiagnosticsLocationForSelectorParserNode', () => {
           "start": {
             "column": 1,
             "line": 2,
+            "offset": 3,
           },
           "type": "class",
         },
@@ -127,6 +131,7 @@ describe('calcDiagnosticsLocationForSelectorParserNode', () => {
           "start": {
             "column": 3,
             "line": 2,
+            "offset": 5,
           },
           "type": "combinator",
         },
@@ -136,6 +141,7 @@ describe('calcDiagnosticsLocationForSelectorParserNode', () => {
           "start": {
             "column": 3,
             "line": 3,
+            "offset": 8,
           },
           "type": "class",
         },
@@ -176,6 +182,7 @@ describe('calcDiagnosticsLocationForSelectorParserNode', () => {
           "start": {
             "column": 3,
             "line": 2,
+            "offset": 24,
           },
           "type": "combinator",
         },
@@ -185,6 +192,7 @@ describe('calcDiagnosticsLocationForSelectorParserNode', () => {
           "start": {
             "column": 3,
             "line": 3,
+            "offset": 27,
           },
           "type": "class",
         },
@@ -571,6 +579,7 @@ describe('parseRule', () => {
                 "start": {
                   "column": 8,
                   "line": 1,
+                  "offset": 7,
                 },
                 "text": "A \`:global(...)\` is not allowed inside of \`:local(...)\`.",
               },
@@ -585,6 +594,7 @@ describe('parseRule', () => {
                 "start": {
                   "column": 9,
                   "line": 2,
+                  "offset": 31,
                 },
                 "text": "A \`:local(...)\` is not allowed inside of \`:global(...)\`.",
               },
@@ -599,6 +609,7 @@ describe('parseRule', () => {
                 "start": {
                   "column": 8,
                   "line": 3,
+                  "offset": 53,
                 },
                 "text": "A \`:local(...)\` is not allowed inside of \`:local(...)\`.",
               },
@@ -613,6 +624,7 @@ describe('parseRule', () => {
                 "start": {
                   "column": 9,
                   "line": 4,
+                  "offset": 76,
                 },
                 "text": "A \`:global(...)\` is not allowed inside of \`:global(...)\`.",
               },
@@ -781,6 +793,7 @@ describe('parseRule', () => {
               "start": {
                 "column": 6,
                 "line": 1,
+                "offset": 5,
               },
               "text": "\`a_\\u0032\` is not allowed because it is not a valid JavaScript identifier.",
             },