feat: Add support for CSS feature modules in parser configuration

Author: mdevils

src/index.ts

@@ -21,4 +21,4 @@ export {
     AstWildcardNamespace,
     AstWildcardTag
 } from './ast.js';
-export {CssLevel, SyntaxDefinition} from './syntax-definitions.js';
+export {CssLevel, CssFeature, SyntaxDefinition} from './syntax-definitions.js';

src/parser.ts

@@ -23,7 +23,9 @@ import {
     PseudoSignature
 } from './pseudo-signatures.js';
 import {
+    CssFeature,
     CssLevel,
+    cssFeatures,
     cssSyntaxDefinitions,
     extendSyntaxDefinition,
     getXmlOptions,
@@ -74,14 +76,30 @@ export function createParser(
          * Default: `true`
          */
         strict?: boolean;
+        /**
+         * Additional CSS features to include in the syntax definition.
+         * These are specific CSS modules that add new selectors or modify existing ones.
+         * @example ['css-position-3', 'css-scoping-1']
+         */
+        features?: CssFeature[];
     } = {}
 ): Parser {
-    const {syntax = 'latest', substitutes, strict = true} = options;
+    const {syntax = 'latest', substitutes, strict = true, features} = options;
     let syntaxDefinition: SyntaxDefinition = typeof syntax === 'object' ? syntax : cssSyntaxDefinitions[syntax];
 
     if (syntaxDefinition.baseSyntax) {
         syntaxDefinition = extendSyntaxDefinition(cssSyntaxDefinitions[syntaxDefinition.baseSyntax], syntaxDefinition);
     }
+    
+    // Apply additional features if specified
+    if (features && features.length > 0) {
+        for (const feature of features) {
+            const featureSyntax = cssFeatures[feature];
+            if (featureSyntax) {
+                syntaxDefinition = extendSyntaxDefinition(syntaxDefinition, featureSyntax);
+            }
+        }
+    }
 
     const [tagNameEnabled, tagNameWildcardEnabled] = syntaxDefinition.tag
         ? [true, Boolean(getXmlOptions(syntaxDefinition.tag).wildcard)]

src/syntax-definitions.ts

@@ -4,6 +4,13 @@ export type PseudoClassType = Exclude<'NoArgument' | AstPseudoClassArgument['typ
 export type PseudoElementType = Exclude<'NoArgument' | AstPseudoElementArgument['type'], 'Substitution'>;
 export type CssLevel = 'css1' | 'css2' | 'css3' | 'selectors-3' | 'selectors-4' | 'latest' | 'progressive';
 
+/**
+ * CSS Feature module name.
+ * @example 'css-position-3'
+ * @example 'css-scoping-1'
+ */
+export type CssFeature = string;
+
 /**
  * CSS Selector Syntax Definition can be used to define custom CSS selector parsing rules.
  */
@@ -404,3 +411,39 @@ export const cssSyntaxDefinitions: Record<CssLevel, SyntaxDefinition> = {
     latest: selectors4SyntaxDefinition,
     progressive: progressiveSyntaxDefinition
 };
+
+/**
+ * CSS Feature modules with their syntax definitions.
+ * These can be used to extend the parser with specific CSS features.
+ * 
+ * @example
+ * // Using the css-position-3 feature
+ * createParser({ features: ['css-position-3'] })
+ */
+export const cssFeatures: Record<string, SyntaxDefinition> = {
+    'css-position-3': {
+        pseudoClasses: {
+            definitions: {
+                NoArgument: ['sticky', 'fixed', 'absolute', 'relative', 'static']
+            }
+        }
+    },
+    'css-position-4': {
+        pseudoClasses: {
+            definitions: {
+                NoArgument: ['sticky', 'fixed', 'absolute', 'relative', 'static', 'initial']
+            }
+        }
+    },
+    'css-scoping-1': {
+        pseudoClasses: {
+            definitions: {
+                NoArgument: ['host', 'host-context'],
+                Selector: ['host', 'host-context']
+            }
+        },
+        pseudoElements: {
+            definitions: ['slotted']
+        }
+    }
+};