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

package/dist/syntax-rule.mjs

@@ -1,504 +0,0 @@
-import cssEscape from './shared/utils/css-escape.mjs';
-import SyntaxRuleType from './syntax-rule-type.mjs';
-import { AT_IDENTIFIERS, VALUE_DELIMITERS, BASE_UNIT_REGEX } from './common.mjs';
-import parseValue from './utils/parse-value.mjs';
-import parseAt from './utils/parse-at.mjs';
-import generateAt from './utils/generate-at.mjs';
-import parseSelector from './utils/parse-selector.mjs';
-import generateSelector from './utils/generate-selector.mjs';
-import { calcRulePriority } from './utils/compare-rule-priority.mjs';
-import declarers from './declarers/index.mjs';
-import transformers from './transformers/index.mjs';
-import functionTransformers from './function-transformers/index.mjs';
-
-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 = transformers[transformer];
-                    this.valueComponents = transform.call(this, this.valueComponents);
-                } else {
-                    const [name, data] = transformer;
-                    const transform = transformers[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 = declarers[declarer];
-                    this.declarations = declare.call(this, newValue, this.valueComponents);
-                } else {
-                    const [name, data] = declarer;
-                    const declare = declarers[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 = 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) 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 = functionTransformers[fnTransformer];
-                            result = fnTransform.call(this, resolvedValue, bypassVariableNames);
-                        } else {
-                            const [name, data] = fnTransformer;
-                            const fnTransform = functionTransformers[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) + 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 = 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 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, 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;
-    }
-}
-
-export { SyntaxRule };

package/dist/transformers/auto-fill-solid.cjs

@@ -1,31 +0,0 @@
-'use strict';
-
-var common = require('../common.cjs');
-
-function autoFillSolid(valueComponents) {
-    if (valueComponents.length < 2) return valueComponents;
-    let styleIncluded = false;
-    let varIncluded = false;
-    for (const valueComponent of valueComponents){
-        if (valueComponent.type === 'string' && common.BORDER_STYLE_VALUES.includes(valueComponent.value) || valueComponent.type === 'variable' && common.BORDER_STYLE_VALUES.includes(String(valueComponent.variable?.value))) {
-            styleIncluded = true;
-        }
-        if (valueComponent.type === 'function' && valueComponent.name === 'var') {
-            varIncluded = true;
-        }
-    }
-    if (!styleIncluded && !varIncluded) {
-        valueComponents.push({
-            type: 'separator',
-            value: ' ',
-            token: '|'
-        }, {
-            type: 'string',
-            value: 'solid',
-            token: 'solid'
-        });
-    }
-    return valueComponents;
-}
-
-module.exports = autoFillSolid;

package/dist/transformers/auto-fill-solid.d.ts

@@ -1,2 +0,0 @@
-import { ValueComponent } from '../types/syntax';
-export default function autoFillSolid(valueComponents: ValueComponent[]): ValueComponent[];

package/dist/transformers/auto-fill-solid.mjs

@@ -1,29 +0,0 @@
-import { BORDER_STYLE_VALUES } from '../common.mjs';
-
-function autoFillSolid(valueComponents) {
-    if (valueComponents.length < 2) return valueComponents;
-    let styleIncluded = false;
-    let varIncluded = false;
-    for (const valueComponent of valueComponents){
-        if (valueComponent.type === 'string' && BORDER_STYLE_VALUES.includes(valueComponent.value) || valueComponent.type === 'variable' && BORDER_STYLE_VALUES.includes(String(valueComponent.variable?.value))) {
-            styleIncluded = true;
-        }
-        if (valueComponent.type === 'function' && valueComponent.name === 'var') {
-            varIncluded = true;
-        }
-    }
-    if (!styleIncluded && !varIncluded) {
-        valueComponents.push({
-            type: 'separator',
-            value: ' ',
-            token: '|'
-        }, {
-            type: 'string',
-            value: 'solid',
-            token: 'solid'
-        });
-    }
-    return valueComponents;
-}
-
-export { autoFillSolid as default };

package/dist/transformers/index.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-var autoFillSolid = require('./auto-fill-solid.cjs');
-
-const transformers = {
-    'auto-fill-solid': autoFillSolid
-};
-
-module.exports = transformers;

package/dist/transformers/index.d.ts

@@ -1,6 +0,0 @@
-import autoFillSolid from './auto-fill-solid';
-declare const transformers: {
-    'auto-fill-solid': typeof autoFillSolid;
-};
-export default transformers;
-export type TransformerNames = keyof typeof transformers;

package/dist/transformers/index.mjs

@@ -1,7 +0,0 @@
-import autoFillSolid from './auto-fill-solid.mjs';
-
-const transformers = {
-    'auto-fill-solid': autoFillSolid
-};
-
-export { transformers as default };

package/dist/types/common.cjs

@@ -1,2 +0,0 @@
-'use strict';
-

package/dist/types/common.d.ts

@@ -1 +0,0 @@
-export type Vendors = 'webkit' | 'moz' | 'ms' | 'o';

package/dist/types/common.mjs

@@ -1 +0,0 @@
-

package/dist/types/config.cjs

@@ -1,2 +0,0 @@
-'use strict';
-