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

package/dist/rule.mjs

@@ -1,23 +1,22 @@
-import { START_SYMBOLS } from './constants/start-symbol.mjs';
 import cssEscape from './shared/utils/css-escape.mjs';
-import { Layer } from './layer.mjs';
-import { BASE_UNIT_REGEX } from './constants/base-unit-regex.mjs';
+import Layer from './layer.mjs';
+import { VALUE_DELIMITERS, UNIT_REGEX, BASE_UNIT_REGEX } from './common.mjs';
 
-const atRuleRegExp = /^(media|supports|page|font-face|keyframes|counter-style|font-feature-values|property|layer|container)(?=\||{|\(|$)/;
 class Rule {
     className;
+    RegisteredRule;
     css;
     at;
     priority;
     natives;
     order;
     layer;
-    stateToken;
     declarations;
     animationNames;
     variableNames;
     constructor(className, RegisteredRule, css){
         this.className = className;
+        this.RegisteredRule = RegisteredRule;
         this.css = css;
         this.at = {};
         this.priority = -1;
@@ -34,20 +33,20 @@ class Rule {
                         const functionDefinition = functions && functions[eachValueComponent.name];
                         if (functionDefinition?.transform && !eachValueComponent.bypassTransform) {
                             const result = functionDefinition.transform.call(this, this.resolveValue(eachValueComponent.children, functionDefinition.unit ?? unit, bypassVariableNames, bypassParsing || eachValueComponent.name === 'calc'), bypassVariableNames);
-                            currentValue += eachValueComponent.text = typeof result === 'string' ? result : this.resolveValue(result, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing);
+                            currentValue += eachValueComponent.token = eachValueComponent.text = typeof result === 'string' ? result : this.resolveValue(result, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing);
                         } else {
-                            currentValue += eachValueComponent.text = eachValueComponent.name + eachValueComponent.symbol + this.resolveValue(eachValueComponent.children, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing) + START_SYMBOLS[eachValueComponent.symbol];
+                            currentValue += eachValueComponent.token = eachValueComponent.text = eachValueComponent.name + eachValueComponent.symbol + this.resolveValue(eachValueComponent.children, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing) + VALUE_DELIMITERS[eachValueComponent.symbol];
                         }
                         break;
-                    // todo: 應挪到 parseValue 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
+                    // todo: 應挪到 parseValues 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
                     case 'variable':
                         // eslint-disable-next-line no-case-declarations
                         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);
                                         }
@@ -68,7 +67,7 @@ class Rule {
                                 case 'string':
                                     handleVariable((variable)=>{
                                         const valueComponents = [];
-                                        this.parseValue(valueComponents, 0, variable.value, unit, '', undefined, bypassParsing, [
+                                        this.parseValues(valueComponents, 0, variable.value, unit, '', undefined, bypassParsing, [
                                             ...bypassVariableNames,
                                             eachValueComponent.name
                                         ]);
@@ -83,9 +82,9 @@ class Rule {
                                 case 'number':
                                     handleVariable((variable)=>{
                                         if (bypassParsing) {
-                                            currentValue += eachValueComponent.text = variable.value;
+                                            currentValue += eachValueComponent.text = String(variable.value);
                                         } else {
-                                            const valueComponent = this.parseValueComponent(variable.value, unit);
+                                            const valueComponent = this.parseValue(variable.value, unit);
                                             currentValue += eachValueComponent.text = valueComponent.value + (valueComponent.unit ?? '');
                                         }
                                     }, ()=>{
@@ -119,7 +118,7 @@ class Rule {
             }
             return currentValue;
         };
-        this.parseValue = (currentValueComponents, i, value, unit, endSymbol, parentFunctionName, bypassParsing = false, bypassVariableNames = [])=>{
+        this.parseValues = (currentValueComponents, i, value, unit, endSymbol, parentFunctionName, bypassParsing = false, bypassVariableNames = [])=>{
             const root = parentFunctionName === undefined;
             const isVarFunction = !root && (parentFunctionName.endsWith('$') || parentFunctionName.endsWith('var'));
             const checkIsString = (value)=>value === '\'' || value === '"';
@@ -144,7 +143,8 @@ class Rule {
                                     const valueComponent = {
                                         type: 'variable',
                                         name,
-                                        variable: this.css.variables[name]
+                                        variable: this.css.variables[name],
+                                        token: currentValue
                                     };
                                     if (alpha) valueComponent.alpha = alpha;
                                     currentValueComponents.push(valueComponent);
@@ -152,7 +152,7 @@ class Rule {
                             }
                         };
                         handleVariable(currentValue);
-                        if (!handled && this.colored) {
+                        if (!handled) {
                             const [colorName, alpha] = currentValue.split('/');
                             handleVariable(colorName, alpha);
                         }
@@ -167,10 +167,14 @@ class Rule {
                         if (bypassParsing) {
                             currentValueComponents.push({
                                 type: 'string',
-                                value: currentValue
+                                value: currentValue,
+                                token: currentValue
                             });
                         } else {
-                            currentValueComponents.push(this.parseValueComponent(currentValue, unit));
+                            currentValueComponents.push({
+                                ...this.parseValue(currentValue, unit),
+                                token: currentValue
+                            });
                         }
                     }
                     currentValue = '';
@@ -195,27 +199,25 @@ class Rule {
                         parse();
                     }
                     return i;
-                } else if (!isString && val in START_SYMBOLS) {
+                } else if (!isString && val in VALUE_DELIMITERS) {
                     const functionName = currentValue;
                     const newValueComponent = {
                         type: 'function',
                         name: functionName,
                         symbol: val,
-                        children: []
+                        children: [],
+                        token: ''
                     };
                     currentValueComponents.push(newValueComponent);
                     currentValue = '';
                     const functionDefinition = val === '(' ? this.css.config.functions?.[functionName] : undefined;
-                    if (!this.colored && functionDefinition?.colored) {
-                        // @ts-ignore
-                        this.colored = true;
-                    }
-                    i = this.parseValue(newValueComponent.children, ++i, value, functionDefinition?.unit ?? unit, START_SYMBOLS[val], functionName || parentFunctionName || '', bypassParsing || functionName === 'calc');
+                    i = this.parseValues(newValueComponent.children, ++i, value, functionDefinition?.unit ?? unit, VALUE_DELIMITERS[val], functionName || parentFunctionName || '', bypassParsing || functionName === 'calc');
                 } else if ((val === '|' || val === ' ') && endSymbol !== '}' && (!isString || parentFunctionName === 'path')) {
                     parse();
                     currentValueComponents.push({
                         type: 'separator',
-                        value: ' '
+                        value: ' ',
+                        token: val
                     });
                 } else {
                     if (!isString) {
@@ -230,7 +232,8 @@ class Rule {
                             currentValueComponents.push({
                                 type: 'separator',
                                 value: val,
-                                text: (val === ',' ? '' : ' ') + val + (val === ',' ? '' : ' ')
+                                text: (val === ',' ? '' : ' ') + val + (val === ',' ? '' : ' '),
+                                token: val
                             });
                             continue;
                         } else if (root && (val === '#' && (currentValue || currentValueComponents.length && currentValueComponents[currentValueComponents.length - 1]['type'] !== 'separator') || [
@@ -255,22 +258,21 @@ class Rule {
         };
         Object.assign(this, RegisteredRule);
         const { id, definition } = RegisteredRule;
-        const { analyze, transformValue, declare, transformValueComponents, create, layer, unit, colored } = definition;
+        const { analyze, transformValue, declare, transformValueComponents, create, layer, unit } = definition;
         this.layer = layer;
-        this.colored = !!colored;
         if (!definition.unit) definition.unit = '';
         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
         this.declarations = definition.declarations;
         let stateToken;
         let prefixToken;
-        if (layer === Layer.Semantic) {
+        if (layer === Layer.Utility) {
             // TODO: id 使用其他方式傳遞
             stateToken = className.slice(id.length - 1);
         } else {
@@ -279,11 +281,13 @@ class Rule {
                 [valueToken, prefixToken] = analyze.call(this, className);
             } else {
                 const indexOfColon = className.indexOf(':');
-                this.prefix = className.slice(0, indexOfColon + 1);
+                this.keyToken = className.slice(0, indexOfColon + 1);
                 valueToken = className.slice(indexOfColon + 1);
             }
             this.valueComponents = [];
-            stateToken = valueToken.slice(this.parseValue(this.valueComponents, 0, valueToken, unit, '', undefined, false, id === 'animation' || id === 'animation-name' ? Object.keys(this.css.animations) : []));
+            const parsedValueIndex = this.parseValues(this.valueComponents, 0, valueToken, unit, '', undefined, false, definition.includeAnimations ? Object.keys(this.css.animations) : []);
+            this.valueToken = valueToken.slice(0, parsedValueIndex);
+            stateToken = valueToken.slice(parsedValueIndex);
         }
         // 2. !important
         if (stateToken[0] === '!') {
@@ -448,110 +452,118 @@ class Rule {
         // 5. atTokens
         for(let i = 1; i < stateTokens.length; i++){
             const atToken = stateTokens[i];
+            this.atToken = (this.atToken || '') + '@' + atToken;
             if (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 === '&') {
+                                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.parseValue(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;
                     }
                 }
             }
@@ -589,14 +601,14 @@ class Rule {
                 }
                 propertiesText.push(propertyText + ((this.important || important) && !propertyText.endsWith('!important') ? '!important' : ''));
             };
-            const prefix = propertyName + ':';
+            const keyToken = propertyName + ':';
             const declarations = this.declarations[propertyName];
             if (Array.isArray(declarations)) {
                 for (const value of declarations){
-                    push(prefix + String(value));
+                    push(keyToken + String(value));
                 }
             } else {
-                push(prefix + String(declarations));
+                push(keyToken + String(declarations));
             }
         }
         // 創建 Natives
@@ -610,7 +622,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;
@@ -619,10 +631,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
@@ -631,12 +643,22 @@ class Rule {
             }
         }
     }
+    resolveAtComponent(atComponent) {
+        switch(atComponent.type){
+            case 'arbitrary':
+                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('');
     }
-    parseValue;
-    parseValueComponent(token, unit = this.definition.unit) {
+    parseValues;
+    parseValue(token, unit = this.definition.unit) {
         const defaultUnit = unit ?? this.definition.unit;
         let newUnit = '';
         let value;
@@ -667,7 +689,7 @@ class Rule {
                     type: 'number'
                 };
             }
-            const matches = token.match(/^([+-.]?\d+(\.?\d+)?)(%|cm|mm|q|in|pt|pc|px|em|rem|ex|rex|cap|rcap|ch|rch|ic|ric|lh|rlh|vw|svw|lvw|dvw|vh|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax|cqw|cqh|cqi|cqb|cqmin|cqmax|deg|grad|rad|turn|s|ms|hz|khz|dpi|dpcm|dppx|x|fr|db|st)?$/);
+            const matches = token.match(UNIT_REGEX);
             // ['0.5deg', '0.5', 'deg', index: 0, input: '0.5deg', groups: undefined]
             if (matches) {
                 value = +matches[1];

package/dist/tokens/screen-sizes.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var mediaQueries = {
+var screenSizes = {
     '4xs': 360,
     '3xs': 480,
     '2xs': 600,
@@ -14,4 +14,4 @@ var mediaQueries = {
     '4xl': 2560
 };
 
-module.exports = mediaQueries;
+module.exports = screenSizes;

package/dist/tokens/screen-sizes.mjs

@@ -1,4 +1,4 @@
-var mediaQueries = {
+var screenSizes = {
     '4xs': 360,
     '3xs': 480,
     '2xs': 600,
@@ -12,4 +12,4 @@ var mediaQueries = {
     '4xl': 2560
 };
 
-export { mediaQueries as default };
+export { screenSizes as default };

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

@@ -0,0 +1,7 @@
+'use strict';
+
+function areRuleModesEqual(aRule, bRule) {
+    return aRule.mode === bRule.mode;
+}
+
+module.exports = areRuleModesEqual;

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

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

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

@@ -0,0 +1,5 @@
+function areRuleModesEqual(aRule, bRule) {
+    return aRule.mode === bRule.mode;
+}
+
+export { areRuleModesEqual as default };

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

@@ -0,0 +1,22 @@
+'use strict';
+
+function areRuleQueriesEqual(aRule, bRule) {
+    const aQueryTypes = Object.keys(aRule.at);
+    const bQueryTypes = Object.keys(bRule.at);
+    if (aQueryTypes.length !== bQueryTypes.length) {
+        return false;
+    }
+    for (const aQueryType of aQueryTypes){
+        const aAtComponents = aRule.at[aQueryType];
+        const bAtComponents = bRule.at[aQueryType];
+        for (const aAtComponent of aAtComponents){
+            const aAtComponentToken = aRule.resolveAtComponent(aAtComponent);
+            if (!bAtComponents.find((bAtComponent)=>bRule.resolveAtComponent(bAtComponent) === aAtComponentToken)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+module.exports = areRuleQueriesEqual;

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

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

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

@@ -0,0 +1,20 @@
+function areRuleQueriesEqual(aRule, bRule) {
+    const aQueryTypes = Object.keys(aRule.at);
+    const bQueryTypes = Object.keys(bRule.at);
+    if (aQueryTypes.length !== bQueryTypes.length) {
+        return false;
+    }
+    for (const aQueryType of aQueryTypes){
+        const aAtComponents = aRule.at[aQueryType];
+        const bAtComponents = bRule.at[aQueryType];
+        for (const aAtComponent of aAtComponents){
+            const aAtComponentToken = aRule.resolveAtComponent(aAtComponent);
+            if (!bAtComponents.find((bAtComponent)=>bRule.resolveAtComponent(bAtComponent) === aAtComponentToken)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+export { areRuleQueriesEqual as default };

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

@@ -0,0 +1,29 @@
+'use strict';
+
+function areRuleSelectorsEqual(aRule, bRule) {
+    // suffix
+    const aVendorSuffixSelectorKeys = Object.keys(aRule.vendorSuffixSelectors);
+    const bVendorSuffixSelectorKeys = Object.keys(bRule.vendorSuffixSelectors);
+    if (aVendorSuffixSelectorKeys.length !== bVendorSuffixSelectorKeys.length) return false;
+    const isSameVendorSuffixSelectors = aVendorSuffixSelectorKeys.every((eachAKey)=>{
+        if (!Object.prototype.hasOwnProperty.call(bRule.vendorSuffixSelectors, eachAKey)) return false;
+        const aValues = aRule.vendorSuffixSelectors[eachAKey];
+        const bValues = bRule.vendorSuffixSelectors[eachAKey];
+        return aValues.length === bValues.length && aValues.every((eachAValue)=>bValues.includes(eachAValue));
+    });
+    if (!isSameVendorSuffixSelectors) return false;
+    // prefix
+    const aVendorPrefixSelectorKeys = Object.keys(aRule.vendorPrefixSelectors);
+    const bVendorPrefixSelectorKeys = Object.keys(bRule.vendorPrefixSelectors);
+    if (aVendorPrefixSelectorKeys.length !== bVendorPrefixSelectorKeys.length) return false;
+    const isSameVendorPrefixSelectors = aVendorPrefixSelectorKeys.every((eachAKey)=>{
+        if (!Object.prototype.hasOwnProperty.call(bRule.vendorPrefixSelectors, eachAKey)) return false;
+        const aValues = aRule.vendorPrefixSelectors[eachAKey];
+        const bValues = bRule.vendorPrefixSelectors[eachAKey];
+        return aValues.length === bValues.length && aValues.every((eachAValue)=>bValues.includes(eachAValue));
+    });
+    if (!isSameVendorPrefixSelectors) return false;
+    return true;
+}
+
+module.exports = areRuleSelectorsEqual;

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

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