@master/css 2.0.0-rc.40 → 2.0.0-rc.42

package/dist/config/variables.mjs

@@ -1,6 +1,7 @@
 import colors from '@master/colors';
+import extend from '@techor/extend';
 
-const variables = {
+const _variables = {
     full: '100%',
     fit: 'fit-content',
     max: 'max-content',
@@ -119,7 +120,217 @@ const variables = {
         view: 'view-box'
     },
     current: 'currentColor',
-    ...colors
+    white: '#ffffff',
+    black: '#000000',
+    base: {
+        '@light': '$(white)',
+        '@dark': '$(gray-95)'
+    },
+    canvas: {
+        '@light': '$(slate-5)',
+        '@dark': '$(gray-90)'
+    },
+    surface: {
+        '@light': '$(white)',
+        '@dark': '$(gray-80)'
+    },
+    invert: {
+        '@light': '$(black)',
+        '@dark': '$(white)'
+    },
+    line: {
+        neutral: {
+            '@light': '$(slate-60)',
+            '@dark': '$(gray-30)'
+        }
+    },
+    gray: {
+        '@light': '$(gray-30)',
+        '@dark': '$(gray-40)'
+    },
+    slate: {
+        '@light': '$(slate-30)',
+        '@dark': '$(slate-40)'
+    },
+    brown: {
+        '@light': '$(brown-40)',
+        '@dark': '$(brown-50)'
+    },
+    orange: {
+        '@light': '$(orange-40)',
+        '@dark': '$(orange-50)'
+    },
+    amber: {
+        '@light': '$(amber-40)',
+        '@dark': '$(amber-50)'
+    },
+    yellow: {
+        '@light': '$(yellow-40)',
+        '@dark': '$(yellow-50)'
+    },
+    lime: {
+        '@light': '$(lime-40)',
+        '@dark': '$(lime-50)'
+    },
+    green: {
+        '@light': '$(green-40)',
+        '@dark': '$(green-50)'
+    },
+    beryl: {
+        '@light': '$(beryl-40)',
+        '@dark': '$(beryl-50)'
+    },
+    teal: {
+        '@light': '$(teal-40)',
+        '@dark': '$(teal-50)'
+    },
+    cyan: {
+        '@light': '$(cyan-40)',
+        '@dark': '$(cyan-50)'
+    },
+    sky: {
+        '@light': '$(sky-60)',
+        '@dark': '$(sky-50)'
+    },
+    blue: {
+        '@light': '$(blue-60)',
+        '@dark': '$(blue-50)'
+    },
+    indigo: {
+        '@light': '$(indigo-60)',
+        '@dark': '$(indigo-50)'
+    },
+    violet: {
+        '@light': '$(violet-60)',
+        '@dark': '$(violet-50)'
+    },
+    purple: {
+        '@light': '$(purple-60)',
+        '@dark': '$(purple-50)'
+    },
+    fuchsia: {
+        '@light': '$(fuchsia-60)',
+        '@dark': '$(fuchsia-50)'
+    },
+    pink: {
+        '@light': '$(pink-60)',
+        '@dark': '$(pink-50)'
+    },
+    crimson: {
+        '@light': '$(crimson-60)',
+        '@dark': '$(crimson-50)'
+    },
+    red: {
+        '@light': '$(red-60)',
+        '@dark': '$(red-50)'
+    },
+    text: {
+        invert: {
+            '@light': '$(white)',
+            '@dark': '$(black)'
+        },
+        strong: {
+            '@light': '$(slate-95)',
+            '@dark': '$(gray-10)'
+        },
+        neutral: {
+            '@light': '$(slate-70)',
+            '@dark': '$(gray-30)'
+        },
+        lightest: {
+            '@light': '$(slate-30)',
+            '@dark': '$(gray-60)'
+        },
+        lighter: {
+            '@light': '$(slate-40)',
+            '@dark': '$(gray-50)'
+        },
+        light: {
+            '@light': '$(slate-50)',
+            '@dark': '$(gray-40)'
+        },
+        gray: {
+            '@light': '$(gray-60)',
+            '@dark': '$(gray-30)'
+        },
+        slate: {
+            '@light': '$(slate-60)',
+            '@dark': '$(slate-30)'
+        },
+        brown: {
+            '@light': '$(brown-60)',
+            '@dark': '$(brown-30)'
+        },
+        orange: {
+            '@light': '$(orange-60)',
+            '@dark': '$(orange-30)'
+        },
+        amber: {
+            '@light': '$(amber-60)',
+            '@dark': '$(amber-40)'
+        },
+        yellow: {
+            '@light': '$(yellow-60)',
+            '@dark': '$(yellow-40)'
+        },
+        lime: {
+            '@light': '$(lime-70)',
+            '@dark': '$(lime-40)'
+        },
+        green: {
+            '@light': '$(green-70)',
+            '@dark': '$(green-40)'
+        },
+        beryl: {
+            '@light': '$(beryl-70)',
+            '@dark': '$(beryl-40)'
+        },
+        teal: {
+            '@light': '$(teal-70)',
+            '@dark': '$(teal-40)'
+        },
+        cyan: {
+            '@light': '$(cyan-70)',
+            '@dark': '$(cyan-40)'
+        },
+        sky: {
+            '@light': '$(sky-70)',
+            '@dark': '$(sky-30)'
+        },
+        blue: {
+            '@light': '$(blue-60)',
+            '@dark': '$(blue-30)'
+        },
+        indigo: {
+            '@light': '$(indigo-60)',
+            '@dark': '$(indigo-30)'
+        },
+        violet: {
+            '@light': '$(violet-60)',
+            '@dark': '$(violet-30)'
+        },
+        purple: {
+            '@light': '$(purple-60)',
+            '@dark': '$(purple-30)'
+        },
+        fuchsia: {
+            '@light': '$(fuchsia-60)',
+            '@dark': '$(fuchsia-30)'
+        },
+        pink: {
+            '@light': '$(pink-60)',
+            '@dark': '$(pink-30)'
+        },
+        crimson: {
+            '@light': '$(crimson-60)',
+            '@dark': '$(crimson-30)'
+        },
+        red: {
+            '@light': '$(red-60)',
+            '@dark': '$(red-30)'
+        }
+    }
 };
+const variables = extend(colors, _variables);
 
 export { variables as default };

package/dist/core.cjs

@@ -12,14 +12,14 @@ var extendConfig = require('./utils/extend-config.cjs');
 class MasterCSS {
     customConfig;
     static config = index.config;
-    rules;
+    syntaxes;
     ruleBy;
     classesUsage;
     config;
     Rules;
     constructor(customConfig){
         this.customConfig = customConfig;
-        this.rules = [];
+        this.syntaxes = [];
         this.ruleBy = {};
         this.classesUsage = {};
         this.Rules = [];
@@ -48,7 +48,7 @@ class MasterCSS {
             currentColor: undefined,
             transparent: undefined
         };
-        const { styles, selectors, variables, utilities, at, rules, animations } = this.config;
+        const { styles, selectors, variables, utilities, at, syntaxes, animations } = this.config;
         function escapeString(str) {
             return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
         }
@@ -317,7 +317,7 @@ class MasterCSS {
         for (const eachUtilityName of utilityNames){
             handleUtilityName(eachUtilityName);
         }
-        if (rules || utilities) {
+        if (syntaxes || utilities) {
             const rulesEntries = [];
             if (utilities) {
                 for(const utilityName in utilities){
@@ -331,8 +331,8 @@ class MasterCSS {
                     ]);
                 }
             }
-            if (rules) {
-                rulesEntries.push(...Object.entries(rules));
+            if (syntaxes) {
+                rulesEntries.push(...Object.entries(syntaxes));
             }
             const rulesEntriesLength = rulesEntries.length;
             const colorNames = Object.keys(colorVariableNames);
@@ -341,17 +341,17 @@ class MasterCSS {
                     return (b[1].layer || 0) - (a[1].layer || 0);
                 }
                 return b[0].localeCompare(a[0]);
-            }).forEach(([id, eachRuleDefinition], index)=>{
+            }).forEach(([id, eachSyntaxDefinition], index)=>{
                 const EachRule = {
                     id,
                     keys: [],
                     variables: {},
                     matchers: {},
                     order: rulesEntriesLength - 1 - index,
-                    definition: eachRuleDefinition
+                    definition: eachSyntaxDefinition
                 };
                 this.Rules.push(EachRule);
-                const { matcher, layer: layer$1, subkey, ambiguousKeys, ambiguousValues, sign } = eachRuleDefinition;
+                const { matcher, layer: layer$1, subkey, ambiguousKeys, ambiguousValues, sign } = eachSyntaxDefinition;
                 if (layer$1 === layer.Utility) {
                     EachRule.id = '.' + id;
                     EachRule.matchers.arbitrary = new RegExp('^' + escapeString(id) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm');
@@ -365,18 +365,18 @@ class MasterCSS {
                         }
                     }
                 };
-                // 1. custom `config.rules[id].variables`
-                if (eachRuleDefinition.variables) {
-                    for (const eachVariableGroup of eachRuleDefinition.variables){
+                // 1. custom `config.syntaxes[id].variables`
+                if (eachSyntaxDefinition.variables) {
+                    for (const eachVariableGroup of eachSyntaxDefinition.variables){
                         addResolvedVariables(eachVariableGroup);
                     }
                 }
                 // 2. custom `config.variables`
                 addResolvedVariables(id);
                 const keys = [];
-                let { key } = eachRuleDefinition;
+                let { key } = eachSyntaxDefinition;
                 if (layer$1 === layer.NativeShorthand || layer$1 === layer.Native) {
-                    if (!key) eachRuleDefinition.key = key = id;
+                    if (!key) eachSyntaxDefinition.key = key = id;
                     keys.push(id);
                 }
                 if (sign) {
@@ -451,13 +451,13 @@ class MasterCSS {
         }
     }
     /**
-     * Generate rules from class name
+     * Generate syntaxes from 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((eachRule)=>eachRule && eachRule?.text);
+        ]).filter((eachSyntax)=>eachSyntax && eachSyntax?.text);
     }
     /**
      * Create rule from given syntax
@@ -486,12 +486,12 @@ class MasterCSS {
             this.config = extendConfig(customConfig);
         }
         this.resolve();
-        this.rules.length = 0;
+        this.syntaxes.length = 0;
         // @ts-ignore
         this.ruleBy = {};
         /**
-         * 拿當前所有的 classNames 按照最新的 colors, config.rules 匹配並生成新的 style
-         * 所以 refresh 過後 rules 可能會變多也可能會變少
+         * 拿當前所有的 classNames 按照最新的 colors, config.syntaxes 匹配並生成新的 style
+         * 所以 refresh 過後 syntaxes 可能會變多也可能會變少
          */ for(const name in this.classesUsage){
             this.add(name);
         }
@@ -502,7 +502,7 @@ class MasterCSS {
         this.ruleBy = {};
         // @ts-ignore
         this.classesUsage = {};
-        this.rules.length = 0;
+        this.syntaxes.length = 0;
         this.hasKeyframesRule = false;
         this.variablesNativeRules = {};
         for(const keyframeName in this.animations){
@@ -523,9 +523,9 @@ class MasterCSS {
     }
     add(...classNames) {
         for (const className of classNames){
-            const rules = this.generate(className);
-            if (rules.length) {
-                for (const rule of rules){
+            const syntaxes = this.generate(className);
+            if (syntaxes.length) {
+                for (const rule of syntaxes){
                     this.insert(rule);
                 }
             }
@@ -552,7 +552,7 @@ class MasterCSS {
                     }
                 }
             }
-            this.rules.splice(this.rules.indexOf(rule), 1);
+            this.syntaxes.splice(this.syntaxes.indexOf(rule), 1);
             delete this.ruleBy[name];
             // variables
             if (rule.variableNames) {
@@ -564,13 +564,13 @@ class MasterCSS {
                             const nativeRule = this.variablesNativeRules[mode];
                             nativeRule.cssRule.style.removeProperty('--' + eachVariableName);
                             if (!nativeRule.cssRule.style.length) {
-                                const variablesRule = this.rules[0];
+                                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.rules.splice(0, 1);
+                                    this.syntaxes.splice(0, 1);
                                     this.variablesNativeRules = {};
                                 }
                             }
@@ -589,7 +589,7 @@ class MasterCSS {
             // animations
             if (rule.animationNames) {
                 const keyframeRulesIndex = Object.keys(this.variablesNativeRules).length ? 1 : 0;
-                const keyframeRule = this.rules[keyframeRulesIndex];
+                const keyframeRule = this.syntaxes[keyframeRulesIndex];
                 for (const eachKeyframeName of rule.animationNames){
                     const keyframe = this.animations[eachKeyframeName];
                     if (!keyframe.usage) keyframe.usage = 0;
@@ -601,7 +601,7 @@ class MasterCSS {
                     }
                 }
                 if (!keyframeRule.natives.length) {
-                    this.rules.splice(keyframeRulesIndex, 1);
+                    this.syntaxes.splice(keyframeRulesIndex, 1);
                     this.hasKeyframesRule = false;
                 }
             }
@@ -642,28 +642,28 @@ class MasterCSS {
          * 以實現響應式先後套用的規則
          * @example <1  <2  <3  ALL  >=1 >=2 >=3
          * @description
-         */ const endIndex = this.rules.length - 1;
+         */ 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 eachRule = this.rules[i];
-                if (stopCheck?.(eachRule)) return matchCheck ? -1 : i - 1;
-                if (matchCheck?.(eachRule)) return 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.rules.findIndex((eachRule)=>eachRule.at?.media);
+            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.rules.findIndex((eachRule)=>eachRule.at?.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
+                    const mediaWidthStartIndex = this.syntaxes.findIndex((eachSyntax)=>eachSyntax.at?.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
                     if (mediaWidthStartIndex === -1) {
                         index = endIndex + 1;
                     } else {
@@ -674,10 +674,10 @@ class MasterCSS {
                              * find 第一個所遇到同樣 feature 且範圍值比自己大的 rule，
                              * 並插入在該 rule 之後，讓自己優先被套用
                              */ if (priority === -1) {
-                                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);
+                                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, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1);
+                                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) {
@@ -686,9 +686,9 @@ class MasterCSS {
                                 const endI = matchStartIndex;
                                 matchStartIndex = matchEndIndex + 1;
                                 for(; i >= endI; i--){
-                                    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 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 {
@@ -708,15 +708,15 @@ class MasterCSS {
                              * find 第一個所遇到同樣 feature 且值比自己大的 rule，
                              * 並插入在該 rule 之後，讓自己優先被套用
                              */ if (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);
+                                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, (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);
+                                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.rules[i].at.media?.find(({ name })=>name === 'min-width')).value;
+                                    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) {
@@ -730,15 +730,15 @@ class MasterCSS {
                              * find 第一個所遇到同樣 feature 且值比自己大的 rule，
                              * 並插入在該 rule 之後，讓自己優先被套用
                              */ if (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);
+                                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, (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);
+                                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.rules[i].at.media?.find(({ name })=>name === 'max-width')).value;
+                                    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) {
@@ -752,10 +752,10 @@ class MasterCSS {
                 } else {
                     if (priority === -1) {
                         matchStartIndex = mediaStartIndex;
-                        matchEndIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachRule.priority !== -1);
+                        matchEndIndex = findIndex(mediaStartIndex, (eachSyntax)=>eachSyntax.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachSyntax.priority !== -1);
                     } else {
-                        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'));
+                        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'));
                     }
                 }
             }
@@ -763,10 +763,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.atToken || eachRule.priority !== -1);
+                matchEndIndex = findIndex(findStartIndex, (eachSyntax)=>eachSyntax.atToken || eachSyntax.priority !== -1);
             } else {
-                matchStartIndex = findIndex(findStartIndex, (eachRule)=>eachRule.atToken, (eachRule)=>eachRule.priority !== -1);
-                matchEndIndex = findIndex(findStartIndex, (eachRule)=>eachRule.atToken);
+                matchStartIndex = findIndex(findStartIndex, (eachSyntax)=>eachSyntax.atToken, (eachSyntax)=>eachSyntax.priority !== -1);
+                matchEndIndex = findIndex(findStartIndex, (eachSyntax)=>eachSyntax.atToken);
             }
         }
         if (index === undefined && matchEndIndex !== undefined && matchStartIndex !== undefined) {
@@ -775,7 +775,7 @@ class MasterCSS {
             } else {
                 if (priority === -1) {
                     for(let i = matchStartIndex; i <= matchEndIndex; i++){
-                        const currentRule = this.rules[i];
+                        const currentRule = this.syntaxes[i];
                         if (!hasWhere && currentRule.hasWhere) continue;
                         if (hasWhere && !currentRule.hasWhere || currentRule.order >= order) {
                             index = i;
@@ -784,7 +784,7 @@ class MasterCSS {
                     }
                 } else {
                     for(let i = matchStartIndex; i <= matchEndIndex; i++){
-                        const currentRule = this.rules[i];
+                        const currentRule = this.syntaxes[i];
                         if (!hasWhere && currentRule.hasWhere) continue;
                         if (hasWhere && !currentRule.hasWhere) {
                             index = i;
@@ -808,13 +808,13 @@ class MasterCSS {
                 }
             }
         }
-        this.rules.splice(index, 0, rule);
+        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.rules[index];
+                const previousRule = this.syntaxes[index];
                 if (previousRule) {
                     if (!previousRule.natives.length) return getCssRuleIndex(index - 1);
                     const lastNative = previousRule.natives[previousRule.natives.length - 1];
@@ -848,7 +848,7 @@ class MasterCSS {
         return index;
     }
     get text() {
-        return this.rules.map((eachRule)=>eachRule.text).join('');
+        return this.syntaxes.map((eachSyntax)=>eachSyntax.text).join('');
     }
     handleRuleWithAnimationNames(rule, initializing = false) {
         if (rule.animationNames) {
@@ -864,9 +864,9 @@ class MasterCSS {
                     const keyframeRulesIndex = Object.keys(this.variablesNativeRules).length ? 1 : 0;
                     let keyframeRule;
                     if (this.hasKeyframesRule) {
-                        (keyframeRule = this.rules[keyframeRulesIndex]).natives.push(nativeRule);
+                        (keyframeRule = this.syntaxes[keyframeRulesIndex]).natives.push(nativeRule);
                     } else {
-                        this.rules.splice(keyframeRulesIndex, 0, keyframeRule = {
+                        this.syntaxes.splice(keyframeRulesIndex, 0, keyframeRule = {
                             natives: [
                                 nativeRule
                             ],
@@ -923,9 +923,15 @@ class MasterCSS {
                                         break;
                                     case 'host':
                                         selectorText = `:host(.${mode})`;
+                                        if (this.config.defaultMode === mode) {
+                                            selectorText += ',:host';
+                                        }
                                         break;
                                     case 'class':
-                                        selectorText = `.${mode}`;
+                                        selectorText = '.' + mode;
+                                        if (this.config.defaultMode === mode) {
+                                            selectorText += ',:root';
+                                        }
                                         break;
                                     default:
                                         return;
@@ -934,7 +940,7 @@ class MasterCSS {
                                 selectorText = ':root';
                             }
                             if (sheet) {
-                                const newCSSRuleIndex = Object.keys(this.variablesNativeRules).length ? this.rules[0].natives.length : 0;
+                                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 {
@@ -1006,12 +1012,12 @@ class MasterCSS {
                     return this.natives.map((eachNative)=>eachNative.text).join('');
                 }
             };
-            this.rules.splice(0, 0, newRule);
+            this.syntaxes.splice(0, 0, newRule);
         }
         let prefix = '';
         let suffix = '}';
         if (variableCSSRule.parentRule) {
-            prefix += variableCSSRule.parentRule.conditionText.replace(/ /g, '') + '{';
+            prefix += '@media' + variableCSSRule.parentRule.conditionText.replace(/ /g, '') + '{';
             suffix += '}';
         }
         prefix += variableCSSRule.selectorText + '{';
@@ -1026,7 +1032,7 @@ class MasterCSS {
                 return prefix + properties.join(';') + suffix;
             }
         };
-        this.rules[0].natives.push(this.variablesNativeRules[mode] = nativeRule);
+        this.syntaxes[0].natives.push(this.variablesNativeRules[mode] = nativeRule);
         return nativeRule;
     }
 }