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

package/dist/core.mjs

@@ -9,6 +9,9 @@ import Layer from './layer.mjs';
 import SyntaxLayer from './syntax-layer.mjs';
 import NonLayer from './non-layer.mjs';
 import registerGlobal from './register-global.mjs';
+import parseAt from './utils/parse-at.mjs';
+import parseValue from './utils/parse-value.mjs';
+import parseSelector from './utils/parse-selector.mjs';
 
 class MasterCSS {
     customConfig;
@@ -17,6 +20,7 @@ class MasterCSS {
     config;
     layerStatementRule;
     rules;
+    classRules;
     animationsNonLayer;
     baseLayer;
     themeLayer;
@@ -26,19 +30,16 @@ class MasterCSS {
     components;
     selectors;
     variables;
-    at;
+    atRules;
     animations;
     constructor(customConfig){
         this.customConfig = customConfig;
         this.definedRules = [];
-        this.layerStatementRule = new Rule('layer-statement', [
-            {
-                text: '@layer base,theme,preset,components,general;'
-            }
-        ]);
+        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);
@@ -48,10 +49,9 @@ class MasterCSS {
         this.components = new Map();
         this.selectors = new Map();
         this.variables = new Map();
-        this.at = new Map();
+        this.atRules = new Map();
         this.animations = new Map();
-        this.config = customConfig?.override ? extendConfig(customConfig) : extendConfig(config, customConfig);
-        this.resolve();
+        this.resolve(customConfig);
     }
     get text() {
         return this.rules.sort((a, b)=>{
@@ -68,224 +68,433 @@ class MasterCSS {
             return indexA - indexB;
         }).map(({ text })=>text).join('');
     }
-    resolve() {
-        this.components.clear();
-        this.selectors.clear();
-        this.variables.clear();
-        this.at.clear();
-        this.animations.clear();
-        this.definedRules.length = 0;
-        const colorVariableNames = {
-            current: undefined,
-            currentColor: undefined,
-            transparent: undefined
-        };
-        const { components, selectors, variables, utilities, at, rules, animations } = this.config;
+    resolve(customConfig) {
+        if (customConfig) {
+            this.customConfig = customConfig;
+        } else {
+            customConfig = this.customConfig;
+        }
+        // @ts-expect-error read-only
+        this.config = customConfig?.override ? extendConfig(customConfig) : extendConfig(config, customConfig);
+        this.resolveVariables();
+        this.resolveAnimations();
+        this.resolveSelectors();
+        this.resolveAtRules();
+        this.resolveRules();
+        this.resolveComponents();
+    }
+    resolveAnimations() {
+        const { animations } = this.config;
+        if (animations) {
+            for(const animationName in animations){
+                const eachAnimation = {};
+                this.animations.set(animationName, eachAnimation);
+                const eachKeyframes = animations[animationName];
+                for(const eachKeyframeValue in eachKeyframes){
+                    const newValueByPropertyName = eachAnimation[eachKeyframeValue] = {};
+                    const eachKeyframeDeclarations = eachKeyframes[eachKeyframeValue];
+                    for(const propertyName in eachKeyframeDeclarations){
+                        newValueByPropertyName[propertyName] = eachKeyframeDeclarations[propertyName];
+                    }
+                }
+            }
+        }
+    }
+    resolveRules() {
+        const { rules, utilities } = this.config;
         function escapeString(str) {
             return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
         }
-        if (selectors) {
-            const resolvedSelectors = flattenObject(selectors);
-            for(const eachSelectorName in resolvedSelectors){
-                const eachResolvedSelectorText = resolvedSelectors[eachSelectorName];
-                const regexp = new RegExp(escapeString(eachSelectorName) + '(?![a-z-])');
-                for (const eachNewSelectorText of Array.isArray(eachResolvedSelectorText) ? eachResolvedSelectorText : [
-                    eachResolvedSelectorText
-                ]){
-                    const vendor = eachNewSelectorText.match(/^:(?::)?-(webkit|moz|ms|o)-/m)?.[1] ?? '';
-                    let selectorValues = this.selectors.get(vendor);
-                    if (!selectorValues) {
-                        this.selectors.set(vendor, selectorValues = []);
+        if (!rules && !utilities) return;
+        const rulesEntries = [];
+        // Collect utility rules
+        if (utilities) {
+            for(const utilityName in utilities){
+                const declarations = utilities[utilityName];
+                rulesEntries.push([
+                    utilityName,
+                    {
+                        declarations,
+                        type: SyntaxRuleType.Utility
                     }
-                    let currentSelectValue = selectorValues.find(([_valueRegexp])=>_valueRegexp === regexp);
-                    if (!currentSelectValue) {
-                        currentSelectValue = [
-                            regexp,
-                            []
-                        ];
-                        selectorValues.push(currentSelectValue);
+                ]);
+            }
+        }
+        // Collect normal rules
+        if (rules) {
+            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);
+            }
+            return b[0].localeCompare(a[0], undefined, {
+                numeric: true
+            });
+        }).forEach(([id, def], index)=>{
+            const order = rulesEntriesLength - 1 - index;
+            const syntax = {
+                id,
+                keys: [],
+                variables: {},
+                matchers: {},
+                order,
+                definition: def
+            };
+            def.unit ??= '';
+            def.separators ??= [
+                ','
+            ];
+            this.definedRules.push(syntax);
+            const { matcher, type, subkey, ambiguousKeys, ambiguousValues, sign, key: originalKey, variables: ruleVariableGroups } = def;
+            const keys = [];
+            let key = originalKey;
+            // Helper: resolve variable groups
+            const addResolvedVariables = (groupName)=>{
+                this.variables.forEach((v)=>{
+                    if (v.group === groupName) {
+                        syntax.variables[v.key] = v;
+                    }
+                });
+            };
+            // Rule-defined variable groups
+            if (ruleVariableGroups) {
+                ruleVariableGroups.forEach(addResolvedVariables);
+            }
+            // Auto variable binding
+            addResolvedVariables(id);
+            // Key derivation logic
+            if (type === SyntaxRuleType.NativeShorthand || type === SyntaxRuleType.Native) {
+                if (!key) def.key = key = id;
+                keys.push(id);
+            }
+            if (sign) {
+                syntax.matchers.arbitrary = new RegExp(`^${sign}[^!*>+~:[@_]+\\|`);
+            } else if (!matcher) {
+                if (!key && !subkey) {
+                    keys.push(id);
+                } else {
+                    if (key && !keys.includes(key)) keys.push(key);
+                    if (subkey) keys.push(subkey);
+                    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|_)`);
+                        syntax.matchers.value = new RegExp(`^${keyPattern}:(?:${valuePatterns.join('|')})[^|]*?(?:@|$)`);
+                    }
+                    if (variableKeys.length) {
+                        syntax.matchers.variable = new RegExp(`^${keyPattern}:(?:${variableKeys.join('|')}(?![a-zA-Z0-9-]))[^|]*?(?:@|$)`);
                     }
-                    currentSelectValue[1].push(eachNewSelectorText);
                 }
+            } else {
+                syntax.matchers.arbitrary = matcher;
             }
-        }
-        if (variables) {
-            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)
-                            };
+            // Utility rule matcher
+            if (type === SyntaxRuleType.Utility) {
+                syntax.id = '.' + id;
+                syntax.matchers.arbitrary = new RegExp('^' + escapeString(id) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm');
+            }
+            // Key matcher
+            if (keys.length) {
+                syntax.keys = keys;
+                syntax.matchers.key = new RegExp(`^${keys.length > 1 ? `(${keys.join('|')})` : keys[0]}:.`);
+            }
+        });
+    }
+    resolveComponents() {
+        const { components } = this.config;
+        const flatComps = components ? flattenObject(components) : {};
+        const names = Object.keys(flatComps);
+        const nameSet = new Set(names);
+        // First pass: expand class names recursively
+        for (const name of names){
+            if (this.components.has(name)) continue;
+            const currentClass = [];
+            this.components.set(name, currentClass);
+            const className = flatComps[name];
+            if (!className) continue;
+            const classNames = className.replace(/(?:\n\s*)+/g, ' ').trim().split(' ');
+            const seen = new Set();
+            const addClass = (cls)=>{
+                if (!seen.has(cls)) {
+                    seen.add(cls);
+                    currentClass.push(cls);
+                }
+            };
+            for (const eachClassName of classNames){
+                if (nameSet.has(eachClassName)) {
+                    addClass(eachClassName);
+                    // Lazy expand dependencies if not processed
+                    if (!this.components.has(eachClassName)) {
+                        const componentClass = flatComps[eachClassName];
+                        if (componentClass) {
+                            this.components.set(eachClassName, []) // placeholder to prevent infinite loop
+                            ;
+                            // Recursively resolve
+                            const depClassNames = componentClass.replace(/(?:\n\s*)+/g, ' ').trim().split(' ');
+                            depClassNames.forEach(addClass);
                         }
-                        colorVariableNames[flatName] = undefined;
                     }
-                    /**
-                     * resolve `variables.screen-*` to `at.*`
-                     */ if (variable.name.startsWith('screen-') && variable.type === 'number') {
-                        this.at.set(variable.name.slice(7), variable.value);
+                    const componentClasses = this.components.get(eachClassName);
+                    componentClasses?.forEach(addClass);
+                } else {
+                    addClass(eachClassName);
+                }
+            }
+        }
+        // Second pass: convert to grouped syntax rule strings
+        this.components.forEach((componentClasses, componentName)=>{
+            const syntaxRulesByStateToken = {};
+            for (const syntax of componentClasses){
+                const parsed = this.create(syntax);
+                if (parsed?.text) {
+                    const group = syntaxRulesByStateToken[parsed.stateToken] ||= [];
+                    group.push(parsed);
+                }
+            }
+            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];
+                const nodes = parseSelector(value, this, false);
+                this.selectors.set(token, nodes);
+            }
+        }
+    }
+    resolveAtRules() {
+        const { at, screens } = this.config;
+        if (screens) {
+            for(const key in screens){
+                const value = screens[key];
+                const node = this.parseValue(value);
+                this.atRules.set(key, {
+                    id: 'media',
+                    nodes: [
+                        node
+                    ]
+                });
+            }
+        }
+        if (at) {
+            const flatAt = flattenObject(at);
+            for(const token in flatAt){
+                const value = flatAt[token];
+                if (typeof value === 'number') {
+                    const node = this.parseValue(value);
+                    this.atRules.set(token, {
+                        id: 'media',
+                        nodes: [
+                            node
+                        ]
+                    });
+                } else {
+                    const atRule = parseAt(value, this, false);
+                    this.atRules.set(token, atRule);
+                }
+            }
+        }
+    }
+    resolveVariables() {
+        const { variables, screens } = 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);
-                        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;
-                                }
+                }
+                const currentMode = replacedMode ?? mode;
+                if (currentMode !== undefined) {
+                    const foundVariable = this.variables.get(flatName);
+                    if (foundVariable) {
+                        if (currentMode) {
+                            if (!foundVariable.modes) {
+                                foundVariable.modes = {};
                             }
+                            foundVariable.modes[currentMode] = variable;
                         } 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;
-                                }
-                                this.variables.set(flatName, newVariable);
-                            } else {
-                                this.variables.set(flatName, variable);
+                            foundVariable.value = variable.value;
+                            if (variable.type === 'color') {
+                                foundVariable.space = variable.space;
                             }
                         }
                     } else {
-                        this.variables.set(flatName, variable);
-                    }
-                };
-                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
-                                ]);
+                        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;
                             }
+                            this.variables.set(flatName, newVariable);
+                        } else {
+                            this.variables.set(flatName, variable);
                         }
                     }
-                } else if (typeof variableDefinition === 'number') {
+                } else {
+                    this.variables.set(flatName, variable);
+                }
+            };
+            if (typeof variableDefinition === 'object') {
+                if (Array.isArray(variableDefinition)) {
                     addVariable(name, {
-                        type: 'number',
-                        value: variableDefinition
+                        type: 'string',
+                        value: variableDefinition.join(',')
                     });
-                    addVariable([
-                        '',
-                        ...name
-                    ], {
-                        type: 'number',
-                        value: variableDefinition * -1
-                    });
-                } else if (typeof variableDefinition === 'string') {
-                    const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
-                    const flatName = name.join('-');
-                    if (aliasResult) {
-                        let aliasVariableModeResolver = aliasVariableModeResolvers.get(flatName);
-                        if (!aliasVariableModeResolver) {
-                            aliasVariableModeResolvers.set(flatName, aliasVariableModeResolver = {});
+                } 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
+                            ]);
                         }
-                        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]?.();
-                                    }
+                    }
+                }
+            } else if (typeof variableDefinition === 'number') {
+                addVariable(name, {
+                    type: 'number',
+                    value: variableDefinition
+                });
+                addVariable([
+                    '',
+                    ...name
+                ], {
+                    type: 'number',
+                    value: variableDefinition * -1
+                });
+            } else if (typeof variableDefinition === 'string') {
+                const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
+                const flatName = name.join('-');
+                if (aliasResult) {
+                    let aliasVariableModeResolver = aliasVariableModeResolvers.get(flatName);
+                    if (!aliasVariableModeResolver) {
+                        aliasVariableModeResolvers.set(flatName, 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]?.();
                                 }
-                                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]);
+                            }
+                            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]);
                                     }
                                 }
                             }
-                        };
+                        }
+                    };
+                } 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, {
+                            type: 'color',
+                            value: `${r} ${g} ${b}${a === 1 ? '' : ' / ' + a}`,
+                            space: 'rgb'
+                        });
                     } 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]);
+                        const rgbFunctionResult = /^rgb\( *([0-9]{1,3})(?: *, *| +)([0-9]{1,3})(?: *, *| +)([0-9]{1,3}) *(?:(?:,|\/) *(.*?) *)?\)$/.exec(variableDefinition);
+                        if (rgbFunctionResult) {
                             addVariable(name, {
                                 type: 'color',
-                                value: `${r} ${g} ${b}${a === 1 ? '' : ' / ' + a}`,
+                                value: rgbFunctionResult[1] + ' ' + rgbFunctionResult[2] + ' ' + rgbFunctionResult[3] + (rgbFunctionResult[4] ? ' / ' + (rgbFunctionResult[4].startsWith('0.') ? rgbFunctionResult[4].slice(1) : rgbFunctionResult[4]) : ''),
                                 space: 'rgb'
                             });
                         } else {
-                            const rgbFunctionResult = /^rgb\( *([0-9]{1,3})(?: *, *| +)([0-9]{1,3})(?: *, *| +)([0-9]{1,3}) *(?:(?:,|\/) *(.*?) *)?\)$/.exec(variableDefinition);
-                            if (rgbFunctionResult) {
+                            const hslFunctionResult = /^hsl\((.*?)\)$/.exec(variableDefinition);
+                            if (hslFunctionResult) {
                                 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'
+                                    value: hslFunctionResult[1],
+                                    space: 'hsl'
                                 });
                             } else {
-                                const hslFunctionResult = /^hsl\((.*?)\)$/.exec(variableDefinition);
-                                if (hslFunctionResult) {
-                                    addVariable(name, {
-                                        type: 'color',
-                                        value: hslFunctionResult[1],
-                                        space: 'hsl'
-                                    });
-                                } else {
-                                    addVariable(name, {
-                                        type: 'string',
-                                        value: variableDefinition
-                                    });
-                                }
+                                addVariable(name, {
+                                    type: 'string',
+                                    value: variableDefinition
+                                });
                             }
                         }
                     }
                 }
-            };
+            }
+        };
+        if (variables) {
             for(const parnetKey in variables){
                 resolveVariable(variables[parnetKey], [
                     parnetKey
@@ -298,178 +507,14 @@ class MasterCSS {
                 }
             });
         }
-        if (at) {
-            const resolvedAt = flattenObject(at);
-            for(const eachAt in resolvedAt){
-                this.at.set(eachAt, resolvedAt[eachAt]);
-            }
+        if (screens) {
+            resolveVariable(screens, [
+                'screen'
+            ]);
         }
-        if (animations) {
-            for(const animationName in animations){
-                const eachAnimation = {};
-                this.animations.set(animationName, eachAnimation);
-                const eachKeyframes = animations[animationName];
-                for(const eachKeyframeValue in eachKeyframes){
-                    const newValueByPropertyName = eachAnimation[eachKeyframeValue] = {};
-                    const eachKeyframeDeclarations = eachKeyframes[eachKeyframeValue];
-                    for(const propertyName in eachKeyframeDeclarations){
-                        newValueByPropertyName[propertyName] = eachKeyframeDeclarations[propertyName];
-                    }
-                }
-            }
-        }
-        const flattedStyles = components ? flattenObject(components) : {};
-        const utilityNames = Object.keys(flattedStyles);
-        const handleUtilityName = (utilityName)=>{
-            if (this.components.has(utilityName)) return;
-            const currentClass = [];
-            this.components.set(utilityName, currentClass);
-            const className = flattedStyles[utilityName];
-            if (!className) return;
-            const classNames = className.replace(/(?:\n(?:\s*))+/g, ' ').trim().split(' ');
-            for (const eachClassName of classNames){
-                const handle = (className)=>{
-                    if (!currentClass.includes(className)) {
-                        currentClass.push(className);
-                    }
-                };
-                if (utilityNames.includes(eachClassName)) {
-                    handleUtilityName(eachClassName);
-                    const componentClasses = this.components.get(eachClassName);
-                    componentClasses?.forEach(handle);
-                } else {
-                    handle(eachClassName);
-                }
-            }
-        };
-        for (const eachUtilityName of utilityNames){
-            handleUtilityName(eachUtilityName);
-        }
-        if (rules || utilities) {
-            const rulesEntries = [];
-            if (utilities) {
-                for(const utilityName in utilities){
-                    const declarations = utilities[utilityName];
-                    rulesEntries.push([
-                        utilityName,
-                        {
-                            declarations,
-                            type: SyntaxRuleType.Utility
-                        }
-                    ]);
-                }
-            }
-            if (rules) {
-                rulesEntries.push(...Object.entries(rules));
-            }
-            const rulesEntriesLength = rulesEntries.length;
-            const colorNames = Object.keys(colorVariableNames);
-            rulesEntries.sort((a, b)=>{
-                if (a[1].type !== b[1].type) {
-                    return (b[1].type || 0) - (a[1].type || 0);
-                }
-                return b[0].localeCompare(a[0]);
-            }).forEach(([id, eachSyntaxRuleDefinition], index)=>{
-                const syntax = {
-                    id,
-                    keys: [],
-                    variables: {},
-                    matchers: {},
-                    order: rulesEntriesLength - 1 - index,
-                    definition: eachSyntaxRuleDefinition
-                };
-                if (!eachSyntaxRuleDefinition.unit) {
-                    eachSyntaxRuleDefinition.unit = '';
-                }
-                if (!eachSyntaxRuleDefinition.separators) {
-                    eachSyntaxRuleDefinition.separators = [
-                        ','
-                    ];
-                }
-                this.definedRules.push(syntax);
-                const { matcher, type, subkey, ambiguousKeys, ambiguousValues, sign } = eachSyntaxRuleDefinition;
-                if (type === SyntaxRuleType.Utility) {
-                    syntax.id = '.' + id;
-                    syntax.matchers.arbitrary = new RegExp('^' + escapeString(id) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm');
-                }
-                // todo: 不可使用 startsWith 判斷，應改為更精準的從 config.variables 取得目標變數群組，但 config.variables 中的值還沒被 resolve 像是 Array
-                const addResolvedVariables = (groupName)=>{
-                    this.variables.forEach((eachVariable)=>{
-                        if (eachVariable.group === groupName) {
-                            syntax.variables[eachVariable.key] = eachVariable;
-                        }
-                    });
-                };
-                // 1. custom `config.rules[id].variables`
-                if (eachSyntaxRuleDefinition.variables) {
-                    for (const eachVariableGroup of eachSyntaxRuleDefinition.variables){
-                        addResolvedVariables(eachVariableGroup);
-                    }
-                }
-                // 2. custom `config.variables`
-                addResolvedVariables(id);
-                const keys = [];
-                let { key } = eachSyntaxRuleDefinition;
-                if (type === SyntaxRuleType.NativeShorthand || type === SyntaxRuleType.Native) {
-                    if (!key) eachSyntaxRuleDefinition.key = key = id;
-                    keys.push(id);
-                }
-                if (sign) {
-                    syntax.matchers.arbitrary = new RegExp(`^${sign}[^!*>+~:[@_]+\\|`);
-                } else if (!matcher) {
-                    const colorsPatten = colorNames.join('|');
-                    if (!key && !subkey) {
-                        keys.push(id);
-                    } else {
-                        if (key && !keys.includes(key)) keys.push(key);
-                        if (subkey) keys.push(subkey);
-                        if (type === SyntaxRuleType.Shorthand) {
-                            keys.push(id);
-                        }
-                    }
-                    if (ambiguousKeys?.length) {
-                        const ambiguousKeyPattern = ambiguousKeys.length > 1 ? `(?:${ambiguousKeys.join('|')})` : ambiguousKeys[0];
-                        const variableKeys = Object.keys(syntax.variables);
-                        if (ambiguousValues?.length) {
-                            const ambiguousValuePatterns = [];
-                            for (const eachAmbiguousValue of ambiguousValues){
-                                if (eachAmbiguousValue instanceof RegExp) {
-                                    ambiguousValuePatterns.push(eachAmbiguousValue.source.replace('\\$colors', colorsPatten));
-                                } else {
-                                    ambiguousValuePatterns.unshift(`${eachAmbiguousValue}(?:\\b|_)`);
-                                }
-                            }
-                            syntax.matchers.value = new RegExp(`^${ambiguousKeyPattern}:(?:${ambiguousValuePatterns.join('|')})[^|]*?(?:@|$)`);
-                        }
-                        if (variableKeys.length) {
-                            syntax.matchers.variable = new RegExp(`^${ambiguousKeyPattern}:(?:${variableKeys.join('|')}(?![a-zA-Z0-9-]))[^|]*?(?:@|$)`);
-                        }
-                    }
-                } else {
-                    syntax.matchers.arbitrary = matcher;
-                }
-                if (keys.length) {
-                    syntax.keys = keys;
-                    syntax.matchers.key = new RegExp(`^${keys.length > 1 ? `(${keys.join('|')})` : keys[0]}:.`);
-                }
-            });
-        }
-        this.components.forEach((componentClasses, componentClass)=>{
-            const syntaxRulesByStateToken = componentClasses.map((eachSyntax)=>this.create(eachSyntax)).filter((eachSyntax)=>eachSyntax?.text).reduce((obj, eachSyntaxRule)=>{
-                if (eachSyntaxRule.stateToken in obj) {
-                    obj[eachSyntaxRule.stateToken].push(eachSyntaxRule);
-                } else {
-                    obj[eachSyntaxRule.stateToken] = [
-                        eachSyntaxRule
-                    ];
-                }
-                return obj;
-            }, {});
-            this.components.set(componentClass, Object.keys(syntaxRulesByStateToken).map((stateToken)=>{
-                const syntaxRules = syntaxRulesByStateToken[stateToken];
-                return syntaxRules.length === 1 ? syntaxRules[0].name : '{' + syntaxRulesByStateToken[stateToken].map((eachSyntaxRule)=>eachSyntaxRule.name.slice(0, eachSyntaxRule.name.length - eachSyntaxRule.stateToken.length)).join(';') + '}' + stateToken;
-            }));
-        });
+    }
+    parseValue(token, unit = 'rem') {
+        return parseValue(token, unit, this.config.rootSize);
     }
     /**
      * Match check if Master CSS syntax
@@ -511,7 +556,9 @@ class MasterCSS {
         if (componentClasses) {
             componentClasses.forEach((eachSyntax)=>{
                 const syntaxRule = this.create(eachSyntax, className, mode);
-                if (syntaxRule?.text) syntaxRules.push(syntaxRule);
+                if (syntaxRule && syntaxRule.valid) {
+                    syntaxRules.push(syntaxRule);
+                }
             });
         } else {
             const atIndex = className.indexOf('@');
@@ -522,98 +569,18 @@ class MasterCSS {
                     const atToken = className.slice(atIndex);
                     componentClasses.forEach((eachSyntax)=>{
                         const syntaxRule = this.create(eachSyntax + atToken, className, mode);
-                        if (syntaxRule?.text) syntaxRules.push(syntaxRule);
+                        if (syntaxRule && syntaxRule.valid) {
+                            syntaxRules.push(syntaxRule);
+                        }
                     });
                 }
             }
             const syntaxRule = this.create(className, undefined, mode);
-            if (syntaxRule?.text) syntaxRules.push(syntaxRule);
-        }
-        return syntaxRules;
-    }
-    generateVendorSelectors(selectorText) {
-        const vendorSelectors = {};
-        const transformSelector = (selectorText, selectorValues, selectors, matched)=>{
-            for (const [regexp, newSelectorTexts] of selectorValues){
-                if (regexp.test(selectorText)) {
-                    for (const eachNewSelectorText of newSelectorTexts){
-                        transformSelector(selectorText.replace(regexp, eachNewSelectorText), selectorValues, selectors, true);
-                    }
-                    return;
-                }
-            }
-            if (matched) {
-                selectors.push(selectorText);
-            }
-        };
-        const spacedSelectorToken = (selectorText)=>{
-            // 1. \'123\'
-            // 2. [href='http://localhost']
-            const transformedSelectorText = selectorText.split(/(\\'(?:.*?)[^\\]\\')(?=[*_>~+,)])|(\[[^=]+='(?:.*?)[^\\]'\])/).map((eachToken, i)=>i % 3 ? eachToken : eachToken.replace(/(^|[^_])_(?!_)/g, '$1 ')).join('');
-            const selectors = [];
-            let currentSelector = '';
-            let symbolCount = 0;
-            for(let i = 0; i < transformedSelectorText.length; i++){
-                const char = transformedSelectorText[i];
-                if (char === '\\') {
-                    currentSelector += char + transformedSelectorText[++i];
-                    continue;
-                }
-                if (!symbolCount && char === ',') {
-                    selectors.push(currentSelector);
-                    currentSelector = '';
-                } else {
-                    currentSelector += char;
-                    if (symbolCount && char === ')') {
-                        symbolCount--;
-                    } else if (char === '(') {
-                        symbolCount++;
-                    }
-                }
-            }
-            if (currentSelector) {
-                selectors.push(currentSelector);
-            }
-            return selectors;
-        };
-        const transformedSelectors = [];
-        const selectorValues = this.selectors.get('');
-        if (selectorValues) {
-            transformSelector(selectorText, selectorValues, transformedSelectors, true);
-        } else {
-            transformedSelectors.push(selectorText);
-        }
-        const unspacedVendorSelectors = {};
-        this.selectors.forEach((selectorValues, vendor)=>{
-            if (!vendor) return;
-            const newUnspacedVendorSelectors = [];
-            for (const eachTransformedSelector of transformedSelectors){
-                transformSelector(eachTransformedSelector, selectorValues, newUnspacedVendorSelectors, false);
-            }
-            if (newUnspacedVendorSelectors.length) {
-                unspacedVendorSelectors[vendor] = newUnspacedVendorSelectors;
-            }
-        });
-        const insertVendorSelectors = (vendor, selectorTexts)=>{
-            const groupedSelectorTexts = selectorTexts.reduce((arr, eachSuffixSelector)=>{
-                arr.push(...spacedSelectorToken(eachSuffixSelector));
-                return arr;
-            }, []);
-            if (vendor in vendorSelectors) {
-                vendorSelectors[vendor].push(...groupedSelectorTexts);
-            } else {
-                vendorSelectors[vendor] = groupedSelectorTexts;
-            }
-        };
-        const vendors = Object.keys(unspacedVendorSelectors);
-        if (vendors.length) {
-            for (const eachVendor of vendors){
-                insertVendorSelectors(eachVendor, unspacedVendorSelectors[eachVendor]);
+            if (syntaxRule && syntaxRule.valid) {
+                syntaxRules.push(syntaxRule);
             }
-        } else {
-            insertVendorSelectors('', transformedSelectors);
         }
-        return vendorSelectors;
+        return syntaxRules;
     }
     /**
      * Create syntax rule from given class name
@@ -634,7 +601,7 @@ class MasterCSS {
         for(let i = 0; i < selectorTextSplits.length; i++){
             const eachField = selectorTextSplits[i];
             const modeSelector = this.getModeSelector(eachField);
-            if (i === 0 && eachField === modeSelector) continue;
+            if (i === 0 && eachField === modeSelector || (i === 0 || i === 1) && eachField === this.config.scope) continue;
             if (eachField.startsWith('.')) {
                 const eachFieldName = eachField.slice(1);
                 let className = '';
@@ -660,17 +627,23 @@ class MasterCSS {
      * 根據蒐集到的所有 DOM class 重新 create
      */ refresh(customConfig) {
         this.reset();
-        if (customConfig) {
-            this.customConfig = customConfig;
-        } else {
-            customConfig = this.customConfig;
-        }
-        // @ts-ignore
-        this.config = customConfig?.override ? extendConfig(customConfig) : extendConfig(config, customConfig);
-        this.resolve();
+        this.resolve(customConfig);
         return this;
     }
     reset() {
+        // @ts-ignore
+        this.animations = new Map();
+        // @ts-ignore
+        this.variables = new Map();
+        // @ts-ignore
+        this.atRules = new Map();
+        // @ts-ignore
+        this.selectors = new Map();
+        // @ts-ignore
+        this.components = new Map();
+        // @ts-ignore
+        this.classRules = new Map();
+        this.definedRules.length = 0;
         this.baseLayer.reset();
         this.themeLayer.reset();
         this.presetLayer.reset();
@@ -685,7 +658,13 @@ class MasterCSS {
     }
     add(...classNames) {
         for (const className of classNames){
-            this.generate(className).forEach((eachSyntaxRule)=>eachSyntaxRule.layer.insert(eachSyntaxRule));
+            const rules = this.classRules.get(className);
+            if (rules) continue;
+            const newRules = this.generate(className);
+            if (newRules.length) {
+                newRules.forEach((eachSyntaxRule)=>eachSyntaxRule.layer.insert(eachSyntaxRule));
+                this.classRules.set(className, newRules);
+            }
         }
         return this;
     }
@@ -694,27 +673,10 @@ class MasterCSS {
          * class name 從 DOM tree 中被移除，
          * 匹配並刪除對應的 rule
          */ for (const className of classNames){
-            const componentClasses = this.components.get(className);
-            if (componentClasses) {
-                componentClasses.forEach((componentClass)=>{
-                    this.componentsLayer.delete(className + ' ' + componentClass);
-                });
-            } else {
-                const atIndex = className.indexOf('@');
-                if (atIndex !== -1) {
-                    const name = className.slice(0, atIndex);
-                    const componentClasses = this.components.get(name);
-                    if (componentClasses) {
-                        const atToken = className.slice(atIndex);
-                        componentClasses.forEach((componentClass)=>{
-                            this.componentsLayer.delete(componentClass + atToken + ' ' + className);
-                        });
-                    } else {
-                        this.generalLayer.delete(className);
-                    }
-                } else {
-                    this.generalLayer.delete(className);
-                }
+            const rules = this.classRules.get(className);
+            if (rules) {
+                rules.forEach((rule)=>rule.layer.delete(rule.key));
+                this.classRules.delete(className);
             }
         }
     }