feat: in case of undefined pseudos, show in which css level / module it is defined

Author: mdevils

src/parser.ts

@@ -775,11 +775,11 @@ export function createParser(
                     // Generate a helpful error message with location information
                     const locations = pseudoLocationIndex.pseudoElements[pseudoName];
                     let errorMessage = `Unknown pseudo-element "${pseudoName}"`;
-                    
+
                     if (locations && locations.length > 0) {
                         errorMessage += `. It is defined in: ${locations.join(', ')}`;
                     }
-                    
+
                     fail(errorMessage + '.');
                 }
 
@@ -818,11 +818,11 @@ export function createParser(
                         // Generate a helpful error message with location information
                         const locations = pseudoLocationIndex.pseudoClasses[pseudoName];
                         let errorMessage = `Unknown pseudo-class: "${pseudoName}"`;
-                        
+
                         if (locations && locations.length > 0) {
                             errorMessage += `. It is defined in: ${locations.join(', ')}`;
                         }
-                        
+
                         fail(errorMessage + '.');
                     }
 

src/syntax-definitions.ts

@@ -510,6 +510,35 @@ export interface PseudoLocationIndex {
     pseudoElements: Record<string, string[]>;
 }
 
+const latestSyntaxDefinition = {
+    ...selectors4SyntaxDefinition,
+    modules: (Object.entries(cssModules) as [CssModule, SyntaxDefinition & {latest?: boolean}][])
+        .filter(([, {latest}]) => latest)
+        .map(([name]) => name)
+};
+
+const progressiveSyntaxDefinition = extendSyntaxDefinition(latestSyntaxDefinition, {
+    pseudoElements: {
+        unknown: 'accept'
+    },
+    pseudoClasses: {
+        unknown: 'accept'
+    },
+    attributes: {
+        unknownCaseSensitivityModifiers: 'accept'
+    }
+});
+
+export const cssSyntaxDefinitions: Record<CssLevel, SyntaxDefinition> = {
+    css1: css1SyntaxDefinition,
+    css2: css2SyntaxDefinition,
+    css3: selectors3SyntaxDefinition,
+    'selectors-3': selectors3SyntaxDefinition,
+    'selectors-4': selectors4SyntaxDefinition,
+    latest: latestSyntaxDefinition,
+    progressive: progressiveSyntaxDefinition
+};
+
 /**
  * Builds an index of where each pseudo-class and pseudo-element is defined
  * (in which CSS Level or CSS Module)
@@ -519,18 +548,18 @@ export function buildPseudoLocationIndex(): PseudoLocationIndex {
         pseudoClasses: {},
         pseudoElements: {}
     };
-    
+
     // Add CSS Levels (excluding 'latest' and 'progressive')
     const cssLevels: CssLevel[] = ['css1', 'css2', 'css3', 'selectors-3', 'selectors-4'];
-    
+
     for (const level of cssLevels) {
         const syntax = cssSyntaxDefinitions[level];
-        
+
         // Process pseudo-classes
         if (syntax.pseudoClasses && typeof syntax.pseudoClasses === 'object') {
-            const { definitions } = syntax.pseudoClasses;
+            const {definitions} = syntax.pseudoClasses;
             if (definitions) {
-                for (const [type, names] of Object.entries(definitions)) {
+                for (const [, names] of Object.entries(definitions)) {
                     for (const name of names) {
                         if (!index.pseudoClasses[name]) {
                             index.pseudoClasses[name] = [];
@@ -542,10 +571,10 @@ export function buildPseudoLocationIndex(): PseudoLocationIndex {
                 }
             }
         }
-        
+
         // Process pseudo-elements
         if (syntax.pseudoElements && typeof syntax.pseudoElements === 'object') {
-            const { definitions } = syntax.pseudoElements;
+            const {definitions} = syntax.pseudoElements;
             if (definitions) {
                 if (Array.isArray(definitions)) {
                     for (const name of definitions) {
@@ -557,7 +586,7 @@ export function buildPseudoLocationIndex(): PseudoLocationIndex {
                         }
                     }
                 } else {
-                    for (const [type, names] of Object.entries(definitions)) {
+                    for (const names of Object.values(definitions)) {
                         for (const name of names) {
                             if (!index.pseudoElements[name]) {
                                 index.pseudoElements[name] = [];
@@ -571,14 +600,17 @@ export function buildPseudoLocationIndex(): PseudoLocationIndex {
             }
         }
     }
-    
+
     // Add CSS Modules
-    for (const [moduleName, moduleSyntax] of Object.entries(cssModules)) {
+    for (const [moduleName, moduleSyntax] of Object.entries(cssModules) as [
+        CssModule,
+        SyntaxDefinition & {latest?: boolean}
+    ][]) {
         // Process pseudo-classes
         if (moduleSyntax.pseudoClasses && typeof moduleSyntax.pseudoClasses === 'object') {
-            const { definitions } = moduleSyntax.pseudoClasses;
+            const {definitions} = moduleSyntax.pseudoClasses;
             if (definitions) {
-                for (const [type, names] of Object.entries(definitions)) {
+                for (const names of Object.values(definitions)) {
                     for (const name of names) {
                         if (!index.pseudoClasses[name]) {
                             index.pseudoClasses[name] = [];
@@ -590,10 +622,10 @@ export function buildPseudoLocationIndex(): PseudoLocationIndex {
                 }
             }
         }
-        
+
         // Process pseudo-elements
         if (moduleSyntax.pseudoElements && typeof moduleSyntax.pseudoElements === 'object') {
-            const { definitions } = moduleSyntax.pseudoElements;
+            const {definitions} = moduleSyntax.pseudoElements;
             if (definitions) {
                 if (Array.isArray(definitions)) {
                     for (const name of definitions) {
@@ -605,7 +637,7 @@ export function buildPseudoLocationIndex(): PseudoLocationIndex {
                         }
                     }
                 } else {
-                    for (const [type, names] of Object.entries(definitions)) {
+                    for (const names of Object.values(definitions)) {
                         for (const name of names) {
                             if (!index.pseudoElements[name]) {
                                 index.pseudoElements[name] = [];
@@ -619,38 +651,9 @@ export function buildPseudoLocationIndex(): PseudoLocationIndex {
             }
         }
     }
-    
+
     return index;
 }
 
 // Pre-build the index for faster lookup
 export const pseudoLocationIndex = buildPseudoLocationIndex();
-
-const latestSyntaxDefinition = {
-    ...selectors4SyntaxDefinition,
-    modules: (Object.entries(cssModules) as [CssModule, SyntaxDefinition & {latest?: boolean}][])
-        .filter(([, {latest}]) => latest)
-        .map(([name]) => name)
-};
-
-const progressiveSyntaxDefinition = extendSyntaxDefinition(latestSyntaxDefinition, {
-    pseudoElements: {
-        unknown: 'accept'
-    },
-    pseudoClasses: {
-        unknown: 'accept'
-    },
-    attributes: {
-        unknownCaseSensitivityModifiers: 'accept'
-    }
-});
-
-export const cssSyntaxDefinitions: Record<CssLevel, SyntaxDefinition> = {
-    css1: css1SyntaxDefinition,
-    css2: css2SyntaxDefinition,
-    css3: selectors3SyntaxDefinition,
-    'selectors-3': selectors3SyntaxDefinition,
-    'selectors-4': selectors4SyntaxDefinition,
-    latest: latestSyntaxDefinition,
-    progressive: progressiveSyntaxDefinition
-};

test/modules.test.ts

@@ -713,7 +713,7 @@ describe('CSS Modules', () => {
                 })
             );
         });
-        
+
         it('should provide helpful error messages with location information', () => {
             const parse = createParser({
                 syntax: {
@@ -725,32 +725,32 @@ describe('CSS Modules', () => {
                     }
                 }
             });
-            
+
             // Test for pseudo-class defined in a CSS module
             try {
                 parse(':sticky');
                 fail('Should have thrown an error');
             } catch (e) {
-                expect(e.message).toContain('Unknown pseudo-class: "sticky"');
-                expect(e.message).toContain('css-position-3');
+                expect((e as Error).message).toContain('Unknown pseudo-class: "sticky"');
+                expect((e as Error).message).toContain('css-position-3');
             }
-            
+
             // Test for pseudo-element defined in a CSS module
             try {
                 parse('::part(button)');
                 fail('Should have thrown an error');
             } catch (e) {
-                expect(e.message).toContain('Unknown pseudo-element "part"');
-                expect(e.message).toContain('css-shadow-parts-1');
+                expect((e as Error).message).toContain('Unknown pseudo-element "part"');
+                expect((e as Error).message).toContain('css-shadow-parts-1');
             }
-            
+
             // Test for pseudo-class defined in a CSS level
             try {
                 parse(':focus-visible');
                 fail('Should have thrown an error');
             } catch (e) {
-                expect(e.message).toContain('Unknown pseudo-class: "focus-visible"');
-                expect(e.message).toContain('selectors-4');
+                expect((e as Error).message).toContain('Unknown pseudo-class: "focus-visible"');
+                expect((e as Error).message).toContain('selectors-4');
             }
         });
     });