@master/css 2.0.0-rc.25 → 2.0.0-rc.27

package/dist/rule.cjs

@@ -1,25 +1,24 @@
 'use strict';
 
-var startSymbol = require('./constants/start-symbol.cjs');
 var cssEscape = require('./shared/utils/css-escape.cjs');
 var layer = require('./layer.cjs');
-var baseUnitRegex = require('./constants/base-unit-regex.cjs');
+var common = require('./common.cjs');
 
-const atRuleRegExp = /^(media|supports|page|font-face|keyframes|counter-style|font-feature-values|property|layer|container)(?=\||{|\(|$)/;
 class Rule {
     className;
+    RegisteredRule;
     css;
     at;
     priority;
     natives;
     order;
     layer;
-    stateToken;
     declarations;
     animationNames;
     variableNames;
     constructor(className, RegisteredRule, css){
         this.className = className;
+        this.RegisteredRule = RegisteredRule;
         this.css = css;
         this.at = {};
         this.priority = -1;
@@ -36,20 +35,20 @@ class Rule {
                         const functionDefinition = functions && functions[eachValueComponent.name];
                         if (functionDefinition?.transform && !eachValueComponent.bypassTransform) {
                             const result = functionDefinition.transform.call(this, this.resolveValue(eachValueComponent.children, functionDefinition.unit ?? unit, bypassVariableNames, bypassParsing || eachValueComponent.name === 'calc'), bypassVariableNames);
-                            currentValue += eachValueComponent.text = typeof result === 'string' ? result : this.resolveValue(result, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing);
+                            currentValue += eachValueComponent.token = eachValueComponent.text = typeof result === 'string' ? result : this.resolveValue(result, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing);
                         } else {
-                            currentValue += eachValueComponent.text = eachValueComponent.name + eachValueComponent.symbol + this.resolveValue(eachValueComponent.children, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing) + startSymbol.START_SYMBOLS[eachValueComponent.symbol];
+                            currentValue += eachValueComponent.token = eachValueComponent.text = eachValueComponent.name + eachValueComponent.symbol + this.resolveValue(eachValueComponent.children, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing) + common.VALUE_DELIMITERS[eachValueComponent.symbol];
                         }
                         break;
-                    // todo: 應挪到 parseValue 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
+                    // todo: 應挪到 parseValues 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
                     case 'variable':
                         // eslint-disable-next-line no-case-declarations
                         const variable = this.css.variables[eachValueComponent.name];
                         if (variable) {
                             const handleVariable = (normalHandler, varHandler)=>{
-                                if (variable.themes) {
-                                    if (this.theme) {
-                                        const themeVariable = variable.themes[this.theme] ?? variable;
+                                if (variable.modes) {
+                                    if (this.mode) {
+                                        const themeVariable = variable.modes[this.mode] ?? variable;
                                         if (themeVariable?.value) {
                                             normalHandler(themeVariable);
                                         }
@@ -70,7 +69,7 @@ class Rule {
                                 case 'string':
                                     handleVariable((variable)=>{
                                         const valueComponents = [];
-                                        this.parseValue(valueComponents, 0, variable.value, unit, '', undefined, bypassParsing, [
+                                        this.parseValues(valueComponents, 0, variable.value, unit, '', undefined, bypassParsing, [
                                             ...bypassVariableNames,
                                             eachValueComponent.name
                                         ]);
@@ -85,9 +84,9 @@ class Rule {
                                 case 'number':
                                     handleVariable((variable)=>{
                                         if (bypassParsing) {
-                                            currentValue += eachValueComponent.text = variable.value;
+                                            currentValue += eachValueComponent.text = String(variable.value);
                                         } else {
-                                            const valueComponent = this.parseValueComponent(variable.value, unit);
+                                            const valueComponent = this.parseValue(variable.value, unit);
                                             currentValue += eachValueComponent.text = valueComponent.value + (valueComponent.unit ?? '');
                                         }
                                     }, ()=>{
@@ -121,7 +120,7 @@ class Rule {
             }
             return currentValue;
         };
-        this.parseValue = (currentValueComponents, i, value, unit, endSymbol, parentFunctionName, bypassParsing = false, bypassVariableNames = [])=>{
+        this.parseValues = (currentValueComponents, i, value, unit, endSymbol, parentFunctionName, bypassParsing = false, bypassVariableNames = [])=>{
             const root = parentFunctionName === undefined;
             const isVarFunction = !root && (parentFunctionName.endsWith('$') || parentFunctionName.endsWith('var'));
             const checkIsString = (value)=>value === '\'' || value === '"';
@@ -146,7 +145,8 @@ class Rule {
                                     const valueComponent = {
                                         type: 'variable',
                                         name,
-                                        variable: this.css.variables[name]
+                                        variable: this.css.variables[name],
+                                        token: currentValue
                                     };
                                     if (alpha) valueComponent.alpha = alpha;
                                     currentValueComponents.push(valueComponent);
@@ -154,14 +154,14 @@ class Rule {
                             }
                         };
                         handleVariable(currentValue);
-                        if (!handled && this.colored) {
+                        if (!handled) {
                             const [colorName, alpha] = currentValue.split('/');
                             handleVariable(colorName, alpha);
                         }
                     }
                     if (!handled) {
                         if (!isVarFunction) {
-                            const result = baseUnitRegex.BASE_UNIT_REGEX.exec(currentValue);
+                            const result = common.BASE_UNIT_REGEX.exec(currentValue);
                             if (result) {
                                 currentValue = String(+result[1] * (this.css.config.baseUnit ?? 1));
                             }
@@ -169,10 +169,14 @@ class Rule {
                         if (bypassParsing) {
                             currentValueComponents.push({
                                 type: 'string',
-                                value: currentValue
+                                value: currentValue,
+                                token: currentValue
                             });
                         } else {
-                            currentValueComponents.push(this.parseValueComponent(currentValue, unit));
+                            currentValueComponents.push({
+                                ...this.parseValue(currentValue, unit),
+                                token: currentValue
+                            });
                         }
                     }
                     currentValue = '';
@@ -197,27 +201,25 @@ class Rule {
                         parse();
                     }
                     return i;
-                } else if (!isString && val in startSymbol.START_SYMBOLS) {
+                } else if (!isString && val in common.VALUE_DELIMITERS) {
                     const functionName = currentValue;
                     const newValueComponent = {
                         type: 'function',
                         name: functionName,
                         symbol: val,
-                        children: []
+                        children: [],
+                        token: ''
                     };
                     currentValueComponents.push(newValueComponent);
                     currentValue = '';
                     const functionDefinition = val === '(' ? this.css.config.functions?.[functionName] : undefined;
-                    if (!this.colored && functionDefinition?.colored) {
-                        // @ts-ignore
-                        this.colored = true;
-                    }
-                    i = this.parseValue(newValueComponent.children, ++i, value, functionDefinition?.unit ?? unit, startSymbol.START_SYMBOLS[val], functionName || parentFunctionName || '', bypassParsing || functionName === 'calc');
+                    i = this.parseValues(newValueComponent.children, ++i, value, functionDefinition?.unit ?? unit, common.VALUE_DELIMITERS[val], functionName || parentFunctionName || '', bypassParsing || functionName === 'calc');
                 } else if ((val === '|' || val === ' ') && endSymbol !== '}' && (!isString || parentFunctionName === 'path')) {
                     parse();
                     currentValueComponents.push({
                         type: 'separator',
-                        value: ' '
+                        value: ' ',
+                        token: val
                     });
                 } else {
                     if (!isString) {
@@ -232,7 +234,8 @@ class Rule {
                             currentValueComponents.push({
                                 type: 'separator',
                                 value: val,
-                                text: (val === ',' ? '' : ' ') + val + (val === ',' ? '' : ' ')
+                                text: (val === ',' ? '' : ' ') + val + (val === ',' ? '' : ' '),
+                                token: val
                             });
                             continue;
                         } else if (root && (val === '#' && (currentValue || currentValueComponents.length && currentValueComponents[currentValueComponents.length - 1]['type'] !== 'separator') || [
@@ -257,22 +260,21 @@ class Rule {
         };
         Object.assign(this, RegisteredRule);
         const { id, definition } = RegisteredRule;
-        const { analyze, transformValue, declare, transformValueComponents, create, layer: layer$1, unit, colored } = definition;
+        const { analyze, transformValue, declare, transformValueComponents, create, layer: layer$1, unit } = definition;
         this.layer = layer$1;
-        this.colored = !!colored;
         if (!definition.unit) definition.unit = '';
         if (!definition.separators) definition.separators = [
             ','
         ];
-        const { scope, important, themeDriver } = css.config;
-        const { selectors, mediaQueries, stylesBy, animations } = css;
+        const { scope, important, modeDriver } = css.config;
+        const { selectors, queries, stylesBy, animations } = css;
         const classNames = stylesBy[className];
         if (create) create.call(this, className);
         // 1. value / selectorToken
         this.declarations = definition.declarations;
         let stateToken;
         let prefixToken;
-        if (layer$1 === layer.Layer.Semantic) {
+        if (layer$1 === layer.Utility) {
             // TODO: id 使用其他方式傳遞
             stateToken = className.slice(id.length - 1);
         } else {
@@ -281,11 +283,13 @@ class Rule {
                 [valueToken, prefixToken] = analyze.call(this, className);
             } else {
                 const indexOfColon = className.indexOf(':');
-                this.prefix = className.slice(0, indexOfColon + 1);
+                this.keyToken = className.slice(0, indexOfColon + 1);
                 valueToken = className.slice(indexOfColon + 1);
             }
             this.valueComponents = [];
-            stateToken = valueToken.slice(this.parseValue(this.valueComponents, 0, valueToken, unit, '', undefined, false, id === 'animation' || id === 'animation-name' ? Object.keys(this.css.animations) : []));
+            const parsedValueIndex = this.parseValues(this.valueComponents, 0, valueToken, unit, '', undefined, false, definition.includeAnimations ? Object.keys(this.css.animations) : []);
+            this.valueToken = valueToken.slice(0, parsedValueIndex);
+            stateToken = valueToken.slice(parsedValueIndex);
         }
         // 2. !important
         if (stateToken[0] === '!') {
@@ -450,110 +454,118 @@ class Rule {
         // 5. atTokens
         for(let i = 1; i < stateTokens.length; i++){
             const atToken = stateTokens[i];
+            this.atToken = (this.atToken || '') + '@' + atToken;
             if (atToken) {
                 if (atToken === 'rtl' || atToken === 'ltr') {
                     this.direction = atToken;
                 } else {
-                    let type = '';
-                    let queryText;
-                    const atRuleResult = atRuleRegExp.exec(atToken);
+                    let queryType;
+                    const atComponents = [];
+                    // x font-face, counter-style, keyframes, font-feature-values, property, layer
+                    const queryTypeRegExp = /^(media|supports|container)/;
+                    const atRuleResult = queryTypeRegExp.exec(atToken);
                     if (atRuleResult) {
-                        type = atRuleResult[1];
-                        queryText = atToken.slice(type.length);
-                    } else {
-                        this.media = {
+                        queryType = atRuleResult[1];
+                        atComponents.push({
+                            type: 'arbitrary',
                             token: atToken,
-                            features: {}
-                        };
-                        const queryTexts = [];
-                        const analyzeToken = (typeOrFeatureToken)=>{
-                            if (typeOrFeatureToken === 'all' || typeOrFeatureToken === 'print' || typeOrFeatureToken === 'screen' || typeOrFeatureToken === 'speech') {
-                                this.media.type = typeOrFeatureToken;
-                            } else if (typeOrFeatureToken.startsWith('')) {
-                                if (typeOrFeatureToken === 'landscape' || typeOrFeatureToken === 'portrait') {
-                                    queryTexts.push('(orientation:' + typeOrFeatureToken + ')');
-                                } else if (typeOrFeatureToken === 'motion' || typeOrFeatureToken === 'reduced-motion') {
-                                    queryTexts.push('(prefers-reduced-motion:' + (typeOrFeatureToken === 'motion' ? 'no-preference' : 'reduce') + ')');
+                            value: atToken.slice(queryType.length).replace(/\|/g, ' ')
+                        });
+                    } else {
+                        const analyzeToken = (atComponentToken)=>{
+                            if (atComponentToken === '&') {
+                                atComponents.push({
+                                    type: 'operator',
+                                    token: atComponentToken,
+                                    value: 'and'
+                                });
+                            } else if (atComponentToken.startsWith('')) {
+                                const targetQuery = queries[atComponentToken];
+                                if (targetQuery && typeof targetQuery === 'string') {
+                                    const match = targetQuery.match(queryTypeRegExp);
+                                    queryType = match ? match[1] : '';
+                                    if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetQuery}'`);
+                                    atComponents.push({
+                                        type: 'arbitrary',
+                                        value: targetQuery.slice(match ? match[1].length + 1 : 0)
+                                    });
                                 } else {
-                                    const targetMediaQuery = mediaQueries[typeOrFeatureToken];
-                                    if (targetMediaQuery && typeof targetMediaQuery === 'string') {
-                                        queryTexts.push(targetMediaQuery);
-                                    } else {
-                                        let featureName = '';
-                                        let extremumOperator = '';
-                                        let correction = 0;
-                                        if (typeOrFeatureToken.startsWith('<=')) {
-                                            extremumOperator = '<=';
-                                            featureName = 'max-width';
-                                        } else if (typeOrFeatureToken.startsWith('>=') || targetMediaQuery) {
-                                            extremumOperator = '>=';
-                                            featureName = 'min-width';
-                                        } else if (typeOrFeatureToken.startsWith('>')) {
-                                            extremumOperator = '>';
-                                            featureName = 'min-width';
-                                            correction = .02;
-                                        } else if (typeOrFeatureToken.startsWith('<')) {
-                                            extremumOperator = '<';
-                                            featureName = 'max-width';
-                                            correction = -.02;
-                                        }
-                                        const token = extremumOperator ? typeOrFeatureToken.replace(extremumOperator, '') : typeOrFeatureToken;
-                                        const viewport = mediaQueries[token];
-                                        switch(featureName){
-                                            case 'max-width':
-                                            case 'min-width':
-                                                // eslint-disable-next-line no-case-declarations
-                                                let featureComponent = {};
-                                                if (typeof viewport === 'number') {
-                                                    featureComponent = {
-                                                        type: 'number',
-                                                        value: viewport + correction,
-                                                        unit: 'px'
-                                                    };
-                                                } else {
-                                                    featureComponent = this.parseValueComponent(token, 'px');
-                                                    if (featureComponent.type === 'number' && featureComponent.unit === 'px') {
-                                                        featureComponent.value += correction;
-                                                    }
-                                                }
-                                                this.media.features[featureName] = featureComponent;
-                                                if (featureComponent.type === 'number') {
-                                                    queryTexts.push('(' + featureName + ':' + (featureComponent.value + featureComponent.unit) + ')');
+                                    // todo: container queries
+                                    queryType = 'media';
+                                    let featureName = '';
+                                    let extremumOperator = '';
+                                    let correction = 0;
+                                    if (atComponentToken.startsWith('<=')) {
+                                        extremumOperator = '<=';
+                                        featureName = 'max-width';
+                                    } else if (atComponentToken.startsWith('>=') || targetQuery) {
+                                        extremumOperator = '>=';
+                                        featureName = 'min-width';
+                                    } else if (atComponentToken.startsWith('>')) {
+                                        extremumOperator = '>';
+                                        featureName = 'min-width';
+                                        correction = .02;
+                                    } else if (atComponentToken.startsWith('<')) {
+                                        extremumOperator = '<';
+                                        featureName = 'max-width';
+                                        correction = -.02;
+                                    }
+                                    const token = extremumOperator ? atComponentToken.replace(extremumOperator, '') : atComponentToken;
+                                    const viewport = queries[token];
+                                    switch(featureName){
+                                        case 'max-width':
+                                        case 'min-width':
+                                            // eslint-disable-next-line no-case-declarations
+                                            if (typeof viewport === 'number') {
+                                                atComponents.push({
+                                                    type: 'feature',
+                                                    name: featureName,
+                                                    valueType: 'number',
+                                                    value: viewport + correction,
+                                                    unit: 'px'
+                                                });
+                                            } else {
+                                                const valueComponent = this.parseValue(token, 'px');
+                                                if (valueComponent.type === 'number') {
+                                                    atComponents.push({
+                                                        type: 'feature',
+                                                        name: featureName,
+                                                        valueType: 'number',
+                                                        value: valueComponent.value + correction,
+                                                        unit: valueComponent.unit
+                                                    });
                                                 } else {
-                                                    queryTexts.push('(' + featureName + ':' + featureComponent.value + ')');
+                                                    atComponents.push({
+                                                        type: 'feature',
+                                                        name: featureName,
+                                                        valueType: 'string',
+                                                        value: token
+                                                    });
                                                 }
-                                                break;
-                                        }
+                                            }
+                                            break;
                                     }
                                 }
                             }
                         };
                         const isAmpersandIncluded = atToken.includes('&');
                         if (isAmpersandIncluded) {
-                            const typeOrFeatureTokens = atToken.split('&');
-                            for (const typeOrFeatureToken of typeOrFeatureTokens){
-                                analyzeToken(typeOrFeatureToken);
+                            const typeOrFeatureTokens = atToken.split(/(&|,)/);
+                            for (const atComponentToken of typeOrFeatureTokens){
+                                analyzeToken(atComponentToken);
                             }
                         } else {
                             analyzeToken(atToken);
                         }
-                        if (this.media.type) {
-                            queryText = this.media.type;
-                        }
-                        if (queryTexts.length) {
-                            queryText = queryTexts.join(' and ');
-                        }
-                        if (!queryText) {
+                        if (!atComponents.length) {
                             if (!isAmpersandIncluded) {
-                                this.theme = atToken;
+                                this.mode = atToken;
                                 continue;
                             }
-                        } else {
-                            type = 'media';
                         }
                     }
-                    if (queryText) {
-                        this.at[type] = (type in this.at ? this.at[type] + ' and ' : '') + queryText.replace(/\|/g, ' ');
+                    if (queryType) {
+                        this.at[queryType] = atComponents;
                     }
                 }
             }
@@ -591,14 +603,14 @@ class Rule {
                 }
                 propertiesText.push(propertyText + ((this.important || important) && !propertyText.endsWith('!important') ? '!important' : ''));
             };
-            const prefix = propertyName + ':';
+            const keyToken = propertyName + ':';
             const declarations = this.declarations[propertyName];
             if (Array.isArray(declarations)) {
                 for (const value of declarations){
-                    push(prefix + String(value));
+                    push(keyToken + String(value));
                 }
             } else {
-                push(prefix + String(declarations));
+                push(keyToken + String(declarations));
             }
         }
         // 創建 Natives
@@ -612,7 +624,7 @@ class Rule {
                     const prefixSelectors = this.vendorPrefixSelectors[prefixSelectorVendor];
                     const suffixSelectors = this.vendorSuffixSelectors[eachSuffixSelectorVendor];
                     const prefixTexts = prefixSelectors.map((eachPrefixSelector)=>eachPrefixSelector + prefixText);
-                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>(this.theme && themeDriver !== 'media' ? themeDriver === 'host' ? `:host(.${this.theme}) ` : `.${this.theme} ` : '') + (scope ? scope + ' ' : '') + eachPrefixText).reduce((arr, eachPrefixText)=>{
+                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>(this.mode && modeDriver !== 'media' ? modeDriver === 'host' ? `:host(.${this.mode}) ` : `.${this.mode} ` : '') + (scope ? scope + ' ' : '') + eachPrefixText).reduce((arr, eachPrefixText)=>{
                             arr.push(suffixSelectors.reduce((_arr, eachSuffixSelector)=>{
                                 _arr.push(eachPrefixText + '.' + cssEscape(name) + eachSuffixSelector);
                                 return _arr;
@@ -621,10 +633,10 @@ class Rule {
                         }, []).join(',');
                     let cssText = getCssText(className) + (classNames ? classNames.reduce((str, className)=>str + ',' + getCssText(className), '') : '') + '{' + propertiesText.join(';') + '}';
                     for (const key of Object.keys(this.at).sort((_a, b)=>b === 'supports' ? -1 : 1)){
-                        cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key] + '{' + cssText + '}';
+                        cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key].map((eachAtComponent)=>this.resolveAtComponent(eachAtComponent)).join(' ') + '{' + cssText + '}';
                     }
-                    if (this.theme && themeDriver === 'media') {
-                        cssText = `@media(prefers-color-scheme:${this.theme}){` + cssText + '}';
+                    if (this.mode && modeDriver === 'media') {
+                        cssText = `@media(prefers-color-scheme:${this.mode}){` + cssText + '}';
                     }
                     this.natives.push({
                         text: cssText
@@ -633,12 +645,22 @@ class Rule {
             }
         }
     }
+    resolveAtComponent(atComponent) {
+        switch(atComponent.type){
+            case 'arbitrary':
+                return atComponent.value;
+            case 'feature':
+                return '(' + atComponent.name + ':' + atComponent.value + (atComponent.unit || '') + ')';
+            case 'operator':
+                return atComponent.value;
+        }
+    }
     resolveValue;
     get text() {
         return this.natives.map((eachNative)=>eachNative.text).join('');
     }
-    parseValue;
-    parseValueComponent(token, unit = this.definition.unit) {
+    parseValues;
+    parseValue(token, unit = this.definition.unit) {
         const defaultUnit = unit ?? this.definition.unit;
         let newUnit = '';
         let value;
@@ -669,7 +691,7 @@ class Rule {
                     type: 'number'
                 };
             }
-            const matches = token.match(/^([+-.]?\d+(\.?\d+)?)(%|cm|mm|q|in|pt|pc|px|em|rem|ex|rex|cap|rcap|ch|rch|ic|ric|lh|rlh|vw|svw|lvw|dvw|vh|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax|cqw|cqh|cqi|cqb|cqmin|cqmax|deg|grad|rad|turn|s|ms|hz|khz|dpi|dpcm|dppx|x|fr|db|st)?$/);
+            const matches = token.match(common.UNIT_REGEX);
             // ['0.5deg', '0.5', 'deg', index: 0, input: '0.5deg', groups: undefined]
             if (matches) {
                 value = +matches[1];

package/dist/rule.d.ts

@@ -1,41 +1,68 @@
 import MasterCSS, { type Variable } from './core';
-import { Layer } from './layer';
+import Layer from './layer';
 import { type PropertiesHyphen } from 'csstype';
 export declare class Rule {
     readonly className: string;
+    readonly RegisteredRule: RegisteredRule;
     css: MasterCSS;
-    readonly at: Record<string, string>;
+    readonly at: Record<string, AtComponent[]>;
     readonly priority: number;
     readonly natives: NativeRule[];
     readonly order: number;
     readonly layer: Layer;
-    readonly stateToken: string;
     readonly declarations?: PropertiesHyphen;
     animationNames?: string[];
     variableNames?: string[];
     constructor(className: string, RegisteredRule: RegisteredRule, css: MasterCSS);
+    resolveAtComponent(atComponent: AtComponent): string;
     resolveValue: (valueComponents: ValueComponent[], unit: string, bypassVariableNames: string[], bypassParsing: boolean) => string;
     get text(): string;
-    parseValue: (currentValueComponents: ValueComponent[], i: number, value: string, unit: string, endSymbol: string, parentFunctionName?: string, bypassParsing?: boolean, bypassVariableNames?: string[]) => number;
-    parseValueComponent(token: string | number, unit?: any): StringValueComponent | NumericValueComponent;
+    parseValues: (currentValueComponents: ValueComponent[], i: number, value: string, unit: string, endSymbol: string, parentFunctionName?: string, bypassParsing?: boolean, bypassVariableNames?: string[]) => number;
+    parseValue(token: string | number, unit?: any): {
+        value: string;
+        type: 'string';
+    } | {
+        value: number;
+        unit: string;
+        type: 'number';
+    };
+}
+export type AtComponent = AtArbitraryComponent | AtFeatureComponent | AtOperatorComponent;
+export interface AtArbitraryComponent {
+    type: 'arbitrary';
+    token?: string;
+    value: string;
+}
+export interface AtFeatureComponent {
+    type: 'feature';
+    token?: string;
+    name: string;
+    valueType: 'number' | 'string';
+    value: string | number;
+    unit?: string;
+}
+export interface AtOperatorComponent {
+    type: 'operator';
+    token: '&';
+    value: 'and';
 }
 export type ValueComponent = StringValueComponent | NumericValueComponent | FunctionValueComponent | VariableValueComponent | SeparatorValueComponent;
 export interface StringValueComponent {
     text?: string;
-    token?: string;
+    token: string;
     type: 'string';
     value: string;
 }
 export interface NumericValueComponent {
     text?: string;
-    token?: string;
+    token: string;
     type: 'number';
     value: number;
     unit?: string;
 }
 export interface FunctionValueComponent {
     text?: string;
-    token?: string;
+    token: string;
     type: 'function';
     name: string;
     symbol: string;
@@ -44,7 +71,7 @@ export interface FunctionValueComponent {
 }
 export interface VariableValueComponent {
     text?: string;
-    token?: string;
+    token: string;
     type: 'variable';
     name: string;
     alpha?: string;
@@ -53,41 +80,52 @@ export interface VariableValueComponent {
 }
 export interface SeparatorValueComponent {
     text?: string;
+    token: string;
     type: 'separator';
     value: string;
 }
 export interface Rule extends RegisteredRule {
-    colored: boolean;
-    prefix: string;
     token: string;
     vendorPrefixSelectors: Record<string, string[]>;
     vendorSuffixSelectors: Record<string, string[]>;
     important: boolean;
-    media: MediaQuery;
     direction: string;
-    theme: string;
+    mode: string;
     unitToken: string;
+    keyToken: string;
+    valueToken: string;
+    stateToken: string;
+    atToken: string;
     hasWhere: boolean;
     valueComponents: Array<ValueComponent>;
 }
 export interface RegisteredRule {
     id: string;
-    match?: RegExp;
-    variables?: any;
+    key?: string;
+    keys: string[];
+    matchers: {
+        key?: RegExp;
+        variable?: RegExp;
+        value?: RegExp;
+        arbitrary?: RegExp;
+    };
+    variables: Record<string, Variable>;
     order: number;
     definition: RuleDefinition;
 }
 export interface RuleDefinition {
     layer?: Layer;
-    match?: RegExp | [string, string[]?];
+    matcher?: RegExp;
+    sign?: string;
+    key?: string;
+    subkey?: string;
+    ambiguousKeys?: string[];
+    ambiguousValues?: (RegExp | string)[];
     variables?: string[];
     separators?: string[];
-    shorthand?: string;
-    colored?: boolean;
-    numeric?: boolean;
     unit?: any;
-    native?: boolean;
     declarations?: PropertiesHyphen;
+    includeAnimations?: boolean;
     analyze?: (this: Rule, className: string) => [valueToken: string, prefixToken?: string];
     transformValue?(this: Rule, value: string): string;
     transformValueComponents?(this: Rule, valueComponents: ValueComponent[]): ValueComponent[];