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

package/dist/config/index.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
+var queries = require('./queries.cjs');
 var selectors = require('./selectors.cjs');
 var semantics = require('./semantics.cjs');
 var animations = require('./animations.cjs');
 var variables = require('./variables.cjs');
 var rules = require('./rules.cjs');
 var functions = require('./functions.cjs');
-var screenSizes = require('../tokens/screen-sizes.cjs');
 
 const config = {
-    mediaQueries: screenSizes,
+    queries,
     selectors,
     semantics,
     rules: rules.default,
@@ -21,14 +21,14 @@ const config = {
     baseUnit: 4,
     override: false,
     important: false,
-    themeDriver: 'class'
+    modeDriver: 'class'
 };
 
+exports.queries = queries;
 exports.selectors = selectors;
 exports.semantics = semantics;
 exports.animations = animations;
 exports.variables = variables;
 exports.rules = rules.default;
 exports.functions = functions;
-exports.mediaQueries = screenSizes;
 exports.config = config;

package/dist/config/index.d.ts

@@ -1,4 +1,4 @@
-import mediaQueries from './media-queries';
+import queries from './queries';
 import selectors from './selectors';
 import semantics from './semantics';
 import animations from './animations';
@@ -8,7 +8,7 @@ import functions from './functions';
 import type { PropertiesHyphen } from 'csstype';
 import type { Rule, RuleDefinition, ValueComponent } from '../rule';
 declare const config: Config;
-export { config, mediaQueries, selectors, semantics, rules, functions, animations, variables };
+export { config, queries, selectors, semantics, rules, functions, animations, variables };
 export type VariableValue = number | string | Array<number | string>;
 export type VariableDefinition = {
     [key in '' | `@${string}` | string]?: VariableValue | VariableDefinition;
@@ -52,7 +52,7 @@ export type FunctionDefinitions = {
 export interface Config {
     extends?: (Config | any)[];
     styles?: StyleDefinitions;
-    mediaQueries?: MediaQueryDefinitions;
+    queries?: MediaQueryDefinitions;
     selectors?: SelectorDefinitions;
     semantics?: SemanticDefinitions;
     variables?: VariableDefinitions;
@@ -64,5 +64,5 @@ export interface Config {
     override?: boolean;
     functions?: FunctionDefinitions;
     animations?: AnimationDefinitions;
-    themeDriver?: 'class' | 'media' | 'host';
+    modeDriver?: 'class' | 'media' | 'host';
 }

package/dist/config/index.mjs

@@ -1,13 +1,13 @@
+import queries from './queries.mjs';
 import selectors from './selectors.mjs';
 import semantics from './semantics.mjs';
 import animations from './animations.mjs';
 import variables from './variables.mjs';
 import rules from './rules.mjs';
 import functions from './functions.mjs';
-import mediaQueries from '../tokens/screen-sizes.mjs';
 
 const config = {
-    mediaQueries,
+    queries,
     selectors,
     semantics,
     rules,
@@ -19,7 +19,7 @@ const config = {
     baseUnit: 4,
     override: false,
     important: false,
-    themeDriver: 'class'
+    modeDriver: 'class'
 };
 
-export { animations, config, functions, mediaQueries, rules, selectors, semantics, variables };
+export { animations, config, functions, queries, rules, selectors, semantics, variables };

package/dist/config/queries.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var screenSizes = require('../tokens/screen-sizes.cjs');
+
+const queries = {
+    landscape: 'media (orientation:landscape)',
+    portrait: 'media (orientation:portrait)',
+    motion: 'media (prefers-reduced-motion:no-preference)',
+    'reduced-motion': 'media (prefers-reduced-motion:reduce)',
+    ...screenSizes
+};
+
+module.exports = queries;

package/dist/config/queries.d.ts

@@ -0,0 +1,18 @@
+declare const queries: {
+    '4xs': number;
+    '3xs': number;
+    '2xs': number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+    landscape: string;
+    portrait: string;
+    motion: string;
+    'reduced-motion': string;
+};
+export default queries;

package/dist/config/queries.mjs

@@ -0,0 +1,11 @@
+import screenSizes from '../tokens/screen-sizes.mjs';
+
+const queries = {
+    landscape: 'media (orientation:landscape)',
+    portrait: 'media (orientation:portrait)',
+    motion: 'media (prefers-reduced-motion:no-preference)',
+    'reduced-motion': 'media (prefers-reduced-motion:reduce)',
+    ...screenSizes
+};
+
+export { queries as default };

package/dist/config/variables.mjs

@@ -1,5 +1,5 @@
 import colors from '@master/colors';
-import mediaQueries from '../tokens/screen-sizes.mjs';
+import screenSizes from '../tokens/screen-sizes.mjs';
 
 const variables = {
     full: '100%',
@@ -42,7 +42,7 @@ const variables = {
             'serif'
         ]
     },
-    screen: mediaQueries,
+    screen: screenSizes,
     'font-weight': {
         thin: 100,
         extralight: 200,

package/dist/core.cjs

@@ -7,7 +7,7 @@ var index = require('./config/index.cjs');
 var layer = require('./layer.cjs');
 var hexToRgb = require('./utils/hex-to-rgb.cjs');
 var flattenObject = require('./utils/flatten-object.cjs');
-var extendConfig = require('./utils/extend-config.cjs');
+var extendConfig = require('./functions/extend-config.cjs');
 
 class MasterCSS {
     customConfig;
@@ -26,9 +26,9 @@ class MasterCSS {
         this.RegisteredSemanticRules = [];
         this.RegisteredRules = [];
         if (!customConfig?.override) {
-            this.config = extendConfig.extendConfig(index.config, customConfig);
+            this.config = extendConfig(index.config, customConfig);
         } else {
-            this.config = extendConfig.extendConfig(customConfig);
+            this.config = extendConfig(customConfig);
         }
         this.resolve();
         if (this.constructor === MasterCSS) {
@@ -40,7 +40,7 @@ class MasterCSS {
         this.stylesBy = {};
         this.selectors = {};
         this.variables = {};
-        this.mediaQueries = {};
+        this.queries = {};
         this.animations = {};
         this.RegisteredRules.length = 0;
         this.RegisteredSemanticRules.length = 0;
@@ -51,7 +51,7 @@ class MasterCSS {
             currentColor: undefined,
             transparent: undefined
         };
-        const { styles, selectors, variables, semantics, mediaQueries, rules, animations } = this.config;
+        const { styles, selectors, variables, semantics, queries, rules, animations } = this.config;
         function escapeString(str) {
             return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
         }
@@ -82,9 +82,9 @@ class MasterCSS {
         }
         if (variables) {
             const unexecutedAliasVariable = {};
-            const parseVariable = (variable, name, theme)=>{
+            const parseVariable = (variable, name, mode)=>{
                 if (!variable) return;
-                const addVariable = (name, variableValue, replacedTheme, alpha)=>{
+                const addVariable = (name, variableValue, replacedMode, alpha)=>{
                     if (variableValue === undefined) return;
                     if (variableValue.type === 'color') {
                         if (alpha) {
@@ -96,15 +96,15 @@ class MasterCSS {
                         }
                         colorVariableNames[name] = undefined;
                     }
-                    const currentTheme = replacedTheme ?? theme;
-                    if (currentTheme !== undefined) {
+                    const currentMode = replacedMode ?? mode;
+                    if (currentMode !== undefined) {
                         if (Object.prototype.hasOwnProperty.call(this.variables, name)) {
                             const variable = this.variables[name];
-                            if (currentTheme) {
-                                if (!variable.themes) {
-                                    variable.themes = {};
+                            if (currentMode) {
+                                if (!variable.modes) {
+                                    variable.modes = {};
                                 }
-                                variable.themes[currentTheme] = variableValue;
+                                variable.modes[currentMode] = variableValue;
                             } else {
                                 variable.value = variableValue.value;
                                 if (variableValue.type === 'color') {
@@ -112,11 +112,11 @@ class MasterCSS {
                                 }
                             }
                         } else {
-                            if (currentTheme) {
+                            if (currentMode) {
                                 const newVariable = {
                                     type: variableValue.type,
-                                    themes: {
-                                        [currentTheme]: variableValue
+                                    modes: {
+                                        [currentMode]: variableValue
                                     }
                                 };
                                 if (variableValue.type === 'color') {
@@ -163,28 +163,28 @@ class MasterCSS {
                         if (!Object.prototype.hasOwnProperty.call(unexecutedAliasVariable, name)) {
                             unexecutedAliasVariable[name] = {};
                         }
-                        unexecutedAliasVariable[name][theme] = ()=>{
-                            delete unexecutedAliasVariable[name][theme];
-                            const [alias, aliasTheme] = aliasResult[1].split('@');
+                        unexecutedAliasVariable[name][mode] = ()=>{
+                            delete unexecutedAliasVariable[name][mode];
+                            const [alias, aliasMode] = aliasResult[1].split('@');
                             if (alias) {
                                 if (Object.prototype.hasOwnProperty.call(unexecutedAliasVariable, alias)) {
-                                    for (const theme of Object.keys(unexecutedAliasVariable[alias])){
-                                        unexecutedAliasVariable[alias][theme]?.();
+                                    for (const mode of Object.keys(unexecutedAliasVariable[alias])){
+                                        unexecutedAliasVariable[alias][mode]?.();
                                     }
                                 }
                                 const aliasVariable = this.variables[alias];
                                 if (aliasVariable) {
-                                    if (aliasTheme === undefined && aliasVariable.themes) {
+                                    if (aliasMode === undefined && aliasVariable.modes) {
                                         addVariable(name, {
                                             type: aliasVariable.type,
                                             value: aliasVariable.value,
                                             space: aliasVariable.space
                                         }, '', aliasResult[2]);
-                                        for(const theme in aliasVariable.themes){
-                                            addVariable(name, aliasVariable.themes[theme], theme, aliasResult[2]);
+                                        for(const mode in aliasVariable.modes){
+                                            addVariable(name, aliasVariable.modes[mode], mode, aliasResult[2]);
                                         }
                                     } else {
-                                        const variable = aliasTheme !== undefined ? aliasVariable.themes?.[aliasTheme] : aliasVariable;
+                                        const variable = aliasMode !== undefined ? aliasVariable.modes?.[aliasMode] : aliasVariable;
                                         if (variable) {
                                             const newVariable = {
                                                 type: variable.type,
@@ -239,13 +239,13 @@ class MasterCSS {
                 parseVariable(variables[parnetKey], parnetKey);
             }
             for (const name of Object.keys(unexecutedAliasVariable)){
-                for (const theme of Object.keys(unexecutedAliasVariable[name])){
-                    unexecutedAliasVariable[name][theme]?.();
+                for (const mode of Object.keys(unexecutedAliasVariable[name])){
+                    unexecutedAliasVariable[name][mode]?.();
                 }
             }
         }
-        if (mediaQueries) {
-            this.mediaQueries = flattenObject.flattenObject(mediaQueries);
+        if (queries) {
+            this.queries = flattenObject.flattenObject(queries);
         }
         if (animations) {
             for(const animationName in animations){
@@ -415,10 +415,10 @@ class MasterCSS {
      */ refresh(customConfig = this.customConfig) {
         if (!customConfig?.override) {
             // @ts-ignore
-            this.config = extendConfig.extendConfig(index.config, customConfig);
+            this.config = extendConfig(index.config, customConfig);
         } else {
             // @ts-ignore
-            this.config = extendConfig.extendConfig(customConfig);
+            this.config = extendConfig(customConfig);
         }
         this.resolve();
         this.rules.length = 0;
@@ -495,15 +495,15 @@ class MasterCSS {
                     const variable = this.variables[eachVariableName];
                     if (!variable.usage) variable.usage = 0;
                     if (!--variable.usage) {
-                        const removeProperty = (theme)=>{
-                            const nativeRule = this.variablesNativeRules[theme];
+                        const removeProperty = (mode)=>{
+                            const nativeRule = this.variablesNativeRules[mode];
                             nativeRule.cssRule.style.removeProperty('--' + eachVariableName);
                             if (!nativeRule.cssRule.style.length) {
                                 const variablesRule = this.rules[0];
                                 const index = variablesRule.natives.indexOf(nativeRule);
                                 sheet?.deleteRule(index);
                                 variablesRule.natives.splice(index, 1);
-                                delete this.variablesNativeRules[theme];
+                                delete this.variablesNativeRules[mode];
                                 if (!variablesRule.natives.length) {
                                     this.rules.splice(0, 1);
                                     this.variablesNativeRules = {};
@@ -513,9 +513,9 @@ class MasterCSS {
                         if (variable.value) {
                             removeProperty('');
                         }
-                        if (variable.themes) {
-                            for(const theme in variable.themes){
-                                removeProperty(theme);
+                        if (variable.modes) {
+                            for(const mode in variable.modes){
+                                removeProperty(mode);
                             }
                         }
                     }
@@ -578,7 +578,7 @@ class MasterCSS {
          * @example <1  <2  <3  ALL  >=1 >=2 >=3
          * @description
          */ const endIndex = this.rules.length - 1;
-        const { media, order, priority, hasWhere, className } = rule;
+        const { at, atToken, order, priority, hasWhere, className } = rule;
         const findIndex = (startIndex, stopCheck, matchCheck)=>{
             let i = startIndex;
             for(; i <= endIndex; i++){
@@ -590,14 +590,15 @@ class MasterCSS {
         };
         let matchStartIndex;
         let matchEndIndex;
-        if (media) {
-            const mediaStartIndex = this.rules.findIndex((eachRule)=>eachRule.media);
+        if (atToken) {
+            const mediaStartIndex = this.rules.findIndex((eachRule)=>eachRule.at?.media);
             if (mediaStartIndex === -1) {
                 index = endIndex + 1;
             } else {
-                const { 'max-width': maxWidthFeature, 'min-width': minWidthFeature } = media.features;
+                const maxWidthFeature = at.media?.find(({ name })=>name === 'max-width');
+                const minWidthFeature = at.media?.find(({ name })=>name === 'min-width');
                 if (maxWidthFeature || minWidthFeature) {
-                    const mediaWidthStartIndex = this.rules.findIndex((eachRule)=>eachRule.media?.features['max-width'] || eachRule.media?.features['min-width']);
+                    const mediaWidthStartIndex = this.rules.findIndex((eachRule)=>eachRule.at?.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
                     if (mediaWidthStartIndex === -1) {
                         index = endIndex + 1;
                     } else {
@@ -608,10 +609,10 @@ class MasterCSS {
                              * find 第一個所遇到同樣 feature 且範圍值比自己大的 rule，
                              * 並插入在該 rule 之後，讓自己優先被套用
                              */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.priority !== -1, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width']);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.priority !== -1, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width'));
                                 matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.priority !== -1);
                             } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, undefined, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width'] && eachRule.priority !== -1);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, undefined, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1);
                                 matchEndIndex = endIndex;
                             }
                             if (matchStartIndex !== -1) {
@@ -620,7 +621,9 @@ class MasterCSS {
                                 const endI = matchStartIndex;
                                 matchStartIndex = undefined;
                                 for(; i >= endI; i--){
-                                    const { 'max-width': eachMaxWidthFeature, 'min-width': eachMinWidthFeature } = this.rules[i].media.features;
+                                    const eachRule = this.rules[i];
+                                    const eachMaxWidthFeature = eachRule.at.media?.find(({ name })=>name === 'max-width');
+                                    const eachMinWidthFeature = eachRule.at.media?.find(({ name })=>name === 'min-width');
                                     const eachRange = eachMaxWidthFeature.value - eachMinWidthFeature.value;
                                     if (eachRange < range) {
                                         matchEndIndex = i - 1;
@@ -634,7 +637,9 @@ class MasterCSS {
                             if (matchStartIndex !== -1 && matchStartIndex !== undefined) {
                                 const range = maxWidthFeature.value - minWidthFeature.value;
                                 for(let i = matchEndIndex; i >= matchStartIndex; i--){
-                                    const { 'max-width': eachMaxWidthFeature, 'min-width': eachMinWidthFeature } = this.rules[i].media.features;
+                                    const eachRule = this.rules[i];
+                                    const eachMaxWidthFeature = eachRule.at.media?.find(({ name })=>name === 'max-width');
+                                    const eachMinWidthFeature = eachRule.at.media?.find(({ name })=>name === 'min-width');
                                     const eachRange = eachMaxWidthFeature.value - eachMinWidthFeature.value;
                                     if (eachRange < range) {
                                         matchEndIndex = i - 1;
@@ -649,15 +654,15 @@ class MasterCSS {
                              * find 第一個所遇到同樣 feature 且值比自己大的 rule，
                              * 並插入在該 rule 之後，讓自己優先被套用
                              */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width'] || eachRule.priority !== -1, (eachRule)=>!eachRule.media.features['max-width'] && eachRule.media.features['min-width']);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width'] || eachRule.priority !== -1);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') || eachRule.priority !== -1, (eachRule)=>!eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width'));
+                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') || eachRule.priority !== -1);
                             } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width'] && eachRule.priority !== -1, (eachRule)=>!eachRule.media.features['max-width'] && eachRule.media.features['min-width'] && eachRule.priority !== -1);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['max-width'] && eachRule.media.features['min-width'] && eachRule.priority !== -1);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1, (eachRule)=>!eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1);
+                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1);
                             }
                             if (matchStartIndex !== -1) {
                                 for(let i = matchEndIndex; i >= matchStartIndex; i--){
-                                    const value = this.rules[i].media.features['min-width'].value;
+                                    const value = (this.rules[i].at.media?.find(({ name })=>name === 'min-width')).value;
                                     if (value > minWidthFeature.value) {
                                         matchEndIndex = i - 1;
                                     } else if (value < minWidthFeature.value) {
@@ -671,15 +676,15 @@ class MasterCSS {
                              * find 第一個所遇到同樣 feature 且值比自己大的 rule，
                              * 並插入在該 rule 之後，讓自己優先被套用
                              */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['min-width'] || eachRule.priority !== -1, (eachRule)=>eachRule.media.features['max-width']);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['min-width'] || eachRule.priority !== -1);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'min-width') || eachRule.priority !== -1, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width'));
+                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'min-width') || eachRule.priority !== -1);
                             } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['min-width'] && eachRule.priority !== -1, (eachRule)=>eachRule.media.features['max-width'] && eachRule.priority !== -1);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.media.features['min-width'] && eachRule.priority !== -1);
+                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width') && eachRule.priority !== -1);
+                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'min-width') && eachRule.priority !== -1);
                             }
                             if (matchStartIndex !== -1) {
                                 for(let i = matchEndIndex; i >= matchStartIndex; i--){
-                                    const value = this.rules[i].media.features['max-width'].value;
+                                    const value = (this.rules[i].at.media?.find(({ name })=>name === 'max-width')).value;
                                     if (value < maxWidthFeature.value) {
                                         matchEndIndex = i - 1;
                                     } else if (value > maxWidthFeature.value) {
@@ -693,10 +698,10 @@ class MasterCSS {
                 } else {
                     if (priority === -1) {
                         matchStartIndex = mediaStartIndex;
-                        matchEndIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.media?.features['max-width'] || eachRule.media?.features['min-width'] || eachRule.priority !== -1);
+                        matchEndIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachRule.priority !== -1);
                     } else {
-                        matchStartIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.media?.features['max-width'] || eachRule.media?.features['min-width'], (eachRule)=>eachRule.priority !== -1);
-                        matchEndIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.media?.features['max-width'] || eachRule.media?.features['min-width']);
+                        matchStartIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'), (eachRule)=>eachRule.priority !== -1);
+                        matchEndIndex = findIndex(mediaStartIndex, (eachRule)=>eachRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
                     }
                 }
             }
@@ -704,10 +709,10 @@ class MasterCSS {
             const findStartIndex = Object.keys(this.variablesNativeRules).length ? this.hasKeyframesRule ? 2 : 1 : this.hasKeyframesRule ? 1 : 0;
             if (priority === -1) {
                 matchStartIndex = findStartIndex;
-                matchEndIndex = findIndex(findStartIndex, (eachRule)=>eachRule.media || eachRule.priority !== -1);
+                matchEndIndex = findIndex(findStartIndex, (eachRule)=>eachRule.atToken || eachRule.priority !== -1);
             } else {
-                matchStartIndex = findIndex(findStartIndex, (eachRule)=>eachRule.media, (eachRule)=>eachRule.priority !== -1);
-                matchEndIndex = findIndex(findStartIndex, (eachRule)=>eachRule.media);
+                matchStartIndex = findIndex(findStartIndex, (eachRule)=>eachRule.atToken, (eachRule)=>eachRule.priority !== -1);
+                matchEndIndex = findIndex(findStartIndex, (eachRule)=>eachRule.atToken);
             }
         }
         if (index === undefined && matchEndIndex !== undefined && matchStartIndex !== undefined) {
@@ -850,23 +855,23 @@ class MasterCSS {
                 if (variable.usage) {
                     variable.usage++;
                 } else {
-                    const addProperty = (theme, variableValue)=>{
-                        let nativeRule = this.variablesNativeRules[theme];
+                    const addProperty = (mode, variableValue)=>{
+                        let nativeRule = this.variablesNativeRules[mode];
                         if (!nativeRule) {
                             let cssRule;
                             let mediaConditionText;
                             let selectorText;
-                            if (theme) {
-                                switch(this.config.themeDriver){
+                            if (mode) {
+                                switch(this.config.modeDriver){
                                     case 'media':
-                                        mediaConditionText = `@media(prefers-color-scheme:${theme})`;
+                                        mediaConditionText = `@media(prefers-color-scheme:${mode})`;
                                         selectorText = ':root';
                                         break;
                                     case 'host':
-                                        selectorText = `:host(.${theme})`;
+                                        selectorText = `:host(.${mode})`;
                                         break;
                                     default:
-                                        selectorText = `.${theme}`;
+                                        selectorText = `.${mode}`;
                                         break;
                                 }
                             } else {
@@ -916,7 +921,7 @@ class MasterCSS {
                                     };
                                 }
                             }
-                            nativeRule = this.pushVariableNativeRule(theme, cssRule);
+                            nativeRule = this.pushVariableNativeRule(mode, cssRule);
                         }
                         const propertyName = '--' + eachVariableName;
                         if (!initializing || !nativeRule.cssRule.style.getPropertyValue(propertyName)) {
@@ -926,9 +931,9 @@ class MasterCSS {
                     if (variable.value) {
                         addProperty('', variable);
                     }
-                    if (variable.themes) {
-                        for(const theme in variable.themes){
-                            addProperty(theme, variable.themes[theme]);
+                    if (variable.modes) {
+                        for(const mode in variable.modes){
+                            addProperty(mode, variable.modes[mode]);
                         }
                     }
                     variable.usage = 1;
@@ -936,7 +941,7 @@ class MasterCSS {
             }
         }
     }
-    pushVariableNativeRule(theme, variableCSSRule) {
+    pushVariableNativeRule(mode, variableCSSRule) {
         if (!Object.keys(this.variablesNativeRules).length) {
             this.variablesNativeRules = {};
             const newRule = {
@@ -965,7 +970,7 @@ class MasterCSS {
                 return prefix + properties.join(';') + suffix;
             }
         };
-        this.rules[0].natives.push(this.variablesNativeRules[theme] = nativeRule);
+        this.rules[0].natives.push(this.variablesNativeRules[mode] = nativeRule);
         return nativeRule;
     }
 }

package/dist/core.d.ts

@@ -16,8 +16,8 @@ export type Variable = Omit<VariableValue, 'value' | 'space'> & {
     value?: any;
     space?: any;
     usage?: number;
-    themes?: {
-        [theme: string]: VariableValue;
+    modes?: {
+        [mode: string]: VariableValue;
     };
 };
 export default class MasterCSS {
@@ -76,7 +76,7 @@ export default class MasterCSS {
     get text(): string;
     handleRuleWithAnimationNames(rule: Rule, initializing?: boolean): void;
     handleRuleWithVariableNames(rule: Rule, initializing?: boolean): void;
-    pushVariableNativeRule(theme: string, variableCSSRule: CSSStyleRule): NativeRule;
+    pushVariableNativeRule(mode: string, variableCSSRule: CSSStyleRule): NativeRule;
 }
 export declare const masterCSSs: MasterCSS[];
 export default interface MasterCSS {
@@ -85,7 +85,7 @@ export default interface MasterCSS {
     stylesBy: Record<string, string[]>;
     selectors: Record<string, [RegExp, string[]][]>;
     variables: Record<string, Variable>;
-    mediaQueries: Record<string, string | number>;
+    queries: Record<string, string | number>;
     variablesNativeRules: Record<string, NativeRule>;
     hasKeyframesRule: boolean;
     animations: Record<string, AnimationDefinitions & {