feat: Add support for CSS Shadow Parts module with ::part() pseudo-element

mdevils · mdevils · commit 6dbe1320cc4c · 2025-03-16T23:06:50.000+01:00
diff --git a/src/syntax-definitions.ts b/src/syntax-definitions.ts
@@ -496,6 +496,14 @@ export const cssModules = {
                 String: ['highlight']
             }
         }
+    },
+    'css-shadow-parts-1': {
+        latest: true,
+        pseudoElements: {
+            definitions: {
+                Selector: ['part']
+            }
+        }
     }
 } satisfies Record<string, SyntaxDefinition & {latest?: true}>;
 
diff --git a/test/modules.test.ts b/test/modules.test.ts
@@ -431,6 +431,68 @@ describe('CSS Modules', () => {
         });
     });
 
+    describe('css-shadow-parts-1', () => {
+        it('should parse ::part pseudo-element', () => {
+            const parse = createParser({
+                modules: ['css-shadow-parts-1']
+            });
+
+            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'})]
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            );
+
+            expect(parse('::part(button-primary)')).toEqual(
+                ast.selector({
+                    rules: [
+                        ast.rule({
+                            items: [
+                                ast.pseudoElement({
+                                    name: 'part',
+                                    argument: ast.selector({
+                                        rules: [
+                                            ast.rule({
+                                                items: [ast.tagName({name: 'button-primary'})]
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            );
+        });
+
+        it('should reject ::part when module is not enabled', () => {
+            const parse = createParser({
+                syntax: {
+                    pseudoElements: {
+                        unknown: 'reject'
+                    }
+                }
+            });
+
+            expect(() => parse('::part(button)')).toThrow('Unknown pseudo-element "part".');
+        });
+    });
+
     describe('Multiple modules', () => {
         it('should support multiple modules at once', () => {
             const parse = createParser({

Original file line number	Diff line number	Diff line change
`@@ -496,6 +496,14 @@ export const cssModules = {`
`496`	`496`	`String: ['highlight']`
`497`	`497`	`}`
`498`	`498`	`}`
	`499`	`+ },`
	`500`	`+ 'css-shadow-parts-1': {`
	`501`	`+ latest: true,`
	`502`	`+ pseudoElements: {`
	`503`	`+ definitions: {`
	`504`	`+ Selector: ['part']`
	`505`	`+ }`
	`506`	`+ }`
`499`	`507`	`}`
`500`	`508`	`} satisfies Record<string, SyntaxDefinition & {latest?: true}>;`
`501`	`509`