@master/css 2.0.0-rc.67 → 2.0.0-rc.69

package/dist/core.mjs

@@ -1,7 +1,5 @@
 import { SyntaxRule } from './syntax-rule.mjs';
-import { config } from './config/index.mjs';
 import hexToRgb from './utils/hex-to-rgb.mjs';
-import { flattenObject } from './utils/flatten-object.mjs';
 import extendConfig from './utils/extend-config.mjs';
 import { Rule } from './rule.mjs';
 import SyntaxRuleType from './syntax-rule-type.mjs';
@@ -15,42 +13,29 @@ import parseSelector from './utils/parse-selector.mjs';
 
 class MasterCSS {
     customConfig;
-    static config = config;
-    definedRules;
+    baseConfig;
+    definedRules = [];
     config;
-    layerStatementRule;
-    rules;
-    classRules;
-    animationsNonLayer;
-    baseLayer;
-    themeLayer;
-    presetLayer;
-    componentsLayer;
-    generalLayer;
-    components;
-    selectors;
-    variables;
-    atRules;
-    animations;
-    constructor(customConfig){
+    layerStatementRule = new Rule('layer-statement', '@layer base,theme,preset,components,general;');
+    rules = [
+        this.layerStatementRule
+    ];
+    classRules = new Map();
+    animationsNonLayer = new NonLayer(this);
+    baseLayer = new SyntaxLayer('base', this);
+    themeLayer = new Layer('theme', this);
+    presetLayer = new SyntaxLayer('preset', this);
+    componentsLayer = new SyntaxLayer('components', this);
+    generalLayer = new SyntaxLayer('general', this);
+    components = new Map();
+    selectors = new Map();
+    variables = new Map();
+    modes = [];
+    atRules = new Map();
+    animations = new Map();
+    constructor(customConfig, baseConfig){
         this.customConfig = customConfig;
-        this.definedRules = [];
-        this.layerStatementRule = new Rule('layer-statement', '@layer base,theme,preset,components,general;');
-        this.rules = [
-            this.layerStatementRule
-        ];
-        this.classRules = new Map();
-        this.animationsNonLayer = new NonLayer(this);
-        this.baseLayer = new SyntaxLayer('base', this);
-        this.themeLayer = new Layer('theme', this);
-        this.presetLayer = new SyntaxLayer('preset', this);
-        this.componentsLayer = new SyntaxLayer('components', this);
-        this.generalLayer = new SyntaxLayer('general', this);
-        this.components = new Map();
-        this.selectors = new Map();
-        this.variables = new Map();
-        this.atRules = new Map();
-        this.animations = new Map();
+        this.baseConfig = baseConfig;
         this.resolve(customConfig);
     }
     get text() {
@@ -75,7 +60,7 @@ class MasterCSS {
             customConfig = this.customConfig;
         }
         // @ts-expect-error read-only
-        this.config = customConfig?.override ? extendConfig(customConfig) : extendConfig(config, customConfig);
+        this.config = this.baseConfig ? extendConfig(this.baseConfig, customConfig) : extendConfig(customConfig);
         this.resolveVariables();
         this.resolveAnimations();
         this.resolveSelectors();
@@ -125,23 +110,25 @@ class MasterCSS {
             rulesEntries.push(...Object.entries(rules));
         }
         const rulesEntriesLength = rulesEntries.length;
-        // Prepare color variables
-        const colorNames = new Set([
-            'current',
-            'currentColor',
-            'transparent'
-        ]);
-        this.variables.forEach((v)=>{
-            if (v.type === 'color') colorNames.add(v.name);
-        });
-        const colorPattern = [
-            ...colorNames
-        ].join('|');
         // Main loop
         rulesEntries.sort((a, b)=>{
             if (a[1].type !== b[1].type) {
                 return (b[1].type || 0) - (a[1].type || 0);
             }
+            if (a[1].kind !== b[1].kind) {
+                if (!a[1].kind) return 1;
+                if (!b[1].kind) return -1;
+                const kindOrder = [
+                    'color',
+                    'number',
+                    'image'
+                ];
+                const aKindIndex = kindOrder.indexOf(a[1].kind);
+                const bKindIndex = kindOrder.indexOf(b[1].kind);
+                if (aKindIndex !== bKindIndex) {
+                    return aKindIndex - bKindIndex;
+                }
+            }
             return b[0].localeCompare(a[0], undefined, {
                 numeric: true
             });
@@ -150,7 +137,6 @@ class MasterCSS {
             const syntax = {
                 id,
                 keys: [],
-                variables: {},
                 matchers: {},
                 order,
                 definition: def
@@ -160,25 +146,42 @@ class MasterCSS {
                 ','
             ];
             this.definedRules.push(syntax);
-            const { matcher, type, subkey, ambiguousKeys, ambiguousValues, sign, key: originalKey, variables: ruleVariableGroups } = def;
+            let { matcher, type, subkey, aliasGroups, values, kind, sign, key: originalKey, namespaces } = def;
             const keys = [];
             let key = originalKey;
             // Helper: resolve variable groups
-            const addResolvedVariables = (groupName)=>{
+            const addNamespace = (namespace)=>{
+                const dashedNamespace = namespace.replace(/\./g, '-');
                 this.variables.forEach((v)=>{
-                    if (v.group === groupName) {
-                        syntax.variables[v.key] = v;
+                    if (v.namespace === namespace || v.group === namespace) {
+                        let variableKey = v.name;
+                        if (variableKey.startsWith('-' + dashedNamespace) || variableKey.startsWith(dashedNamespace)) {
+                            variableKey = variableKey.slice(dashedNamespace.length + 1);
+                        }
+                        if (syntax.variables) {
+                            syntax.variables.set(variableKey, v);
+                        } else {
+                            syntax.variables = new Map([
+                                [
+                                    variableKey,
+                                    v
+                                ]
+                            ]);
+                        }
                     }
                 });
             };
-            // Rule-defined variable groups
-            if (ruleVariableGroups) {
-                ruleVariableGroups.forEach(addResolvedVariables);
+            // 1. Auto variable binding
+            addNamespace(id);
+            // 2. Rule-defined variable groups
+            if (namespaces) {
+                namespaces.forEach(addNamespace);
             }
-            // Auto variable binding
-            addResolvedVariables(id);
-            // Key derivation logic
-            if (type === SyntaxRuleType.NativeShorthand || type === SyntaxRuleType.Native) {
+            if (id.endsWith('()')) {
+                if (!key) def.key = key = id;
+                const fnName = id.slice(0, -2);
+                matcher = new RegExp(`^${fnName}\\(`);
+            } else if (type === SyntaxRuleType.NativeShorthand || type === SyntaxRuleType.Native) {
                 if (!key) def.key = key = id;
                 keys.push(id);
             }
@@ -193,19 +196,30 @@ class MasterCSS {
                     if (type === SyntaxRuleType.Shorthand) keys.push(id);
                 }
                 // Ambiguous keys and values
-                if (ambiguousKeys?.length) {
-                    const keyPattern = ambiguousKeys.length > 1 ? `(?:${ambiguousKeys.join('|')})` : ambiguousKeys[0];
-                    const variableKeys = Object.keys(syntax.variables);
-                    if (ambiguousValues?.length) {
-                        const valuePatterns = ambiguousValues.map((val)=>val instanceof RegExp ? val.source.replace('\\$colors', colorPattern) : `${val}(?:\\b|_)`);
+                if (aliasGroups?.length) {
+                    const keyPattern = aliasGroups.length > 1 ? `(?:${aliasGroups.join('|')})` : aliasGroups[0];
+                    const variableKeys = Array.from(syntax.variables?.keys() || []);
+                    const valuePatterns = values ? values.map((v)=>`${v}(?:\\b|_)`) : [];
+                    switch(kind){
+                        case 'color':
+                            valuePatterns.push(`(?:#|(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla|light-dark)\\(.*\\)|(?:currentColor|transparent)(?![a-zA-Z0-9-]))`);
+                            break;
+                        case 'number':
+                            valuePatterns.push('(?:[\\d.]|(?:max|min|calc|clamp)\\([^|]*\\))');
+                            break;
+                        case 'image':
+                            valuePatterns.push('(?:url|linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient|conic-gradient)\\(.*\\)');
+                            break;
+                    }
+                    if (valuePatterns?.length) {
                         syntax.matchers.value = new RegExp(`^${keyPattern}:(?:${valuePatterns.join('|')})[^|]*?(?:@|$)`);
                     }
                     if (variableKeys.length) {
-                        syntax.matchers.variable = new RegExp(`^${keyPattern}:(?:${variableKeys.join('|')}(?![a-zA-Z0-9-]))[^|]*?(?:@|$)`);
+                        syntax.matchers.variable = new RegExp(`^${keyPattern}:(?:${variableKeys.join('|')})(?![a-zA-Z0-9-])[^|]*?(?:@|$)`);
                     }
                 }
             } else {
-                syntax.matchers.arbitrary = matcher;
+                syntax.matchers.arbitrary = new RegExp(matcher);
             }
             // Utility rule matcher
             if (type === SyntaxRuleType.Utility) {
@@ -220,16 +234,15 @@ class MasterCSS {
         });
     }
     resolveComponents() {
-        const { components } = this.config;
-        const flatComps = components ? flattenObject(components) : {};
-        const flatNames = Object.keys(flatComps);
+        const { components = {} } = this.config;
+        const flatNames = Object.keys(components);
         const resolve = (name, currentClasses = [])=>{
             const compClasses = this.components.get(name);
             if (compClasses) {
                 currentClasses.push(...compClasses);
                 return;
             }
-            const className = flatComps[name];
+            const className = components[name];
             if (!className) return;
             const classes = className.replace(/(?:\n\s*)+/g, ' ').trim().split(' ');
             for (const cls of classes){
@@ -247,32 +260,12 @@ class MasterCSS {
         for (const name of flatNames){
             resolve(name);
         }
-        // Second pass: convert to grouped syntax rule strings
-        this.components.forEach((compClasses, componentName)=>{
-            const syntaxRulesByStateToken = {};
-            for (const syntax of compClasses){
-                const parsed = this.create(syntax);
-                if (parsed?.valid) {
-                    const group = syntaxRulesByStateToken[parsed.stateToken] ||= [];
-                    group.push(parsed);
-                } else {
-                    console.error(`Invalid class "${syntax}" found in ${componentName} component.`);
-                }
-            }
-            const result = Object.entries(syntaxRulesByStateToken).map(([stateToken, syntaxRules])=>{
-                if (syntaxRules.length === 1) return syntaxRules[0].name;
-                const namesWithoutToken = syntaxRules.map((s)=>s.name.slice(0, s.name.length - s.stateToken.length));
-                return `{${namesWithoutToken.join(';')}}${stateToken}`;
-            });
-            this.components.set(componentName, result);
-        });
     }
     resolveSelectors() {
         const { selectors } = this.config;
         if (selectors) {
-            const flatSelectors = flattenObject(selectors);
-            for(const token in flatSelectors){
-                const value = flatSelectors[token];
+            for(const token in selectors){
+                const value = selectors[token];
                 const nodes = parseSelector(value, this, false);
                 this.selectors.set(token, nodes);
             }
@@ -293,9 +286,8 @@ class MasterCSS {
             }
         }
         if (at) {
-            const flatAt = flattenObject(at);
-            for(const token in flatAt){
-                const value = flatAt[token];
+            for(const token in at){
+                const value = at[token];
                 if (typeof value === 'number') {
                     const node = this.parseValue(value);
                     this.atRules.set(token, {
@@ -312,194 +304,187 @@ class MasterCSS {
         }
     }
     resolveVariables() {
-        const { variables, screens } = this.config;
+        const { variables, screens, modes } = this.config;
         const aliasVariableModeResolvers = new Map();
-        const resolveVariable = (variableDefinition, name, mode)=>{
-            if (variableDefinition === undefined || variableDefinition === null) return;
-            const addVariable = (name, variable, replacedMode, alpha)=>{
-                if (variable === undefined) return;
-                const flatName = name.join('-');
-                const groups = name.slice(0, -1).filter(Boolean);
-                const key = (name[0] === '' ? '-' : '') + name[name.length - 1];
-                variable.key = key;
-                variable.name = flatName;
-                if (groups.length) variable.group = groups.join('.');
-                if (variable.type === 'color') {
-                    if (alpha) {
-                        const slashIndex = variable.value.indexOf('/');
-                        variable = {
-                            ...variable,
-                            value: slashIndex === -1 ? variable.value + ' / ' + (alpha.startsWith('0.') ? alpha.slice(1) : alpha) : variable.value.slice(0, slashIndex + 2) + String(+variable.value.slice(slashIndex + 2) * +alpha).slice(1)
-                        };
-                    }
-                }
-                const currentMode = replacedMode ?? mode;
-                if (currentMode !== undefined) {
-                    const foundVariable = this.variables.get(flatName);
+        const resolveVariable = (variable, mode)=>{
+            const addVariable = (name, newVariable, currentMode)=>{
+                if (currentMode) {
+                    const foundVariable = this.variables.get(name);
+                    const newModeVariable = {
+                        value: newVariable.value
+                    };
+                    if ('alpha' in newVariable) newModeVariable.alpha = newVariable.alpha;
+                    if ('space' in newVariable) newModeVariable.space = newVariable.space;
                     if (foundVariable) {
-                        if (currentMode) {
-                            if (!foundVariable.modes) {
-                                foundVariable.modes = {};
-                            }
-                            foundVariable.modes[currentMode] = variable;
-                        } else {
-                            foundVariable.value = variable.value;
-                            if (variable.type === 'color') {
-                                foundVariable.space = variable.space;
-                            }
+                        if (newVariable.type && newVariable.type !== foundVariable.type) {
+                            return;
                         }
+                        if (!foundVariable.modes) foundVariable.modes = {};
+                        foundVariable.modes[currentMode] = newModeVariable;
                     } else {
-                        if (currentMode) {
-                            const newVariable = {
-                                key: variable.key,
-                                name: variable.name,
-                                group: variable.group,
-                                type: variable.type,
-                                modes: {
-                                    [currentMode]: variable
-                                }
-                            };
-                            if (variable.type === 'color') {
-                                newVariable.space = variable.space;
+                        const newRootVaraible = {
+                            name: newVariable.name,
+                            key: newVariable.key,
+                            type: newVariable.type,
+                            modes: {
+                                [currentMode]: newModeVariable
                             }
-                            this.variables.set(flatName, newVariable);
-                        } else {
-                            this.variables.set(flatName, variable);
-                        }
+                        };
+                        if (newVariable.namespace) newRootVaraible.namespace = newVariable.namespace;
+                        if (newVariable.group) newRootVaraible.group = newVariable.group;
+                        this.variables.set(name, newRootVaraible);
                     }
                 } else {
-                    this.variables.set(flatName, variable);
+                    this.variables.set(name, newVariable);
                 }
             };
-            if (typeof variableDefinition === 'object') {
-                if (Array.isArray(variableDefinition)) {
-                    addVariable(name, {
-                        type: 'string',
-                        value: variableDefinition.join(',')
-                    });
-                } else {
-                    const keys = Object.keys(variableDefinition);
-                    for (const eachKey of keys){
-                        if (eachKey === '' || eachKey.startsWith('@')) {
-                            resolveVariable(variableDefinition[eachKey], name, eachKey || keys.some((eachKey)=>eachKey.startsWith('@')) ? eachKey.slice(1) : undefined);
-                        } else {
-                            resolveVariable(variableDefinition[eachKey], [
-                                ...name,
-                                eachKey
-                            ]);
-                        }
-                    }
-                }
-            } else if (typeof variableDefinition === 'number') {
-                addVariable(name, {
-                    type: 'number',
-                    value: variableDefinition
-                });
-                addVariable([
-                    '',
-                    ...name
-                ], {
+            if (typeof variable.value === 'number') {
+                addVariable(variable.name, {
+                    ...variable,
+                    type: 'number'
+                }, mode);
+                addVariable('-' + variable.name, {
+                    ...variable,
                     type: 'number',
-                    value: variableDefinition * -1
-                });
-            } else if (typeof variableDefinition === 'string') {
-                const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
-                const flatName = name.join('-');
+                    name: '-' + variable.name,
+                    key: '-' + variable.key,
+                    value: variable.value * -1
+                }, mode);
+            } else if (typeof variable.value === 'string') {
+                const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$|^\$([a-zA-Z0-9-]+)(?: ?\/ ?(.+?))?$/.exec(variable.value);
                 if (aliasResult) {
-                    let aliasVariableModeResolver = aliasVariableModeResolvers.get(flatName);
+                    const alias = aliasResult[1] ?? aliasResult[3];
+                    const alpha = aliasResult[2] ?? aliasResult[4];
+                    let aliasVariableModeResolver = aliasVariableModeResolvers.get(variable.name);
                     if (!aliasVariableModeResolver) {
-                        aliasVariableModeResolvers.set(flatName, aliasVariableModeResolver = {});
+                        aliasVariableModeResolvers.set(variable.name, aliasVariableModeResolver = {});
                     }
                     aliasVariableModeResolver[mode] = ()=>{
                         delete aliasVariableModeResolver[mode];
-                        const [alias, aliasMode] = aliasResult[1].split('@');
-                        if (alias) {
-                            const eachAliasModeVariableResolver = aliasVariableModeResolvers.get(alias);
-                            if (eachAliasModeVariableResolver) {
-                                for (const mode of Object.keys(eachAliasModeVariableResolver)){
-                                    eachAliasModeVariableResolver[mode]?.();
+                        if (!alias) return;
+                        const eachAliasModeVariableResolver = aliasVariableModeResolvers.get(alias);
+                        if (eachAliasModeVariableResolver) {
+                            for (const mode of Object.keys(eachAliasModeVariableResolver)){
+                                eachAliasModeVariableResolver[mode]?.();
+                            }
+                        }
+                        const aliasVariable = this.variables.get(alias);
+                        if (aliasVariable) {
+                            let resolvedAlpha;
+                            if (alpha) {
+                                const numberAlpha = Number(alpha) * (aliasVariable.alpha || 1);
+                                if (numberAlpha < 1) resolvedAlpha = numberAlpha;
+                            }
+                            const newVariable = {
+                                ...variable,
+                                type: aliasVariable.type,
+                                value: aliasVariable.value
+                            };
+                            if (aliasVariable.type === 'color') {
+                                if (resolvedAlpha !== undefined) newVariable.alpha = resolvedAlpha;
+                                if (aliasVariable.space) {
+                                    newVariable.space = aliasVariable.space;
                                 }
                             }
-                            const aliasVariable = this.variables.get(alias);
-                            if (aliasVariable) {
-                                if (aliasMode === undefined && aliasVariable.modes) {
-                                    addVariable(name, {
-                                        type: aliasVariable.type,
-                                        value: aliasVariable.value,
-                                        space: aliasVariable.space
-                                    }, '', aliasResult[2]);
-                                    for(const mode in aliasVariable.modes){
-                                        addVariable(name, aliasVariable.modes[mode], mode, aliasResult[2]);
-                                    }
-                                } else {
-                                    const variable = aliasMode !== undefined ? aliasVariable.modes?.[aliasMode] : aliasVariable;
-                                    if (variable) {
-                                        const newVariable = {
-                                            type: variable.type,
-                                            value: variable.value
-                                        };
-                                        if (variable.type === 'color') {
-                                            newVariable.space = variable.space;
-                                        }
-                                        addVariable(name, newVariable, undefined, aliasResult[2]);
-                                    }
+                            addVariable(newVariable.name, newVariable, mode);
+                            if (aliasVariable.modes) {
+                                for(const eachMode in aliasVariable.modes){
+                                    const aliasModeVariable = aliasVariable.modes[eachMode];
+                                    addVariable(newVariable.name, aliasModeVariable, eachMode);
                                 }
                             }
                         }
                     };
                 } else {
-                    const hexColorResult = /^#([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.exec(variableDefinition);
-                    if (hexColorResult) {
-                        const [r, g, b, a] = hexToRgb(hexColorResult[1]);
-                        addVariable(name, {
+                    // 1. HEX
+                    const hexMatch = /^#([a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})$/i.exec(variable.value);
+                    if (hexMatch) {
+                        const [r, g, b, a] = hexToRgb(hexMatch[1]);
+                        const newVariable = {
+                            ...variable,
                             type: 'color',
-                            value: `${r} ${g} ${b}${a === 1 ? '' : ' / ' + a}`,
+                            value: `${r} ${g} ${b}`,
                             space: 'rgb'
-                        });
-                    } else {
-                        const rgbFunctionResult = /^rgb\( *([0-9]{1,3})(?: *, *| +)([0-9]{1,3})(?: *, *| +)([0-9]{1,3}) *(?:(?:,|\/) *(.*?) *)?\)$/.exec(variableDefinition);
-                        if (rgbFunctionResult) {
-                            addVariable(name, {
-                                type: 'color',
-                                value: rgbFunctionResult[1] + ' ' + rgbFunctionResult[2] + ' ' + rgbFunctionResult[3] + (rgbFunctionResult[4] ? ' / ' + (rgbFunctionResult[4].startsWith('0.') ? rgbFunctionResult[4].slice(1) : rgbFunctionResult[4]) : ''),
-                                space: 'rgb'
-                            });
-                        } else {
-                            const hslFunctionResult = /^hsl\((.*?)\)$/.exec(variableDefinition);
-                            if (hslFunctionResult) {
-                                addVariable(name, {
-                                    type: 'color',
-                                    value: hslFunctionResult[1],
-                                    space: 'hsl'
-                                });
-                            } else {
-                                addVariable(name, {
-                                    type: 'string',
-                                    value: variableDefinition
-                                });
-                            }
+                        };
+                        if (a !== undefined && a < 1) {
+                            newVariable.alpha = a;
                         }
+                        addVariable(newVariable.name, newVariable, mode);
+                        return;
                     }
+                    // 2. COLOR FUNCTION
+                    const funcMatch = /^(color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|hsl|light-dark)\((.+)\)$/i.exec(variable.value);
+                    if (funcMatch) {
+                        let [, space, rawArgs] = funcMatch;
+                        space = space.toLowerCase();
+                        const normalizedArgs = rawArgs.replace(/\s*\/\s*/g, '/').replace(/\s*,\s*/g, ' ').replace(/\s+/g, ' ').trim();
+                        let alpha;
+                        const alphaMatch = /^(.+?)\/([^\s]+)$/.exec(normalizedArgs);
+                        const finalArgs = alphaMatch ? alphaMatch[1].trim() : normalizedArgs;
+                        alpha = alphaMatch ? Number(alphaMatch[2]) : undefined;
+                        const newVariable = {
+                            ...variable,
+                            type: 'color',
+                            value: finalArgs,
+                            space
+                        };
+                        if (alpha !== undefined) {
+                            newVariable.alpha = alpha;
+                        }
+                        addVariable(newVariable.name, newVariable, mode);
+                        return;
+                    }
+                    // 3. Fallback
+                    addVariable(variable.name, {
+                        ...variable,
+                        type: 'string'
+                    }, mode);
                 }
             }
         };
         if (variables) {
             for(const parnetKey in variables){
-                resolveVariable(variables[parnetKey], [
-                    parnetKey
-                ]);
+                const variable = variables[parnetKey];
+                resolveVariable(variable);
             }
-            // todo: address to the target variable
-            aliasVariableModeResolvers.forEach((aliasVariableModeResolver)=>{
-                for (const mode of Object.keys(aliasVariableModeResolver)){
-                    aliasVariableModeResolver[mode]?.();
+        }
+        if (modes) {
+            for(const mode in modes){
+                const modeVariables = modes[mode];
+                if (!modeVariables) continue;
+                for(const key in modeVariables){
+                    const variable = modeVariables[key];
+                    resolveVariable(variable, mode);
                 }
-            });
+            }
         }
+        // todo: address to the target variable
+        aliasVariableModeResolvers.forEach((aliasVariableModeResolver)=>{
+            for (const mode of Object.keys(aliasVariableModeResolver)){
+                aliasVariableModeResolver[mode]?.();
+            }
+        });
         if (screens) {
-            resolveVariable(screens, [
-                'screen'
-            ]);
+            for(const key in screens){
+                const value = screens[key];
+                const name = 'screen-' + key;
+                this.variables.set(name, {
+                    name,
+                    key,
+                    namespace: 'screen',
+                    group: 'screen',
+                    type: 'number',
+                    value
+                });
+                this.variables.set('-' + name, {
+                    name: '-' + name,
+                    key: '-' + key,
+                    namespace: 'screen',
+                    group: 'screen',
+                    type: 'number',
+                    value: value * -1
+                });
+            }
         }
     }
     parseValue(token, unit = 'rem') {
@@ -518,7 +503,7 @@ class MasterCSS {
         }
         /**
          * 2. value (ambiguous.key * ambiguous.values)
-         * @example bg:current box:content font:12
+         * @example bg:current box-content font:12
          */ for (const eachSyntax of this.definedRules){
             if (eachSyntax.matchers.value?.test(className)) return eachSyntax;
         }
@@ -548,7 +533,7 @@ class MasterCSS {
                 if (syntaxRule && syntaxRule.valid) {
                     syntaxRules.push(syntaxRule);
                 } else {
-                    console.error(`Invalid syntax class "${cls}" is in ${className} component.`);
+                    console.error(`Invalid class "${cls}" found in ${className} component.`);
                 }
             });
         } else {
@@ -672,14 +657,11 @@ class MasterCSS {
         }
     }
     getModeSelector(modeName) {
-        const mode = this.config.modes?.[modeName];
-        if (mode) {
-            switch(mode){
-                case 'class':
-                    return '.' + modeName;
-                case 'host':
-                    return ':host(.' + modeName + ')';
-            }
+        switch(this.config.modeTrigger){
+            case 'class':
+                return '.' + modeName;
+            case 'host':
+                return ':host(.' + modeName + ')';
         }
     }
 }