refactor: Update CSS module syntax definitions and remove deprecated selectors

Author: mdevils

src/syntax-definitions.ts

@@ -187,6 +187,9 @@ function mergeSection<T>(values: {[K in keyof T]-?: MergeMethod<T[K]>}): MergeMe
         }
         const result = {...base};
         for (const [key, value] of Object.entries(extension) as [keyof T, T[keyof T]][]) {
+            if (key === 'latest') {
+                continue;
+            }
             const mergeSchema = values[key];
             result[key] = mergeSchema(base[key], value) as never;
         }
@@ -393,7 +396,6 @@ const selectors4SyntaxDefinition = extendSyntaxDefinition(selectors3SyntaxDefini
     pseudoElements: {
         definitions: {
             NoArgument: ['marker'],
-            String: ['highlight', 'cue'],
             Selector: ['part']
         }
     }
@@ -452,13 +454,15 @@ export const cssModules = {
         }
     },
     'css-position-4': {
+        latest: true,
         pseudoClasses: {
             definitions: {
                 NoArgument: ['sticky', 'fixed', 'absolute', 'relative', 'static', 'initial']
             }
         }
     },
     'css-scoping-1': {
+        latest: true,
         pseudoClasses: {
             definitions: {
                 NoArgument: ['host', 'host-context'],
@@ -472,35 +476,28 @@ export const cssModules = {
         }
     },
     'css-pseudo-4': {
-        pseudoClasses: {
-            definitions: {
-                NoArgument: [
-                    'focus-visible',
-                    'focus-within',
-                    'target-within',
-                    'blank',
-                    'user-invalid',
-                    'user-valid'
-                ],
-                Selector: ['has', 'is', 'where', 'not']
-            }
-        },
+        latest: true,
         pseudoElements: {
             definitions: {
                 NoArgument: [
                     'marker',
                     'selection',
                     'target-text',
+                    'search-text',
                     'spelling-error',
                     'grammar-error',
-                    'backdrop'
+                    'backdrop',
+                    'file-selector-button',
+                    'prefix',
+                    'postfix',
+                    'placeholder',
+                    'details-content'
                 ],
-                String: ['highlight', 'cue'],
-                Selector: ['part']
+                String: ['highlight']
             }
         }
     }
-} satisfies Record<string, SyntaxDefinition>;
+} satisfies Record<string, SyntaxDefinition & {latest?: true}>;
 
 /**
  * CSS Module name.

test/modules.test.ts

@@ -264,7 +264,7 @@ describe('CSS Modules', () => {
             const parse = createParser({
                 modules: ['css-pseudo-4']
             });
-            
+
             // Simple pseudo-classes
             expect(parse(':focus-visible')).toEqual(
                 ast.selector({
@@ -275,7 +275,7 @@ describe('CSS Modules', () => {
                     ]
                 })
             );
-            
+
             expect(parse(':blank')).toEqual(
                 ast.selector({
                     rules: [
@@ -285,7 +285,7 @@ describe('CSS Modules', () => {
                     ]
                 })
             );
-            
+
             // Functional pseudo-classes
             expect(parse(':has(> img)')).toEqual(
                 ast.selector({
@@ -308,7 +308,7 @@ describe('CSS Modules', () => {
                     ]
                 })
             );
-            
+
             expect(parse(':is(h1, h2, h3)')).toEqual(
                 ast.selector({
                     rules: [
@@ -336,12 +336,12 @@ describe('CSS Modules', () => {
                 })
             );
         });
-        
+
         it('should parse pseudo-4 pseudo-elements', () => {
             const parse = createParser({
                 modules: ['css-pseudo-4']
             });
-            
+
             // Simple pseudo-elements
             expect(parse('::marker')).toEqual(
                 ast.selector({
@@ -352,7 +352,7 @@ describe('CSS Modules', () => {
                     ]
                 })
             );
-            
+
             expect(parse('::selection')).toEqual(
                 ast.selector({
                     rules: [
@@ -362,7 +362,7 @@ describe('CSS Modules', () => {
                     ]
                 })
             );
-            
+
             expect(parse('::target-text')).toEqual(
                 ast.selector({
                     rules: [
@@ -372,7 +372,7 @@ describe('CSS Modules', () => {
                     ]
                 })
             );
-            
+
             // String argument pseudo-elements
             expect(parse('::highlight(example)')).toEqual(
                 ast.selector({
@@ -388,7 +388,7 @@ describe('CSS Modules', () => {
                     ]
                 })
             );
-            
+
             // Selector argument pseudo-elements
             expect(parse('::part(button)')).toEqual(
                 ast.selector({
@@ -411,7 +411,7 @@ describe('CSS Modules', () => {
                 })
             );
         });
-        
+
         it('should reject pseudo-4 selectors when module is not enabled', () => {
             const parse = createParser({
                 syntax: {
@@ -423,7 +423,7 @@ describe('CSS Modules', () => {
                     }
                 }
             });
-            
+
             expect(() => parse(':focus-visible')).toThrow('Unknown pseudo-class: "focus-visible".');
             expect(() => parse(':has(> img)')).toThrow('Unknown pseudo-class: "has".');
             expect(() => parse('::marker')).toThrow('Unknown pseudo-element "marker".');
@@ -481,12 +481,12 @@ describe('CSS Modules', () => {
                 })
             );
         });
-        
+
         it('should support combining css-position and css-pseudo modules', () => {
             const parse = createParser({
                 modules: ['css-position-3', 'css-pseudo-4']
             });
-            
+
             // Position pseudo-class
             expect(parse(':sticky')).toEqual(
                 ast.selector({
@@ -497,18 +497,7 @@ describe('CSS Modules', () => {
                     ]
                 })
             );
-            
-            // Pseudo-4 pseudo-class
-            expect(parse(':focus-visible')).toEqual(
-                ast.selector({
-                    rules: [
-                        ast.rule({
-                            items: [ast.pseudoClass({name: 'focus-visible'})]
-                        })
-                    ]
-                })
-            );
-            
+
             // Pseudo-4 pseudo-element
             expect(parse('::marker')).toEqual(
                 ast.selector({
@@ -519,7 +508,7 @@ describe('CSS Modules', () => {
                     ]
                 })
             );
-            
+
             // Complex selector using both modules
             expect(parse('div:sticky:has(> img::marker)')).toEqual(
                 ast.selector({