@master/css 2.0.0-rc.61 → 2.0.0-rc.63

package/dist/syntax-rule.cjs

@@ -3,27 +3,35 @@
 var cssEscape = require('./shared/utils/css-escape.cjs');
 var syntaxRuleType = require('./syntax-rule-type.cjs');
 var common = require('./common.cjs');
-var rule = require('./rule.cjs');
+var parseValue = require('./utils/parse-value.cjs');
+var parseAt = require('./utils/parse-at.cjs');
+var generateAt = require('./utils/generate-at.cjs');
+var parseSelector = require('./utils/parse-selector.cjs');
+var generateSelector = require('./utils/generate-selector.cjs');
+var compareRulePriority = require('./utils/compare-rule-priority.cjs');
 
-class SyntaxRule extends rule.Rule {
+class SyntaxRule {
     name;
     css;
     registeredSyntax;
     fixedClass;
-    layerAtComponents;
-    supportsAtComponents;
-    mediaAtComponents;
-    containerAtComponents;
+    native;
+    atRules;
     priority;
-    order;
     type;
     declarations;
     layer;
-    supportUnknown;
+    valid;
     animationNames;
     variableNames;
     constructor(name, css, registeredSyntax, fixedClass, mode){
-        super(name), this.name = name, this.css = css, this.registeredSyntax = registeredSyntax, this.fixedClass = fixedClass, this.priority = -1, this.order = 0, this.type = 0, this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
+        this.name = name;
+        this.css = css;
+        this.registeredSyntax = registeredSyntax;
+        this.fixedClass = fixedClass;
+        this.type = syntaxRuleType.Normal;
+        this.valid = true;
+        this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
             const { functions } = this.css.config;
             let currentValue = '';
             for (const eachValueComponent of valueComponents){
@@ -49,11 +57,12 @@ class SyntaxRule extends rule.Rule {
                                             normalHandler(themeVariable);
                                         }
                                     } else {
-                                        if (!this.variableNames) {
-                                            this.variableNames = [];
-                                        }
-                                        if (!this.variableNames.includes(eachValueComponent.name)) {
-                                            this.variableNames.push(eachValueComponent.name);
+                                        if (this.variableNames) {
+                                            this.variableNames.add(eachValueComponent.name);
+                                        } else {
+                                            this.variableNames = new Set([
+                                                eachValueComponent.name
+                                            ]);
                                         }
                                         varHandler();
                                     }
@@ -114,7 +123,8 @@ class SyntaxRule extends rule.Rule {
                 }
             }
             return currentValue;
-        }, this.parseValues = (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 === '"';
@@ -168,8 +178,9 @@ class SyntaxRule extends rule.Rule {
                                 token: currentValue
                             });
                         } else {
+                            const parsedValue = this.parseValue(currentValue, unit);
                             currentValueComponents.push({
-                                ...this.parseValue(currentValue, unit),
+                                ...parsedValue,
                                 token: currentValue
                             });
                         }
@@ -259,20 +270,17 @@ class SyntaxRule extends rule.Rule {
         const { id, definition } = registeredSyntax;
         const { analyze, transformValue, declare, transformValueComponents, create, type, unit } = definition;
         this.type = type;
-        const { scope, important, modes } = css.config;
-        const { at, animations } = css;
         if (create) create.call(this, name);
         // 1. value / selectorToken
         this.declarations = definition.declarations;
         let stateToken;
-        let prefixToken;
         if (this.type === syntaxRuleType.Utility) {
             // TODO: id 使用其他方式傳遞
             stateToken = name.slice(id.length - 1);
         } else {
             let valueToken;
             if (analyze) {
-                [valueToken, prefixToken] = analyze.call(this, name);
+                [valueToken] = analyze.call(this, name);
             } else {
                 const indexOfColon = name.indexOf(':');
                 this.keyToken = name.slice(0, indexOfColon + 1);
@@ -289,222 +297,57 @@ class SyntaxRule extends rule.Rule {
             stateToken = stateToken.slice(1);
         }
         this.stateToken = stateToken;
-        // 3. prefix selector
-        if (prefixToken) {
-            this.vendorPrefixSelectors = css.generateVendorSelectors(prefixToken);
-        }
         // 4. suffix selector
         const stateTokens = stateToken.split('@');
         const suffixSelector = stateTokens[0];
         if (suffixSelector) {
-            this.vendorSuffixSelectors = css.generateVendorSelectors(suffixSelector);
-            for (const suffixSelectors of Object.values(this.vendorSuffixSelectors)){
-                for (const eachSuffixSelector of suffixSelectors){
-                    const SORTED_SELECTORS = [
-                        ':disabled',
-                        ':active',
-                        ':focus',
-                        ':hover'
-                    ];
-                    for(let i = 0; i < SORTED_SELECTORS.length; i++){
-                        if (eachSuffixSelector.includes(SORTED_SELECTORS[i])) {
-                            if (this.priority === -1 || this.priority > i) {
-                                this.priority = i;
-                            }
-                            break;
-                        }
-                    }
-                }
-            }
-        }
-        // selector combinations
-        const suffixSelectorVendorsByPrefixSelectorVendor = {};
-        if (this.vendorPrefixSelectors) {
-            if (this.vendorSuffixSelectors) {
-                for(const prefixSelectorVendor in this.vendorPrefixSelectors){
-                    const suffixSelectorVendors = suffixSelectorVendorsByPrefixSelectorVendor[prefixSelectorVendor] = [];
-                    if (Object.prototype.hasOwnProperty.call(this.vendorSuffixSelectors, prefixSelectorVendor)) {
-                        suffixSelectorVendors.push(prefixSelectorVendor);
-                    } else {
-                        for(const suffixVendor in this.vendorSuffixSelectors){
-                            suffixSelectorVendors.push(suffixVendor);
-                        }
-                    }
-                }
-            } else {
-                for(const vendor in this.vendorPrefixSelectors){
-                    suffixSelectorVendorsByPrefixSelectorVendor[vendor] = [
-                        ''
-                    ];
-                }
-            }
-        } else {
-            suffixSelectorVendorsByPrefixSelectorVendor[''] = this.vendorSuffixSelectors ? Object.keys(this.vendorSuffixSelectors) : [
-                ''
-            ];
+            this.selectorNodes = parseSelector(suffixSelector, css);
         }
         // 5. atTokens
         for(let i = 1; i < stateTokens.length; i++){
             const atToken = stateTokens[i];
+            if (css.config.modes?.[atToken]) {
+                this.mode = atToken;
+                continue;
+            }
             this.atToken = (this.atToken || '') + '@' + atToken;
-            if (atToken) {
-                if (atToken === 'base' || atToken === 'preset') {
-                    const atComponent = {
-                        type: 'arbitrary',
-                        value: atToken
-                    };
-                    if (this.layerAtComponents) {
-                        this.layerAtComponents.push(atComponent);
-                    } else {
-                        this.layerAtComponents = [
-                            atComponent
-                        ];
-                    }
-                    continue;
-                } else if (atToken === 'rtl' || atToken === 'ltr') {
-                    this.direction = atToken;
-                } else {
-                    let queryType;
-                    const atComponents = [];
-                    // x font-face, counter-style, keyframes, font-feature-values, property, layer
-                    const queryTypeRegExp = /^(media|supports|container|layer)/;
-                    const atRuleResult = queryTypeRegExp.exec(atToken);
-                    if (atRuleResult) {
-                        queryType = atRuleResult[1];
-                        atComponents.push({
-                            type: 'arbitrary',
-                            token: atToken,
-                            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 targetAt = at.get(atComponentToken);
-                                if (typeof targetAt === 'string') {
-                                    const match = targetAt.match(queryTypeRegExp);
-                                    queryType = match ? match[1] : '';
-                                    if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetAt}'`);
-                                    atComponents.push({
-                                        type: 'arbitrary',
-                                        value: targetAt.slice(match ? match[1].length + 1 : 0)
-                                    });
-                                } else {
-                                    // todo: container queries
-                                    queryType = 'media';
-                                    let featureName = '';
-                                    let extremumOperator = '';
-                                    let correction = 0;
-                                    if (atComponentToken.startsWith('<=')) {
-                                        extremumOperator = '<=';
-                                        featureName = 'max-width';
-                                    } else if (atComponentToken.startsWith('>') && !atComponentToken.startsWith('>=')) {
-                                        extremumOperator = '>';
-                                        featureName = 'min-width';
-                                        correction = .02;
-                                    } else if (atComponentToken.startsWith('<')) {
-                                        extremumOperator = '<';
-                                        featureName = 'max-width';
-                                        correction = -0.02;
-                                    } else if (atComponentToken.startsWith('>=') || targetAt) {
-                                        extremumOperator = '>=';
-                                        featureName = 'min-width';
-                                    }
-                                    const token = extremumOperator ? atComponentToken.replace(extremumOperator, '') : atComponentToken;
-                                    const viewport = at.get(token);
-                                    switch(featureName){
-                                        case 'max-width':
-                                        case 'min-width':
-                                            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 {
-                                                    atComponents.push({
-                                                        type: 'feature',
-                                                        name: featureName,
-                                                        valueType: 'string',
-                                                        value: token
-                                                    });
-                                                }
-                                            }
-                                            break;
-                                    }
-                                }
-                            }
-                        };
-                        const isAmpersandIncluded = atToken.includes('&');
-                        if (isAmpersandIncluded) {
-                            const typeOrFeatureTokens = atToken.split(/(&|,)/);
-                            for (const atComponentToken of typeOrFeatureTokens){
-                                analyzeToken(atComponentToken);
-                            }
-                        } else {
-                            analyzeToken(atToken);
-                        }
-                        if (!atComponents.length) {
-                            if (!isAmpersandIncluded && modes?.[atToken]) {
-                                this.mode = atToken;
-                                continue;
-                            }
-                        }
-                    }
-                    if (queryType) {
-                        const targetAtComponents = this[`${queryType}AtComponents`];
-                        if (targetAtComponents) {
-                            targetAtComponents.push(...atComponents);
-                        } else {
-                            this[`${queryType}AtComponents`] = atComponents;
-                        }
-                    }
-                }
+            const atRule = parseAt(atToken, css);
+            const targetNodes = this.atRules?.[atRule.id];
+            if (targetNodes) {
+                targetNodes.push(...atRule.nodes);
+            } else {
+                this.atRules = {
+                    ...this.atRules,
+                    [atRule.id]: atRule.nodes
+                };
             }
         }
-        if (this.mode && modes?.[this.mode] === 'media') {
-            const atFeatureComponent = {
-                type: 'feature',
+        if (this.mode && css.config.modes?.[this.mode] === 'media') {
+            const atComp = {
                 name: 'prefers-color-scheme',
-                valueType: 'string',
                 value: this.mode
             };
-            if (this.mediaAtComponents) {
-                this.mediaAtComponents.push(atFeatureComponent);
+            if (this.atRules?.media) {
+                this.atRules.media.push(atComp);
             } else {
-                this.mediaAtComponents = [
-                    atFeatureComponent
-                ];
+                this.atRules = {
+                    media: [
+                        atComp
+                    ]
+                };
             }
         }
         if (this.fixedClass) {
             this.layer = css.componentsLayer;
         } else {
-            const onlyLayerComponent = this.layerAtComponents?.length === 1 && this.layerAtComponents[0];
-            if (onlyLayerComponent) {
-                if (onlyLayerComponent.value === 'base') {
+            const onlyNode = this.atRules?.layer?.length === 1 && this.atRules.layer[0];
+            if (onlyNode) {
+                if (onlyNode.value === 'base') {
                     this.layer = css.baseLayer;
-                    this.layerAtComponents = undefined;
-                } else if (onlyLayerComponent.value === 'preset') {
+                    this.atRules.layer = undefined;
+                } else if (onlyNode.value === 'preset') {
                     this.layer = css.presetLayer;
-                    this.layerAtComponents = undefined;
+                    this.atRules.layer = undefined;
                 }
             }
         }
@@ -526,137 +369,82 @@ class SyntaxRule extends rule.Rule {
                 };
             }
         }
-        const propertiesText = [];
-        for(const propertyName in this.declarations){
-            const propertyValue = this.declarations[propertyName];
-            const propertyText = propertyName + ':' + String(propertyValue);
-            if (animations && (propertyText.startsWith('animation') || propertyText.startsWith('animation-name'))) {
-                const animationNames = propertyText.split(':')[1].split('!important')[0].split(' ').filter((eachValue)=>this.css.animations.has(eachValue) && (!this.animationNames || !this.animationNames.includes(eachValue)));
-                if (animationNames.length) {
-                    if (!this.animationNames) {
-                        this.animationNames = [];
+        if (!Object.entries(this.declarations ?? {}).length) {
+            this.valid = false;
+        } else {
+            for(const propertyName in this.declarations){
+                if (this.css.animations && (propertyName === 'animation' || propertyName === 'animation-name')) {
+                    const propertyValue = this.declarations[propertyName];
+                    if (!propertyValue) continue;
+                    const rawValues = propertyValue.split(' ');
+                    for (const rawValue of rawValues){
+                        if (this.css.animations.has(rawValue)) {
+                            if (!this.animationNames) {
+                                this.animationNames = new Set([
+                                    rawValue
+                                ]);
+                            } else {
+                                this.animationNames.add(rawValue);
+                            }
+                            continue;
+                        }
                     }
-                    this.animationNames = animationNames;
                 }
             }
-            propertiesText.push(propertyText + ((this.important || important) && !propertyText.endsWith('!important') ? '!important' : ''));
+            this.priority = compareRulePriority.calcRulePriority(this);
         }
-        // 創建 Natives
-        if (propertiesText.length) {
-            for(const prefixSelectorVendor in suffixSelectorVendorsByPrefixSelectorVendor){
-                for (const eachSuffixSelectorVendor of suffixSelectorVendorsByPrefixSelectorVendor[prefixSelectorVendor]){
-                    const prefixSelectors = this.vendorPrefixSelectors?.[prefixSelectorVendor];
-                    const suffixSelectors = this.vendorSuffixSelectors?.[eachSuffixSelectorVendor];
-                    let prefixText = '';
-                    if (this.direction) {
-                        prefixText += '[dir=' + this.direction + '] ';
-                    }
-                    const prefixTexts = prefixSelectors ? prefixSelectors.map((eachPrefixSelector)=>eachPrefixSelector + prefixText) : [
-                        prefixText
-                    ];
-                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>{
-                            let modePrefix = '';
-                            if (this.mode) {
-                                const modeSelector = this.css.getModeSelector(this.mode);
-                                if (modeSelector) {
-                                    modePrefix = modeSelector + ' ';
-                                }
-                            }
-                            return modePrefix + (scope ? scope + ' ' : '') + eachPrefixText;
-                        }).reduce((arr, eachPrefixText)=>{
-                            arr.push(suffixSelectors ? suffixSelectors.reduce((_arr, eachSuffixSelector)=>{
-                                _arr.push(eachPrefixText + '.' + cssEscape(name) + eachSuffixSelector);
-                                return _arr;
-                            }, []).join(',') : eachPrefixText + '.' + cssEscape(name));
-                            return arr;
-                        }, []).join(',');
-                    const selectorText = getCssText(fixedClass ?? name);
-                    let cssText = selectorText + '{' + propertiesText.join(';') + '}';
-                    const resolveAtComponents = (atComponents, separator)=>atComponents.map((atComponent, i)=>{
-                            const value = this.resolveAtComponent(atComponent);
-                            return (i === 0 ? value.charAt(0) !== '(' ? ' ' : '' : '') + value;
-                        }).join(separator) + '{' + cssText + '}';
-                    if (this.containerAtComponents) cssText = '@container' + resolveAtComponents(this.containerAtComponents, ' ');
-                    if (this.mediaAtComponents) cssText = '@media' + resolveAtComponents(this.mediaAtComponents, ' ');
-                    if (this.supportsAtComponents) cssText = '@supports' + resolveAtComponents(this.supportsAtComponents, ' ');
-                    if (this.layerAtComponents) cssText = '@layer' + resolveAtComponents(this.layerAtComponents, '.');
-                    const node = {
-                        text: cssText,
-                        selectorText
-                    };
-                    if (prefixSelectors) node.prefixSelectors = prefixSelectors;
-                    if (suffixSelectors) node.suffixSelectors = suffixSelectors;
-                    this.nodes.push(node);
-                }
-            }
+    }
+    get text() {
+        if (!this.valid) return '';
+        const propertiesText = [];
+        for(const propertyName in this.declarations){
+            const propertyValue = this.declarations[propertyName];
+            const propertyText = propertyName + ':' + String(propertyValue);
+            propertiesText.push(propertyText + ((this.important || this.css.config.important) && !propertyText.endsWith('!important') ? '!important' : ''));
         }
+        let text = this.selectorText + '{' + propertiesText.join(';') + '}';
+        if (this.atRules !== undefined) common.AT_IDENTIFIERS.forEach((id)=>{
+            const nodes = this.atRules?.[id];
+            if (!nodes) return;
+            text = generateAt({
+                id,
+                nodes
+            }) + '{' + text + '}';
+        });
+        return text;
     }
-    resolveAtComponent(atComponent) {
-        switch(atComponent.type){
-            case 'feature':
-                return '(' + atComponent.name + ':' + atComponent.value + (atComponent.unit || '') + ')';
-            default:
-                return atComponent.value;
+    get selectorText() {
+        let pre = '';
+        if (this.css.config.scope) {
+            pre = this.css.config.scope + ' ' + pre;
+        }
+        if (this.mode) {
+            const modeSelector = this.css.getModeSelector(this.mode);
+            if (modeSelector) {
+                pre = modeSelector + ' ' + pre;
+            }
         }
+        const body = pre + '.' + cssEscape(this.fixedClass ?? this.name);
+        return this.selectorNodes ? generateSelector(this.selectorNodes, body) : body;
     }
     resolveValue;
     parseValues;
     parseValue(token, unit = this.definition.unit) {
-        const defaultUnit = unit ?? this.definition.unit;
-        let newUnit = '';
-        let value;
-        if (typeof token === 'number') {
-            /**
-             * 當無單位值且 defaultUnit === 'rem'，
-             * 將 pxValue / 16 轉為 remValue
-             */ if (defaultUnit && !newUnit) {
-                if (defaultUnit === 'rem' || defaultUnit === 'em') {
-                    value = token / (this.css.config.rootSize || 1);
-                }
-                newUnit = defaultUnit || '';
-            } else {
-                value = token;
-            }
-            return {
-                value,
-                unit: newUnit,
-                type: 'number'
-            };
-        } else if (defaultUnit) {
-            // w:1/2 -> width: 50%
-            if (/^\d+\/\d+/.test(token)) {
-                const [dividend, divisor] = token.split('/');
+        const parsed = parseValue(token, unit, this.css.config.rootSize);
+        // exclude like `aspect:1/2` from being parsed as 50%
+        if (this.definition.unit && parsed.type === 'string') {
+            // 1/2 → 50%
+            if (/^\d+\/\d+$/.test(parsed.value)) {
+                const [numerator, denominator] = parsed.value.split('/').map(Number);
                 return {
-                    value: +dividend / +divisor * 100,
+                    token,
+                    value: numerator / denominator * 100,
                     unit: '%',
                     type: 'number'
                 };
             }
-            const matches = token.match(common.UNIT_REGEX);
-            // ['0.5deg', '0.5', 'deg', index: 0, input: '0.5deg', groups: undefined]
-            if (matches) {
-                value = +matches[1];
-                newUnit = matches[3] || '';
-                /**
-                 * 當無單位值且 defaultUnit === 'rem'，
-                 * 將 pxValue / 16 轉為 remValue
-                 */ if (!newUnit) {
-                    if (defaultUnit === 'rem' || defaultUnit === 'em') {
-                        value = value / (this.css.config.rootSize || 1);
-                    }
-                    newUnit = defaultUnit || '';
-                }
-                return {
-                    value,
-                    unit: newUnit,
-                    type: 'number'
-                };
-            }
         }
-        return {
-            value: token,
-            type: 'string'
-        };
+        return parsed;
     }
     get key() {
         return (this.fixedClass ? this.fixedClass + ' ' : '') + this.name;

package/dist/syntax-rule.d.ts

@@ -1,44 +1,37 @@
 import MasterCSS from './core';
-import SyntaxRuleType from './syntax-rule-type';
 import { type PropertiesHyphen } from 'csstype';
-import { Rule } from './rule';
 import Layer from './layer';
-import type { AtComponent, DefinedRule, ValueComponent } from './types/syntax';
-export declare class SyntaxRule extends Rule {
+import type { NumberValueComponent, DefinedRule, ValueComponent } from './types/syntax';
+import { AtRuleNode } from './utils/parse-at';
+import { AtIdentifier } from './types/config';
+import { SelectorNode } from './utils/parse-selector';
+import { RulePriority } from './utils/compare-rule-priority';
+import { SyntaxRuleTypeValue } from './types/common';
+export declare class SyntaxRule {
     readonly name: string;
     css: MasterCSS;
     readonly registeredSyntax: DefinedRule;
     fixedClass?: string | undefined;
-    readonly layerAtComponents?: AtComponent[];
-    readonly supportsAtComponents?: AtComponent[];
-    readonly mediaAtComponents?: AtComponent[];
-    readonly containerAtComponents?: AtComponent[];
-    readonly priority: number;
-    readonly order: number;
-    readonly type: SyntaxRuleType;
+    native?: CSSRule;
+    readonly atRules?: Partial<Record<AtIdentifier, AtRuleNode[]>>;
+    readonly priority: RulePriority;
+    readonly type: SyntaxRuleTypeValue;
     readonly declarations?: PropertiesHyphen;
     readonly layer: Layer;
-    readonly supportUnknown?: boolean;
-    animationNames?: string[];
-    variableNames?: string[];
+    readonly valid: boolean;
+    animationNames?: Set<string>;
+    variableNames?: Set<string>;
     constructor(name: string, css: MasterCSS, registeredSyntax: DefinedRule, fixedClass?: string | undefined, mode?: string);
-    resolveAtComponent(atComponent: AtComponent): string;
+    get text(): string;
+    get selectorText(): string;
     resolveValue: (valueComponents: ValueComponent[], unit: string, bypassVariableNames: string[], bypassParsing: boolean) => string;
     parseValues: (currentValueComponents: ValueComponent[], i: number, value: string, unit: string, endSymbol: string, parentFunctionName?: string, bypassParsing?: boolean, bypassVariableNames?: string[]) => number;
-    parseValue(token: string | number, unit?: any): {
-        value: string;
-        type: 'string';
-    } | {
-        value: number;
-        unit: string;
-        type: 'number';
-    };
+    parseValue(token: string | number, unit?: any): import(".").StringValueComponent | NumberValueComponent;
     get key(): string;
 }
 export interface SyntaxRule extends DefinedRule {
     token: string;
-    vendorPrefixSelectors: Record<string, string[]>;
-    vendorSuffixSelectors: Record<string, string[]>;
+    selectorNodes?: SelectorNode[];
     important: boolean;
     direction: string;
     mode: string;