@master/css-engine 2.0.0-rc.70

package/dist/utils/parse-at.mjs

@@ -0,0 +1,179 @@
+import { AT_COMPARISON_OPERATORS, AT_LOGICAL_OPERATORS, AT_IDENTIFIERS, AT_COMPARABLE_FEATURES, AT_FEATURE_ALIASES } from '../common.mjs';
+import parsePair from './parse-pair.mjs';
+import parseValue from './parse-value.mjs';
+import replaceCharOutsideQuotes from './replace-char-outside-quotes.mjs';
+import splitCharOutsideQuotes from './split-char-outside-quotes.mjs';
+
+function resolveAtFeatureName(value) {
+    return AT_FEATURE_ALIASES[value] || value;
+}
+function isAtFeatureName(value) {
+    return AT_COMPARABLE_FEATURES.includes(resolveAtFeatureName(value));
+}
+function isAtIdentifier(value) {
+    return AT_IDENTIFIERS.includes(value);
+}
+function parseAt(token, css, isRaw = true) {
+    let id;
+    let firstToken;
+    const resolve = (token)=>{
+        const regex = /([a-zA-Z0-9-:%|]+|[&|!|,|>|<|=][=]?)/g;
+        const raws = [
+            ...token.matchAll(regex)
+        ].map((match)=>match[0]);
+        let nodes = [];
+        const addNode = (node)=>{
+            let prev = nodes[nodes.length - 1];
+            if (node.type === 'number' && !node.name) {
+                if (prev?.type === 'comparison') {
+                    node.operator = prev.value;
+                    if (node.raw && prev.raw) {
+                        node.raw = prev.raw + node.raw;
+                    }
+                    nodes.pop();
+                    prev = nodes[nodes.length - 1];
+                    if (prev?.type === 'string') {
+                        node.name = resolveAtFeatureName(prev.value);
+                        if (node.raw && prev.raw) {
+                            node.raw = prev.raw + node.raw;
+                        }
+                        nodes.pop();
+                    } else {
+                        node.name = 'width';
+                    }
+                } else {
+                    node.name = 'width';
+                    node.operator = '>=';
+                }
+            }
+            nodes.push(node);
+        };
+        raws.forEach((raw, rawIndex)=>{
+            if (AT_COMPARISON_OPERATORS.includes(raw)) {
+                const newNode = {
+                    type: 'comparison',
+                    value: raw
+                };
+                if (isRaw) newNode.raw = raw;
+                nodes.push(newNode);
+                return;
+            } else if (raw in AT_LOGICAL_OPERATORS) {
+                const newNode = {
+                    type: 'logical',
+                    value: AT_LOGICAL_OPERATORS[raw]
+                };
+                if (isRaw) newNode.raw = raw;
+                nodes.push(newNode);
+                return;
+            }
+            const definedAtRule = id === 'container' ? css.containerAtRules.get(raw) || (css.breakpointAtRules.has(raw) ? undefined : css.atRules.get(raw)) : css.atRules.get(raw);
+            if (!id && !firstToken) {
+                firstToken = raw;
+                if (isAtIdentifier(firstToken)) {
+                    id = firstToken;
+                    return;
+                } else if (definedAtRule) {
+                    id = definedAtRule.id;
+                } else if (isAtFeatureName(firstToken)) {
+                    id = 'media';
+                } else if (firstToken.charAt(0).match(/[a-zA-Z-]/)) {
+                    id = 'container';
+                } else {
+                    id = 'media';
+                }
+            }
+            let node = {
+                type: 'string'
+            };
+            if (isRaw) node.raw = raw;
+            if (definedAtRule) {
+                if (definedAtRule.nodes.length === 1) {
+                    addNode({
+                        ...definedAtRule.nodes[0],
+                        raw
+                    });
+                } else if (definedAtRule.nodes.length) {
+                    addNode({
+                        raw,
+                        children: definedAtRule.nodes
+                    });
+                }
+                return;
+            } else {
+                const [splitedNameOrValue, splitedValue] = splitCharOutsideQuotes(raw, ':');
+                if (splitedValue) {
+                    node.name = resolveAtFeatureName(splitedNameOrValue);
+                    node.value = splitedValue;
+                } else {
+                    node.value = resolveAtFeatureName(splitedNameOrValue);
+                }
+                if (id === 'container' || id === 'media') {
+                    const featureValue = String(node.value);
+                    if (!splitedValue && isAtFeatureName(featureValue)) {
+                        if (AT_COMPARISON_OPERATORS.includes(raws[rawIndex + 1])) {
+                            addNode(node);
+                        } else {
+                            addNode({
+                                type: 'boolean',
+                                name: featureValue,
+                                ...isRaw && {
+                                    raw
+                                }
+                            });
+                        }
+                        return;
+                    } else {
+                        const { token, ...newNode } = parseValue(node.value, 'rem', css.settings.rootSize);
+                        Object.assign(node, newNode);
+                    }
+                }
+                addNode(node);
+            }
+        });
+        return nodes;
+    };
+    const pair = (token)=>{
+        const pairedAtNodes = [];
+        const paired = parsePair(token);
+        if (paired) {
+            if (paired.pre) {
+                pairedAtNodes.push(...pair(paired.pre));
+            }
+            if (paired.body) {
+                if (id === 'supports') {
+                    pairedAtNodes.push({
+                        type: 'group',
+                        children: [
+                            {
+                                type: 'string',
+                                value: replaceCharOutsideQuotes(paired.body, '|', ' ')
+                            }
+                        ]
+                    });
+                } else {
+                    const children = pair(paired.body);
+                    if (children.length > 1) {
+                        pairedAtNodes.push({
+                            type: 'group',
+                            children: pair(paired.body)
+                        });
+                    } else {
+                        pairedAtNodes.push(...children);
+                    }
+                }
+            }
+            if (paired.post) {
+                pairedAtNodes.push(...pair(paired.post));
+            }
+        } else {
+            pairedAtNodes.push(...resolve(token));
+        }
+        return pairedAtNodes;
+    };
+    return {
+        nodes: pair(token),
+        id: id || 'media' // should be assigned to here
+    };
+}
+
+export { parseAt as default };

package/dist/utils/parse-pair.d.ts

@@ -0,0 +1,8 @@
+export interface ParsedPair {
+    start: number;
+    end: number;
+    pre: string;
+    body: string;
+    post: string;
+}
+export default function parsePair(str: string, a?: string, b?: string): ParsedPair | null;

package/dist/utils/parse-pair.mjs

@@ -0,0 +1,46 @@
+function parsePair(str, a = '(', b = ')') {
+    const stack = [];
+    let result = null;
+    let inString = null;
+    for(let i = 0; i < str.length; i++){
+        const char = str[i];
+        const prevChar = str[i - 1];
+        // 處理 escape 字元，例如 \"
+        if (char === '\\') {
+            i++; // skip next character
+            continue;
+        }
+        // 處理字串區段進入與離開
+        if ((char === '"' || char === '\'') && prevChar !== '\\') {
+            if (inString === char) {
+                inString = null; // 離開字串
+            } else if (!inString) {
+                inString = char; // 進入字串
+            }
+            continue;
+        }
+        if (inString) continue; // 若在字串中就忽略括號處理
+        // 開始符號
+        if (str.startsWith(a, i)) {
+            stack.push({
+                start: i
+            });
+            i += a.length - 1;
+        } else if (str.startsWith(b, i)) {
+            const last = stack.pop();
+            if (last) {
+                result = {
+                    start: last.start,
+                    end: i,
+                    pre: str.slice(stack.length > 0 ? stack[stack.length - 1].start + a.length : 0, last.start),
+                    body: str.slice(last.start + a.length, i),
+                    post: str.slice(i + b.length)
+                };
+            }
+            i += b.length - 1;
+        }
+    }
+    return result;
+}
+
+export { parsePair as default };

package/dist/utils/parse-selector.d.ts

@@ -0,0 +1,19 @@
+import type MasterCSS from '../core';
+export declare type SelectorLiteralNode = {
+    type?: 'attribute' | 'pseudo-class' | 'pseudo-element' | 'class' | 'universal' | 'id';
+    raw?: string;
+    value?: string;
+    children?: SelectorNode[];
+};
+export declare type SelectorSeparatorNode = {
+    type: 'separator';
+    raw?: string;
+    value: string;
+};
+export declare type SelectorCombinatorNode = {
+    type: 'combinator';
+    raw?: string;
+    value: string;
+};
+export declare type SelectorNode = SelectorLiteralNode | SelectorCombinatorNode | SelectorSeparatorNode;
+export default function parseSelector(token: string, css: MasterCSS, isRaw?: boolean): SelectorNode[];

package/dist/utils/parse-selector.mjs

@@ -0,0 +1,124 @@
+import { SELECTOR_COMBINATORS } from '../common.mjs';
+import parsePair from './parse-pair.mjs';
+
+const SELECTOR_REGEX = new RegExp(`(?:[a-zA-Z0-9-]+)|([${SELECTOR_COMBINATORS.join('')}#.:,*])|(a-zA-Z0-9-)`, 'g');
+const LEGACY_PSEUDO_ELEMENTS = new Set([
+    'before',
+    'after',
+    'first-letter',
+    'first-line'
+]);
+function parseSelector(token, css, isRaw = true) {
+    const resolve = (eachToken)=>{
+        const nodes = [];
+        let currentPrefix = '';
+        let tokenIndex = 0;
+        for (const match of eachToken.matchAll(SELECTOR_REGEX)){
+            const raw = match[0];
+            tokenIndex += raw.length;
+            if (raw === ':' || raw === '.' || raw === '#') {
+                currentPrefix += raw;
+                continue;
+            }
+            let type;
+            let value = raw;
+            const definedNodes = css.selectors.get(currentPrefix + raw);
+            if (definedNodes) {
+                const firstNode = definedNodes[definedNodes.length - 1];
+                nodes.push(definedNodes.length === 1 && firstNode.type ? {
+                    ...firstNode,
+                    raw: currentPrefix + raw
+                } : {
+                    children: definedNodes,
+                    raw: currentPrefix + raw
+                });
+                currentPrefix = '';
+                continue;
+            }
+            if (SELECTOR_COMBINATORS.includes(raw)) {
+                type = 'combinator';
+                if (raw === '_') {
+                    const nextRawValue = eachToken[tokenIndex];
+                    const prevRawValue = eachToken[tokenIndex - raw.length - 1];
+                    if (prevRawValue !== '_' && nextRawValue !== '_') {
+                        value = ' '; // support BEM __
+                    }
+                }
+            } else if (raw === ',') {
+                type = 'separator';
+            } else if (raw === '*') {
+                type = 'universal';
+            } else if (currentPrefix === ':') {
+                type = LEGACY_PSEUDO_ELEMENTS.has(raw) ? 'pseudo-element' : 'pseudo-class';
+            } else if (currentPrefix === '::') {
+                type = 'pseudo-element';
+            } else if (currentPrefix === '.') {
+                type = 'class';
+            } else if (currentPrefix === '#') {
+                type = 'id';
+            }
+            nodes.push({
+                value,
+                ...isRaw && {
+                    raw: currentPrefix + raw
+                },
+                ...type && {
+                    type
+                }
+            });
+            currentPrefix = '';
+        }
+        return nodes;
+    };
+    const pair = (eachToken, nodes = [])=>{
+        const paired = parsePair(eachToken);
+        if (paired) {
+            let { pre, body, post } = paired;
+            let name;
+            if (body) {
+                const lastColonIndex = pre.lastIndexOf(':');
+                if (lastColonIndex !== -1) {
+                    // Walk back through any leading `:` (so `::foo(args)` keeps
+                    // both colons in `name`, not just the last one).
+                    let nameStart = lastColonIndex;
+                    while(nameStart > 0 && pre[nameStart - 1] === ':'){
+                        nameStart--;
+                    }
+                    name = pre.slice(nameStart);
+                    pre = pre.slice(0, nameStart);
+                }
+            }
+            if (pre) nodes.push(...pair(pre));
+            if (body) {
+                const children = pair(body);
+                if (name) {
+                    const node = resolve(name)[0];
+                    if (children.length) node.children = children;
+                    nodes.push(node);
+                } else {
+                    nodes.push(...children);
+                }
+            }
+            if (post) nodes.push(...pair(post));
+            return nodes;
+        }
+        const attrPaired = parsePair(eachToken, '[', ']');
+        if (attrPaired) {
+            const { pre, body, post } = attrPaired;
+            if (pre) nodes.push(...pair(pre));
+            nodes.push({
+                value: body,
+                type: 'attribute',
+                ...isRaw && {
+                    raw: `[${body}]`
+                }
+            });
+            if (post) nodes.push(...pair(post));
+            return nodes;
+        }
+        return resolve(eachToken);
+    };
+    return pair(token);
+}
+
+export { parseSelector as default };

package/dist/utils/parse-value.d.ts

@@ -0,0 +1,2 @@
+import type { NumberValueComponent, StringValueComponent } from '@master/css-schema/css-syntax';
+export default function parseValue(token: string | number, unit?: string, rootSize?: number): StringValueComponent | NumberValueComponent;

package/dist/utils/parse-value.mjs

@@ -0,0 +1,37 @@
+import { UNIT_REGEX } from '../common.mjs';
+
+function parseValue(token, unit = '', rootSize = 1) {
+    const isNumber = typeof token === 'number';
+    const defaultUnit = unit;
+    // 如果是純數字
+    if (isNumber) {
+        return {
+            unit: defaultUnit,
+            type: 'number',
+            value: defaultUnit === 'rem' || defaultUnit === 'em' ? token / rootSize : token
+        };
+    }
+    const matches = token.match(UNIT_REGEX);
+    if (matches) {
+        let value = parseFloat(matches[1]);
+        let parsedUnit = matches[2] || '';
+        if (!parsedUnit && (defaultUnit === 'rem' || defaultUnit === 'em')) {
+            value = value / rootSize;
+            parsedUnit = defaultUnit;
+        }
+        return {
+            token,
+            value,
+            unit: parsedUnit || defaultUnit,
+            type: 'number'
+        };
+    }
+    // 無法解析則當作純字串
+    return {
+        token,
+        value: token,
+        type: 'string'
+    };
+}
+
+export { parseValue as default };

package/dist/utils/replace-char-outside-quotes.d.ts

@@ -0,0 +1 @@
+export default function replaceCharOutsideQuotes(str: string, target: string, replace: string): string;

package/dist/utils/replace-char-outside-quotes.mjs

@@ -0,0 +1,19 @@
+function replaceCharOutsideQuotes(str, target, replace) {
+    let result = '';
+    let inSingle = false;
+    let inDouble = false;
+    for(let i = 0; i < str.length; i++){
+        const char = str[i];
+        const prev = str[i - 1];
+        if (char === '\'' && prev !== '\\' && !inDouble) inSingle = !inSingle;
+        else if (char === '"' && prev !== '\\' && !inSingle) inDouble = !inDouble;
+        if (char === target && !inSingle && !inDouble) {
+            result += replace;
+        } else {
+            result += char;
+        }
+    }
+    return result;
+}
+
+export { replaceCharOutsideQuotes as default };

package/dist/utils/split-char-outside-quotes.d.ts

@@ -0,0 +1 @@
+export default function splitCharOutsideQuotes(str: string, char: string): string[];

package/dist/utils/split-char-outside-quotes.mjs

@@ -0,0 +1,27 @@
+function splitCharOutsideQuotes(str, char) {
+    const result = [];
+    let current = '';
+    let inSingle = false;
+    let inDouble = false;
+    for(let i = 0; i < str.length; i++){
+        const c = str[i];
+        const prev = str[i - 1];
+        // 處理 quote 開關
+        if (c === '\'' && !inDouble && prev !== '\\') {
+            inSingle = !inSingle;
+        } else if (c === '"' && !inSingle && prev !== '\\') {
+            inDouble = !inDouble;
+        }
+        // 在引號之外遇到目標字元就切分
+        if (c === char && !inSingle && !inDouble) {
+            result.push(current.trim());
+            current = '';
+        } else {
+            current += c;
+        }
+    }
+    if (current) result.push(current.trim());
+    return result;
+}
+
+export { splitCharOutsideQuotes as default };

package/dist/utils/wrap-at-rules.d.ts

@@ -0,0 +1 @@
+export default function wrapAtRules(text: string, atRules?: string[]): string;

package/dist/utils/wrap-at-rules.mjs

@@ -0,0 +1,10 @@
+function wrapAtRules(text, atRules) {
+    if (!atRules?.length) return text;
+    for(let index = atRules.length - 1; index >= 0; index--){
+        const atRule = atRules[index]?.trim();
+        if (atRule) text = `${atRule}{${text}}`;
+    }
+    return text;
+}
+
+export { wrapAtRules as default };

package/dist/variable-rule.d.ts

@@ -0,0 +1,26 @@
+import MasterCSS from './core';
+import type { ResolvedVariableValue, Variable } from '@master/css-schema/css-syntax';
+export default class VariableRule {
+    readonly name: string;
+    readonly variable: Variable;
+    readonly css: MasterCSS;
+    nodes: VariableRuleNode[];
+    constructor(name: string, variable: Variable, css: MasterCSS);
+    get key(): string;
+    get text(): string;
+}
+export declare class VariableRuleNode {
+    readonly rule: VariableRule;
+    readonly variable: ResolvedVariableValue;
+    readonly css: MasterCSS;
+    readonly mode?: string | undefined;
+    native?: CSSRule;
+    isDefaultMode: boolean;
+    constructor(rule: VariableRule, variable: ResolvedVariableValue, css: MasterCSS, mode?: string | undefined);
+    get selectorText(): string;
+    get declarationName(): string;
+    get declarationValue(): string;
+    get declarationText(): string;
+    get mediaText(): string;
+    get text(): string;
+}

package/dist/variable-rule.mjs

@@ -0,0 +1,105 @@
+import { replaceCSSVariableReferences, normalizeVariableValue } from './utils/css-variables.mjs';
+
+class VariableRule {
+    name;
+    variable;
+    css;
+    nodes = [];
+    constructor(name, variable, css){
+        this.name = name;
+        this.variable = variable;
+        this.css = css;
+        const hasDefaultValue = variable.value !== undefined;
+        if (hasDefaultValue) {
+            this.nodes.push(new VariableRuleNode(this, variable, css));
+        }
+        if (variable.modes && this.css.settings.modeTrigger) {
+            for(const mode in variable.modes){
+                const modeVariable = variable.modes[mode];
+                const variableRule = new VariableRuleNode(this, modeVariable, css, mode);
+                const isDefaultMode = hasDefaultValue ? false : this.css.settings.defaultMode !== 'none' && this.css.settings.defaultMode === mode;
+                variableRule.isDefaultMode = isDefaultMode;
+                if (isDefaultMode) {
+                    this.nodes.unshift(variableRule);
+                } else {
+                    this.nodes.push(variableRule);
+                }
+            }
+        }
+    }
+    get key() {
+        return this.name;
+    }
+    get text() {
+        return this.nodes.map(({ text })=>text).join('');
+    }
+}
+class VariableRuleNode {
+    rule;
+    variable;
+    css;
+    mode;
+    native;
+    isDefaultMode = false;
+    constructor(rule, variable, css, mode){
+        this.rule = rule;
+        this.variable = variable;
+        this.css = css;
+        this.mode = mode;
+    }
+    get selectorText() {
+        const isDefaultMode = this.isDefaultMode;
+        if (this.mode) {
+            switch(this.css.settings.modeTrigger){
+                case 'host':
+                    return `:host(.${this.mode})${isDefaultMode ? ',:host' : ''}`;
+                case 'class':
+                    return `.${this.mode}${isDefaultMode ? ',:root' : ''}`;
+                default:
+                    return ':root';
+            }
+        } else {
+            return ':root';
+        }
+    }
+    get declarationName() {
+        return `--${this.rule.name}`;
+    }
+    get declarationValue() {
+        const resolveInlineReferences = (value, stack)=>{
+            return replaceCSSVariableReferences(normalizeVariableValue(value).value, (name)=>{
+                const variable = this.css.variables.get(name);
+                if (!variable?.inline || variable.value === undefined) return;
+                const stackIndex = stack.indexOf(name);
+                if (stackIndex !== -1) {
+                    throw new Error(`Circular inline variable reference: ${[
+                        ...stack.slice(stackIndex),
+                        name
+                    ].join(' -> ')}`);
+                }
+                return resolveInlineReferences(variable.value, [
+                    ...stack,
+                    name
+                ]);
+            });
+        };
+        return resolveInlineReferences(this.variable.value, [
+            this.rule.name
+        ]);
+    }
+    get declarationText() {
+        return `${this.declarationName}:${this.declarationValue}`;
+    }
+    get mediaText() {
+        return this.css.settings.modeTrigger === 'media' && this.mode ? `@media (prefers-color-scheme:${this.mode})` : '';
+    }
+    get text() {
+        let text = `${this.selectorText}{${this.declarationText}}`;
+        if (this.css.settings.modeTrigger === 'media' && this.mode) {
+            text = `@media (prefers-color-scheme:${this.mode}){${text}}`;
+        }
+        return text;
+    }
+}
+
+export { VariableRuleNode, VariableRule as default };

package/package.json

@@ -0,0 +1 @@
+{"name":"@master/css-engine","type":"module","scripts":{"build":"techor build \"src/**/*.ts\" --formats esm","dev":"pnpm build --watch","test":"vitest","bench":"vitest bench","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"The manifest-driven Master CSS engine","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/engine"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","default":"./dist/index.mjs"},"./compiler":{"types":"./dist/compiler.d.ts","import":"./dist/compiler.mjs","default":"./dist/compiler.mjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css-lexer":"^2.0.0-rc.70","csstype":"^3.2.3","@master/css-schema":"^2.0.0-rc.70"},"devDependencies":{"@master/css-preset":"^2.0.0-rc.70"},"version":"2.0.0-rc.70"}