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

package/dist/core.mjs

@@ -1,9 +1,9 @@
 import { Rule } from './rule.mjs';
 import { config } from './config/index.mjs';
-import { Layer } from './layer.mjs';
-import { hexToRgb } from './utils/hex-to-rgb.mjs';
+import Layer from './layer.mjs';
+import hexToRgb from './utils/hex-to-rgb.mjs';
 import { flattenObject } from './utils/flatten-object.mjs';
-import { extendConfig } from './utils/extend-config.mjs';
+import extendConfig from './utils/extend-config.mjs';
 
 class MasterCSS {
     customConfig;
@@ -12,15 +12,13 @@ class MasterCSS {
     ruleBy;
     classesUsage;
     config;
-    RegisteredSemanticRules;
-    RegisteredRules;
+    Rules;
     constructor(customConfig = config){
         this.customConfig = customConfig;
         this.rules = [];
         this.ruleBy = {};
         this.classesUsage = {};
-        this.RegisteredSemanticRules = [];
-        this.RegisteredRules = [];
+        this.Rules = [];
         if (!customConfig?.override) {
             this.config = extendConfig(config, customConfig);
         } else {
@@ -36,10 +34,9 @@ class MasterCSS {
         this.stylesBy = {};
         this.selectors = {};
         this.variables = {};
-        this.mediaQueries = {};
+        this.queries = {};
         this.animations = {};
-        this.RegisteredRules.length = 0;
-        this.RegisteredSemanticRules.length = 0;
+        this.Rules.length = 0;
         this.variablesNativeRules = {};
         this.hasKeyframesRule = false;
         const colorVariableNames = {
@@ -47,7 +44,7 @@ class MasterCSS {
             currentColor: undefined,
             transparent: undefined
         };
-        const { styles, selectors, variables, semantics, mediaQueries, rules, animations } = this.config;
+        const { styles, selectors, variables, utilities, queries, rules, animations } = this.config;
         function escapeString(str) {
             return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
         }
@@ -78,109 +75,124 @@ class MasterCSS {
         }
         if (variables) {
             const unexecutedAliasVariable = {};
-            const parseVariable = (variable, name, theme)=>{
-                if (!variable) return;
-                const addVariable = (name, variableValue, replacedTheme, alpha)=>{
-                    if (variableValue === undefined) return;
-                    if (variableValue.type === 'color') {
+            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 = variableValue.value.indexOf('/');
-                            variableValue = {
-                                ...variableValue,
-                                value: slashIndex === -1 ? variableValue.value + ' / ' + (alpha.startsWith('0.') ? alpha.slice(1) : alpha) : variableValue.value.slice(0, slashIndex + 2) + String(+variableValue.value.slice(slashIndex + 2) * +alpha).slice(1)
+                            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)
                             };
                         }
-                        colorVariableNames[name] = undefined;
+                        colorVariableNames[flatName] = undefined;
                     }
-                    const currentTheme = replacedTheme ?? theme;
-                    if (currentTheme !== undefined) {
-                        if (Object.prototype.hasOwnProperty.call(this.variables, name)) {
-                            const variable = this.variables[name];
-                            if (currentTheme) {
-                                if (!variable.themes) {
-                                    variable.themes = {};
+                    const currentMode = replacedMode ?? mode;
+                    if (currentMode !== undefined) {
+                        if (Object.prototype.hasOwnProperty.call(this.variables, flatName)) {
+                            const foundVariable = this.variables[flatName];
+                            if (currentMode) {
+                                if (!foundVariable.modes) {
+                                    foundVariable.modes = {};
                                 }
-                                variable.themes[currentTheme] = variableValue;
+                                foundVariable.modes[currentMode] = variable;
                             } else {
-                                variable.value = variableValue.value;
-                                if (variableValue.type === 'color') {
-                                    variable.space = variableValue.space;
+                                foundVariable.value = variable.value;
+                                if (variable.type === 'color') {
+                                    foundVariable.space = variable.space;
                                 }
                             }
                         } else {
-                            if (currentTheme) {
+                            if (currentMode) {
                                 const newVariable = {
-                                    type: variableValue.type,
-                                    themes: {
-                                        [currentTheme]: variableValue
+                                    key: variable.key,
+                                    name: variable.name,
+                                    group: variable.group,
+                                    type: variable.type,
+                                    modes: {
+                                        [currentMode]: variable
                                     }
                                 };
-                                if (variableValue.type === 'color') {
-                                    newVariable.space = variableValue.space;
+                                if (variable.type === 'color') {
+                                    newVariable.space = variable.space;
                                 }
-                                this.variables[name] = newVariable;
+                                this.variables[flatName] = newVariable;
                             } else {
-                                this.variables[name] = variableValue;
+                                this.variables[flatName] = variable;
                             }
                         }
                     } else {
-                        this.variables[name] = variableValue;
+                        this.variables[flatName] = variable;
                     }
                 };
-                const type = typeof variable;
-                if (type === 'object') {
-                    if (Array.isArray(variable)) {
+                if (typeof variableDefinition === 'object') {
+                    if (Array.isArray(variableDefinition)) {
                         addVariable(name, {
                             type: 'string',
-                            value: variable.join(',')
+                            value: variableDefinition.join(',')
                         });
                     } else {
-                        const keys = Object.keys(variable);
+                        const keys = Object.keys(variableDefinition);
                         for (const eachKey of keys){
                             if (eachKey === '' || eachKey.startsWith('@')) {
-                                parseVariable(variable[eachKey], name, eachKey || keys.some((eachKey)=>eachKey.startsWith('@')) ? eachKey.slice(1) : undefined);
+                                resolveVariable(variableDefinition[eachKey], name, eachKey || keys.some((eachKey)=>eachKey.startsWith('@')) ? eachKey.slice(1) : undefined);
                             } else {
-                                parseVariable(variable[eachKey], name + '-' + eachKey, undefined);
+                                resolveVariable(variableDefinition[eachKey], [
+                                    ...name,
+                                    eachKey
+                                ]);
                             }
                         }
                     }
-                } else if (type === 'number') {
+                } else if (typeof variableDefinition === 'number') {
                     addVariable(name, {
                         type: 'number',
-                        value: variable
+                        value: variableDefinition
                     });
-                    addVariable('-' + name, {
+                    addVariable([
+                        '',
+                        ...name
+                    ], {
                         type: 'number',
-                        value: variable * -1
+                        value: variableDefinition * -1
                     });
-                } else if (type === 'string') {
-                    const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variable);
+                } else if (typeof variableDefinition === 'string') {
+                    const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
+                    const flatName = name.join('-');
                     if (aliasResult) {
-                        if (!Object.prototype.hasOwnProperty.call(unexecutedAliasVariable, name)) {
-                            unexecutedAliasVariable[name] = {};
+                        if (!Object.prototype.hasOwnProperty.call(unexecutedAliasVariable, flatName)) {
+                            unexecutedAliasVariable[flatName] = {};
                         }
-                        unexecutedAliasVariable[name][theme] = ()=>{
-                            delete unexecutedAliasVariable[name][theme];
-                            const [alias, aliasTheme] = aliasResult[1].split('@');
+                        unexecutedAliasVariable[flatName][mode] = ()=>{
+                            delete unexecutedAliasVariable[flatName][mode];
+                            const [alias, aliasMode] = aliasResult[1].split('@');
                             if (alias) {
                                 if (Object.prototype.hasOwnProperty.call(unexecutedAliasVariable, alias)) {
-                                    for (const theme of Object.keys(unexecutedAliasVariable[alias])){
-                                        unexecutedAliasVariable[alias][theme]?.();
+                                    for (const mode of Object.keys(unexecutedAliasVariable[alias])){
+                                        unexecutedAliasVariable[alias][mode]?.();
                                     }
                                 }
                                 const aliasVariable = this.variables[alias];
                                 if (aliasVariable) {
-                                    if (aliasTheme === undefined && aliasVariable.themes) {
+                                    if (aliasMode === undefined && aliasVariable.modes) {
                                         addVariable(name, {
                                             type: aliasVariable.type,
                                             value: aliasVariable.value,
                                             space: aliasVariable.space
                                         }, '', aliasResult[2]);
-                                        for(const theme in aliasVariable.themes){
-                                            addVariable(name, aliasVariable.themes[theme], theme, aliasResult[2]);
+                                        for(const mode in aliasVariable.modes){
+                                            addVariable(name, aliasVariable.modes[mode], mode, aliasResult[2]);
                                         }
                                     } else {
-                                        const variable = aliasTheme !== undefined ? aliasVariable.themes?.[aliasTheme] : aliasVariable;
+                                        const variable = aliasMode !== undefined ? aliasVariable.modes?.[aliasMode] : aliasVariable;
                                         if (variable) {
                                             const newVariable = {
                                                 type: variable.type,
@@ -196,7 +208,7 @@ class MasterCSS {
                             }
                         };
                     } else {
-                        const hexColorResult = /^#([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.exec(variable);
+                        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, {
@@ -205,7 +217,7 @@ class MasterCSS {
                                 space: 'rgb'
                             });
                         } else {
-                            const rgbFunctionResult = /^rgb\( *([0-9]{1,3})(?: *, *| +)([0-9]{1,3})(?: *, *| +)([0-9]{1,3}) *(?:(?:,|\/) *(.*?) *)?\)$/.exec(variable);
+                            const rgbFunctionResult = /^rgb\( *([0-9]{1,3})(?: *, *| +)([0-9]{1,3})(?: *, *| +)([0-9]{1,3}) *(?:(?:,|\/) *(.*?) *)?\)$/.exec(variableDefinition);
                             if (rgbFunctionResult) {
                                 addVariable(name, {
                                     type: 'color',
@@ -213,7 +225,7 @@ class MasterCSS {
                                     space: 'rgb'
                                 });
                             } else {
-                                const hslFunctionResult = /^hsl\((.*?)\)$/.exec(variable);
+                                const hslFunctionResult = /^hsl\((.*?)\)$/.exec(variableDefinition);
                                 if (hslFunctionResult) {
                                     addVariable(name, {
                                         type: 'color',
@@ -223,7 +235,7 @@ class MasterCSS {
                                 } else {
                                     addVariable(name, {
                                         type: 'string',
-                                        value: variable
+                                        value: variableDefinition
                                     });
                                 }
                             }
@@ -232,16 +244,19 @@ class MasterCSS {
                 }
             };
             for(const parnetKey in variables){
-                parseVariable(variables[parnetKey], parnetKey);
+                resolveVariable(variables[parnetKey], [
+                    parnetKey
+                ]);
             }
+            // todo: address to the target variable
             for (const name of Object.keys(unexecutedAliasVariable)){
-                for (const theme of Object.keys(unexecutedAliasVariable[name])){
-                    unexecutedAliasVariable[name][theme]?.();
+                for (const mode of Object.keys(unexecutedAliasVariable[name])){
+                    unexecutedAliasVariable[name][mode]?.();
                 }
             }
         }
-        if (mediaQueries) {
-            this.mediaQueries = flattenObject(mediaQueries);
+        if (queries) {
+            this.queries = flattenObject(queries);
         }
         if (animations) {
             for(const animationName in animations){
@@ -257,31 +272,31 @@ class MasterCSS {
             }
         }
         const flattedStyles = styles ? flattenObject(styles) : {};
-        const semanticNames = Object.keys(flattedStyles);
-        const handleSemanticName = (semanticName)=>{
-            if (Object.prototype.hasOwnProperty.call(this.styles, semanticName)) return;
-            const currentClass = this.styles[semanticName] = [];
-            const className = flattedStyles[semanticName];
+        const utilityNames = Object.keys(flattedStyles);
+        const handleUtilityName = (utilityName)=>{
+            if (Object.prototype.hasOwnProperty.call(this.styles, utilityName)) return;
+            const currentClass = this.styles[utilityName] = [];
+            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 (Object.prototype.hasOwnProperty.call(this.stylesBy, className)) {
                         const currentRelation = this.stylesBy[className];
-                        if (!currentRelation.includes(semanticName)) {
-                            currentRelation.push(semanticName);
+                        if (!currentRelation.includes(utilityName)) {
+                            currentRelation.push(utilityName);
                         }
                     } else {
                         this.stylesBy[className] = [
-                            semanticName
+                            utilityName
                         ];
                     }
                     if (!currentClass.includes(className)) {
                         currentClass.push(className);
                     }
                 };
-                if (semanticNames.includes(eachClassName)) {
-                    handleSemanticName(eachClassName);
+                if (utilityNames.includes(eachClassName)) {
+                    handleUtilityName(eachClassName);
                     for (const parentClassName of this.styles[eachClassName]){
                         handle(parentClassName);
                     }
@@ -290,49 +305,54 @@ class MasterCSS {
                 }
             }
         };
-        for (const eachSemanticName of semanticNames){
-            handleSemanticName(eachSemanticName);
+        for (const eachUtilityName of utilityNames){
+            handleUtilityName(eachUtilityName);
         }
-        if (semantics) {
-            Object.entries(semantics).sort((a, b)=>a[0].localeCompare(b[0])).forEach(([id, declarations], index)=>{
-                this.RegisteredSemanticRules.push({
-                    id: '.' + id,
-                    match: new RegExp('^' + escapeString(id) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm'),
-                    order: index,
-                    definition: {
-                        declarations,
-                        layer: Layer.Semantic
-                    }
-                });
-            });
-        }
-        if (rules) {
-            const rulesEntries = Object.entries(rules).sort((a, b)=>{
+        if (rules || utilities) {
+            const rulesEntries = [];
+            if (utilities) {
+                for(const utilityName in utilities){
+                    const declarations = utilities[utilityName];
+                    rulesEntries.push([
+                        utilityName,
+                        {
+                            declarations,
+                            layer: Layer.Utility
+                        }
+                    ]);
+                }
+            }
+            if (rules) {
+                rulesEntries.push(...Object.entries(rules));
+            }
+            const rulesEntriesLength = rulesEntries.length;
+            const colorNames = Object.keys(colorVariableNames);
+            rulesEntries.sort((a, b)=>{
                 if (a[1].layer !== b[1].layer) {
                     return (b[1].layer || 0) - (a[1].layer || 0);
                 }
                 return b[0].localeCompare(a[0]);
-            });
-            const rulesEntriesLength = rulesEntries.length;
-            const colorNames = Object.keys(colorVariableNames);
-            rulesEntries.forEach(([id, eachRuleDefinition], index)=>{
-                const eachRegisteredRule = {
+            }).forEach(([id, eachRuleDefinition], index)=>{
+                const EachRule = {
                     id,
+                    keys: [],
                     variables: {},
-                    order: this.RegisteredSemanticRules.length + rulesEntriesLength - 1 - index,
+                    matchers: {},
+                    order: rulesEntriesLength - 1 - index,
                     definition: eachRuleDefinition
                 };
-                this.RegisteredRules.push(eachRegisteredRule);
-                const match = eachRuleDefinition.match;
+                this.Rules.push(EachRule);
+                const { matcher, layer, subkey, ambiguousKeys, ambiguousValues, sign } = eachRuleDefinition;
+                if (layer === Layer.Utility) {
+                    EachRule.id = '.' + id;
+                    EachRule.matchers.arbitrary = new RegExp('^' + escapeString(id) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm');
+                }
                 // todo: 不可使用 startsWith 判斷，應改為更精準的從 config.variables 取得目標變數群組，但 config.variables 中的值還沒被 resolve 像是 Array
-                const addResolvedVariables = (prefix)=>{
+                const addResolvedVariables = (groupName)=>{
                     for(const eachVariableName in this.variables){
-                        if (eachVariableName.startsWith(prefix + '-') || eachVariableName.startsWith('-' + prefix + '-')) {
-                            const simplifiedName = eachVariableName.slice(prefix.length + (prefix.startsWith('-') ? 0 : 1));
-                            eachRegisteredRule.variables[simplifiedName] = {
-                                ...this.variables[eachVariableName],
-                                name: eachVariableName
-                            };
+                        const eachVariable = this.variables[eachVariableName];
+                        if (eachVariable.group === groupName) {
+                            EachRule.variables[eachVariable.key] = eachVariable;
                         }
                     }
                 };
@@ -344,26 +364,49 @@ class MasterCSS {
                 }
                 // 2. custom `config.variables`
                 addResolvedVariables(id);
-                if (match) {
-                    if (Array.isArray(match)) {
-                        const [key, values = []] = match;
-                        const valueMatches = [];
-                        if (values.length) {
-                            valueMatches.push(`(?:${values.join('|')})(?![a-zA-Z0-9-])`);
-                        }
-                        if (Object.keys(eachRegisteredRule.variables).length) {
-                            valueMatches.push(`(?:${Object.keys(eachRegisteredRule.variables).join('|')})(?![a-zA-Z0-9-])`);
+                const keys = [];
+                let { key } = eachRuleDefinition;
+                if (layer === Layer.NativeShorthand || layer === Layer.Native) {
+                    if (!key) eachRuleDefinition.key = key = id;
+                    keys.push(id);
+                }
+                if (sign) {
+                    EachRule.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 (layer === Layer.Shorthand) {
+                            keys.push(id);
                         }
-                        if (eachRuleDefinition.colored) {
-                            valueMatches.push('#', '(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla)\\(.*\\)', `(?:${colorNames.join('|')})(?![a-zA-Z0-9-])`);
+                    }
+                    if (ambiguousKeys?.length) {
+                        const ambiguousKeyPattern = ambiguousKeys.length > 1 ? `(?:${ambiguousKeys.join('|')})` : ambiguousKeys[0];
+                        const variableKeys = Object.keys(EachRule.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|_)`);
+                                }
+                            }
+                            EachRule.matchers.value = new RegExp(`^${ambiguousKeyPattern}:(?:${ambiguousValuePatterns.join('|')})[^|]*?(?:@|$)`);
                         }
-                        if (eachRuleDefinition.numeric) {
-                            valueMatches.push('[\\d\\.]', '(?:max|min|calc|clamp)\\(.*\\)');
+                        if (variableKeys.length) {
+                            EachRule.matchers.variable = new RegExp(`^${ambiguousKeyPattern}:(?:${variableKeys.join('|')}(?![a-zA-Z0-9-]))[^|]*?(?:@|$)`);
                         }
-                        if (valueMatches.length) eachRegisteredRule.match = new RegExp(`^${key}:(?:${valueMatches.join('|')})[^|]*?(?:@|$)`);
-                    } else {
-                        eachRegisteredRule.match = match;
                     }
+                } else {
+                    EachRule.matchers.arbitrary = matcher;
+                }
+                if (keys.length) {
+                    EachRule.keys = keys;
+                    EachRule.matchers.key = new RegExp(`^${keys.length > 1 ? `(${keys.join('|')})` : keys[0]}:`);
                 }
             });
         }
@@ -373,17 +416,29 @@ class MasterCSS {
      * @param className
      * @returns css text
      */ match(className) {
-        // 1. rules
-        for (const eachRegisteredRule of this.RegisteredRules){
-            if (eachRegisteredRule.match?.test(className) || (eachRegisteredRule.definition.layer === Layer.Native || eachRegisteredRule.definition.layer === Layer.NativeShorthand || eachRegisteredRule.definition.layer === Layer.CoreNative || eachRegisteredRule.definition.layer === Layer.CoreNativeShorthand) && className.startsWith(eachRegisteredRule.id + ':')) {
-                return eachRegisteredRule;
-            }
+        /**
+         * 1. variable
+         * @example fg:primary bg:blue
+         */ for (const EachRule of this.Rules){
+            if (EachRule.matchers.variable?.test(className)) return EachRule;
         }
-        // 2. semantic rules
-        for (const EachRegisteredSemanticRule of this.RegisteredSemanticRules){
-            if (EachRegisteredSemanticRule.match?.test(className)) {
-                return EachRegisteredSemanticRule;
-            }
+        /**
+         * 2. value (ambiguous.key * ambiguous.values)
+         * @example bg:current box:content font:12
+         */ for (const EachRule of this.Rules){
+            if (EachRule.matchers.value?.test(className)) return EachRule;
+        }
+        /**
+         * 3. full key
+         * @example text-align:center color:blue-40
+         */ for (const EachRule of this.Rules){
+            if (EachRule.matchers.key?.test(className)) return EachRule;
+        }
+        /**
+         * 4. arbitrary
+         * @example custom RegExp, utility
+         */ for (const EachRule of this.Rules){
+            if (EachRule.matchers.arbitrary?.test(className)) return EachRule;
         }
     }
     /**
@@ -401,14 +456,19 @@ class MasterCSS {
      * @returns Rule
      */ create(syntax) {
         if (Object.prototype.hasOwnProperty.call(this.ruleBy, syntax)) return this.ruleBy[syntax];
-        const RegistedRule = this.match(syntax);
-        if (RegistedRule) {
-            return new Rule(syntax, RegistedRule, this);
+        const RegisteredRule = this.match(syntax);
+        if (RegisteredRule) {
+            return new Rule(syntax, RegisteredRule, this);
         }
     }
     /**
      * 根據蒐集到的所有 DOM class 重新 create
-     */ refresh(customConfig = this.customConfig) {
+     */ refresh(customConfig) {
+        if (customConfig) {
+            this.customConfig = customConfig;
+        } else {
+            customConfig = this.customConfig;
+        }
         if (!customConfig?.override) {
             // @ts-ignore
             this.config = extendConfig(config, customConfig);
@@ -491,15 +551,15 @@ class MasterCSS {
                     const variable = this.variables[eachVariableName];
                     if (!variable.usage) variable.usage = 0;
                     if (!--variable.usage) {
-                        const removeProperty = (theme)=>{
-                            const nativeRule = this.variablesNativeRules[theme];
+                        const removeProperty = (mode)=>{
+                            const nativeRule = this.variablesNativeRules[mode];
                             nativeRule.cssRule.style.removeProperty('--' + eachVariableName);
                             if (!nativeRule.cssRule.style.length) {
                                 const variablesRule = this.rules[0];
                                 const index = variablesRule.natives.indexOf(nativeRule);
                                 sheet?.deleteRule(index);
                                 variablesRule.natives.splice(index, 1);
-                                delete this.variablesNativeRules[theme];
+                                delete this.variablesNativeRules[mode];
                                 if (!variablesRule.natives.length) {
                                     this.rules.splice(0, 1);
                                     this.variablesNativeRules = {};
@@ -509,9 +569,9 @@ class MasterCSS {
                         if (variable.value) {
                             removeProperty('');
                         }
-                        if (variable.themes) {
-                            for(const theme in variable.themes){
-                                removeProperty(theme);
+                        if (variable.modes) {
+                            for(const mode in variable.modes){
+                                removeProperty(mode);
                             }
                         }
                     }
@@ -526,7 +586,7 @@ class MasterCSS {
                     if (!keyframe.usage) keyframe.usage = 0;
                     if (!--keyframe.usage && keyframe.native) {
                         const nativeIndex = keyframeRule.natives.indexOf(keyframe.native);
-                        this.style.sheet?.deleteRule(Object.keys(this.variablesNativeRules).length + nativeIndex);
+                        sheet?.deleteRule(Object.keys(this.variablesNativeRules).length + nativeIndex);
                         keyframeRule.natives.splice(nativeIndex, 1);
                         keyframe.native = undefined;
                     }
@@ -574,7 +634,7 @@ class MasterCSS {
          * @example <1  <2  <3  ALL  >=1 >=2 >=3
          * @description
          */ const endIndex = this.rules.length - 1;
-        const { media, order, priority, hasWhere, className } = rule;
+        const { at, atToken, order, priority, hasWhere, className } = rule;
         const findIndex = (startIndex, stopCheck, matchCheck)=>{
             let i = startIndex;
             for(; i <= endIndex; i++){
@@ -586,14 +646,15 @@ class MasterCSS {
         };
         let matchStartIndex;
         let matchEndIndex;
-        if (media) {
-            const mediaStartIndex = this.rules.findIndex((eachRule)=>eachRule.media);
+        if (atToken) {
+            const mediaStartIndex = this.rules.findIndex((eachRule)=>eachRule.at?.media);
             if (mediaStartIndex === -1) {
                 index = endIndex + 1;
             } else {
-                const { 'max-width': maxWidthFeature, 'min-width': minWidthFeature } = media.features;
+                const maxWidthFeature = at.media?.find(({ name })=>name === 'max-width');
+                const minWidthFeature = at.media?.find(({ name })=>name === 'min-width');
                 if (maxWidthFeature || minWidthFeature) {
-                    const mediaWidthStartIndex = this.rules.findIndex((eachRule)=>eachRule.media?.features['max-width'] || eachRule.media?.features['min-width']);
+                    const mediaWidthStartIndex = this.rules.findIndex((eachRule)=>eachRule.at?.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
                     if (mediaWidthStartIndex === -1) {
                         index = endIndex + 1;
                     } else {
@@ -604,10 +665,10 @@ class MasterCSS {
                              * find 第一個所遇到同樣 feature 且範圍值比自己大的 rule，
                              * 並插入在該 rule 之後，讓自己優先被套用
                              */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.priority !== -1, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width']);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.priority !== -1, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width'));
                                 matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.priority !== -1);
                             } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, undefined, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width'] && eachRule.priority !== -1);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, undefined, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1);
                                 matchEndIndex = endIndex;
                             }
                             if (matchStartIndex !== -1) {
@@ -616,7 +677,9 @@ class MasterCSS {
                                 const endI = matchStartIndex;
                                 matchStartIndex = undefined;
                                 for(; i >= endI; i--){
-                                    const { 'max-width': eachMaxWidthFeature, 'min-width': eachMinWidthFeature } = this.rules[i].media.features;
+                                    const eachRule = this.rules[i];
+                                    const eachMaxWidthFeature = eachRule.at.media?.find(({ name })=>name === 'max-width');
+                                    const eachMinWidthFeature = eachRule.at.media?.find(({ name })=>name === 'min-width');
                                     const eachRange = eachMaxWidthFeature.value - eachMinWidthFeature.value;
                                     if (eachRange < range) {
                                         matchEndIndex = i - 1;
@@ -630,7 +693,9 @@ class MasterCSS {
                             if (matchStartIndex !== -1 && matchStartIndex !== undefined) {
                                 const range = maxWidthFeature.value - minWidthFeature.value;
                                 for(let i = matchEndIndex; i >= matchStartIndex; i--){
-                                    const { 'max-width': eachMaxWidthFeature, 'min-width': eachMinWidthFeature } = this.rules[i].media.features;
+                                    const eachRule = this.rules[i];
+                                    const eachMaxWidthFeature = eachRule.at.media?.find(({ name })=>name === 'max-width');
+                                    const eachMinWidthFeature = eachRule.at.media?.find(({ name })=>name === 'min-width');
                                     const eachRange = eachMaxWidthFeature.value - eachMinWidthFeature.value;
                                     if (eachRange < range) {
                                         matchEndIndex = i - 1;
@@ -645,15 +710,15 @@ class MasterCSS {
                              * find 第一個所遇到同樣 feature 且值比自己大的 rule，
                              * 並插入在該 rule 之後，讓自己優先被套用
                              */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width'] || eachRule.priority !== -1, (eachRule)=>!eachRule.media.features['max-width'] && eachRule.media.features['min-width']);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width'] || eachRule.priority !== -1);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') || eachRule.priority !== -1, (eachRule)=>!eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width'));
+                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') || eachRule.priority !== -1);
                             } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width'] && eachRule.priority !== -1, (eachRule)=>!eachRule.media.features['max-width'] && eachRule.media.features['min-width'] && eachRule.priority !== -1);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width'] && eachRule.priority !== -1);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1, (eachRule)=>!eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1);
+                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1);
                             }
                             if (matchStartIndex !== -1) {
                                 for(let i = matchEndIndex; i >= matchStartIndex; i--){
-                                    const value = this.rules[i].media.features['min-width'].value;
+                                    const value = (this.rules[i].at.media?.find(({ name })=>name === 'min-width')).value;
                                     if (value > minWidthFeature.value) {
                                         matchEndIndex = i - 1;
                                     } else if (value < minWidthFeature.value) {
@@ -667,15 +732,15 @@ class MasterCSS {
                              * find 第一個所遇到同樣 feature 且值比自己大的 rule，
                              * 並插入在該 rule 之後，讓自己優先被套用
                              */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['min-width'] || eachRule.priority !== -1, (eachRule)=>eachRule.media.features['max-width']);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['min-width'] || eachRule.priority !== -1);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'min-width') || eachRule.priority !== -1, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width'));
+                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'min-width') || eachRule.priority !== -1);
                             } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['min-width'] && eachRule.priority !== -1, (eachRule)=>eachRule.media.features['max-width'] && eachRule.priority !== -1);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['min-width'] && eachRule.priority !== -1);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.priority !== -1);
+                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1);
                             }
                             if (matchStartIndex !== -1) {
                                 for(let i = matchEndIndex; i >= matchStartIndex; i--){
-                                    const value = this.rules[i].media.features['max-width'].value;
+                                    const value = (this.rules[i].at.media?.find(({ name })=>name === 'max-width')).value;
                                     if (value < maxWidthFeature.value) {
                                         matchEndIndex = i - 1;
                                     } else if (value > maxWidthFeature.value) {
@@ -689,10 +754,10 @@ class MasterCSS {
                 } else {
                     if (priority === -1) {
                         matchStartIndex = mediaStartIndex;
-                        matchEndIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.media?.features['max-width'] || eachRule.media?.features['min-width'] || eachRule.priority !== -1);
+                        matchEndIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachRule.priority !== -1);
                     } else {
-                        matchStartIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.media?.features['max-width'] || eachRule.media?.features['min-width'], (eachRule)=>eachRule.priority !== -1);
-                        matchEndIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.media?.features['max-width'] || eachRule.media?.features['min-width']);
+                        matchStartIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'), (eachRule)=>eachRule.priority !== -1);
+                        matchEndIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
                     }
                 }
             }
@@ -700,10 +765,10 @@ class MasterCSS {
             const findStartIndex = Object.keys(this.variablesNativeRules).length ? this.hasKeyframesRule ? 2 : 1 : this.hasKeyframesRule ? 1 : 0;
             if (priority === -1) {
                 matchStartIndex = findStartIndex;
-                matchEndIndex = findIndex(findStartIndex, (eachRule)=>eachRule.media || eachRule.priority !== -1);
+                matchEndIndex = findIndex(findStartIndex, (eachRule)=>eachRule.atToken || eachRule.priority !== -1);
             } else {
-                matchStartIndex = findIndex(findStartIndex, (eachRule)=>eachRule.media, (eachRule)=>eachRule.priority !== -1);
-                matchEndIndex = findIndex(findStartIndex, (eachRule)=>eachRule.media);
+                matchStartIndex = findIndex(findStartIndex, (eachRule)=>eachRule.atToken, (eachRule)=>eachRule.priority !== -1);
+                matchEndIndex = findIndex(findStartIndex, (eachRule)=>eachRule.atToken);
             }
         }
         if (index === undefined && matchEndIndex !== undefined && matchStartIndex !== undefined) {
@@ -747,7 +812,6 @@ class MasterCSS {
         }
         this.rules.splice(index, 0, rule);
         this.ruleBy[className] = rule;
-        // 只在瀏覽器端運行
         if (this.style) {
             const sheet = this.style.sheet;
             let cssRuleIndex = 0;
@@ -783,6 +847,7 @@ class MasterCSS {
         // animations
         this.handleRuleWithAnimationNames(rule);
         rule.definition.insert?.call(rule);
+        return index;
     }
     get text() {
         return this.rules.map((eachRule)=>eachRule.text).join('');
@@ -846,23 +911,23 @@ class MasterCSS {
                 if (variable.usage) {
                     variable.usage++;
                 } else {
-                    const addProperty = (theme, variableValue)=>{
-                        let nativeRule = this.variablesNativeRules[theme];
+                    const addProperty = (mode, variable)=>{
+                        let nativeRule = this.variablesNativeRules[mode];
                         if (!nativeRule) {
                             let cssRule;
                             let mediaConditionText;
                             let selectorText;
-                            if (theme) {
-                                switch(this.config.themeDriver){
+                            if (mode) {
+                                switch(this.config.modeDriver){
                                     case 'media':
-                                        mediaConditionText = `@media(prefers-color-scheme:${theme})`;
+                                        mediaConditionText = `@media(prefers-color-scheme:${mode})`;
                                         selectorText = ':root';
                                         break;
                                     case 'host':
-                                        selectorText = `:host(.${theme})`;
+                                        selectorText = `:host(.${mode})`;
                                         break;
                                     default:
-                                        selectorText = `.${theme}`;
+                                        selectorText = `.${mode}`;
                                         break;
                                 }
                             } else {
@@ -912,19 +977,19 @@ class MasterCSS {
                                     };
                                 }
                             }
-                            nativeRule = this.pushVariableNativeRule(theme, cssRule);
+                            nativeRule = this.pushVariableNativeRule(mode, cssRule);
                         }
                         const propertyName = '--' + eachVariableName;
                         if (!initializing || !nativeRule.cssRule.style.getPropertyValue(propertyName)) {
-                            nativeRule.cssRule.style.setProperty(propertyName, String(variableValue.value));
+                            nativeRule.cssRule.style.setProperty(propertyName, String(variable.value));
                         }
                     };
                     if (variable.value) {
                         addProperty('', variable);
                     }
-                    if (variable.themes) {
-                        for(const theme in variable.themes){
-                            addProperty(theme, variable.themes[theme]);
+                    if (variable.modes) {
+                        for(const mode in variable.modes){
+                            addProperty(mode, variable.modes[mode]);
                         }
                     }
                     variable.usage = 1;
@@ -932,7 +997,7 @@ class MasterCSS {
             }
         }
     }
-    pushVariableNativeRule(theme, variableCSSRule) {
+    pushVariableNativeRule(mode, variableCSSRule) {
         if (!Object.keys(this.variablesNativeRules).length) {
             this.variablesNativeRules = {};
             const newRule = {
@@ -961,7 +1026,7 @@ class MasterCSS {
                 return prefix + properties.join(';') + suffix;
             }
         };
-        this.rules[0].natives.push(this.variablesNativeRules[theme] = nativeRule);
+        this.rules[0].natives.push(this.variablesNativeRules[mode] = nativeRule);
         return nativeRule;
     }
 }