feat: Add "modules" property to SyntaxDefinition and include latest CSS modules

mdevils · mdevils · commit cd566833006c · 2025-03-16T23:11:35.000+01:00
diff --git a/src/parser.ts b/src/parser.ts
@@ -91,7 +91,7 @@ export function createParser(
         syntaxDefinition = extendSyntaxDefinition(cssSyntaxDefinitions[syntaxDefinition.baseSyntax], syntaxDefinition);
     }
 
-    // Apply additional modules if specified
+    // Apply additional modules if specified from options
     if (modules && modules.length > 0) {
         for (const module of modules) {
             const moduleSyntax = cssModules[module];
@@ -100,6 +100,16 @@ export function createParser(
             }
         }
     }
+    
+    // Apply modules from syntax definition
+    if (syntaxDefinition.modules && syntaxDefinition.modules.length > 0) {
+        for (const module of syntaxDefinition.modules) {
+            const moduleSyntax = cssModules[module];
+            if (moduleSyntax) {
+                syntaxDefinition = extendSyntaxDefinition(syntaxDefinition, moduleSyntax);
+            }
+        }
+    }
 
     const [tagNameEnabled, tagNameWildcardEnabled] = syntaxDefinition.tag
         ? [true, Boolean(getXmlOptions(syntaxDefinition.tag).wildcard)]
diff --git a/src/syntax-definitions.ts b/src/syntax-definitions.ts
@@ -13,6 +13,12 @@ export interface SyntaxDefinition {
      * If not specified, syntax will be defined from scratch.
      */
     baseSyntax?: CssLevel;
+    /**
+     * Additional CSS modules to include in the syntax definition.
+     * These are specific CSS modules that add new selectors or modify existing ones.
+     * @example ['css-position-4', 'css-scoping-1']
+     */
+    modules?: CssModule[];
     /**
      * CSS Tag (type).
      * @example div
@@ -243,6 +249,7 @@ function mergeDefinitions<T>(
 export const extendSyntaxDefinition: MergeMethod<SyntaxDefinition> = withNoNegative(
     mergeSection<SyntaxDefinition>({
         baseSyntax: replaceValueIfSpecified,
+        modules: concatArray,
         tag: withPositive(
             defaultXmlOptions,
             mergeSection({
@@ -398,7 +405,14 @@ const selectors4SyntaxDefinition = extendSyntaxDefinition(selectors3SyntaxDefini
             NoArgument: ['marker'],
             Selector: ['part']
         }
-    }
+    },
+    // Include all the latest modules
+    modules: [
+        'css-position-4',
+        'css-scoping-1',
+        'css-pseudo-4',
+        'css-shadow-parts-1'
+    ]
 });
 
 const progressiveSyntaxDefinition = extendSyntaxDefinition(selectors4SyntaxDefinition, {
diff --git a/test/modules.test.ts b/test/modules.test.ts
@@ -600,4 +600,117 @@ describe('CSS Modules', () => {
             );
         });
     });
+    
+    describe('Syntax definition with modules', () => {
+        it('should support modules defined in syntax definition', () => {
+            const parse = createParser({
+                syntax: {
+                    pseudoClasses: {
+                        unknown: 'reject'
+                    },
+                    pseudoElements: {
+                        unknown: 'reject'
+                    },
+                    modules: ['css-position-4', 'css-shadow-parts-1']
+                }
+            });
+            
+            // Should parse position-4 pseudo-classes
+            expect(parse(':initial')).toEqual(
+                ast.selector({
+                    rules: [
+                        ast.rule({
+                            items: [ast.pseudoClass({name: 'initial'})]
+                        })
+                    ]
+                })
+            );
+            
+            // Should parse shadow-parts-1 pseudo-elements
+            expect(parse('::part(button)')).toEqual(
+                ast.selector({
+                    rules: [
+                        ast.rule({
+                            items: [
+                                ast.pseudoElement({
+                                    name: 'part',
+                                    argument: ast.selector({
+                                        rules: [
+                                            ast.rule({
+                                                items: [ast.tagName({name: 'button'})]
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            );
+            
+            // Should reject pseudo-classes not in the modules
+            expect(() => parse(':focus-visible')).toThrow('Unknown pseudo-class: "focus-visible".');
+        });
+        
+        it('should support latest syntax with all latest modules', () => {
+            const parse = createParser({
+                syntax: 'latest'
+            });
+            
+            // Should parse position-4 pseudo-classes
+            expect(parse(':initial')).toEqual(
+                ast.selector({
+                    rules: [
+                        ast.rule({
+                            items: [ast.pseudoClass({name: 'initial'})]
+                        })
+                    ]
+                })
+            );
+            
+            // Should parse shadow-parts-1 pseudo-elements
+            expect(parse('::part(button)')).toEqual(
+                ast.selector({
+                    rules: [
+                        ast.rule({
+                            items: [
+                                ast.pseudoElement({
+                                    name: 'part',
+                                    argument: ast.selector({
+                                        rules: [
+                                            ast.rule({
+                                                items: [ast.tagName({name: 'button'})]
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            );
+            
+            // Should parse pseudo-4 pseudo-elements
+            expect(parse('::marker')).toEqual(
+                ast.selector({
+                    rules: [
+                        ast.rule({
+                            items: [ast.pseudoElement({name: 'marker'})]
+                        })
+                    ]
+                })
+            );
+            
+            // Should parse scoping-1 pseudo-classes
+            expect(parse(':host')).toEqual(
+                ast.selector({
+                    rules: [
+                        ast.rule({
+                            items: [ast.pseudoClass({name: 'host'})]
+                        })
+                    ]
+                })
+            );
+        });
+    });
 });

Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@ export function createParser(`
`91`	`91`	`syntaxDefinition = extendSyntaxDefinition(cssSyntaxDefinitions[syntaxDefinition.baseSyntax], syntaxDefinition);`
`92`	`92`	`}`
`93`	`93`
`94`		`- // Apply additional modules if specified`
	`94`	`+ // Apply additional modules if specified from options`
`95`	`95`	`if (modules && modules.length > 0) {`
`96`	`96`	`for (const module of modules) {`
`97`	`97`	`const moduleSyntax = cssModules[module];`
`@@ -100,6 +100,16 @@ export function createParser(`
`100`	`100`	`}`
`101`	`101`	`}`
`102`	`102`	`}`
	`103`	`+`
	`104`	`+ // Apply modules from syntax definition`
	`105`	`+ if (syntaxDefinition.modules && syntaxDefinition.modules.length > 0) {`
	`106`	`+ for (const module of syntaxDefinition.modules) {`
	`107`	`+ const moduleSyntax = cssModules[module];`
	`108`	`+ if (moduleSyntax) {`
	`109`	`+ syntaxDefinition = extendSyntaxDefinition(syntaxDefinition, moduleSyntax);`
	`110`	`+ }`
	`111`	`+ }`
	`112`	`+ }`
`103`	`113`
`104`	`114`	`const [tagNameEnabled, tagNameWildcardEnabled] = syntaxDefinition.tag`
`105`	`115`	`? [true, Boolean(getXmlOptions(syntaxDefinition.tag).wildcard)]`