@master/css 2.0.0-rc.69 → 2.0.0-rc.70

package/dist/syntax-rule-type.cjs

@@ -1,27 +0,0 @@
-'use strict';
-
-var SyntaxRuleType = /*#__PURE__*/ function(SyntaxRuleType) {
-    /**
-     * utility classes
-     * @example block, inline
-     */ SyntaxRuleType[SyntaxRuleType["Utility"] = -4] = "Utility";
-    /**
-     * native shorthand
-     * @example border, padding, margin
-     */ SyntaxRuleType[SyntaxRuleType["NativeShorthand"] = -3] = "NativeShorthand";
-    /**
-     * shorthand
-     * @example px, py, mx, my
-     */ SyntaxRuleType[SyntaxRuleType["Shorthand"] = -2] = "Shorthand";
-    /**
-     * native properties
-     * @example color, background-color, font-size
-     */ SyntaxRuleType[SyntaxRuleType["Native"] = -1] = "Native";
-    /**
-     * normal
-     * @example grid-cols
-     */ SyntaxRuleType[SyntaxRuleType["Normal"] = 0] = "Normal";
-    return SyntaxRuleType;
-}(SyntaxRuleType || {});
-
-module.exports = SyntaxRuleType;

package/dist/syntax-rule-type.d.ts

@@ -1,28 +0,0 @@
-declare enum SyntaxRuleType {
-    /**
-     * utility classes
-     * @example block, inline
-     */
-    Utility = -4,
-    /**
-     * native shorthand
-     * @example border, padding, margin
-     */
-    NativeShorthand = -3,
-    /**
-     * shorthand
-     * @example px, py, mx, my
-     */
-    Shorthand = -2,
-    /**
-     * native properties
-     * @example color, background-color, font-size
-     */
-    Native = -1,
-    /**
-     * normal
-     * @example grid-cols
-     */
-    Normal = 0
-}
-export default SyntaxRuleType;

package/dist/syntax-rule-type.mjs

@@ -1,25 +0,0 @@
-var SyntaxRuleType = /*#__PURE__*/ function(SyntaxRuleType) {
-    /**
-     * utility classes
-     * @example block, inline
-     */ SyntaxRuleType[SyntaxRuleType["Utility"] = -4] = "Utility";
-    /**
-     * native shorthand
-     * @example border, padding, margin
-     */ SyntaxRuleType[SyntaxRuleType["NativeShorthand"] = -3] = "NativeShorthand";
-    /**
-     * shorthand
-     * @example px, py, mx, my
-     */ SyntaxRuleType[SyntaxRuleType["Shorthand"] = -2] = "Shorthand";
-    /**
-     * native properties
-     * @example color, background-color, font-size
-     */ SyntaxRuleType[SyntaxRuleType["Native"] = -1] = "Native";
-    /**
-     * normal
-     * @example grid-cols
-     */ SyntaxRuleType[SyntaxRuleType["Normal"] = 0] = "Normal";
-    return SyntaxRuleType;
-}(SyntaxRuleType || {});
-
-export { SyntaxRuleType as default };

package/dist/syntax-rule.cjs

@@ -1,506 +0,0 @@
-'use strict';
-
-var cssEscape = require('./shared/utils/css-escape.cjs');
-var syntaxRuleType = require('./syntax-rule-type.cjs');
-var common = require('./common.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');
-var index$1 = require('./declarers/index.cjs');
-var index = require('./transformers/index.cjs');
-var index$2 = require('./function-transformers/index.cjs');
-
-class SyntaxRule {
-    name;
-    css;
-    registeredSyntax;
-    fixedClass;
-    native;
-    atRules;
-    priority;
-    type = syntaxRuleType.Normal;
-    declarations;
-    layer;
-    valid = true;
-    animationNames;
-    variableNames;
-    constructor(name, css, registeredSyntax, fixedClass, mode){
-        this.name = name;
-        this.css = css;
-        this.registeredSyntax = registeredSyntax;
-        this.fixedClass = fixedClass;
-        this.mode = mode;
-        this.layer = css.generalLayer;
-        Object.assign(this, registeredSyntax);
-        const { id, definition } = registeredSyntax;
-        const { declarer, transformer, type, unit, sign } = definition;
-        this.type = type;
-        // 1. value / selectorToken
-        let stateToken;
-        if (this.type === syntaxRuleType.Utility) {
-            stateToken = name.slice(id.length - 1);
-        } else {
-            let valueToken;
-            if (sign && name.startsWith(sign)) {
-                valueToken = name.slice(1);
-            } else if (id.endsWith('()')) {
-                valueToken = name;
-            } else if (id === 'group') {
-                valueToken = name;
-            } else {
-                const indexOfColon = name.indexOf(':');
-                this.keyToken = name.slice(0, indexOfColon + 1);
-                valueToken = name.slice(indexOfColon + 1);
-            }
-            this.valueComponents = [];
-            const parsedValueIndex = this.parseValues(this.valueComponents, 0, valueToken, unit, '', undefined, false, definition.includeAnimations ? Array.from(this.css.animations.keys()) : []);
-            this.valueToken = valueToken.slice(0, parsedValueIndex);
-            stateToken = valueToken.slice(parsedValueIndex);
-        }
-        // 2. !important
-        if (stateToken[0] === '!') {
-            this.important = true;
-            stateToken = stateToken.slice(1);
-        }
-        this.stateToken = stateToken;
-        // 4. suffix selector
-        const stateTokens = stateToken.split('@');
-        const suffixSelector = stateTokens[0];
-        if (suffixSelector) {
-            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;
-            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 && css.config.modeTrigger === 'media') {
-            const atComp = {
-                name: 'prefers-color-scheme',
-                value: this.mode
-            };
-            if (this.atRules?.media) {
-                this.atRules.media.push(atComp);
-            } else {
-                this.atRules = {
-                    media: [
-                        atComp
-                    ]
-                };
-            }
-        }
-        if (this.fixedClass) {
-            this.layer = css.componentsLayer;
-        } else {
-            const onlyNode = this.atRules?.layer?.length === 1 && this.atRules.layer[0];
-            if (onlyNode) {
-                if (onlyNode.value === 'base') {
-                    this.layer = css.baseLayer;
-                    this.atRules.layer = undefined;
-                } else if (onlyNode.value === 'preset') {
-                    this.layer = css.presetLayer;
-                    this.atRules.layer = undefined;
-                }
-            }
-        }
-        // 7. value
-        let newValue;
-        if (this.valueComponents) {
-            if (transformer) {
-                if (typeof transformer === 'string') {
-                    const transform = index[transformer];
-                    this.valueComponents = transform.call(this, this.valueComponents);
-                } else {
-                    const [name, data] = transformer;
-                    const transform = index[name];
-                    this.valueComponents = transform.call(this, this.valueComponents, data);
-                }
-            }
-            newValue = this.resolveValue(this.valueComponents, unit, [], false);
-            if (definition.declarations) {
-                const declarations = {};
-                if (Array.isArray(definition.declarations)) {
-                    for (const property of definition.declarations){
-                        declarations[property] = newValue;
-                    }
-                } else {
-                    for(const propertyName in definition.declarations){
-                        const propertyValue = definition.declarations[propertyName];
-                        declarations[propertyName] = propertyValue === undefined ? newValue : Array.isArray(propertyValue) ? propertyValue.map((v)=>v === undefined ? newValue : v).join('') : propertyValue;
-                    }
-                }
-                this.declarations = declarations;
-            } else if (declarer) {
-                if (typeof declarer === 'string') {
-                    const declare = index$1[declarer];
-                    this.declarations = declare.call(this, newValue, this.valueComponents);
-                } else {
-                    const [name, data] = declarer;
-                    const declare = index$1[name];
-                    this.declarations = declare.call(this, newValue, this.valueComponents, data);
-                }
-            } else if (id) {
-                this.declarations = {
-                    [id]: newValue
-                };
-            }
-        } else {
-            this.declarations = definition.declarations;
-        }
-        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.priority = compareRulePriority.calcRulePriority(this);
-        }
-    }
-    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;
-    }
-    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 = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
-        const { functions } = this.css.config;
-        let currentValue = '';
-        for (const eachValueComponent of valueComponents){
-            switch(eachValueComponent.type){
-                case 'function':
-                    const functionDefinition = functions && functions[eachValueComponent.name];
-                    const fnTransformer = functionDefinition?.transformer;
-                    if (fnTransformer && !eachValueComponent.bypassTransform) {
-                        const resolvedValue = this.resolveValue(eachValueComponent.children, functionDefinition.unit ?? unit, bypassVariableNames, bypassParsing || eachValueComponent.name === 'calc');
-                        let result;
-                        if (typeof fnTransformer === 'string') {
-                            const fnTransform = index$2[fnTransformer];
-                            result = fnTransform.call(this, resolvedValue, bypassVariableNames);
-                        } else {
-                            const [name, data] = fnTransformer;
-                            const fnTransform = index$2[name];
-                            result = fnTransform.call(this, resolvedValue, bypassVariableNames, data);
-                        }
-                        currentValue += eachValueComponent.token = eachValueComponent.text = typeof result === 'string' ? result : this.resolveValue(result, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing);
-                    } else {
-                        currentValue += eachValueComponent.token = eachValueComponent.text = eachValueComponent.name + eachValueComponent.symbol + this.resolveValue(eachValueComponent.children, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing) + common.VALUE_DELIMITERS[eachValueComponent.symbol];
-                    }
-                    break;
-                // todo: 應挪到 parseValues 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
-                case 'variable':
-                    const variable = this.css.variables.get(eachValueComponent.name);
-                    if (variable) {
-                        const handleVariable = (normalHandler, varHandler)=>{
-                            if (variable.modes) {
-                                if (this.mode) {
-                                    const themeVariable = variable.modes[this.mode] ?? variable;
-                                    if (themeVariable?.value) {
-                                        normalHandler(themeVariable);
-                                    }
-                                } else {
-                                    if (this.variableNames) {
-                                        this.variableNames.add(eachValueComponent.name);
-                                    } else {
-                                        this.variableNames = new Set([
-                                            eachValueComponent.name
-                                        ]);
-                                    }
-                                    varHandler();
-                                }
-                            } else {
-                                normalHandler(variable);
-                            }
-                        };
-                        switch(variable.type){
-                            case 'string':
-                                handleVariable((variable)=>{
-                                    const valueComponents = [];
-                                    this.parseValues(valueComponents, 0, variable.value, unit, '', undefined, bypassParsing, [
-                                        ...bypassVariableNames,
-                                        eachValueComponent.name
-                                    ]);
-                                    currentValue += eachValueComponent.text = this.resolveValue(valueComponents, unit, [
-                                        ...bypassVariableNames,
-                                        eachValueComponent.name
-                                    ], bypassParsing);
-                                }, ()=>{
-                                    currentValue += eachValueComponent.text = `var(--${eachValueComponent.name})`;
-                                });
-                                break;
-                            case 'number':
-                                handleVariable((variable)=>{
-                                    if (bypassParsing) {
-                                        currentValue += eachValueComponent.text = String(variable.value);
-                                    } else {
-                                        const valueComponent = this.parseValue(variable.value, unit);
-                                        currentValue += eachValueComponent.text = valueComponent.value + (valueComponent.unit ?? '');
-                                    }
-                                }, ()=>{
-                                    currentValue += eachValueComponent.text = unit ? `calc(var(--${eachValueComponent.name}) / 16 * 1rem)` : `var(--${eachValueComponent.name})`;
-                                });
-                                break;
-                            case 'color':
-                                let alpha = eachValueComponent.alpha;
-                                handleVariable((variable)=>{
-                                    const colorVariable = variable;
-                                    alpha = (alpha || 1) * (colorVariable.alpha || 1);
-                                    if (alpha < 1) {
-                                        currentValue += eachValueComponent.text = `${colorVariable.space}(${colorVariable.value}/${alpha})`;
-                                    } else {
-                                        currentValue += eachValueComponent.text = `${colorVariable.space}(${colorVariable.value})`;
-                                    }
-                                }, ()=>{
-                                    if (alpha !== undefined) {
-                                        // use color-mix
-                                        currentValue += eachValueComponent.text = `color-mix(in oklab,var(--${eachValueComponent.name}) ${Number(alpha) * 100}%,transparent)`;
-                                    } else {
-                                        currentValue += eachValueComponent.text = `var(--${eachValueComponent.name})`;
-                                    }
-                                });
-                                break;
-                        }
-                    } else {
-                        currentValue += eachValueComponent.text = `var(--${eachValueComponent.name}${eachValueComponent.fallback ? ',' + eachValueComponent.fallback : ''})`;
-                    }
-                    break;
-                case 'separator':
-                    currentValue += eachValueComponent.text ? eachValueComponent.text : eachValueComponent.text = eachValueComponent.value;
-                    break;
-                case 'number':
-                    currentValue += eachValueComponent.text = eachValueComponent.value + (eachValueComponent.unit || '');
-                    break;
-                default:
-                    currentValue += eachValueComponent.text = eachValueComponent.value;
-                    break;
-            }
-        }
-        return currentValue;
-    };
-    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 === '"';
-        const isString = checkIsString(endSymbol);
-        const separators = [
-            ','
-        ];
-        if (this.definition.separators?.length) {
-            separators.push(...this.definition.separators);
-        }
-        let currentValue = '';
-        const parse = ()=>{
-            if (currentValue) {
-                let handled = false;
-                if (!isVarFunction || currentValueComponents.length) {
-                    const handleVariable = (variableName, alpha)=>{
-                        const globalVariableValue = this.css.variables.get(variableName);
-                        const variable = this.variables?.get(variableName) || globalVariableValue;
-                        if (variable) {
-                            const name = variable.name ?? variableName;
-                            if (!bypassVariableNames.includes(name)) {
-                                handled = true;
-                                const valueComponent = {
-                                    type: 'variable',
-                                    name,
-                                    variable: this.css.variables.get(name),
-                                    token: currentValue
-                                };
-                                if (alpha) valueComponent.alpha = Number(alpha);
-                                currentValueComponents.push(valueComponent);
-                            }
-                        }
-                    };
-                    if (/^\$[a-zA-Z0-9-]+(?:\/[^\/]+)?$/.test(currentValue)) {
-                        const [raw, alpha] = currentValue.slice(1).split('/');
-                        handleVariable(raw, alpha);
-                    } else {
-                        handleVariable(currentValue);
-                        if (!handled) {
-                            const [colorName, alpha] = currentValue.split('/');
-                            handleVariable(colorName, alpha);
-                        }
-                    }
-                }
-                if (!handled) {
-                    if (!isVarFunction) {
-                        const result = common.BASE_UNIT_REGEX.exec(currentValue);
-                        if (result) {
-                            currentValue = String(+result[1] * (this.css.config.baseUnit ?? 1));
-                        }
-                    }
-                    if (bypassParsing) {
-                        currentValueComponents.push({
-                            type: 'string',
-                            value: currentValue,
-                            token: currentValue
-                        });
-                    } else {
-                        const parsedValue = this.parseValue(currentValue, unit);
-                        currentValueComponents.push({
-                            ...parsedValue,
-                            token: currentValue
-                        });
-                    }
-                }
-                currentValue = '';
-            }
-        };
-        for(; i < value.length; i++){
-            const val = value[i];
-            if (val === endSymbol) {
-                if (isString) {
-                    let count = 0;
-                    for(let j = currentValue.length - 1;; j--){
-                        if (currentValue[j] !== '\\') break;
-                        count++;
-                    }
-                    if (count % 2) {
-                        currentValue += val;
-                        continue;
-                    } else {
-                        parse();
-                    }
-                } else {
-                    parse();
-                }
-                return i;
-            } else if (!isString && val in common.VALUE_DELIMITERS) {
-                const functionName = currentValue;
-                const newValueComponent = {
-                    type: 'function',
-                    name: functionName,
-                    symbol: val,
-                    children: [],
-                    token: ''
-                };
-                currentValueComponents.push(newValueComponent);
-                currentValue = '';
-                const functionDefinition = val === '(' ? this.css.config.functions?.[functionName] : undefined;
-                i = this.parseValues(newValueComponent.children, ++i, value, functionDefinition?.unit ?? unit, common.VALUE_DELIMITERS[val], functionName || parentFunctionName || '', bypassParsing || functionName === 'calc');
-            } else if ((val === '|' || val === ' ') && endSymbol !== '}' && (!isString || parentFunctionName === 'path')) {
-                parse();
-                currentValueComponents.push({
-                    type: 'separator',
-                    value: ' ',
-                    token: val
-                });
-            } else {
-                if (!isString) {
-                    if (val === '.') {
-                        if (isNaN(+value[i + 1])) {
-                            if (root) break;
-                        } else if (value[i - 1] === '-') {
-                            currentValue += '0';
-                        }
-                    } else if (separators.includes(val)) {
-                        parse();
-                        currentValueComponents.push({
-                            type: 'separator',
-                            value: val,
-                            text: (val === ',' ? '' : ' ') + val + (val === ',' ? '' : ' '),
-                            token: val
-                        });
-                        continue;
-                    } else if (root && (val === '#' && (currentValue || currentValueComponents.length && currentValueComponents[currentValueComponents.length - 1]['type'] !== 'separator') || [
-                        '!',
-                        '*',
-                        '>',
-                        '+',
-                        '~',
-                        ':',
-                        '[',
-                        '@',
-                        '_'
-                    ].includes(val))) {
-                        break;
-                    }
-                }
-                currentValue += val;
-            }
-        }
-        parse();
-        return i;
-    };
-    parseValue(token, unit = this.definition.unit) {
-        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 {
-                    token,
-                    value: numerator / denominator * 100,
-                    unit: '%',
-                    type: 'number'
-                };
-            }
-        }
-        return parsed;
-    }
-    get key() {
-        return (this.fixedClass ? this.fixedClass + ' ' : '') + this.name;
-    }
-}
-
-exports.SyntaxRule = SyntaxRule;

package/dist/syntax-rule.d.ts

@@ -1,44 +0,0 @@
-import MasterCSS from './core';
-import SyntaxRuleType from './syntax-rule-type';
-import { type PropertiesHyphen } from 'csstype';
-import Layer from './layer';
-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';
-export declare class SyntaxRule {
-    readonly name: string;
-    css: MasterCSS;
-    readonly registeredSyntax: DefinedRule;
-    fixedClass?: string | undefined;
-    native?: CSSRule;
-    readonly atRules?: Partial<Record<AtIdentifier, AtRuleNode[]>>;
-    readonly priority: RulePriority;
-    readonly type: SyntaxRuleType;
-    readonly declarations?: PropertiesHyphen;
-    readonly layer: Layer;
-    readonly valid: boolean;
-    animationNames?: Set<string>;
-    variableNames?: Set<string>;
-    constructor(name: string, css: MasterCSS, registeredSyntax: DefinedRule, fixedClass?: string | undefined, mode?: 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): import(".").StringValueComponent | NumberValueComponent;
-    get key(): string;
-}
-export interface SyntaxRule extends DefinedRule {
-    token: string;
-    selectorNodes?: SelectorNode[];
-    important: boolean;
-    direction: string;
-    mode: string;
-    unitToken: string;
-    keyToken: string;
-    valueToken: string;
-    stateToken: string;
-    atToken: string;
-    valueComponents: ValueComponent[];
-}