@master/css 2.0.0-rc.60 → 2.0.0-rc.62

package/dist/syntax-rule.mjs

@@ -1,23 +1,35 @@
 import cssEscape from './shared/utils/css-escape.mjs';
 import SyntaxRuleType from './syntax-rule-type.mjs';
-import { VALUE_DELIMITERS, UNIT_REGEX, BASE_UNIT_REGEX } from './common.mjs';
-import { Rule } from './rule.mjs';
+import { VALUE_DELIMITERS, AT_IDENTIFIERS, BASE_UNIT_REGEX } from './common.mjs';
+import parseValue from './utils/parse-value.mjs';
+import parseAt from './utils/parse-at.mjs';
+import generateAt from './utils/generate-at.mjs';
+import parseSelector from './utils/parse-selector.mjs';
+import generateSelector from './utils/generate-selector.mjs';
+import { calcRulePriority } from './utils/compare-rule-priority.mjs';
 
-class SyntaxRule extends Rule {
+class SyntaxRule {
     name;
     css;
     registeredSyntax;
     fixedClass;
-    at;
+    native;
+    atRules;
     priority;
-    order;
     type;
     declarations;
     layer;
+    valid;
     animationNames;
     variableNames;
     constructor(name, css, registeredSyntax, fixedClass, mode){
-        super(name), this.name = name, this.css = css, this.registeredSyntax = registeredSyntax, this.fixedClass = fixedClass, this.at = {}, this.priority = -1, this.order = 0, this.type = 0, this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
+        this.name = name;
+        this.css = css;
+        this.registeredSyntax = registeredSyntax;
+        this.fixedClass = fixedClass;
+        this.type = SyntaxRuleType.Normal;
+        this.valid = true;
+        this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
             const { functions } = this.css.config;
             let currentValue = '';
             for (const eachValueComponent of valueComponents){
@@ -43,11 +55,12 @@ class SyntaxRule extends Rule {
                                             normalHandler(themeVariable);
                                         }
                                     } else {
-                                        if (!this.variableNames) {
-                                            this.variableNames = [];
-                                        }
-                                        if (!this.variableNames.includes(eachValueComponent.name)) {
-                                            this.variableNames.push(eachValueComponent.name);
+                                        if (this.variableNames) {
+                                            this.variableNames.add(eachValueComponent.name);
+                                        } else {
+                                            this.variableNames = new Set([
+                                                eachValueComponent.name
+                                            ]);
                                         }
                                         varHandler();
                                     }
@@ -108,7 +121,8 @@ class SyntaxRule extends Rule {
                 }
             }
             return currentValue;
-        }, this.parseValues = (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 === '"';
@@ -162,8 +176,9 @@ class SyntaxRule extends Rule {
                                 token: currentValue
                             });
                         } else {
+                            const parsedValue = this.parseValue(currentValue, unit);
                             currentValueComponents.push({
-                                ...this.parseValue(currentValue, unit),
+                                ...parsedValue,
                                 token: currentValue
                             });
                         }
@@ -253,20 +268,17 @@ class SyntaxRule extends Rule {
         const { id, definition } = registeredSyntax;
         const { analyze, transformValue, declare, transformValueComponents, create, type, unit } = definition;
         this.type = type;
-        const { scope, important, modes } = css.config;
-        const { at, animations } = css;
         if (create) create.call(this, name);
         // 1. value / selectorToken
         this.declarations = definition.declarations;
         let stateToken;
-        let prefixToken;
         if (this.type === SyntaxRuleType.Utility) {
             // TODO: id 使用其他方式傳遞
             stateToken = name.slice(id.length - 1);
         } else {
             let valueToken;
             if (analyze) {
-                [valueToken, prefixToken] = analyze.call(this, name);
+                [valueToken] = analyze.call(this, name);
             } else {
                 const indexOfColon = name.indexOf(':');
                 this.keyToken = name.slice(0, indexOfColon + 1);
@@ -283,186 +295,57 @@ class SyntaxRule extends Rule {
             stateToken = stateToken.slice(1);
         }
         this.stateToken = stateToken;
-        // 3. prefix selector
-        if (prefixToken) {
-            this.vendorPrefixSelectors = css.generateVendorSelectors(prefixToken);
-        }
         // 4. suffix selector
         const stateTokens = stateToken.split('@');
         const suffixSelector = stateTokens[0];
         if (suffixSelector) {
-            this.vendorSuffixSelectors = css.generateVendorSelectors(suffixSelector);
-            for (const suffixSelectors of Object.values(this.vendorSuffixSelectors)){
-                for (const eachSuffixSelector of suffixSelectors){
-                    const SORTED_SELECTORS = [
-                        ':disabled',
-                        ':active',
-                        ':focus',
-                        ':hover'
-                    ];
-                    for(let i = 0; i < SORTED_SELECTORS.length; i++){
-                        if (eachSuffixSelector.includes(SORTED_SELECTORS[i])) {
-                            if (this.priority === -1 || this.priority > i) {
-                                this.priority = i;
-                            }
-                            break;
-                        }
-                    }
-                }
-            }
-        }
-        // selector combinations
-        const suffixSelectorVendorsByPrefixSelectorVendor = {};
-        if (this.vendorPrefixSelectors) {
-            if (this.vendorSuffixSelectors) {
-                for(const prefixSelectorVendor in this.vendorPrefixSelectors){
-                    const suffixSelectorVendors = suffixSelectorVendorsByPrefixSelectorVendor[prefixSelectorVendor] = [];
-                    if (Object.prototype.hasOwnProperty.call(this.vendorSuffixSelectors, prefixSelectorVendor)) {
-                        suffixSelectorVendors.push(prefixSelectorVendor);
-                    } else {
-                        for(const suffixVendor in this.vendorSuffixSelectors){
-                            suffixSelectorVendors.push(suffixVendor);
-                        }
-                    }
-                }
-            } else {
-                for(const vendor in this.vendorPrefixSelectors){
-                    suffixSelectorVendorsByPrefixSelectorVendor[vendor] = [
-                        ''
-                    ];
-                }
-            }
-        } else {
-            suffixSelectorVendorsByPrefixSelectorVendor[''] = this.vendorSuffixSelectors ? Object.keys(this.vendorSuffixSelectors) : [
-                ''
-            ];
+            this.selectorNodes = parseSelector(suffixSelector, css);
         }
         // 5. atTokens
         for(let i = 1; i < stateTokens.length; i++){
             const atToken = stateTokens[i];
+            if (css.config.modes?.[atToken]) {
+                this.mode = atToken;
+                continue;
+            }
             this.atToken = (this.atToken || '') + '@' + atToken;
-            if (atToken) {
-                if (atToken === 'base' && !this.fixedClass) {
+            const atRule = parseAt(atToken, css);
+            const targetNodes = this.atRules?.[atRule.id];
+            if (targetNodes) {
+                targetNodes.push(...atRule.nodes);
+            } else {
+                this.atRules = {
+                    ...this.atRules,
+                    [atRule.id]: atRule.nodes
+                };
+            }
+        }
+        if (this.mode && css.config.modes?.[this.mode] === 'media') {
+            const atComp = {
+                name: 'prefers-color-scheme',
+                value: this.mode
+            };
+            if (this.atRules?.media) {
+                this.atRules.media.push(atComp);
+            } else {
+                this.atRules = {
+                    media: [
+                        atComp
+                    ]
+                };
+            }
+        }
+        if (this.fixedClass) {
+            this.layer = css.componentsLayer;
+        } else {
+            const onlyNode = this.atRules?.layer?.length === 1 && this.atRules.layer[0];
+            if (onlyNode) {
+                if (onlyNode.value === 'base') {
                     this.layer = css.baseLayer;
-                    continue;
-                } else if (atToken === 'preset' && !this.fixedClass) {
+                    this.atRules.layer = undefined;
+                } else if (onlyNode.value === 'preset') {
                     this.layer = css.presetLayer;
-                    continue;
-                } else if (atToken === 'rtl' || atToken === 'ltr') {
-                    this.direction = atToken;
-                } else {
-                    let queryType;
-                    const atComponents = [];
-                    // x font-face, counter-style, keyframes, font-feature-values, property, layer
-                    const queryTypeRegExp = /^(media|supports|container|layer)/;
-                    const atRuleResult = queryTypeRegExp.exec(atToken);
-                    if (atRuleResult) {
-                        queryType = atRuleResult[1];
-                        atComponents.push({
-                            type: 'arbitrary',
-                            token: atToken,
-                            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 targetAt = at.get(atComponentToken);
-                                if (typeof targetAt === 'string') {
-                                    const match = targetAt.match(queryTypeRegExp);
-                                    queryType = match ? match[1] : '';
-                                    if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetAt}'`);
-                                    atComponents.push({
-                                        type: 'arbitrary',
-                                        value: targetAt.slice(match ? match[1].length + 1 : 0)
-                                    });
-                                } else {
-                                    // todo: container queries
-                                    queryType = 'media';
-                                    let featureName = '';
-                                    let extremumOperator = '';
-                                    let correction = 0;
-                                    if (atComponentToken.startsWith('<=')) {
-                                        extremumOperator = '<=';
-                                        featureName = 'max-width';
-                                    } else if (atComponentToken.startsWith('>') && !atComponentToken.startsWith('>=')) {
-                                        extremumOperator = '>';
-                                        featureName = 'min-width';
-                                        correction = .02;
-                                    } else if (atComponentToken.startsWith('<')) {
-                                        extremumOperator = '<';
-                                        featureName = 'max-width';
-                                        correction = -0.02;
-                                    } else if (atComponentToken.startsWith('>=') || targetAt) {
-                                        extremumOperator = '>=';
-                                        featureName = 'min-width';
-                                    }
-                                    const token = extremumOperator ? atComponentToken.replace(extremumOperator, '') : atComponentToken;
-                                    const viewport = at.get(token);
-                                    switch(featureName){
-                                        case 'max-width':
-                                        case 'min-width':
-                                            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 {
-                                                    atComponents.push({
-                                                        type: 'feature',
-                                                        name: featureName,
-                                                        valueType: 'string',
-                                                        value: token
-                                                    });
-                                                }
-                                            }
-                                            break;
-                                    }
-                                }
-                            }
-                        };
-                        const isAmpersandIncluded = atToken.includes('&');
-                        if (isAmpersandIncluded) {
-                            const typeOrFeatureTokens = atToken.split(/(&|,)/);
-                            for (const atComponentToken of typeOrFeatureTokens){
-                                analyzeToken(atComponentToken);
-                            }
-                        } else {
-                            analyzeToken(atToken);
-                        }
-                        if (!atComponents.length) {
-                            if (!isAmpersandIncluded && modes?.[atToken]) {
-                                this.mode = atToken;
-                                continue;
-                            }
-                        }
-                    }
-                    if (queryType) {
-                        const eachAtComponents = this.at[queryType];
-                        if (eachAtComponents) {
-                            eachAtComponents.push(...atComponents);
-                        } else {
-                            this.at[queryType] = atComponents;
-                        }
-                    }
+                    this.atRules.layer = undefined;
                 }
             }
         }
@@ -484,155 +367,82 @@ class SyntaxRule extends Rule {
                 };
             }
         }
-        const propertiesText = [];
-        for(const propertyName in this.declarations){
-            const push = (propertyText)=>{
-                // animations
-                if (animations && (propertyText.startsWith('animation') || propertyText.startsWith('animation-name'))) {
-                    const animationNames = propertyText.split(':')[1].split('!important')[0].split(' ').filter((eachValue)=>this.css.animations.has(eachValue) && (!this.animationNames || !this.animationNames.includes(eachValue)));
-                    if (animationNames.length) {
-                        if (!this.animationNames) {
-                            this.animationNames = [];
-                        }
-                        this.animationNames = animationNames;
-                    }
-                }
-                propertiesText.push(propertyText + ((this.important || important) && !propertyText.endsWith('!important') ? '!important' : ''));
-            };
-            const keyToken = propertyName + ':';
-            const declarations = this.declarations[propertyName];
-            if (Array.isArray(declarations)) {
-                for (const value of declarations){
-                    push(keyToken + String(value));
-                }
-            } else {
-                push(keyToken + String(declarations));
-            }
-        }
-        // 創建 Natives
-        if (propertiesText.length) {
-            for(const prefixSelectorVendor in suffixSelectorVendorsByPrefixSelectorVendor){
-                for (const eachSuffixSelectorVendor of suffixSelectorVendorsByPrefixSelectorVendor[prefixSelectorVendor]){
-                    const prefixSelectors = this.vendorPrefixSelectors?.[prefixSelectorVendor];
-                    const suffixSelectors = this.vendorSuffixSelectors?.[eachSuffixSelectorVendor];
-                    if (this.css.supportVendors) {
-                        if (prefixSelectorVendor && !this.css.supportVendors?.has(prefixSelectorVendor) || eachSuffixSelectorVendor && !this.css.supportVendors?.has(eachSuffixSelectorVendor)) {
+        if (!Object.entries(this.declarations ?? {}).length) {
+            this.valid = false;
+        } else {
+            for(const propertyName in this.declarations){
+                if (this.css.animations && (propertyName === 'animation' || propertyName === 'animation-name')) {
+                    const propertyValue = this.declarations[propertyName];
+                    if (!propertyValue) continue;
+                    const rawValues = propertyValue.split(' ');
+                    for (const rawValue of rawValues){
+                        if (this.css.animations.has(rawValue)) {
+                            if (!this.animationNames) {
+                                this.animationNames = new Set([
+                                    rawValue
+                                ]);
+                            } else {
+                                this.animationNames.add(rawValue);
+                            }
                             continue;
                         }
                     }
-                    let prefixText = '';
-                    if (this.direction) {
-                        prefixText += '[dir=' + this.direction + '] ';
-                    }
-                    const prefixTexts = prefixSelectors ? prefixSelectors.map((eachPrefixSelector)=>eachPrefixSelector + prefixText) : [
-                        prefixText
-                    ];
-                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>{
-                            let modePrefix = '';
-                            if (this.mode) {
-                                const modeSelector = this.css.getModeSelector(this.mode);
-                                if (modeSelector) {
-                                    modePrefix = modeSelector + ' ';
-                                }
-                            }
-                            return modePrefix + (scope ? scope + ' ' : '') + eachPrefixText;
-                        }).reduce((arr, eachPrefixText)=>{
-                            arr.push(suffixSelectors ? suffixSelectors.reduce((_arr, eachSuffixSelector)=>{
-                                _arr.push(eachPrefixText + '.' + cssEscape(name) + eachSuffixSelector);
-                                return _arr;
-                            }, []).join(',') : eachPrefixText + '.' + cssEscape(name));
-                            return arr;
-                        }, []).join(',');
-                    const selectorText = getCssText(fixedClass ?? name);
-                    let cssText = selectorText + '{' + propertiesText.join(';') + '}';
-                    for (const key of Object.keys(this.at).sort((_a, b)=>b === 'supports' ? -1 : 1)){
-                        cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key].map((eachAtComponent)=>this.resolveAtComponent(eachAtComponent)).join(' ') + '{' + cssText + '}';
-                    }
-                    if (this.mode && modes?.[this.mode] === 'media') {
-                        cssText = `@media(prefers-color-scheme:${this.mode}){` + cssText + '}';
-                    }
-                    const node = {
-                        text: cssText,
-                        selectorText
-                    };
-                    if (prefixSelectors) node.prefixSelectors = prefixSelectors;
-                    if (suffixSelectors) node.suffixSelectors = suffixSelectors;
-                    this.nodes.push(node);
                 }
             }
+            this.priority = calcRulePriority(this);
         }
-        if (this.fixedClass) {
-            this.layer = css.componentsLayer;
+    }
+    get text() {
+        if (!this.valid) return '';
+        const propertiesText = [];
+        for(const propertyName in this.declarations){
+            const propertyValue = this.declarations[propertyName];
+            const propertyText = propertyName + ':' + String(propertyValue);
+            propertiesText.push(propertyText + ((this.important || this.css.config.important) && !propertyText.endsWith('!important') ? '!important' : ''));
         }
+        let text = this.selectorText + '{' + propertiesText.join(';') + '}';
+        if (this.atRules !== undefined) AT_IDENTIFIERS.forEach((id)=>{
+            const nodes = this.atRules?.[id];
+            if (!nodes) return;
+            text = generateAt({
+                id,
+                nodes
+            }) + '{' + text + '}';
+        });
+        return text;
     }
-    resolveAtComponent(atComponent) {
-        switch(atComponent.type){
-            case 'arbitrary':
-                return atComponent.value;
-            case 'feature':
-                return '(' + atComponent.name + ':' + atComponent.value + (atComponent.unit || '') + ')';
-            case 'operator':
-                return atComponent.value;
+    get selectorText() {
+        let pre = '';
+        if (this.css.config.scope) {
+            pre = this.css.config.scope + ' ' + pre;
         }
+        if (this.mode) {
+            const modeSelector = this.css.getModeSelector(this.mode);
+            if (modeSelector) {
+                pre = modeSelector + ' ' + pre;
+            }
+        }
+        const body = pre + '.' + cssEscape(this.fixedClass ?? this.name);
+        return this.selectorNodes ? generateSelector(this.selectorNodes, body) : body;
     }
     resolveValue;
     parseValues;
     parseValue(token, unit = this.definition.unit) {
-        const defaultUnit = unit ?? this.definition.unit;
-        let newUnit = '';
-        let value;
-        if (typeof token === 'number') {
-            /**
-             * 當無單位值且 defaultUnit === 'rem'，
-             * 將 pxValue / 16 轉為 remValue
-             */ if (defaultUnit && !newUnit) {
-                if (defaultUnit === 'rem' || defaultUnit === 'em') {
-                    value = token / (this.css.config.rootSize || 1);
-                }
-                newUnit = defaultUnit || '';
-            } else {
-                value = token;
-            }
-            return {
-                value,
-                unit: newUnit,
-                type: 'number'
-            };
-        } else if (defaultUnit) {
-            // w:1/2 -> width: 50%
-            if (/^\d+\/\d+/.test(token)) {
-                const [dividend, divisor] = token.split('/');
+        const parsed = parseValue(token, unit, this.css.config.rootSize);
+        // exclude like `aspect:1/2` from being parsed as 50%
+        if (this.definition.unit && parsed.type === 'string') {
+            // 1/2 → 50%
+            if (/^\d+\/\d+$/.test(parsed.value)) {
+                const [numerator, denominator] = parsed.value.split('/').map(Number);
                 return {
-                    value: +dividend / +divisor * 100,
+                    token,
+                    value: numerator / denominator * 100,
                     unit: '%',
                     type: 'number'
                 };
             }
-            const matches = token.match(UNIT_REGEX);
-            // ['0.5deg', '0.5', 'deg', index: 0, input: '0.5deg', groups: undefined]
-            if (matches) {
-                value = +matches[1];
-                newUnit = matches[3] || '';
-                /**
-                 * 當無單位值且 defaultUnit === 'rem'，
-                 * 將 pxValue / 16 轉為 remValue
-                 */ if (!newUnit) {
-                    if (defaultUnit === 'rem' || defaultUnit === 'em') {
-                        value = value / (this.css.config.rootSize || 1);
-                    }
-                    newUnit = defaultUnit || '';
-                }
-                return {
-                    value,
-                    unit: newUnit,
-                    type: 'number'
-                };
-            }
         }
-        return {
-            value: token,
-            type: 'string'
-        };
+        return parsed;
     }
     get key() {
         return (this.fixedClass ? this.fixedClass + ' ' : '') + this.name;

package/dist/types/common.d.ts

@@ -1 +1,3 @@
+import SyntaxRuleType from '../syntax-rule-type';
 export type Vendors = 'webkit' | 'moz' | 'ms' | 'o';
+export type SyntaxRuleTypeValue = typeof SyntaxRuleType[keyof typeof SyntaxRuleType];

package/dist/types/config.d.ts

@@ -1,10 +1,11 @@
 import type { PropertiesHyphen } from 'csstype';
-import type SyntaxRuleType from '../syntax-rule-type';
 import type { SyntaxRule } from '../syntax-rule';
 import type { ValueComponent } from './syntax';
 import type { rules, utilities } from '../config';
+import { AT_IDENTIFIERS } from '../common';
+import { SyntaxRuleTypeValue } from './common';
 export interface SyntaxRuleDefinition {
-    type?: SyntaxRuleType;
+    type?: SyntaxRuleTypeValue;
     matcher?: RegExp;
     sign?: string;
     key?: string;
@@ -30,13 +31,16 @@ export type VariableDefinition = {
 } | VariableValue;
 export type CSSKeyframes = Record<'from' | 'to' | string, PropertiesHyphen>;
 export type AnimationDefinitions = Record<string, CSSKeyframes>;
-export type SelectorDefinitions = Record<string, string | string[]>;
+export type SelectorDefinitions = Record<string, string>;
+export type AtIdentifier = typeof AT_IDENTIFIERS[number];
+export type AtDefinition = number | string;
 export interface AtDefinitions {
-    [key: string]: number | string | AtDefinitions;
+    [key: string]: AtDefinition | AtDefinitions;
 }
-export interface StyleDefinitions {
-    [key: string]: string | StyleDefinitions;
+export interface ComponentDefinitions {
+    [key: string]: string | ComponentDefinitions;
 }
+export type ScreenDefinitions = Record<string, number>;
 export type SyntaxRuleDefinitions = Partial<Record<keyof typeof rules | string, SyntaxRuleDefinition>>;
 export type VariableDefinitions = {
     [key in keyof typeof rules]?: VariableDefinition;
@@ -52,12 +56,13 @@ export interface FunctionDefinition {
 export type FunctionDefinitions = Record<string, FunctionDefinition>;
 export interface Config {
     extends?: (Config | any)[];
-    components?: StyleDefinitions;
+    components?: ComponentDefinitions;
     at?: AtDefinitions;
     selectors?: SelectorDefinitions;
     utilities?: UtilityDefinitions;
     variables?: VariableDefinitions;
     rules?: SyntaxRuleDefinitions;
+    screens?: ScreenDefinitions;
     rootSize?: number;
     baseUnit?: number;
     defaultMode?: 'light' | 'dark' | string | false;

package/dist/types/syntax.d.ts

@@ -1,31 +1,12 @@
 import { SyntaxRuleDefinition } from './config';
-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 type ValueComponent = StringValueComponent | NumberValueComponent | FunctionValueComponent | VariableValueComponent | SeparatorValueComponent;
 export interface StringValueComponent {
     text?: string;
     token: string;
     type: 'string';
     value: string;
 }
-export interface NumericValueComponent {
+export interface NumberValueComponent {
     text?: string;
     token: string;
     type: 'number';
@@ -86,7 +67,7 @@ type VariableCommon = {
     group?: string;
     name: string;
     key: string;
-    modes?: Record<string, TypeVariable>;
+    modes?: Record<string, LiteralVariable>;
 };
 export interface StringVariable {
     type: 'string';
@@ -101,6 +82,6 @@ export interface ColorVariable {
     value: string;
     space: 'rgb' | 'hsl';
 }
-export type TypeVariable = StringVariable | NumberVariable | ColorVariable;
-export type Variable = TypeVariable & VariableCommon;
+export type LiteralVariable = StringVariable | NumberVariable | ColorVariable;
+export type Variable = LiteralVariable & VariableCommon;
 export {};