@master/css 2.0.0-rc.47 → 2.0.0-rc.49

package/dist/core.mjs

@@ -1,50 +1,80 @@
-import { Rule } from './rule.mjs';
+import { SyntaxRule } from './syntax-rule.mjs';
 import { config } from './config/index.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 SyntaxLayer from './syntax-layer.mjs';
+import { Rule } from './rule.mjs';
+import SyntaxRuleType from './syntax-rule-type.mjs';
+import Layer from './layer.mjs';
+import NonLayer from './non-layer.mjs';
 
 class MasterCSS {
     customConfig;
     static config = config;
-    syntaxes;
-    ruleBy;
-    classesUsage;
+    definedRules;
     config;
-    Rules;
+    classUsages;
+    layerStatementRule;
+    rules;
+    animationsNonLayer;
+    baseLayer;
+    themeLayer;
+    presetLayer;
+    componentsLayer;
+    generalLayer;
+    get text() {
+        return this.rules.sort((a, b)=>{
+            const order = [
+                'layer-statement',
+                'base',
+                'theme',
+                'preset',
+                'components',
+                'general'
+            ];
+            const indexA = order.indexOf(a.name) === -1 ? Infinity : order.indexOf(a.name);
+            const indexB = order.indexOf(b.name) === -1 ? Infinity : order.indexOf(b.name);
+            return indexA - indexB;
+        }).map(({ text })=>text).join('');
+    }
     constructor(customConfig){
         this.customConfig = customConfig;
-        this.syntaxes = [];
-        this.ruleBy = {};
-        this.classesUsage = {};
-        this.Rules = [];
-        if (!customConfig?.override) {
-            this.config = extendConfig(config, customConfig);
-        } else {
-            this.config = extendConfig(customConfig);
-        }
+        this.definedRules = [];
+        this.classUsages = new Map();
+        this.layerStatementRule = new Rule('layer-statement', [
+            {
+                text: '@layer base,theme,preset,components,general;'
+            }
+        ]);
+        this.rules = [
+            this.layerStatementRule
+        ];
+        this.animationsNonLayer = new NonLayer(this);
+        this.baseLayer = new SyntaxLayer('base', this);
+        this.themeLayer = new Layer('theme', this);
+        this.presetLayer = new SyntaxLayer('preset', this);
+        this.componentsLayer = new SyntaxLayer('components', this);
+        this.generalLayer = new SyntaxLayer('general', this);
+        this.config = customConfig?.override ? extendConfig(customConfig) : extendConfig(config, customConfig);
         this.resolve();
         if (this.constructor === MasterCSS) {
             masterCSSs.push(this);
         }
     }
     resolve() {
-        this.styles = {};
-        this.stylesBy = {};
+        this.components = {};
         this.selectors = {};
         this.variables = {};
         this.at = {};
         this.animations = {};
-        this.Rules.length = 0;
-        this.variablesNativeRules = {};
-        this.hasKeyframesRule = false;
+        this.definedRules.length = 0;
         const colorVariableNames = {
             current: undefined,
             currentColor: undefined,
             transparent: undefined
         };
-        const { styles, selectors, variables, utilities, at, syntaxes, animations } = this.config;
+        const { components, selectors, variables, utilities, at, rules, animations } = this.config;
         function escapeString(str) {
             return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
         }
@@ -276,33 +306,23 @@ class MasterCSS {
                 }
             }
         }
-        const flattedStyles = styles ? flattenObject(styles) : {};
+        const flattedStyles = components ? flattenObject(components) : {};
         const utilityNames = Object.keys(flattedStyles);
         const handleUtilityName = (utilityName)=>{
-            if (Object.prototype.hasOwnProperty.call(this.styles, utilityName)) return;
-            const currentClass = this.styles[utilityName] = [];
+            if (Object.prototype.hasOwnProperty.call(this.components, utilityName)) return;
+            const currentClass = this.components[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(utilityName)) {
-                            currentRelation.push(utilityName);
-                        }
-                    } else {
-                        this.stylesBy[className] = [
-                            utilityName
-                        ];
-                    }
                     if (!currentClass.includes(className)) {
                         currentClass.push(className);
                     }
                 };
                 if (utilityNames.includes(eachClassName)) {
                     handleUtilityName(eachClassName);
-                    for (const parentClassName of this.styles[eachClassName]){
+                    for (const parentClassName of this.components[eachClassName]){
                         handle(parentClassName);
                     }
                 } else {
@@ -313,7 +333,7 @@ class MasterCSS {
         for (const eachUtilityName of utilityNames){
             handleUtilityName(eachUtilityName);
         }
-        if (syntaxes || utilities) {
+        if (rules || utilities) {
             const rulesEntries = [];
             if (utilities) {
                 for(const utilityName in utilities){
@@ -322,61 +342,69 @@ class MasterCSS {
                         utilityName,
                         {
                             declarations,
-                            layer: Layer.Utility
+                            type: SyntaxRuleType.Utility
                         }
                     ]);
                 }
             }
-            if (syntaxes) {
-                rulesEntries.push(...Object.entries(syntaxes));
+            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);
+                if (a[1].type !== b[1].type) {
+                    return (b[1].type || 0) - (a[1].type || 0);
                 }
                 return b[0].localeCompare(a[0]);
-            }).forEach(([id, eachSyntaxDefinition], index)=>{
-                const EachRule = {
+            }).forEach(([id, eachSyntaxRuleDefinition], index)=>{
+                const syntax = {
                     id,
                     keys: [],
                     variables: {},
                     matchers: {},
                     order: rulesEntriesLength - 1 - index,
-                    definition: eachSyntaxDefinition
+                    definition: eachSyntaxRuleDefinition
                 };
-                this.Rules.push(EachRule);
-                const { matcher, layer, subkey, ambiguousKeys, ambiguousValues, sign } = eachSyntaxDefinition;
-                if (layer === Layer.Utility) {
-                    EachRule.id = '.' + id;
-                    EachRule.matchers.arbitrary = new RegExp('^' + escapeString(id) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm');
+                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)=>{
                     for(const eachVariableName in this.variables){
                         const eachVariable = this.variables[eachVariableName];
                         if (eachVariable.group === groupName) {
-                            EachRule.variables[eachVariable.key] = eachVariable;
+                            syntax.variables[eachVariable.key] = eachVariable;
                         }
                     }
                 };
-                // 1. custom `config.syntaxes[id].variables`
-                if (eachSyntaxDefinition.variables) {
-                    for (const eachVariableGroup of eachSyntaxDefinition.variables){
+                // 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 } = eachSyntaxDefinition;
-                if (layer === Layer.NativeShorthand || layer === Layer.Native) {
-                    if (!key) eachSyntaxDefinition.key = key = id;
+                let { key } = eachSyntaxRuleDefinition;
+                if (type === SyntaxRuleType.NativeShorthand || type === SyntaxRuleType.Native) {
+                    if (!key) eachSyntaxRuleDefinition.key = key = id;
                     keys.push(id);
                 }
                 if (sign) {
-                    EachRule.matchers.arbitrary = new RegExp(`^${sign}[^!*>+~:[@_]+\\|`);
+                    syntax.matchers.arbitrary = new RegExp(`^${sign}[^!*>+~:[@_]+\\|`);
                 } else if (!matcher) {
                     const colorsPatten = colorNames.join('|');
                     if (!key && !subkey) {
@@ -384,13 +412,13 @@ class MasterCSS {
                     } else {
                         if (key && !keys.includes(key)) keys.push(key);
                         if (subkey) keys.push(subkey);
-                        if (layer === Layer.Shorthand) {
+                        if (type === SyntaxRuleType.Shorthand) {
                             keys.push(id);
                         }
                     }
                     if (ambiguousKeys?.length) {
                         const ambiguousKeyPattern = ambiguousKeys.length > 1 ? `(?:${ambiguousKeys.join('|')})` : ambiguousKeys[0];
-                        const variableKeys = Object.keys(EachRule.variables);
+                        const variableKeys = Object.keys(syntax.variables);
                         if (ambiguousValues?.length) {
                             const ambiguousValuePatterns = [];
                             for (const eachAmbiguousValue of ambiguousValues){
@@ -400,19 +428,35 @@ class MasterCSS {
                                     ambiguousValuePatterns.unshift(`${eachAmbiguousValue}(?:\\b|_)`);
                                 }
                             }
-                            EachRule.matchers.value = new RegExp(`^${ambiguousKeyPattern}:(?:${ambiguousValuePatterns.join('|')})[^|]*?(?:@|$)`);
+                            syntax.matchers.value = new RegExp(`^${ambiguousKeyPattern}:(?:${ambiguousValuePatterns.join('|')})[^|]*?(?:@|$)`);
                         }
                         if (variableKeys.length) {
-                            EachRule.matchers.variable = new RegExp(`^${ambiguousKeyPattern}:(?:${variableKeys.join('|')}(?![a-zA-Z0-9-]))[^|]*?(?:@|$)`);
+                            syntax.matchers.variable = new RegExp(`^${ambiguousKeyPattern}:(?:${variableKeys.join('|')}(?![a-zA-Z0-9-]))[^|]*?(?:@|$)`);
                         }
                     }
                 } else {
-                    EachRule.matchers.arbitrary = matcher;
+                    syntax.matchers.arbitrary = matcher;
                 }
                 if (keys.length) {
-                    EachRule.keys = keys;
-                    EachRule.matchers.key = new RegExp(`^${keys.length > 1 ? `(${keys.join('|')})` : keys[0]}:.`);
+                    syntax.keys = keys;
+                    syntax.matchers.key = new RegExp(`^${keys.length > 1 ? `(${keys.join('|')})` : keys[0]}:.`);
+                }
+            });
+        }
+        for(const utilityName in this.components){
+            const syntaxRulesByStateToken = this.components[utilityName].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[utilityName] = 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;
             });
         }
     }
@@ -424,613 +468,187 @@ class MasterCSS {
         /**
          * 1. variable
          * @example fg:primary bg:blue
-         */ for (const EachRule of this.Rules){
-            if (EachRule.matchers.variable?.test(className)) return EachRule;
+         */ for (const eachSyntax of this.definedRules){
+            if (eachSyntax.matchers.variable?.test(className)) return eachSyntax;
         }
         /**
          * 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;
+         */ for (const eachSyntax of this.definedRules){
+            if (eachSyntax.matchers.value?.test(className)) return eachSyntax;
         }
         /**
          * 3. full key
          * @example text-align:center color:blue-40
-         */ for (const EachRule of this.Rules){
-            if (EachRule.matchers.key?.test(className)) return EachRule;
+         */ for (const eachSyntax of this.definedRules){
+            if (eachSyntax.matchers.key?.test(className)) return eachSyntax;
         }
         /**
          * 4. arbitrary
          * @example custom RegExp, utility
-         */ for (const EachRule of this.Rules){
-            if (EachRule.matchers.arbitrary?.test(className)) return EachRule;
+         */ for (const eachSyntax of this.definedRules){
+            if (eachSyntax.matchers.arbitrary?.test(className)) return eachSyntax;
+        }
+    }
+    /**
+     * Generate syntax rules from class name
+     * @param className
+     * @returns SyntaxRule[]
+     */ generate(className, mode) {
+        let syntaxRules = [];
+        if (Object.prototype.hasOwnProperty.call(this.components, className)) {
+            syntaxRules = this.components[className].map((eachSyntax)=>this.create(eachSyntax, className, mode));
+        } else {
+            const atIndex = className.indexOf('@');
+            if (atIndex !== -1) {
+                const name = className.slice(0, atIndex);
+                if (Object.prototype.hasOwnProperty.call(this.components, name)) {
+                    const atToken = className.slice(atIndex);
+                    syntaxRules = this.components[name].map((eachSyntax)=>this.create(eachSyntax + atToken, className, mode));
+                } else {
+                    syntaxRules = [
+                        this.create(className, undefined, mode)
+                    ];
+                }
+            } else {
+                syntaxRules = [
+                    this.create(className, undefined, mode)
+                ];
+            }
         }
+        return syntaxRules.filter((eachSyntax)=>eachSyntax?.text);
     }
     /**
-     * Generate syntaxes from class name
+     * Create syntax rule from given class name
      * @param className
-     * @returns Rule[]
-     */ generate(className) {
-        return (Object.prototype.hasOwnProperty.call(this.styles, className) ? this.styles[className].map((eachSyntax)=>this.create(eachSyntax)) : [
-            this.create(className)
-        ]).filter((eachSyntax)=>eachSyntax && eachSyntax?.text);
+     * @returns SyntaxRule
+     */ create(className, fixedClass, mode) {
+        const syntaxRule = this.generalLayer.rules.find(({ key })=>key === (fixedClass ? fixedClass + ' ' : '') + className);
+        if (syntaxRule) return syntaxRule;
+        const registeredRule = this.match(className);
+        if (registeredRule) return new SyntaxRule(className, this, registeredRule, fixedClass, mode);
     }
     /**
-     * Create rule from given syntax
-     * @param syntax
-     * @returns Rule
-     */ create(syntax) {
-        if (Object.prototype.hasOwnProperty.call(this.ruleBy, syntax)) return this.ruleBy[syntax];
-        const RegisteredRule = this.match(syntax);
-        if (RegisteredRule) {
-            return new Rule(syntax, RegisteredRule, this);
+     * Create syntax rule from given selector text
+     * @param selectorText
+     */ createFromSelectorText(selectorText) {
+        const selectorTextSplits = selectorText.split(' ');
+        for(let i = 0; i < selectorTextSplits.length; i++){
+            const eachField = selectorTextSplits[i];
+            const modeSelector = this.getModeSelector(eachField);
+            if (i === 0 && eachField === modeSelector) continue;
+            if (eachField[0] === '.') {
+                const eachFieldName = eachField.slice(1);
+                let className = '';
+                for(let l = 0; l < eachFieldName.length; l++){
+                    const char = eachFieldName[l];
+                    const nextChar = eachFieldName[l + 1];
+                    if (char === '\\') {
+                        l++;
+                        if (nextChar !== '\\') {
+                            className += nextChar;
+                            continue;
+                        }
+                    } else if ([
+                        '.',
+                        '#',
+                        '[',
+                        '!',
+                        '*',
+                        '>',
+                        '+',
+                        '~',
+                        ':'
+                    ].includes(char)) {
+                        break;
+                    }
+                    className += char;
+                }
+                const syntaxRules = this.generate(className);
+                if (syntaxRules.length) return syntaxRules;
+            }
         }
+        return [];
     }
     /**
      * 根據蒐集到的所有 DOM class 重新 create
      */ refresh(customConfig) {
+        this.reset();
         if (customConfig) {
             this.customConfig = customConfig;
         } else {
             customConfig = this.customConfig;
         }
-        if (!customConfig?.override) {
-            // @ts-ignore
-            this.config = extendConfig(config, customConfig);
-        } else {
-            // @ts-ignore
-            this.config = extendConfig(customConfig);
-        }
-        this.resolve();
-        this.syntaxes.length = 0;
         // @ts-ignore
-        this.ruleBy = {};
+        this.config = customConfig?.override ? extendConfig(customConfig) : extendConfig(config, customConfig);
+        this.resolve();
         /**
-         * 拿當前所有的 classNames 按照最新的 colors, config.syntaxes 匹配並生成新的 style
-         * 所以 refresh 過後 syntaxes 可能會變多也可能會變少
-         */ for(const name in this.classesUsage){
-            this.add(name);
-        }
+         * 拿當前所有的 classNames 按照最新的 colors, config.rules 匹配並生成新的 style
+         * 所以 refresh 過後 rules 可能會變多也可能會變少
+         */ this.classUsages.forEach((_, className)=>{
+            this.add(className);
+        });
         return this;
     }
     reset() {
-        // @ts-ignore
-        this.ruleBy = {};
-        // @ts-ignore
-        this.classesUsage = {};
-        this.syntaxes.length = 0;
-        this.hasKeyframesRule = false;
-        this.variablesNativeRules = {};
-        for(const keyframeName in this.animations){
-            const animation = this.animations[keyframeName];
-            animation.usage = 0;
-            animation.native = undefined;
-        }
-        for(const variableName in this.variables){
-            const variable = this.variables[variableName];
-            variable.usage = 0;
-        }
+        this.baseLayer.reset();
+        this.themeLayer.reset();
+        this.presetLayer.reset();
+        this.componentsLayer.reset();
+        this.generalLayer.reset();
+        this.animationsNonLayer.reset();
         return this;
     }
     destroy() {
-        this.reset();
+        // @ts-ignore
+        this.classUsages = new Map();
         masterCSSs.splice(masterCSSs.indexOf(this), 1);
         return this;
     }
     add(...classNames) {
         for (const className of classNames){
-            const syntaxes = this.generate(className);
-            if (syntaxes.length) {
-                for (const rule of syntaxes){
-                    this.insert(rule);
-                }
-            }
+            this.generate(className).forEach((eachSyntaxRule)=>eachSyntaxRule.layer.insert(eachSyntaxRule));
         }
         return this;
     }
-    delete(...classNames) {
+    remove(...classNames) {
         /**
          * class name 從 DOM tree 中被移除，
          * 匹配並刪除對應的 rule
-         */ const sheet = this.style?.sheet;
-        const deleteRule = (name)=>{
-            const rule = this.ruleBy[name];
-            if (!rule || Object.prototype.hasOwnProperty.call(this.stylesBy, name) && this.stylesBy[name].some((eachClassName)=>Object.prototype.hasOwnProperty.call(this.classesUsage, eachClassName))) return;
-            if (sheet && rule.natives.length) {
-                const firstNative = rule.natives[0];
-                for(let index = 0; index < sheet.cssRules.length; index++){
-                    const eachCSSRule = sheet.cssRules[index];
-                    if (eachCSSRule === firstNative.cssRule) {
-                        for (const {} of rule.natives){
-                            sheet.deleteRule(index);
-                        }
-                        break;
-                    }
-                }
-            }
-            this.syntaxes.splice(this.syntaxes.indexOf(rule), 1);
-            delete this.ruleBy[name];
-            // variables
-            if (rule.variableNames) {
-                for (const eachVariableName of rule.variableNames){
-                    const variable = this.variables[eachVariableName];
-                    if (!variable.usage) variable.usage = 0;
-                    if (!--variable.usage) {
-                        const removeProperty = (mode)=>{
-                            const nativeRule = this.variablesNativeRules[mode];
-                            nativeRule.cssRule.style.removeProperty('--' + eachVariableName);
-                            if (!nativeRule.cssRule.style.length) {
-                                const variablesRule = this.syntaxes[0];
-                                const index = variablesRule.natives.indexOf(nativeRule);
-                                sheet?.deleteRule(index);
-                                variablesRule.natives.splice(index, 1);
-                                delete this.variablesNativeRules[mode];
-                                if (!variablesRule.natives.length) {
-                                    this.syntaxes.splice(0, 1);
-                                    this.variablesNativeRules = {};
-                                }
-                            }
-                        };
-                        if (variable.value) {
-                            removeProperty('');
-                        }
-                        if (variable.modes) {
-                            for(const mode in variable.modes){
-                                removeProperty(mode);
-                            }
-                        }
-                    }
-                }
-            }
-            // animations
-            if (rule.animationNames) {
-                const keyframeRulesIndex = Object.keys(this.variablesNativeRules).length ? 1 : 0;
-                const keyframeRule = this.syntaxes[keyframeRulesIndex];
-                for (const eachKeyframeName of rule.animationNames){
-                    const keyframe = this.animations[eachKeyframeName];
-                    if (!keyframe.usage) keyframe.usage = 0;
-                    if (!--keyframe.usage && keyframe.native) {
-                        const nativeIndex = keyframeRule.natives.indexOf(keyframe.native);
-                        sheet?.deleteRule(Object.keys(this.variablesNativeRules).length + nativeIndex);
-                        keyframeRule.natives.splice(nativeIndex, 1);
-                        keyframe.native = undefined;
-                    }
-                }
-                if (!keyframeRule.natives.length) {
-                    this.syntaxes.splice(keyframeRulesIndex, 1);
-                    this.hasKeyframesRule = false;
+         */ for (const className of classNames){
+            if (Object.prototype.hasOwnProperty.call(this.components, className)) {
+                for (const eachSyntax of this.components[className]){
+                    this.componentsLayer.delete(className + ' ' + eachSyntax);
                 }
-            }
-            rule.definition.delete?.call(rule, name);
-        };
-        for (const className of classNames){
-            if (Object.prototype.hasOwnProperty.call(this.styles, className)) {
-                for (const eachClassName of this.styles[className]){
-                    if (!Object.prototype.hasOwnProperty.call(this.classesUsage, eachClassName)) {
-                        deleteRule(eachClassName);
-                    }
-                }
-                delete this.ruleBy[className];
-            } else {
-                deleteRule(className);
-            }
-        }
-    }
-    /**
-    * 加工插入規則
-    * 1. where
-    * 2. normal
-    * 3. where selectors
-    * 4. normal selectors
-    * 5. media where
-    * 6. media normal
-    * 7. media where selectors
-    * 8. media selectors
-    * 9. media width where
-    * 10. media width
-    * 11. media width where selectors
-    * 12. media width selectors
-    */ insert(rule) {
-        if (this.ruleBy[rule.className]) return;
-        let index;
-        /**
-         * 必須按斷點值遞增，並透過索引插入，
-         * 以實現響應式先後套用的規則
-         * @example <1  <2  <3  ALL  >=1 >=2 >=3
-         * @description
-         */ const endIndex = this.syntaxes.length - 1;
-        const { at, atToken, order, priority, hasWhere, className } = rule;
-        const findIndex = (startIndex, stopCheck, matchCheck)=>{
-            let i = startIndex;
-            for(; i <= endIndex; i++){
-                const eachSyntax = this.syntaxes[i];
-                if (stopCheck?.(eachSyntax)) return matchCheck ? -1 : i - 1;
-                if (matchCheck?.(eachSyntax)) return i;
-            }
-            return matchCheck ? -1 : i - 1;
-        };
-        let matchStartIndex;
-        let matchEndIndex;
-        if (atToken) {
-            const mediaStartIndex = this.syntaxes.findIndex((eachSyntax)=>eachSyntax.at?.media);
-            if (mediaStartIndex === -1) {
-                index = endIndex + 1;
             } else {
-                const maxWidthFeature = at.media?.find(({ name })=>name === 'max-width');
-                const minWidthFeature = at.media?.find(({ name })=>name === 'min-width');
-                if (maxWidthFeature || minWidthFeature) {
-                    const mediaWidthStartIndex = this.syntaxes.findIndex((eachSyntax)=>eachSyntax.at?.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
-                    if (mediaWidthStartIndex === -1) {
-                        index = endIndex + 1;
-                    } else {
-                        if (maxWidthFeature && minWidthFeature) {
-                            /**
-                             * 範圍越小 ( 越限定 越侷限 ) 越優先，
-                             * 按照範圍 max-width - min-width 遞減排序
-                             * find 第一個所遇到同樣 feature 且範圍值比自己大的 rule，
-                             * 並插入在該 rule 之後，讓自己優先被套用
-                             */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntax)=>eachSyntax.priority !== -1, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width') && eachSyntax.at.media?.find(({ name })=>name === 'min-width'));
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntax)=>eachSyntax.priority !== -1);
-                            } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, undefined, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width') && eachSyntax.at.media?.find(({ name })=>name === 'min-width') && eachSyntax.priority !== -1);
-                                matchEndIndex = endIndex;
-                            }
-                            if (matchStartIndex !== -1) {
-                                const range = maxWidthFeature.value - minWidthFeature.value;
-                                let i = matchEndIndex;
-                                const endI = matchStartIndex;
-                                matchStartIndex = matchEndIndex + 1;
-                                for(; i >= endI; i--){
-                                    const eachSyntax = this.syntaxes[i];
-                                    const eachMaxWidthFeature = eachSyntax.at.media?.find(({ name })=>name === 'max-width');
-                                    const eachMinWidthFeature = eachSyntax.at.media?.find(({ name })=>name === 'min-width');
-                                    if (!eachMaxWidthFeature || !eachMinWidthFeature) {
-                                        break;
-                                    } else {
-                                        const eachRange = eachMaxWidthFeature.value - eachMinWidthFeature.value;
-                                        if (eachRange < range) {
-                                            matchEndIndex = i - 1;
-                                        } else if (eachRange === range) {
-                                            matchStartIndex = i;
-                                        } else {
-                                            break;
-                                        }
-                                    }
-                                }
-                            }
-                        } else if (minWidthFeature) {
-                            /**
-                             * find 第一個所遇到同樣 feature 且值比自己大的 rule，
-                             * 並插入在該 rule 之後，讓自己優先被套用
-                             */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width') && eachSyntax.at.media?.find(({ name })=>name === 'min-width') || eachSyntax.priority !== -1, (eachSyntax)=>!eachSyntax.at.media?.find(({ name })=>name === 'max-width') && eachSyntax.at.media?.find(({ name })=>name === 'min-width'));
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width') && eachSyntax.at.media?.find(({ name })=>name === 'min-width') || eachSyntax.priority !== -1);
-                            } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width') && eachSyntax.at.media?.find(({ name })=>name === 'min-width') && eachSyntax.priority !== -1, (eachSyntax)=>!eachSyntax.at.media?.find(({ name })=>name === 'max-width') && eachSyntax.at.media?.find(({ name })=>name === 'min-width') && eachSyntax.priority !== -1);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width') && eachSyntax.at.media?.find(({ name })=>name === 'min-width') && eachSyntax.priority !== -1);
-                            }
-                            if (matchStartIndex !== -1) {
-                                for(let i = matchEndIndex; i >= matchStartIndex; i--){
-                                    const value = (this.syntaxes[i].at.media?.find(({ name })=>name === 'min-width')).value;
-                                    if (value > minWidthFeature.value) {
-                                        matchEndIndex = i - 1;
-                                    } else if (value < minWidthFeature.value) {
-                                        matchStartIndex = i + 1;
-                                        break;
-                                    }
-                                }
-                            }
-                        } else {
-                            /**
-                             * find 第一個所遇到同樣 feature 且值比自己大的 rule，
-                             * 並插入在該 rule 之後，讓自己優先被套用
-                             */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'min-width') || eachSyntax.priority !== -1, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width'));
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'min-width') || eachSyntax.priority !== -1);
-                            } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'min-width') && eachSyntax.priority !== -1, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width') && eachSyntax.priority !== -1);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'min-width') && eachSyntax.priority !== -1);
-                            }
-                            if (matchStartIndex !== -1) {
-                                for(let i = matchEndIndex; i >= matchStartIndex; i--){
-                                    const value = (this.syntaxes[i].at.media?.find(({ name })=>name === 'max-width')).value;
-                                    if (value < maxWidthFeature.value) {
-                                        matchEndIndex = i - 1;
-                                    } else if (value > maxWidthFeature.value) {
-                                        matchStartIndex = i + 1;
-                                        break;
-                                    }
-                                }
-                            }
+                const atIndex = className.indexOf('@');
+                if (atIndex !== -1) {
+                    const name = className.slice(0, atIndex);
+                    if (Object.prototype.hasOwnProperty.call(this.components, name)) {
+                        const atToken = className.slice(atIndex);
+                        for (const eachSyntax of this.components[name]){
+                            this.componentsLayer.delete(eachSyntax + atToken + ' ' + className);
                         }
-                    }
-                } else {
-                    if (priority === -1) {
-                        matchStartIndex = mediaStartIndex;
-                        matchEndIndex = findIndex(mediaStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachSyntax.priority !== -1);
                     } else {
-                        matchStartIndex = findIndex(mediaStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'), (eachSyntax)=>eachSyntax.priority !== -1);
-                        matchEndIndex = findIndex(mediaStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
-                    }
-                }
-            }
-        } else {
-            const findStartIndex = Object.keys(this.variablesNativeRules).length ? this.hasKeyframesRule ? 2 : 1 : this.hasKeyframesRule ? 1 : 0;
-            if (priority === -1) {
-                matchStartIndex = findStartIndex;
-                matchEndIndex = findIndex(findStartIndex, (eachSyntax)=>eachSyntax.atToken || eachSyntax.priority !== -1);
-            } else {
-                matchStartIndex = findIndex(findStartIndex, (eachSyntax)=>eachSyntax.atToken, (eachSyntax)=>eachSyntax.priority !== -1);
-                matchEndIndex = findIndex(findStartIndex, (eachSyntax)=>eachSyntax.atToken);
-            }
-        }
-        if (index === undefined && matchEndIndex !== undefined && matchStartIndex !== undefined) {
-            if (matchStartIndex === -1) {
-                index = matchEndIndex + 1;
-            } else {
-                if (priority === -1) {
-                    for(let i = matchStartIndex; i <= matchEndIndex; i++){
-                        const currentRule = this.syntaxes[i];
-                        if (!hasWhere && currentRule.hasWhere) continue;
-                        if (hasWhere && !currentRule.hasWhere || currentRule.order >= order) {
-                            index = i;
-                            break;
-                        }
+                        this.generalLayer.delete(className);
                     }
                 } else {
-                    for(let i = matchStartIndex; i <= matchEndIndex; i++){
-                        const currentRule = this.syntaxes[i];
-                        if (!hasWhere && currentRule.hasWhere) continue;
-                        if (hasWhere && !currentRule.hasWhere) {
-                            index = i;
-                            break;
-                        }
-                        if (currentRule.priority < priority) {
-                            index = i;
-                            break;
-                        } else if (currentRule.priority === priority) {
-                            if (currentRule.order >= order) {
-                                index = i;
-                                break;
-                            }
-                        } else {
-                            index = i + 1;
-                        }
-                    }
-                }
-                if (index === undefined) {
-                    index = matchEndIndex + 1;
+                    this.generalLayer.delete(className);
                 }
             }
         }
-        this.syntaxes.splice(index, 0, rule);
-        this.ruleBy[className] = rule;
-        if (this.style) {
-            const sheet = this.style.sheet;
-            let cssRuleIndex = 0;
-            const getCssRuleIndex = (index)=>{
-                const previousRule = this.syntaxes[index];
-                if (previousRule) {
-                    if (!previousRule.natives.length) return getCssRuleIndex(index - 1);
-                    const lastNative = previousRule.natives[previousRule.natives.length - 1];
-                    const lastNativeCssRule = lastNative.cssRule?.parentRule ?? lastNative.cssRule;
-                    if (sheet) for(let i = 0; i < sheet.cssRules.length; i++){
-                        if (sheet.cssRules[i] === lastNativeCssRule) {
-                            cssRuleIndex = i + 1;
-                            break;
-                        }
-                    }
-                }
-            };
-            getCssRuleIndex(index - 1);
-            for(let i = 0; i < rule.natives.length;){
-                try {
-                    const native = rule.natives[i];
-                    sheet?.insertRule(native.text, cssRuleIndex);
-                    native.cssRule = sheet?.cssRules[cssRuleIndex++];
-                    i++;
-                } catch (error) {
-                    console.error(error);
-                    rule.natives.splice(i, 1);
-                }
-            }
-        }
-        // variables
-        this.handleRuleWithVariableNames(rule);
-        // animations
-        this.handleRuleWithAnimationNames(rule);
-        rule.definition.insert?.call(rule);
-        return index;
-    }
-    get text() {
-        return this.syntaxes.map((eachSyntax)=>eachSyntax.text).join('');
     }
-    handleRuleWithAnimationNames(rule, initializing = false) {
-        if (rule.animationNames) {
-            const sheet = this.style?.sheet;
-            for (const eachKeyframeName of rule.animationNames){
-                const animation = this.animations[eachKeyframeName];
-                if (animation.usage) {
-                    animation.usage++;
-                } else {
-                    const nativeRule = {
-                        text: `@keyframes ${eachKeyframeName}{` + Object.entries(animation).filter(([key])=>key !== 'usage' && key !== 'native').map(([key, variables])=>`${key}{${Object.entries(variables).map(([name, value])=>name + ':' + value).join(';')}}`).join('') + '}'
-                    };
-                    const keyframeRulesIndex = Object.keys(this.variablesNativeRules).length ? 1 : 0;
-                    let keyframeRule;
-                    if (this.hasKeyframesRule) {
-                        (keyframeRule = this.syntaxes[keyframeRulesIndex]).natives.push(nativeRule);
-                    } else {
-                        this.syntaxes.splice(keyframeRulesIndex, 0, keyframeRule = {
-                            natives: [
-                                nativeRule
-                            ],
-                            get text () {
-                                return this.natives.map((eachNative)=>eachNative.text).join('');
-                            }
-                        });
-                        this.hasKeyframesRule = true;
-                    }
-                    if (sheet) {
-                        let cssRule;
-                        if (initializing) {
-                            for (const eachCSSRule of sheet.cssRules){
-                                if (eachCSSRule.constructor.name === 'CSSKeyframesRule' && eachCSSRule.name === eachKeyframeName) {
-                                    cssRule = eachCSSRule;
-                                    break;
-                                }
-                            }
-                        }
-                        if (cssRule) {
-                            nativeRule.cssRule = cssRule;
-                        } else {
-                            const cssRuleIndex = Object.keys(this.variablesNativeRules).length + keyframeRule.natives.length - 1;
-                            sheet.insertRule(nativeRule.text, cssRuleIndex);
-                            nativeRule.cssRule = sheet.cssRules[cssRuleIndex];
-                        }
-                    }
-                    animation.usage = 1;
-                    animation.native = nativeRule;
-                }
+    getModeSelector(modeName) {
+        const mode = this.config.modes?.[modeName];
+        if (mode) {
+            switch(mode){
+                case 'class':
+                    return '.' + modeName;
+                case 'host':
+                    return ':host(.' + modeName + ')';
             }
         }
     }
-    handleRuleWithVariableNames(rule, initializing = false) {
-        if (rule.variableNames) {
-            const sheet = this.style?.sheet;
-            for (const eachVariableName of rule.variableNames){
-                const variable = this.variables[eachVariableName];
-                if (variable.usage) {
-                    variable.usage++;
-                } else {
-                    const addProperty = (mode, variable)=>{
-                        let nativeRule = this.variablesNativeRules[mode];
-                        if (!nativeRule) {
-                            let cssRule;
-                            let mediaConditionText;
-                            let selectorText;
-                            if (mode) {
-                                switch(this.config.modes?.[mode]){
-                                    case 'media':
-                                        mediaConditionText = `@media(prefers-color-scheme:${mode})`;
-                                        selectorText = ':root';
-                                        break;
-                                    case 'host':
-                                        selectorText = `:host(.${mode})`;
-                                        if (this.config.defaultMode === mode) {
-                                            selectorText += ',:host';
-                                        }
-                                        break;
-                                    case 'class':
-                                        selectorText = '.' + mode;
-                                        if (this.config.defaultMode === mode) {
-                                            selectorText += ',:root';
-                                        }
-                                        break;
-                                    default:
-                                        return;
-                                }
-                            } else {
-                                selectorText = ':root';
-                            }
-                            if (sheet) {
-                                const newCSSRuleIndex = Object.keys(this.variablesNativeRules).length ? this.syntaxes[0].natives.length : 0;
-                                sheet.insertRule((mediaConditionText ? mediaConditionText + '{' : '') + selectorText + '{}' + (mediaConditionText ? mediaConditionText + '}' : ''), newCSSRuleIndex);
-                                cssRule = mediaConditionText ? sheet.cssRules[newCSSRuleIndex].cssRules[0] : sheet.cssRules[newCSSRuleIndex];
-                            } else {
-                                const styleMap = new Map();
-                                const style = Object.defineProperties({}, {
-                                    getPropertyValue: {
-                                        value: (property)=>styleMap.get(property)
-                                    },
-                                    removeProperty: {
-                                        value: (property)=>{
-                                            styleMap.delete(property);
-                                            for(let i = 0; i < style.length; i++){
-                                                if (style[i] === property) {
-                                                    delete style[i];
-                                                }
-                                            }
-                                        }
-                                    },
-                                    setProperty: {
-                                        value: (property, value)=>{
-                                            style[style.length] = property;
-                                            styleMap.set(property, value);
-                                        }
-                                    },
-                                    length: {
-                                        get () {
-                                            return Object.keys(style).length;
-                                        }
-                                    }
-                                });
-                                cssRule = {
-                                    selectorText,
-                                    style,
-                                    styleMap
-                                };
-                                if (mediaConditionText) {
-                                    // @ts-ignore
-                                    cssRule.parentRule = {
-                                        conditionText: mediaConditionText
-                                    };
-                                }
-                            }
-                            nativeRule = this.pushVariableNativeRule(mode, cssRule);
-                        }
-                        const propertyName = '--' + eachVariableName;
-                        if (!initializing || !nativeRule.cssRule.style.getPropertyValue(propertyName)) {
-                            nativeRule.cssRule.style.setProperty(propertyName, String(variable.value));
-                        }
-                    };
-                    if (variable.value) {
-                        addProperty('', variable);
-                    }
-                    if (variable.modes) {
-                        for(const mode in variable.modes){
-                            addProperty(mode, variable.modes[mode]);
-                        }
-                    }
-                    variable.usage = 1;
-                }
-            }
-        }
-    }
-    pushVariableNativeRule(mode, variableCSSRule) {
-        if (!Object.keys(this.variablesNativeRules).length) {
-            this.variablesNativeRules = {};
-            const newRule = {
-                natives: [],
-                get text () {
-                    return this.natives.map((eachNative)=>eachNative.text).join('');
-                }
-            };
-            this.syntaxes.splice(0, 0, newRule);
-        }
-        let prefix = '';
-        let suffix = '}';
-        if (variableCSSRule.parentRule) {
-            prefix += '@media' + variableCSSRule.parentRule.conditionText.replace(/ /g, '') + '{';
-            suffix += '}';
-        }
-        prefix += variableCSSRule.selectorText + '{';
-        const nativeRule = {
-            cssRule: variableCSSRule,
-            get text () {
-                const properties = [];
-                // eslint-disable-next-line @typescript-eslint/prefer-for-of
-                for(let i = 0; i < variableCSSRule.style.length; i++){
-                    const property = variableCSSRule.style[i];
-                    properties.push(property + ':' + variableCSSRule.style.getPropertyValue(property));
-                }
-                return prefix + properties.join(';') + suffix;
-            }
-        };
-        this.syntaxes[0].natives.push(this.variablesNativeRules[mode] = nativeRule);
-        return nativeRule;
-    }
 }
 const masterCSSs = [];
 (()=>{