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

package/dist/core.d.ts

@@ -28,7 +28,7 @@ export type Variable = TypeVariable & VariableCommon;
 export default class MasterCSS {
     customConfig?: Config | undefined;
     static config: Config;
-    readonly rules: Rule[];
+    readonly syntaxes: Rule[];
     readonly ruleBy: Record<string, Rule>;
     readonly classesUsage: Record<string, number>;
     readonly config: Config;
@@ -42,7 +42,7 @@ export default class MasterCSS {
      */
     match(className: string): RegisteredRule | undefined;
     /**
-     * Generate rules from class name
+     * Generate syntaxes from class name
      * @param className
      * @returns Rule[]
      */
@@ -84,7 +84,7 @@ export default class MasterCSS {
 }
 export declare const masterCSSs: MasterCSS[];
 export default interface MasterCSS {
-    readonly style: HTMLStyleElement;
+    style: HTMLStyleElement;
     styles: Record<string, string[]>;
     stylesBy: Record<string, string[]>;
     selectors: Record<string, [RegExp, string[]][]>;

package/dist/core.mjs

@@ -8,14 +8,14 @@ import extendConfig from './utils/extend-config.mjs';
 class MasterCSS {
     customConfig;
     static config = config;
-    rules;
+    syntaxes;
     ruleBy;
     classesUsage;
     config;
     Rules;
     constructor(customConfig){
         this.customConfig = customConfig;
-        this.rules = [];
+        this.syntaxes = [];
         this.ruleBy = {};
         this.classesUsage = {};
         this.Rules = [];
@@ -44,7 +44,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, '\\$&');
         }
@@ -313,7 +313,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){
@@ -327,8 +327,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);
@@ -337,17 +337,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, subkey, ambiguousKeys, ambiguousValues, sign } = eachRuleDefinition;
+                const { matcher, layer, subkey, ambiguousKeys, ambiguousValues, sign } = eachSyntaxDefinition;
                 if (layer === Layer.Utility) {
                     EachRule.id = '.' + id;
                     EachRule.matchers.arbitrary = new RegExp('^' + escapeString(id) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm');
@@ -361,18 +361,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 === Layer.NativeShorthand || layer === Layer.Native) {
-                    if (!key) eachRuleDefinition.key = key = id;
+                    if (!key) eachSyntaxDefinition.key = key = id;
                     keys.push(id);
                 }
                 if (sign) {
@@ -447,13 +447,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
@@ -482,12 +482,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);
         }
@@ -498,7 +498,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){
@@ -519,9 +519,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);
                 }
             }
@@ -548,7 +548,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) {
@@ -560,13 +560,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 = {};
                                 }
                             }
@@ -585,7 +585,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;
@@ -597,7 +597,7 @@ class MasterCSS {
                     }
                 }
                 if (!keyframeRule.natives.length) {
-                    this.rules.splice(keyframeRulesIndex, 1);
+                    this.syntaxes.splice(keyframeRulesIndex, 1);
                     this.hasKeyframesRule = false;
                 }
             }
@@ -638,28 +638,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 {
@@ -670,10 +670,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) {
@@ -682,9 +682,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 {
@@ -704,15 +704,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) {
@@ -726,15 +726,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) {
@@ -748,10 +748,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'));
                     }
                 }
             }
@@ -759,10 +759,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) {
@@ -771,7 +771,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;
@@ -780,7 +780,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;
@@ -804,13 +804,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];
@@ -844,7 +844,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) {
@@ -860,9 +860,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
                             ],
@@ -919,9 +919,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;
@@ -930,7 +936,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 {
@@ -1002,12 +1008,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 + '{';
@@ -1022,7 +1028,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;
     }
 }

package/dist/index.cjs

@@ -13,7 +13,7 @@ var areRuleModesEqual = require('./utils/are-rule-modes-equal.cjs');
 var areRuleAtEqual = require('./utils/are-rule-at-equal.cjs');
 var areRuleSelectorsEqual = require('./utils/are-rule-selectors-equal.cjs');
 var areRuleStatesEqual = require('./utils/are-rule-states-equal.cjs');
-var areRulesDuplicated = require('./utils/are-rules-duplicated.cjs');
+var areSyntaxesDuplicated = require('./utils/are-syntaxes-duplicated.cjs');
 var generateCss = require('./utils/generate-css.cjs');
 var isCoreRule = require('./utils/is-core-rule.cjs');
 var at = require('./config/at.cjs');
@@ -23,7 +23,7 @@ var functions = require('./config/functions.cjs');
 var animations = require('./config/animations.cjs');
 var variables = require('./config/variables.cjs');
 var modes = require('./config/modes.cjs');
-var rules = require('./config/rules.cjs');
+var syntaxes = require('./config/syntaxes.cjs');
 
 
 
@@ -60,7 +60,7 @@ exports.areRuleModesEqual = areRuleModesEqual;
 exports.areRuleAtEqual = areRuleAtEqual;
 exports.areRuleSelectorsEqual = areRuleSelectorsEqual;
 exports.areRuleStatesEqual = areRuleStatesEqual;
-exports.areRulesDuplicated = areRulesDuplicated;
+exports.areRulesDuplicated = areSyntaxesDuplicated;
 exports.generateCSS = generateCss;
 exports.isCoreRule = isCoreRule;
 exports.at = at;
@@ -70,4 +70,4 @@ exports.functions = functions;
 exports.animations = animations;
 exports.variables = variables;
 exports.modes = modes;
-exports.rules = rules;
+exports.syntaxes = syntaxes;

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { default as areRuleModesEqual } from './utils/are-rule-modes-equal';
 export { default as areRuleAtEqual } from './utils/are-rule-at-equal';
 export { default as areRuleSelectorsEqual } from './utils/are-rule-selectors-equal';
 export { default as areRuleStatesEqual } from './utils/are-rule-states-equal';
-export { default as areRulesDuplicated } from './utils/are-rules-duplicated';
+export { default as areRulesDuplicated } from './utils/are-syntaxes-duplicated';
 export { default as generateCSS } from './utils/generate-css';
 export { default as isCoreRule } from './utils/is-core-rule';
 export type { NativeRule, MediaFeatureComponent, MediaQuery } from './rule';

package/dist/index.mjs

@@ -9,7 +9,7 @@ export { default as areRuleModesEqual } from './utils/are-rule-modes-equal.mjs';
 export { default as areRuleAtEqual } from './utils/are-rule-at-equal.mjs';
 export { default as areRuleSelectorsEqual } from './utils/are-rule-selectors-equal.mjs';
 export { default as areRuleStatesEqual } from './utils/are-rule-states-equal.mjs';
-export { default as areRulesDuplicated } from './utils/are-rules-duplicated.mjs';
+export { default as areRulesDuplicated } from './utils/are-syntaxes-duplicated.mjs';
 export { default as generateCSS } from './utils/generate-css.mjs';
 export { default as isCoreRule } from './utils/is-core-rule.mjs';
 export { default as at } from './config/at.mjs';
@@ -19,4 +19,4 @@ export { default as functions } from './config/functions.mjs';
 export { default as animations } from './config/animations.mjs';
 export { default as variables } from './config/variables.mjs';
 export { default as modes } from './config/modes.mjs';
-export { default as rules } from './config/rules.mjs';
+export { default as syntaxes } from './config/syntaxes.mjs';

package/dist/polyfills/css-escape2.cjs

@@ -42,7 +42,7 @@ var _commonjsHelpers = require('../_virtual/_commonjsHelpers.cjs');
                     result += '\\' + codeUnit.toString(16) + ' ';
                     continue;
                 }
-                // If the character is not handled by one of the above rules and is
+                // If the character is not handled by one of the above syntaxes and is
                 // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
                 // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
                 // U+005A), or [a-z] (U+0061 to U+007A), […]

package/dist/polyfills/css-escape2.mjs

@@ -40,7 +40,7 @@ import { commonjsGlobal } from '../_virtual/_commonjsHelpers.mjs';
                     result += '\\' + codeUnit.toString(16) + ' ';
                     continue;
                 }
-                // If the character is not handled by one of the above rules and is
+                // If the character is not handled by one of the above syntaxes and is
                 // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
                 // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
                 // U+005A), or [a-z] (U+0061 to U+007A), […]

package/dist/rule.cjs

@@ -462,7 +462,7 @@ class Rule {
                     let queryType;
                     const atComponents = [];
                     // x font-face, counter-style, keyframes, font-feature-values, property, layer
-                    const queryTypeRegExp = /^(media|supports|container)/;
+                    const queryTypeRegExp = /^(media|supports|container|layer)/;
                     const atRuleResult = queryTypeRegExp.exec(atToken);
                     if (atRuleResult) {
                         queryType = atRuleResult[1];

package/dist/rule.d.ts

@@ -111,9 +111,9 @@ export interface RegisteredRule {
     };
     variables: Record<string, Variable>;
     order: number;
-    definition: RuleDefinition;
+    definition: SyntaxDefinition;
 }
-export interface RuleDefinition {
+export interface SyntaxDefinition {
     layer?: Layer;
     matcher?: RegExp;
     sign?: string;

package/dist/rule.mjs

@@ -460,7 +460,7 @@ class Rule {
                     let queryType;
                     const atComponents = [];
                     // x font-face, counter-style, keyframes, font-feature-values, property, layer
-                    const queryTypeRegExp = /^(media|supports|container)/;
+                    const queryTypeRegExp = /^(media|supports|container|layer)/;
                     const atRuleResult = queryTypeRegExp.exec(atToken);
                     if (atRuleResult) {
                         queryType = atRuleResult[1];

package/dist/utils/autofill-solid-style.d.ts

@@ -1,3 +1,3 @@
-import { RuleDefinition } from '../rule';
-declare const autofillSolidStyle: RuleDefinition['transformValueComponents'];
+import { SyntaxDefinition } from '../rule';
+declare const autofillSolidStyle: SyntaxDefinition['transformValueComponents'];
 export default autofillSolidStyle;

package/dist/utils/extend-config.cjs

@@ -2,6 +2,7 @@
 
 var extend = require('@techor/extend');
 
+// todo: split resolveConfig into a function
 function extendConfig(...configs) {
     const formatConfig = (config)=>{
         const clonedConfig = extend({}, config);

package/dist/utils/extend-config.mjs

@@ -1,5 +1,6 @@
 import extend from '@techor/extend';
 
+// todo: split resolveConfig into a function
 function extendConfig(...configs) {
     const formatConfig = (config)=>{
         const clonedConfig = extend({}, config);

package/dist/utils/is-core-rule.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var rules = require('../config/rules.cjs');
+var syntaxes = require('../config/syntaxes.cjs');
 
 function isCoreRule(id) {
-    return Object.hasOwnProperty.call(rules, id);
+    return Object.hasOwnProperty.call(syntaxes, id);
 }
 
 module.exports = isCoreRule;

package/dist/utils/is-core-rule.mjs

@@ -1,7 +1,7 @@
-import rules from '../config/rules.mjs';
+import syntaxes from '../config/syntaxes.mjs';
 
 function isCoreRule(id) {
-    return Object.hasOwnProperty.call(rules, id);
+    return Object.hasOwnProperty.call(syntaxes, id);
 }
 
 export { isCoreRule as default };

package/dist/utils/reorder-for-readable-classes.cjs

@@ -10,7 +10,7 @@ var core = require('../core.cjs');
  * @returns consistent classes
  */ function reorderForReadableClasses(classes, css = new core.default()) {
     css.add(...classes);
-    const orderedClasses = css.rules// 只保留樣式語法相關的 rules, 排除 keyframes 與 variables 在外
+    const orderedClasses = css.syntaxes// 只保留樣式語法相關的 syntaxes, 排除 keyframes 與 variables 在外
     .filter((eachRule)=>eachRule.layer).sort((a, b)=>{
         if (a.layer === layer.Utility && b.layer !== layer.Utility) {
             // 如果 a 是 Layer.Utility 而 b 不是，则 a 应该排在 b 前面

package/dist/utils/reorder-for-readable-classes.mjs

@@ -8,7 +8,7 @@ import MasterCSS from '../core.mjs';
  * @returns consistent classes
  */ function reorderForReadableClasses(classes, css = new MasterCSS()) {
     css.add(...classes);
-    const orderedClasses = css.rules// 只保留樣式語法相關的 rules, 排除 keyframes 與 variables 在外
+    const orderedClasses = css.syntaxes// 只保留樣式語法相關的 syntaxes, 排除 keyframes 與 variables 在外
     .filter((eachRule)=>eachRule.layer).sort((a, b)=>{
         if (a.layer === Layer.Utility && b.layer !== Layer.Utility) {
             // 如果 a 是 Layer.Utility 而 b 不是，则 a 应该排在 b 前面