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

package/dist/config/{queries.cjs → at.cjs}

@@ -1,8 +1,6 @@
 'use strict';
 
-var screenSizes = require('../tokens/screen-sizes.cjs');
-
-const queries = {
+const at = {
     all: 'media all',
     print: 'media print',
     screen: 'media screen',
@@ -10,8 +8,7 @@ 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
+    'reduced-motion': 'media (prefers-reduced-motion:reduce)'
 };
 
-module.exports = queries;
+module.exports = at;

package/dist/config/at.d.ts

@@ -0,0 +1,11 @@
+declare const at: {
+    all: string;
+    print: string;
+    screen: string;
+    speech: string;
+    landscape: string;
+    portrait: string;
+    motion: string;
+    'reduced-motion': string;
+};
+export default at;

package/dist/config/{queries.mjs → at.mjs}

@@ -1,6 +1,4 @@
-import screenSizes from '../tokens/screen-sizes.mjs';
-
-const queries = {
+const at = {
     all: 'media all',
     print: 'media print',
     screen: 'media screen',
@@ -8,8 +6,7 @@ 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
+    'reduced-motion': 'media (prefers-reduced-motion:reduce)'
 };
 
-export { queries as default };
+export { at as default };

package/dist/config/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var queries = require('./queries.cjs');
+var at = require('./at.cjs');
 var selectors = require('./selectors.cjs');
 var utilities = require('./utilities.cjs');
 var animations = require('./animations.cjs');
@@ -10,7 +10,7 @@ var modes = require('./modes.cjs');
 var functions = require('./functions.cjs');
 
 const config = {
-    queries,
+    at,
     selectors,
     utilities,
     rules,
@@ -25,7 +25,7 @@ const config = {
     important: false
 };
 
-exports.queries = queries;
+exports.at = at;
 exports.selectors = selectors;
 exports.utilities = utilities;
 exports.animations = animations;

package/dist/config/index.d.ts

@@ -1,4 +1,4 @@
-import queries from './queries';
+import at from './at';
 import selectors from './selectors';
 import utilities from './utilities';
 import animations from './animations';
@@ -9,7 +9,7 @@ import functions from './functions';
 import type { PropertiesHyphen } from 'csstype';
 import type { Rule, RuleDefinition, ValueComponent } from '../rule';
 declare const config: Config;
-export { config, queries, selectors, utilities, rules, functions, animations, variables, modes };
+export { config, at, selectors, utilities, rules, functions, animations, variables, modes };
 export type VariableValue = number | string | Array<number | string>;
 export type VariableDefinition = {
     [key in '' | `@${string}` | string]?: VariableValue | VariableDefinition;
@@ -23,8 +23,8 @@ export type AnimationDefinitions = {
 export type SelectorDefinitions = {
     [key: string]: string | string[];
 };
-export type MediaQueryDefinitions = {
-    [key: string]: number | string | MediaQueryDefinitions;
+export type AtDefinitions = {
+    [key: string]: number | string | AtDefinitions;
 };
 export type StyleDefinitions = {
     [key: string]: string | StyleDefinitions;
@@ -55,7 +55,7 @@ export type FunctionDefinitions = {
 export interface Config {
     extends?: (Config | any)[];
     styles?: StyleDefinitions;
-    queries?: MediaQueryDefinitions;
+    at?: AtDefinitions;
     selectors?: SelectorDefinitions;
     utilities?: UtilityDefinitions;
     variables?: VariableDefinitions;

package/dist/config/index.mjs

@@ -1,4 +1,4 @@
-import queries from './queries.mjs';
+import at from './at.mjs';
 import selectors from './selectors.mjs';
 import utilities from './utilities.mjs';
 import animations from './animations.mjs';
@@ -8,7 +8,7 @@ import modes from './modes.mjs';
 import functions from './functions.mjs';
 
 const config = {
-    queries,
+    at,
     selectors,
     utilities,
     rules,
@@ -23,4 +23,4 @@ const config = {
     important: false
 };
 
-export { animations, config, functions, modes, queries, rules, selectors, utilities, variables };
+export { animations, at, config, functions, modes, rules, selectors, utilities, variables };

package/dist/config/rules.cjs

@@ -2263,6 +2263,7 @@ const rules = {
         layer: layer.Native
     },
     'clip-path': {
+        key: 'clip',
         layer: layer.Native
     },
     quotes: {

package/dist/config/rules.mjs

@@ -2261,6 +2261,7 @@ const rules = {
         layer: Layer.Native
     },
     'clip-path': {
+        key: 'clip',
         layer: Layer.Native
     },
     quotes: {

package/dist/config/variables.cjs

@@ -1,13 +1,25 @@
 'use strict';
 
 var colors = require('@master/colors');
-var screenSizes = require('../tokens/screen-sizes.cjs');
 
 const variables = {
     full: '100%',
     fit: 'fit-content',
     max: 'max-content',
     min: 'min-content',
+    screen: {
+        '4xs': 360,
+        '3xs': 480,
+        '2xs': 600,
+        'xs': 768,
+        'sm': 834,
+        'md': 1024,
+        'lg': 1280,
+        'xl': 1440,
+        '2xl': 1600,
+        '3xl': 1920,
+        '4xl': 2560
+    },
     'font-family': {
         mono: [
             'ui-monospace',
@@ -44,7 +56,6 @@ const variables = {
             'serif'
         ]
     },
-    screen: screenSizes,
     'font-weight': {
         thin: 100,
         extralight: 200,

package/dist/config/variables.d.ts

@@ -419,11 +419,6 @@ declare const variables: {
     fit: string;
     max: string;
     min: string;
-    'font-family': {
-        mono: string[];
-        sans: string[];
-        serif: string[];
-    };
     screen: {
         '4xs': number;
         '3xs': number;
@@ -437,6 +432,11 @@ declare const variables: {
         '3xl': number;
         '4xl': number;
     };
+    'font-family': {
+        mono: string[];
+        sans: string[];
+        serif: string[];
+    };
     'font-weight': {
         thin: number;
         extralight: number;

package/dist/config/variables.mjs

@@ -1,11 +1,23 @@
 import colors from '@master/colors';
-import screenSizes from '../tokens/screen-sizes.mjs';
 
 const variables = {
     full: '100%',
     fit: 'fit-content',
     max: 'max-content',
     min: 'min-content',
+    screen: {
+        '4xs': 360,
+        '3xs': 480,
+        '2xs': 600,
+        'xs': 768,
+        'sm': 834,
+        'md': 1024,
+        'lg': 1280,
+        'xl': 1440,
+        '2xl': 1600,
+        '3xl': 1920,
+        '4xl': 2560
+    },
     'font-family': {
         mono: [
             'ui-monospace',
@@ -42,7 +54,6 @@ const variables = {
             'serif'
         ]
     },
-    screen: screenSizes,
     'font-weight': {
         thin: 100,
         extralight: 200,

package/dist/core.cjs

@@ -17,7 +17,7 @@ class MasterCSS {
     classesUsage;
     config;
     Rules;
-    constructor(customConfig = index.config){
+    constructor(customConfig){
         this.customConfig = customConfig;
         this.rules = [];
         this.ruleBy = {};
@@ -38,7 +38,7 @@ class MasterCSS {
         this.stylesBy = {};
         this.selectors = {};
         this.variables = {};
-        this.queries = {};
+        this.at = {};
         this.animations = {};
         this.Rules.length = 0;
         this.variablesNativeRules = {};
@@ -48,7 +48,7 @@ class MasterCSS {
             currentColor: undefined,
             transparent: undefined
         };
-        const { styles, selectors, variables, utilities, queries, rules, animations } = this.config;
+        const { styles, selectors, variables, utilities, at, rules, animations } = this.config;
         function escapeString(str) {
             return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
         }
@@ -99,6 +99,11 @@ class MasterCSS {
                         }
                         colorVariableNames[flatName] = undefined;
                     }
+                    /**
+                     * resolve `variables.screen-*` to `at.*`
+                     */ if (variable.name.startsWith('screen-') && variable.type === 'number') {
+                        this.at[variable.name.slice(7)] = variable.value;
+                    }
                     const currentMode = replacedMode ?? mode;
                     if (currentMode !== undefined) {
                         if (Object.prototype.hasOwnProperty.call(this.variables, flatName)) {
@@ -259,8 +264,8 @@ class MasterCSS {
                 }
             }
         }
-        if (queries) {
-            this.queries = flattenObject.flattenObject(queries);
+        if (at) {
+            Object.assign(this.at, flattenObject.flattenObject(at));
         }
         if (animations) {
             for(const animationName in animations){

package/dist/core.d.ts

@@ -26,14 +26,14 @@ export type ColorVariable = {
 export type TypeVariable = StringVariable | NumberVariable | ColorVariable;
 export type Variable = TypeVariable & VariableCommon;
 export default class MasterCSS {
-    customConfig: Config;
+    customConfig?: Config | undefined;
     static config: Config;
     readonly rules: Rule[];
     readonly ruleBy: Record<string, Rule>;
     readonly classesUsage: Record<string, number>;
     readonly config: Config;
     readonly Rules: RegisteredRule[];
-    constructor(customConfig?: Config);
+    constructor(customConfig?: Config | undefined);
     resolve(): void;
     /**
      * Match check if Master CSS syntax
@@ -89,7 +89,7 @@ export default interface MasterCSS {
     stylesBy: Record<string, string[]>;
     selectors: Record<string, [RegExp, string[]][]>;
     variables: Record<string, Variable>;
-    queries: Record<string, string | number>;
+    at: Record<string, string | number>;
     variablesNativeRules: Record<string, NativeRule>;
     hasKeyframesRule: boolean;
     animations: Record<string, AnimationDefinitions & {

package/dist/core.mjs

@@ -13,7 +13,7 @@ class MasterCSS {
     classesUsage;
     config;
     Rules;
-    constructor(customConfig = config){
+    constructor(customConfig){
         this.customConfig = customConfig;
         this.rules = [];
         this.ruleBy = {};
@@ -34,7 +34,7 @@ class MasterCSS {
         this.stylesBy = {};
         this.selectors = {};
         this.variables = {};
-        this.queries = {};
+        this.at = {};
         this.animations = {};
         this.Rules.length = 0;
         this.variablesNativeRules = {};
@@ -44,7 +44,7 @@ class MasterCSS {
             currentColor: undefined,
             transparent: undefined
         };
-        const { styles, selectors, variables, utilities, queries, rules, animations } = this.config;
+        const { styles, selectors, variables, utilities, at, rules, animations } = this.config;
         function escapeString(str) {
             return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
         }
@@ -95,6 +95,11 @@ class MasterCSS {
                         }
                         colorVariableNames[flatName] = undefined;
                     }
+                    /**
+                     * resolve `variables.screen-*` to `at.*`
+                     */ if (variable.name.startsWith('screen-') && variable.type === 'number') {
+                        this.at[variable.name.slice(7)] = variable.value;
+                    }
                     const currentMode = replacedMode ?? mode;
                     if (currentMode !== undefined) {
                         if (Object.prototype.hasOwnProperty.call(this.variables, flatName)) {
@@ -255,8 +260,8 @@ class MasterCSS {
                 }
             }
         }
-        if (queries) {
-            this.queries = flattenObject(queries);
+        if (at) {
+            Object.assign(this.at, flattenObject(at));
         }
         if (animations) {
             for(const animationName in animations){

package/dist/index.cjs

@@ -10,13 +10,13 @@ var layer = require('./layer.cjs');
 var extendConfig = require('./utils/extend-config.cjs');
 var reorderForReadableClasses = require('./utils/reorder-for-readable-classes.cjs');
 var areRuleModesEqual = require('./utils/are-rule-modes-equal.cjs');
-var areRuleQueriesEqual = require('./utils/are-rule-queries-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 generateCss = require('./utils/generate-css.cjs');
 var isCoreRule = require('./utils/is-core-rule.cjs');
-var queries = require('./config/queries.cjs');
+var at = require('./config/at.cjs');
 var selectors = require('./config/selectors.cjs');
 var utilities = require('./config/utilities.cjs');
 var functions = require('./config/functions.cjs');
@@ -57,13 +57,13 @@ exports.Layer = layer;
 exports.extendConfig = extendConfig;
 exports.reorderForReadableClasses = reorderForReadableClasses;
 exports.areRuleModesEqual = areRuleModesEqual;
-exports.areRuleQueriesEqual = areRuleQueriesEqual;
+exports.areRuleAtEqual = areRuleAtEqual;
 exports.areRuleSelectorsEqual = areRuleSelectorsEqual;
 exports.areRuleStatesEqual = areRuleStatesEqual;
 exports.areRulesDuplicated = areRulesDuplicated;
 exports.generateCSS = generateCss;
 exports.isCoreRule = isCoreRule;
-exports.queries = queries;
+exports.at = at;
 exports.selectors = selectors;
 exports.utilities = utilities;
 exports.functions = functions;

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { default as MasterCSS, default } from './core';
 export { default as extendConfig } from './utils/extend-config';
 export { default as reorderForReadableClasses } from './utils/reorder-for-readable-classes';
 export { default as areRuleModesEqual } from './utils/are-rule-modes-equal';
-export { default as areRuleQueriesEqual } from './utils/are-rule-queries-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';

package/dist/index.mjs

@@ -6,13 +6,13 @@ export { default as Layer } from './layer.mjs';
 export { default as extendConfig } from './utils/extend-config.mjs';
 export { default as reorderForReadableClasses } from './utils/reorder-for-readable-classes.mjs';
 export { default as areRuleModesEqual } from './utils/are-rule-modes-equal.mjs';
-export { default as areRuleQueriesEqual } from './utils/are-rule-queries-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 generateCSS } from './utils/generate-css.mjs';
 export { default as isCoreRule } from './utils/is-core-rule.mjs';
-export { default as queries } from './config/queries.mjs';
+export { default as at } from './config/at.mjs';
 export { default as selectors } from './config/selectors.mjs';
 export { default as utilities } from './config/utilities.mjs';
 export { default as functions } from './config/functions.mjs';

package/dist/rule.cjs

@@ -267,7 +267,7 @@ class Rule {
             ','
         ];
         const { scope, important, modes } = css.config;
-        const { selectors, queries, stylesBy, animations } = css;
+        const { selectors, at, stylesBy, animations } = css;
         const classNames = stylesBy[className];
         if (create) create.call(this, className);
         // 1. value / selectorToken
@@ -480,14 +480,14 @@ class Rule {
                                     value: 'and'
                                 });
                             } else if (atComponentToken.startsWith('')) {
-                                const targetQuery = queries[atComponentToken];
-                                if (targetQuery && typeof targetQuery === 'string') {
-                                    const match = targetQuery.match(queryTypeRegExp);
+                                const targetAt = at[atComponentToken];
+                                if (targetAt && typeof targetAt === 'string') {
+                                    const match = targetAt.match(queryTypeRegExp);
                                     queryType = match ? match[1] : '';
-                                    if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetQuery}'`);
+                                    if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetAt}'`);
                                     atComponents.push({
                                         type: 'arbitrary',
-                                        value: targetQuery.slice(match ? match[1].length + 1 : 0)
+                                        value: targetAt.slice(match ? match[1].length + 1 : 0)
                                     });
                                 } else {
                                     // todo: container queries
@@ -506,12 +506,12 @@ class Rule {
                                         extremumOperator = '<';
                                         featureName = 'max-width';
                                         correction = -.02;
-                                    } else if (atComponentToken.startsWith('>=') || targetQuery) {
+                                    } else if (atComponentToken.startsWith('>=') || targetAt) {
                                         extremumOperator = '>=';
                                         featureName = 'min-width';
                                     }
                                     const token = extremumOperator ? atComponentToken.replace(extremumOperator, '') : atComponentToken;
-                                    const viewport = queries[token];
+                                    const viewport = at[token];
                                     switch(featureName){
                                         case 'max-width':
                                         case 'min-width':

package/dist/rule.mjs

@@ -265,7 +265,7 @@ class Rule {
             ','
         ];
         const { scope, important, modes } = css.config;
-        const { selectors, queries, stylesBy, animations } = css;
+        const { selectors, at, stylesBy, animations } = css;
         const classNames = stylesBy[className];
         if (create) create.call(this, className);
         // 1. value / selectorToken
@@ -478,14 +478,14 @@ class Rule {
                                     value: 'and'
                                 });
                             } else if (atComponentToken.startsWith('')) {
-                                const targetQuery = queries[atComponentToken];
-                                if (targetQuery && typeof targetQuery === 'string') {
-                                    const match = targetQuery.match(queryTypeRegExp);
+                                const targetAt = at[atComponentToken];
+                                if (targetAt && typeof targetAt === 'string') {
+                                    const match = targetAt.match(queryTypeRegExp);
                                     queryType = match ? match[1] : '';
-                                    if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetQuery}'`);
+                                    if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetAt}'`);
                                     atComponents.push({
                                         type: 'arbitrary',
-                                        value: targetQuery.slice(match ? match[1].length + 1 : 0)
+                                        value: targetAt.slice(match ? match[1].length + 1 : 0)
                                     });
                                 } else {
                                     // todo: container queries
@@ -504,12 +504,12 @@ class Rule {
                                         extremumOperator = '<';
                                         featureName = 'max-width';
                                         correction = -.02;
-                                    } else if (atComponentToken.startsWith('>=') || targetQuery) {
+                                    } else if (atComponentToken.startsWith('>=') || targetAt) {
                                         extremumOperator = '>=';
                                         featureName = 'min-width';
                                     }
                                     const token = extremumOperator ? atComponentToken.replace(extremumOperator, '') : atComponentToken;
-                                    const viewport = queries[token];
+                                    const viewport = at[token];
                                     switch(featureName){
                                         case 'max-width':
                                         case 'min-width':

package/dist/utils/{are-rule-queries-equal.cjs → are-rule-at-equal.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-function areRuleQueriesEqual(aRule, bRule) {
+function areRuleAtEqual(aRule, bRule) {
     const aQueryTypes = Object.keys(aRule.at);
     const bQueryTypes = Object.keys(bRule.at);
     if (aQueryTypes.length !== bQueryTypes.length) {
@@ -19,4 +19,4 @@ function areRuleQueriesEqual(aRule, bRule) {
     return true;
 }
 
-module.exports = areRuleQueriesEqual;
+module.exports = areRuleAtEqual;

package/dist/utils/are-rule-at-equal.d.ts

@@ -0,0 +1,2 @@
+import type { Rule } from '../rule';
+export default function areRuleAtEqual(aRule: Rule, bRule: Rule): boolean;

package/dist/utils/{are-rule-queries-equal.mjs → are-rule-at-equal.mjs}

@@ -1,4 +1,4 @@
-function areRuleQueriesEqual(aRule, bRule) {
+function areRuleAtEqual(aRule, bRule) {
     const aQueryTypes = Object.keys(aRule.at);
     const bQueryTypes = Object.keys(bRule.at);
     if (aQueryTypes.length !== bQueryTypes.length) {
@@ -17,4 +17,4 @@ function areRuleQueriesEqual(aRule, bRule) {
     return true;
 }
 
-export { areRuleQueriesEqual as default };
+export { areRuleAtEqual as default };

package/dist/utils/are-rule-states-equal.cjs

@@ -2,10 +2,10 @@
 
 var areRuleSelectorsEqual = require('./are-rule-selectors-equal.cjs');
 var areRuleModesEqual = require('./are-rule-modes-equal.cjs');
-var areRuleQueriesEqual = require('./are-rule-queries-equal.cjs');
+var areRuleAtEqual = require('./are-rule-at-equal.cjs');
 
 function areRuleStatesEqual(aRule, bRule) {
-    return areRuleSelectorsEqual(aRule, bRule) && areRuleModesEqual(aRule, bRule) && areRuleQueriesEqual(aRule, bRule);
+    return areRuleSelectorsEqual(aRule, bRule) && areRuleModesEqual(aRule, bRule) && areRuleAtEqual(aRule, bRule);
 }
 
 module.exports = areRuleStatesEqual;

package/dist/utils/are-rule-states-equal.mjs

@@ -1,9 +1,9 @@
 import areRuleSelectorsEqual from './are-rule-selectors-equal.mjs';
 import areRuleModesEqual from './are-rule-modes-equal.mjs';
-import areRuleQueriesEqual from './are-rule-queries-equal.mjs';
+import areRuleAtEqual from './are-rule-at-equal.mjs';
 
 function areRuleStatesEqual(aRule, bRule) {
-    return areRuleSelectorsEqual(aRule, bRule) && areRuleModesEqual(aRule, bRule) && areRuleQueriesEqual(aRule, bRule);
+    return areRuleSelectorsEqual(aRule, bRule) && areRuleModesEqual(aRule, bRule) && areRuleAtEqual(aRule, bRule);
 }
 
 export { areRuleStatesEqual as default };

package/dist/utils/extend-config.cjs

@@ -20,8 +20,8 @@ function extendConfig(...configs) {
         if (clonedConfig.styles) {
             formatDeeply(clonedConfig.styles);
         }
-        if (clonedConfig.queries) {
-            formatDeeply(clonedConfig.queries);
+        if (clonedConfig.at) {
+            formatDeeply(clonedConfig.at);
         }
         if (clonedConfig.variables) {
             formatDeeply(clonedConfig.variables);
@@ -30,6 +30,7 @@ function extendConfig(...configs) {
     };
     const formattedConfigs = [];
     for (const eachConfig of configs){
+        if (!eachConfig) continue;
         (function getConfigsDeeply(config) {
             if (config.extends?.length) {
                 for (const eachExtend of config.extends){
@@ -42,7 +43,7 @@ function extendConfig(...configs) {
     let extendedConfig = {
         animations: {},
         styles: {},
-        queries: {},
+        at: {},
         variables: {}
     };
     for(let i = 0; i < formattedConfigs.length; i++){

package/dist/utils/extend-config.d.ts

@@ -1,2 +1,2 @@
 import type { Config } from '../config';
-export default function extendConfig(...configs: Config[]): Config;
+export default function extendConfig(...configs: (Config | undefined)[]): Config;

package/dist/utils/extend-config.mjs

@@ -18,8 +18,8 @@ function extendConfig(...configs) {
         if (clonedConfig.styles) {
             formatDeeply(clonedConfig.styles);
         }
-        if (clonedConfig.queries) {
-            formatDeeply(clonedConfig.queries);
+        if (clonedConfig.at) {
+            formatDeeply(clonedConfig.at);
         }
         if (clonedConfig.variables) {
             formatDeeply(clonedConfig.variables);
@@ -28,6 +28,7 @@ function extendConfig(...configs) {
     };
     const formattedConfigs = [];
     for (const eachConfig of configs){
+        if (!eachConfig) continue;
         (function getConfigsDeeply(config) {
             if (config.extends?.length) {
                 for (const eachExtend of config.extends){
@@ -40,7 +41,7 @@ function extendConfig(...configs) {
     let extendedConfig = {
         animations: {},
         styles: {},
-        queries: {},
+        at: {},
         variables: {}
     };
     for(let i = 0; i < formattedConfigs.length; i++){

package/package.json

@@ -1 +1 @@
-{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://css.master.co/docs/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.0.0","@master/normal.css":"^3.0.0","@techor/extend":"^3.0.22","csstype":"^3.1.3"},"devDependencies":{"@master/css-shared":"^2.0.0-rc.39"},"version":"2.0.0-rc.39"}
+{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://css.master.co/docs/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.0.0","@master/normal.css":"^3.0.0","@techor/extend":"^3.0.22","csstype":"^3.1.3"},"devDependencies":{"@master/css-shared":"^2.0.0-rc.40"},"version":"2.0.0-rc.40"}

package/dist/config/queries.d.ts

@@ -1,22 +0,0 @@
-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;
-    all: string;
-    print: string;
-    screen: string;
-    speech: string;
-    landscape: string;
-    portrait: string;
-    motion: string;
-    'reduced-motion': string;
-};
-export default queries;

package/dist/tokens/screen-sizes.cjs

@@ -1,17 +0,0 @@
-'use strict';
-
-var screenSizes = {
-    '4xs': 360,
-    '3xs': 480,
-    '2xs': 600,
-    'xs': 768,
-    'sm': 834,
-    'md': 1024,
-    'lg': 1280,
-    'xl': 1440,
-    '2xl': 1600,
-    '3xl': 1920,
-    '4xl': 2560
-};
-
-module.exports = screenSizes;

package/dist/tokens/screen-sizes.d.ts

@@ -1,14 +0,0 @@
-declare const _default: {
-    '4xs': number;
-    '3xs': number;
-    '2xs': number;
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    '2xl': number;
-    '3xl': number;
-    '4xl': number;
-};
-export default _default;

package/dist/tokens/screen-sizes.mjs

@@ -1,15 +0,0 @@
-var screenSizes = {
-    '4xs': 360,
-    '3xs': 480,
-    '2xs': 600,
-    'xs': 768,
-    'sm': 834,
-    'md': 1024,
-    'lg': 1280,
-    'xl': 1440,
-    '2xl': 1600,
-    '3xl': 1920,
-    '4xl': 2560
-};
-
-export { screenSizes as default };

package/dist/utils/are-rule-queries-equal.d.ts

@@ -1,2 +0,0 @@
-import type { Rule } from '../rule';
-export default function areRuleQueriesEqual(aRule: Rule, bRule: Rule): boolean;