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

package/dist/{utils → functions}/extend-config.mjs

@@ -17,18 +17,12 @@ function extendConfig(...configs) {
         };
         if (clonedConfig.styles) {
             formatDeeply(clonedConfig.styles);
-        } else {
-            clonedConfig.styles = {};
         }
-        if (clonedConfig.mediaQueries) {
-            formatDeeply(clonedConfig.mediaQueries);
-        } else {
-            clonedConfig.mediaQueries = {};
+        if (clonedConfig.queries) {
+            formatDeeply(clonedConfig.queries);
         }
         if (clonedConfig.variables) {
             formatDeeply(clonedConfig.variables);
-        } else {
-            clonedConfig.variables = {};
         }
         return clonedConfig;
     };
@@ -43,15 +37,34 @@ function extendConfig(...configs) {
             formattedConfigs.push(formatConfig(config));
         })(eachConfig);
     }
-    let extendedConfig = formattedConfigs[0];
-    for(let i = 1; i < formattedConfigs.length; i++){
+    let extendedConfig = {
+        animations: {},
+        styles: {},
+        queries: {},
+        variables: {}
+    };
+    for(let i = 0; i < formattedConfigs.length; i++){
         const currentFormattedConfig = formattedConfigs[i];
-        extendedConfig = extend(extendedConfig, currentFormattedConfig);
-        if (Object.prototype.hasOwnProperty.call(currentFormattedConfig, 'animations') && extendedConfig.animations) {
-            Object.assign(extendedConfig.animations, currentFormattedConfig.animations);
+        for(const key in currentFormattedConfig){
+            switch(key){
+                case 'animations':
+                    if (currentFormattedConfig.animations) {
+                        Object.assign(extendedConfig.animations, currentFormattedConfig.animations);
+                    }
+                    break;
+                default:
+                    if (currentFormattedConfig[key]) {
+                        extendedConfig = extend(extendedConfig, {
+                            [key]: currentFormattedConfig[key]
+                        });
+                    }
+            }
+        // if (Object.prototype.hasOwnProperty.call(currentFormattedConfig.styles, key)) {
+        //     Object.assign(extendedConfig.styles[key], currentFormattedConfig.styles[key])
+        // }
         }
     }
     return extendedConfig;
 }
 
-export { extendConfig };
+export { extendConfig as default };

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

@@ -32,26 +32,26 @@ var core = require('../core.cjs');
             // 檢查 vendorSuffixSelectors 是否存在
             const aHasVendorSuffix = a.vendorSuffixSelectors?.['']?.[0];
             const bHasVendorSuffix = b.vendorSuffixSelectors?.['']?.[0];
-            // 檢查 media.token 是否存在
-            const aHasMediaToken = a.media?.token;
-            const bHasMediaToken = b.media?.token;
             if (a.priority === -1 && b.priority === -1) {
                 // 如果 a 和 b 都有 vendorSuffixSelectors 或 media.token，則按照以下規則排序
                 if (aHasVendorSuffix && bHasVendorSuffix) {
                     return aHasVendorSuffix.localeCompare(bHasVendorSuffix);
                 }
+                // 檢查 media.token 是否存在
+                const aAtToke = a.atToken;
+                const bAtToken = b.atToken;
                 // 如果 a 和 b 都有 media.token 且不包含內建已處理過排序的，則按照以下規則排序
-                if (aHasMediaToken && bHasMediaToken && !Object.keys(a.media.features || {}).length && !Object.keys(b.media.features || {}).length) {
-                    return aHasMediaToken.localeCompare(bHasMediaToken);
+                if (aAtToke && bAtToken && !a.at.media?.find(({ name })=>name === 'min-width' || name === 'max-width') && !b.at.media?.find(({ name })=>name === 'min-width' || name === 'max-width')) {
+                    return aAtToke.localeCompare(bAtToken);
                 }
                 if (aHasVendorSuffix && !bHasVendorSuffix) {
                     return 1;
                 } else if (!aHasVendorSuffix && bHasVendorSuffix) {
                     return -1;
                 }
-                if (aHasMediaToken && !bHasMediaToken) {
+                if (aAtToke && !bAtToken) {
                     return 1;
-                } else if (!aHasMediaToken && bHasMediaToken) {
+                } else if (!aAtToke && bAtToken) {
                     return -1;
                 }
             }

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

@@ -30,26 +30,26 @@ import MasterCSS from '../core.mjs';
             // 檢查 vendorSuffixSelectors 是否存在
             const aHasVendorSuffix = a.vendorSuffixSelectors?.['']?.[0];
             const bHasVendorSuffix = b.vendorSuffixSelectors?.['']?.[0];
-            // 檢查 media.token 是否存在
-            const aHasMediaToken = a.media?.token;
-            const bHasMediaToken = b.media?.token;
             if (a.priority === -1 && b.priority === -1) {
                 // 如果 a 和 b 都有 vendorSuffixSelectors 或 media.token，則按照以下規則排序
                 if (aHasVendorSuffix && bHasVendorSuffix) {
                     return aHasVendorSuffix.localeCompare(bHasVendorSuffix);
                 }
+                // 檢查 media.token 是否存在
+                const aAtToke = a.atToken;
+                const bAtToken = b.atToken;
                 // 如果 a 和 b 都有 media.token 且不包含內建已處理過排序的，則按照以下規則排序
-                if (aHasMediaToken && bHasMediaToken && !Object.keys(a.media.features || {}).length && !Object.keys(b.media.features || {}).length) {
-                    return aHasMediaToken.localeCompare(bHasMediaToken);
+                if (aAtToke && bAtToken && !a.at.media?.find(({ name })=>name === 'min-width' || name === 'max-width') && !b.at.media?.find(({ name })=>name === 'min-width' || name === 'max-width')) {
+                    return aAtToke.localeCompare(bAtToken);
                 }
                 if (aHasVendorSuffix && !bHasVendorSuffix) {
                     return 1;
                 } else if (!aHasVendorSuffix && bHasVendorSuffix) {
                     return -1;
                 }
-                if (aHasMediaToken && !bHasMediaToken) {
+                if (aAtToke && !bAtToken) {
                     return 1;
-                } else if (!aHasMediaToken && bHasMediaToken) {
+                } else if (!aAtToke && bAtToken) {
                     return -1;
                 }
             }

package/dist/index.cjs

@@ -5,16 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var index = require('./config/index.cjs');
 var rule = require('./rule.cjs');
 var layer = require('./layer.cjs');
-var extend = require('@techor/extend');
-var reorderForReadableClasses = require('./functions/reorder-for-readable-classes.cjs');
 var core = require('./core.cjs');
+var extendConfig = require('./functions/extend-config.cjs');
+var reorderForReadableClasses = require('./functions/reorder-for-readable-classes.cjs');
+var areRuleModesEqual = require('./functions/are-rule-modes-equal.cjs');
+var areRuleQueriesEqual = require('./functions/are-rule-queries-equal.cjs');
+var areRuleSelectorsEqual = require('./functions/are-rule-selectors-equal.cjs');
+var areRuleStatesEqual = require('./functions/are-rule-states-equal.cjs');
+var areRulesDuplicated = require('./functions/are-rules-duplicated.cjs');
+var queries = require('./config/queries.cjs');
 var selectors = require('./config/selectors.cjs');
 var semantics = require('./config/semantics.cjs');
 var rules = require('./config/rules.cjs');
 var functions = require('./config/functions.cjs');
 var animations = require('./config/animations.cjs');
 var variables = require('./config/variables.cjs');
-var screenSizes = require('./tokens/screen-sizes.cjs');
 
 
 
@@ -24,14 +29,19 @@ Object.defineProperty(exports, "Layer", {
 	enumerable: true,
 	get: function () { return layer.Layer; }
 });
-exports.extend = extend;
-exports.reorderForReadableClasses = reorderForReadableClasses;
 exports.MasterCSS = core.default;
 exports.default = core.default;
+exports.extendConfig = extendConfig;
+exports.reorderForReadableClasses = reorderForReadableClasses;
+exports.areRuleModesEqual = areRuleModesEqual;
+exports.areRuleQueriesEqual = areRuleQueriesEqual;
+exports.areRuleSelectorsEqual = areRuleSelectorsEqual;
+exports.areRuleStatesEqual = areRuleStatesEqual;
+exports.areRulesDuplicated = areRulesDuplicated;
+exports.queries = queries;
 exports.selectors = selectors;
 exports.semantics = semantics;
 exports.rules = rules.default;
 exports.functions = functions;
 exports.animations = animations;
 exports.variables = variables;
-exports.mediaQueries = screenSizes;

package/dist/index.d.ts

@@ -1,7 +1,12 @@
 export * from './config';
 export { Rule } from './rule';
 export { Layer } from './layer';
-export { default as extend } from '@techor/extend';
-export { default as reorderForReadableClasses } from './functions/reorder-for-readable-classes';
 export { default as MasterCSS, default } from './core';
+export { default as extendConfig } from './functions/extend-config';
+export { default as reorderForReadableClasses } from './functions/reorder-for-readable-classes';
+export { default as areRuleModesEqual } from './functions/are-rule-modes-equal';
+export { default as areRuleQueriesEqual } from './functions/are-rule-queries-equal';
+export { default as areRuleSelectorsEqual } from './functions/are-rule-selectors-equal';
+export { default as areRuleStatesEqual } from './functions/are-rule-states-equal';
+export { default as areRulesDuplicated } from './functions/are-rules-duplicated';
 export type { NativeRule, MediaFeatureComponent, MediaQuery } from './rule';

package/dist/index.mjs

@@ -1,13 +1,18 @@
 export { config } from './config/index.mjs';
 export { Rule } from './rule.mjs';
 export { Layer } from './layer.mjs';
-export { default as extend } from '@techor/extend';
-export { default as reorderForReadableClasses } from './functions/reorder-for-readable-classes.mjs';
 export { default as MasterCSS, default } from './core.mjs';
+export { default as extendConfig } from './functions/extend-config.mjs';
+export { default as reorderForReadableClasses } from './functions/reorder-for-readable-classes.mjs';
+export { default as areRuleModesEqual } from './functions/are-rule-modes-equal.mjs';
+export { default as areRuleQueriesEqual } from './functions/are-rule-queries-equal.mjs';
+export { default as areRuleSelectorsEqual } from './functions/are-rule-selectors-equal.mjs';
+export { default as areRuleStatesEqual } from './functions/are-rule-states-equal.mjs';
+export { default as areRulesDuplicated } from './functions/are-rules-duplicated.mjs';
+export { default as queries } from './config/queries.mjs';
 export { default as selectors } from './config/selectors.mjs';
 export { default as semantics } from './config/semantics.mjs';
 export { default as rules } from './config/rules.mjs';
 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 mediaQueries } from './tokens/screen-sizes.mjs';

package/dist/rule.cjs

@@ -5,7 +5,6 @@ var cssEscape = require('./shared/utils/css-escape.cjs');
 var layer = require('./layer.cjs');
 var baseUnitRegex = require('./constants/base-unit-regex.cjs');
 
-const atRuleRegExp = /^(media|supports|page|font-face|keyframes|counter-style|font-feature-values|property|layer|container)(?=\||{|\(|$)/;
 class Rule {
     className;
     css;
@@ -14,6 +13,7 @@ class Rule {
     natives;
     order;
     layer;
+    atToken;
     stateToken;
     declarations;
     animationNames;
@@ -26,6 +26,7 @@ class Rule {
         this.natives = [];
         this.order = 0;
         this.layer = 0;
+        this.atToken = '';
         this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
             const { functions } = this.css.config;
             let currentValue = '';
@@ -47,9 +48,9 @@ class Rule {
                         const variable = this.css.variables[eachValueComponent.name];
                         if (variable) {
                             const handleVariable = (normalHandler, varHandler)=>{
-                                if (variable.themes) {
-                                    if (this.theme) {
-                                        const themeVariable = variable.themes[this.theme] ?? variable;
+                                if (variable.modes) {
+                                    if (this.mode) {
+                                        const themeVariable = variable.modes[this.mode] ?? variable;
                                         if (themeVariable?.value) {
                                             normalHandler(themeVariable);
                                         }
@@ -264,8 +265,8 @@ class Rule {
         if (!definition.separators) definition.separators = [
             ','
         ];
-        const { scope, important, themeDriver } = css.config;
-        const { selectors, mediaQueries, stylesBy, animations } = css;
+        const { scope, important, modeDriver } = css.config;
+        const { selectors, queries, stylesBy, animations } = css;
         const classNames = stylesBy[className];
         if (create) create.call(this, className);
         // 1. value / selectorToken
@@ -451,109 +452,124 @@ class Rule {
         for(let i = 1; i < stateTokens.length; i++){
             const atToken = stateTokens[i];
             if (atToken) {
+                this.atToken += '@' + atToken;
                 if (atToken === 'rtl' || atToken === 'ltr') {
                     this.direction = atToken;
                 } else {
-                    let type = '';
-                    let queryText;
-                    const atRuleResult = atRuleRegExp.exec(atToken);
+                    let queryType;
+                    const atComponents = [];
+                    // x font-face, counter-style, keyframes, font-feature-values, property, layer
+                    const queryTypeRegExp = /^(media|supports|container)/;
+                    const atRuleResult = queryTypeRegExp.exec(atToken);
                     if (atRuleResult) {
-                        type = atRuleResult[1];
-                        queryText = atToken.slice(type.length);
-                    } else {
-                        this.media = {
+                        queryType = atRuleResult[1];
+                        atComponents.push({
+                            type: 'arbitrary',
                             token: atToken,
-                            features: {}
-                        };
-                        const queryTexts = [];
-                        const analyzeToken = (typeOrFeatureToken)=>{
-                            if (typeOrFeatureToken === 'all' || typeOrFeatureToken === 'print' || typeOrFeatureToken === 'screen' || typeOrFeatureToken === 'speech') {
-                                this.media.type = typeOrFeatureToken;
-                            } else if (typeOrFeatureToken.startsWith('')) {
-                                if (typeOrFeatureToken === 'landscape' || typeOrFeatureToken === 'portrait') {
-                                    queryTexts.push('(orientation:' + typeOrFeatureToken + ')');
-                                } else if (typeOrFeatureToken === 'motion' || typeOrFeatureToken === 'reduced-motion') {
-                                    queryTexts.push('(prefers-reduced-motion:' + (typeOrFeatureToken === 'motion' ? 'no-preference' : 'reduce') + ')');
+                            value: atToken.slice(queryType.length).replace(/\|/g, ' ')
+                        });
+                    } else {
+                        const analyzeToken = (atComponentToken)=>{
+                            if (atComponentToken === 'all' || atComponentToken === 'print' || atComponentToken === 'screen' || atComponentToken === 'speech') {
+                                queryType = 'media';
+                                atComponents.push({
+                                    type: 'media-type',
+                                    token: atComponentToken,
+                                    value: atComponentToken
+                                });
+                            } else if (atComponentToken === '&') {
+                                atComponents.push({
+                                    type: 'operator',
+                                    token: atComponentToken,
+                                    value: 'and'
+                                });
+                            } else if (atComponentToken.startsWith('')) {
+                                const targetQuery = queries[atComponentToken];
+                                if (targetQuery && typeof targetQuery === 'string') {
+                                    const match = targetQuery.match(queryTypeRegExp);
+                                    queryType = match ? match[1] : '';
+                                    if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetQuery}'`);
+                                    atComponents.push({
+                                        type: 'arbitrary',
+                                        value: targetQuery.slice(match ? match[1].length + 1 : 0)
+                                    });
                                 } else {
-                                    const targetMediaQuery = mediaQueries[typeOrFeatureToken];
-                                    if (targetMediaQuery && typeof targetMediaQuery === 'string') {
-                                        queryTexts.push(targetMediaQuery);
-                                    } else {
-                                        let featureName = '';
-                                        let extremumOperator = '';
-                                        let correction = 0;
-                                        if (typeOrFeatureToken.startsWith('<=')) {
-                                            extremumOperator = '<=';
-                                            featureName = 'max-width';
-                                        } else if (typeOrFeatureToken.startsWith('>=') || targetMediaQuery) {
-                                            extremumOperator = '>=';
-                                            featureName = 'min-width';
-                                        } else if (typeOrFeatureToken.startsWith('>')) {
-                                            extremumOperator = '>';
-                                            featureName = 'min-width';
-                                            correction = .02;
-                                        } else if (typeOrFeatureToken.startsWith('<')) {
-                                            extremumOperator = '<';
-                                            featureName = 'max-width';
-                                            correction = -.02;
-                                        }
-                                        const token = extremumOperator ? typeOrFeatureToken.replace(extremumOperator, '') : typeOrFeatureToken;
-                                        const viewport = mediaQueries[token];
-                                        switch(featureName){
-                                            case 'max-width':
-                                            case 'min-width':
-                                                // eslint-disable-next-line no-case-declarations
-                                                let featureComponent = {};
-                                                if (typeof viewport === 'number') {
-                                                    featureComponent = {
-                                                        type: 'number',
-                                                        value: viewport + correction,
-                                                        unit: 'px'
-                                                    };
-                                                } else {
-                                                    featureComponent = this.parseValueComponent(token, 'px');
-                                                    if (featureComponent.type === 'number' && featureComponent.unit === 'px') {
-                                                        featureComponent.value += correction;
-                                                    }
-                                                }
-                                                this.media.features[featureName] = featureComponent;
-                                                if (featureComponent.type === 'number') {
-                                                    queryTexts.push('(' + featureName + ':' + (featureComponent.value + featureComponent.unit) + ')');
+                                    // todo: container queries
+                                    queryType = 'media';
+                                    let featureName = '';
+                                    let extremumOperator = '';
+                                    let correction = 0;
+                                    if (atComponentToken.startsWith('<=')) {
+                                        extremumOperator = '<=';
+                                        featureName = 'max-width';
+                                    } else if (atComponentToken.startsWith('>=') || targetQuery) {
+                                        extremumOperator = '>=';
+                                        featureName = 'min-width';
+                                    } else if (atComponentToken.startsWith('>')) {
+                                        extremumOperator = '>';
+                                        featureName = 'min-width';
+                                        correction = .02;
+                                    } else if (atComponentToken.startsWith('<')) {
+                                        extremumOperator = '<';
+                                        featureName = 'max-width';
+                                        correction = -.02;
+                                    }
+                                    const token = extremumOperator ? atComponentToken.replace(extremumOperator, '') : atComponentToken;
+                                    const viewport = queries[token];
+                                    switch(featureName){
+                                        case 'max-width':
+                                        case 'min-width':
+                                            // eslint-disable-next-line no-case-declarations
+                                            if (typeof viewport === 'number') {
+                                                atComponents.push({
+                                                    type: 'feature',
+                                                    name: featureName,
+                                                    valueType: 'number',
+                                                    value: viewport + correction,
+                                                    unit: 'px'
+                                                });
+                                            } else {
+                                                const valueComponent = this.parseValueComponent(token, 'px');
+                                                if (valueComponent.type === 'number') {
+                                                    atComponents.push({
+                                                        type: 'feature',
+                                                        name: featureName,
+                                                        valueType: 'number',
+                                                        value: valueComponent.value + correction,
+                                                        unit: valueComponent.unit
+                                                    });
                                                 } else {
-                                                    queryTexts.push('(' + featureName + ':' + featureComponent.value + ')');
+                                                    atComponents.push({
+                                                        type: 'feature',
+                                                        name: featureName,
+                                                        valueType: 'string',
+                                                        value: token
+                                                    });
                                                 }
-                                                break;
-                                        }
+                                            }
+                                            break;
                                     }
                                 }
                             }
                         };
                         const isAmpersandIncluded = atToken.includes('&');
                         if (isAmpersandIncluded) {
-                            const typeOrFeatureTokens = atToken.split('&');
-                            for (const typeOrFeatureToken of typeOrFeatureTokens){
-                                analyzeToken(typeOrFeatureToken);
+                            const typeOrFeatureTokens = atToken.split(/(&|,)/);
+                            for (const atComponentToken of typeOrFeatureTokens){
+                                analyzeToken(atComponentToken);
                             }
                         } else {
                             analyzeToken(atToken);
                         }
-                        if (this.media.type) {
-                            queryText = this.media.type;
-                        }
-                        if (queryTexts.length) {
-                            queryText = queryTexts.join(' and ');
-                        }
-                        if (!queryText) {
+                        if (!atComponents.length) {
                             if (!isAmpersandIncluded) {
-                                this.theme = atToken;
+                                this.mode = atToken;
                                 continue;
                             }
-                        } else {
-                            type = 'media';
                         }
                     }
-                    if (queryText) {
-                        this.at[type] = (type in this.at ? this.at[type] + ' and ' : '') + queryText.replace(/\|/g, ' ');
+                    if (queryType) {
+                        this.at[queryType] = atComponents;
                     }
                 }
             }
@@ -612,7 +628,7 @@ class Rule {
                     const prefixSelectors = this.vendorPrefixSelectors[prefixSelectorVendor];
                     const suffixSelectors = this.vendorSuffixSelectors[eachSuffixSelectorVendor];
                     const prefixTexts = prefixSelectors.map((eachPrefixSelector)=>eachPrefixSelector + prefixText);
-                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>(this.theme && themeDriver !== 'media' ? themeDriver === 'host' ? `:host(.${this.theme}) ` : `.${this.theme} ` : '') + (scope ? scope + ' ' : '') + eachPrefixText).reduce((arr, eachPrefixText)=>{
+                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>(this.mode && modeDriver !== 'media' ? modeDriver === 'host' ? `:host(.${this.mode}) ` : `.${this.mode} ` : '') + (scope ? scope + ' ' : '') + eachPrefixText).reduce((arr, eachPrefixText)=>{
                             arr.push(suffixSelectors.reduce((_arr, eachSuffixSelector)=>{
                                 _arr.push(eachPrefixText + '.' + cssEscape(name) + eachSuffixSelector);
                                 return _arr;
@@ -621,10 +637,10 @@ class Rule {
                         }, []).join(',');
                     let cssText = getCssText(className) + (classNames ? classNames.reduce((str, className)=>str + ',' + getCssText(className), '') : '') + '{' + propertiesText.join(';') + '}';
                     for (const key of Object.keys(this.at).sort((_a, b)=>b === 'supports' ? -1 : 1)){
-                        cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key] + '{' + cssText + '}';
+                        cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key].map((eachAtComponent)=>this.resolveAtComponent(eachAtComponent)).join(' ') + '{' + cssText + '}';
                     }
-                    if (this.theme && themeDriver === 'media') {
-                        cssText = `@media(prefers-color-scheme:${this.theme}){` + cssText + '}';
+                    if (this.mode && modeDriver === 'media') {
+                        cssText = `@media(prefers-color-scheme:${this.mode}){` + cssText + '}';
                     }
                     this.natives.push({
                         text: cssText
@@ -633,6 +649,18 @@ class Rule {
             }
         }
     }
+    resolveAtComponent(atComponent) {
+        switch(atComponent.type){
+            case 'arbitrary':
+                return atComponent.value;
+            case 'media-type':
+                return atComponent.value;
+            case 'feature':
+                return '(' + atComponent.name + ':' + atComponent.value + (atComponent.unit || '') + ')';
+            case 'operator':
+                return atComponent.value;
+        }
+    }
     resolveValue;
     get text() {
         return this.natives.map((eachNative)=>eachNative.text).join('');

package/dist/rule.d.ts

@@ -4,21 +4,47 @@ import { type PropertiesHyphen } from 'csstype';
 export declare class Rule {
     readonly className: string;
     css: MasterCSS;
-    readonly at: Record<string, string>;
+    readonly at: Record<string, AtComponent[]>;
     readonly priority: number;
     readonly natives: NativeRule[];
     readonly order: number;
     readonly layer: Layer;
+    readonly atToken: string;
     readonly stateToken: string;
     readonly declarations?: PropertiesHyphen;
     animationNames?: string[];
     variableNames?: string[];
     constructor(className: string, RegisteredRule: RegisteredRule, css: MasterCSS);
+    resolveAtComponent(atComponent: AtComponent): string;
     resolveValue: (valueComponents: ValueComponent[], unit: string, bypassVariableNames: string[], bypassParsing: boolean) => string;
     get text(): string;
     parseValue: (currentValueComponents: ValueComponent[], i: number, value: string, unit: string, endSymbol: string, parentFunctionName?: string, bypassParsing?: boolean, bypassVariableNames?: string[]) => number;
     parseValueComponent(token: string | number, unit?: any): StringValueComponent | NumericValueComponent;
 }
+export type AtComponent = AtArbitraryComponent | AtMediaTypeComponent | AtFeatureComponent | AtOperatorComponent;
+export interface AtArbitraryComponent {
+    type: 'arbitrary';
+    token?: string;
+    value: string;
+}
+export interface AtMediaTypeComponent {
+    type: 'media-type';
+    token?: string;
+    value: 'all' | 'print' | 'screen' | 'speech';
+}
+export interface AtFeatureComponent {
+    type: 'feature';
+    token?: string;
+    name: string;
+    valueType: 'number' | 'string';
+    value: string | number;
+    unit?: string;
+}
+export interface AtOperatorComponent {
+    type: 'operator';
+    token: '&';
+    value: 'and';
+}
 export type ValueComponent = StringValueComponent | NumericValueComponent | FunctionValueComponent | VariableValueComponent | SeparatorValueComponent;
 export interface StringValueComponent {
     text?: string;
@@ -63,9 +89,8 @@ export interface Rule extends RegisteredRule {
     vendorPrefixSelectors: Record<string, string[]>;
     vendorSuffixSelectors: Record<string, string[]>;
     important: boolean;
-    media: MediaQuery;
     direction: string;
-    theme: string;
+    mode: string;
     unitToken: string;
     hasWhere: boolean;
     valueComponents: Array<ValueComponent>;