@master/css-engine 2.0.0-rc.70

package/dist/native-value-namespaces.mjs

@@ -0,0 +1,346 @@
+import { builtinNamespaceRef } from './namespaces.mjs';
+
+function freezeNamespace(namespace) {
+    Object.freeze(namespace.properties);
+    Object.freeze(namespace.variableAliasRefs);
+    return Object.freeze(namespace);
+}
+const spacingProperties = Object.freeze([
+    'background-position',
+    'bottom',
+    'border-spacing',
+    'column-gap',
+    'gap',
+    'inset',
+    'inset-block',
+    'inset-block-end',
+    'inset-block-start',
+    'inset-inline',
+    'inset-inline-end',
+    'inset-inline-start',
+    'left',
+    'margin',
+    'margin-block',
+    'margin-block-end',
+    'margin-block-start',
+    'margin-bottom',
+    'margin-inline',
+    'margin-inline-end',
+    'margin-inline-start',
+    'margin-left',
+    'margin-right',
+    'margin-top',
+    'mask-position',
+    'object-position',
+    'outline-offset',
+    'padding',
+    'padding-block',
+    'padding-block-end',
+    'padding-block-start',
+    'padding-bottom',
+    'padding-inline',
+    'padding-inline-end',
+    'padding-inline-start',
+    'padding-left',
+    'padding-right',
+    'padding-top',
+    'perspective',
+    'perspective-origin',
+    'right',
+    'row-gap',
+    'scroll-margin',
+    'scroll-margin-block',
+    'scroll-margin-block-end',
+    'scroll-margin-block-start',
+    'scroll-margin-bottom',
+    'scroll-margin-inline',
+    'scroll-margin-inline-end',
+    'scroll-margin-inline-start',
+    'scroll-margin-left',
+    'scroll-margin-right',
+    'scroll-margin-top',
+    'scroll-padding',
+    'scroll-padding-block',
+    'scroll-padding-block-end',
+    'scroll-padding-block-start',
+    'scroll-padding-bottom',
+    'scroll-padding-inline',
+    'scroll-padding-inline-end',
+    'scroll-padding-inline-start',
+    'scroll-padding-left',
+    'scroll-padding-right',
+    'scroll-padding-top',
+    'shape-margin',
+    'text-indent',
+    'text-underline-offset',
+    'top',
+    'translate',
+    'transform-origin',
+    'word-spacing'
+]);
+const spacingUnitlessProperties = Object.freeze([
+    'cx',
+    'cy',
+    'stroke-dashoffset',
+    'x',
+    'y'
+]);
+const containerProperties = Object.freeze([
+    'background-size',
+    'block-size',
+    'contain-intrinsic-block-size',
+    'contain-intrinsic-inline-size',
+    'flex-basis',
+    'height',
+    'inline-size',
+    'max-block-size',
+    'max-height',
+    'max-inline-size',
+    'max-width',
+    'min-block-size',
+    'min-height',
+    'min-inline-size',
+    'min-width',
+    'mask-size',
+    'width'
+]);
+const radiusProperties = Object.freeze([
+    'border-bottom-left-radius',
+    'border-bottom-right-radius',
+    'border-end-end-radius',
+    'border-end-start-radius',
+    'border-radius',
+    'border-start-end-radius',
+    'border-start-start-radius',
+    'border-top-left-radius',
+    'border-top-right-radius'
+]);
+const borderColorProperties = Object.freeze([
+    'border',
+    'border-block',
+    'border-block-color',
+    'border-block-end',
+    'border-block-end-color',
+    'border-block-start',
+    'border-block-start-color',
+    'border-bottom',
+    'border-bottom-color',
+    'border-color',
+    'border-inline',
+    'border-inline-color',
+    'border-inline-end',
+    'border-inline-end-color',
+    'border-inline-start',
+    'border-inline-start-color',
+    'border-left',
+    'border-left-color',
+    'border-right',
+    'border-right-color',
+    'border-top',
+    'border-top-color',
+    'outline',
+    'outline-color'
+]);
+const nativeValueNamespaces = Object.freeze([
+    freezeNamespace({
+        properties: spacingProperties,
+        variableAliasRefs: [
+            builtinNamespaceRef('spacing')
+        ]
+    }),
+    freezeNamespace({
+        properties: spacingUnitlessProperties,
+        variableAliasRefs: [
+            builtinNamespaceRef('spacing')
+        ]
+    }),
+    freezeNamespace({
+        properties: containerProperties,
+        variableAliasRefs: [
+            builtinNamespaceRef('container')
+        ]
+    }),
+    freezeNamespace({
+        properties: radiusProperties,
+        variableAliasRefs: [
+            builtinNamespaceRef('radius')
+        ]
+    }),
+    freezeNamespace({
+        properties: borderColorProperties,
+        variableAliasRefs: [
+            builtinNamespaceRef('color-line'),
+            builtinNamespaceRef('color')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'accent-color',
+            'background-color',
+            'fill',
+            'filter'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('color')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'caret-color'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('color-text'),
+            builtinNamespaceRef('color')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'stroke'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('color-line'),
+            builtinNamespaceRef('color')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'color'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('color', true),
+            builtinNamespaceRef('color-text'),
+            builtinNamespaceRef('color')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            '-webkit-text-fill-color',
+            'text-decoration-color'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('color-text'),
+            builtinNamespaceRef('color')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            '-webkit-text-stroke-color'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('color')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'text-shadow'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('color')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'box-shadow'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('shadow'),
+            builtinNamespaceRef('color')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'animation-delay',
+            'animation-duration',
+            'transition-delay',
+            'transition-duration'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('duration')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'animation-timing-function',
+            'transition-timing-function'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('easing')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'animation',
+            'transition'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('duration'),
+            builtinNamespaceRef('easing')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'content'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('content', true)
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'font-feature-settings'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('font-feature', true)
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'font-family'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('font-family', true)
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'font-size'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('font-size', true)
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'font-weight'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('font-weight', true)
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'letter-spacing'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('tracking')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'line-height'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('leading')
+        ]
+    }),
+    freezeNamespace({
+        properties: Object.freeze([
+            'order'
+        ]),
+        variableAliasRefs: [
+            builtinNamespaceRef('order', true)
+        ]
+    })
+]);
+
+export { nativeValueNamespaces as builtinNativeValueNamespaces, nativeValueNamespaces as default };

package/dist/non-layer.d.ts

@@ -0,0 +1,12 @@
+import MasterCSS from './core';
+import { Rule } from './rule';
+export default class NonLayer {
+    css: MasterCSS;
+    readonly rules: Rule[];
+    readonly tokenCounts: Map<string, number>;
+    constructor(css: MasterCSS);
+    insert(rule: Rule): void;
+    delete(name: string): Rule | undefined;
+    get text(): string;
+    reset(): void;
+}

package/dist/non-layer.mjs

@@ -0,0 +1,53 @@
+import findNativeCSSRuleIndex from './utils/find-native-css-rule-index.mjs';
+
+class NonLayer {
+    css;
+    rules = [];
+    tokenCounts = new Map();
+    constructor(css){
+        this.css = css;
+    }
+    insert(rule) {
+        if (this.rules.includes(rule)) return;
+        const sheet = this.css.style?.sheet;
+        if (sheet) {
+            try {
+                const insertedIndex = sheet.insertRule(rule.text, sheet.cssRules.length);
+                rule.native = sheet.cssRules[insertedIndex];
+            } catch (error) {
+                console.error(error);
+            }
+        }
+        this.rules.push(rule);
+        this.css.rules.push(rule);
+    }
+    delete(name) {
+        const rule = this.rules.find((rule)=>rule.name === name);
+        if (!rule) return;
+        const sheet = this.css.style?.sheet;
+        if (sheet) {
+            const foundIndex = findNativeCSSRuleIndex(sheet.cssRules, rule.native);
+            if (foundIndex !== -1) {
+                sheet.deleteRule(foundIndex);
+            }
+        }
+        this.rules.splice(this.rules.indexOf(rule), 1);
+        this.css.rules.splice(this.css.rules.indexOf(rule), 1);
+        return rule;
+    }
+    get text() {
+        return this.rules.map(({ text })=>text).join('');
+    }
+    reset() {
+        for (const rule of this.rules){
+            const foundIndex = this.css.rules.indexOf(rule);
+            if (foundIndex !== -1) {
+                this.css.rules.splice(foundIndex, 1);
+            }
+        }
+        this.rules.length = 0;
+        this.tokenCounts.clear();
+    }
+}
+
+export { NonLayer as default };

package/dist/rule.d.ts

@@ -0,0 +1,7 @@
+export declare class Rule {
+    readonly name: string;
+    readonly text: string;
+    native?: CSSRule;
+    constructor(name: string, text: string);
+    get key(): string;
+}

package/dist/rule.mjs

@@ -0,0 +1,14 @@
+class Rule {
+    name;
+    text;
+    native;
+    constructor(name, text){
+        this.name = name;
+        this.text = text;
+    }
+    get key() {
+        return this.name;
+    }
+}
+
+export { Rule };

package/dist/theme-layer.d.ts

@@ -0,0 +1,21 @@
+import MasterCSS from './core';
+import Layer from './layer';
+import VariableRule, { VariableRuleNode } from './variable-rule';
+export interface VariableRuleBucket {
+    mediaText: string;
+    selectorText: string;
+    order: number;
+    nodes: VariableRuleNode[];
+}
+export default class ThemeLayer extends Layer {
+    name: string;
+    css: MasterCSS;
+    readonly rules: VariableRule[];
+    constructor(name: string, css: MasterCSS);
+    protected getBucketRank(bucket: Pick<VariableRuleBucket, 'mediaText' | 'selectorText'>): 0 | 1 | 2;
+    protected compareBuckets(a: VariableRuleBucket, b: VariableRuleBucket): number;
+    protected shouldInsertBucketBefore(bucket: Pick<VariableRuleBucket, 'mediaText' | 'selectorText'>, existingBucket: Pick<VariableRuleBucket, 'mediaText' | 'selectorText'>): boolean;
+    getBuckets(): VariableRuleBucket[];
+    getBucketText(bucket: VariableRuleBucket): string;
+    get text(): string;
+}

package/dist/theme-layer.mjs

@@ -0,0 +1,52 @@
+import Layer from './layer.mjs';
+
+class ThemeLayer extends Layer {
+    name;
+    css;
+    rules = [];
+    constructor(name, css){
+        super(name, css), this.name = name, this.css = css;
+    }
+    getBucketRank(bucket) {
+        if (bucket.mediaText) return 2;
+        const selectors = bucket.selectorText.split(',').map((selector)=>selector.trim());
+        return selectors.includes(':root') || selectors.includes(':host') ? 0 : 1;
+    }
+    compareBuckets(a, b) {
+        return this.getBucketRank(a) - this.getBucketRank(b) || a.order - b.order;
+    }
+    shouldInsertBucketBefore(bucket, existingBucket) {
+        return this.getBucketRank(bucket) < this.getBucketRank(existingBucket);
+    }
+    getBuckets() {
+        const buckets = new Map();
+        for (const rule of this.rules){
+            for (const node of rule.nodes){
+                const key = node.mediaText + '\n' + node.selectorText;
+                let bucket = buckets.get(key);
+                if (!bucket) {
+                    bucket = {
+                        mediaText: node.mediaText,
+                        selectorText: node.selectorText,
+                        order: buckets.size,
+                        nodes: []
+                    };
+                    buckets.set(key, bucket);
+                }
+                bucket.nodes.push(node);
+            }
+        }
+        return Array.from(buckets.values()).sort((a, b)=>this.compareBuckets(a, b));
+    }
+    getBucketText(bucket) {
+        const text = `${bucket.selectorText}{${bucket.nodes.map(({ declarationText })=>declarationText).join(';')}}`;
+        return bucket.mediaText ? `${bucket.mediaText}{${text}}` : text;
+    }
+    get text() {
+        const ruleText = this.getBuckets().map((bucket)=>this.getBucketText(bucket)).join('');
+        if (!ruleText) return '';
+        return '@layer ' + this.name + '{' + ruleText + '}';
+    }
+}
+
+export { ThemeLayer as default };

package/dist/utility-layer.d.ts

@@ -0,0 +1,10 @@
+import Layer from './layer';
+import { Rule } from './rule';
+import { Utility } from './utility';
+export default class UtilityLayer extends Layer {
+    rules: (Utility | Rule)[];
+    insert(utility: Utility | Rule): number | undefined;
+    delete(key: string): Rule | Utility | undefined;
+    insertVariables(utility: Utility | Rule): void;
+    insertAnimations(utility: Utility | Rule): void;
+}

package/dist/utility-layer.mjs

@@ -0,0 +1,118 @@
+import AnimationRule from './animation-rule.mjs';
+import Layer from './layer.mjs';
+import { Utility } from './utility.mjs';
+import compareRulePriority from './utils/compare-rule-priority.mjs';
+import VariableRule from './variable-rule.mjs';
+
+function findUtilityInsertIndex(rules, utility) {
+    let low = 0;
+    let high = rules.length;
+    while(low < high){
+        const mid = low + high >> 1;
+        const rule = rules[mid];
+        if (!(rule instanceof Utility)) {
+            return findUtilityInsertIndexLinear(rules, utility);
+        }
+        if (compareRulePriority(utility, rule) < 0) {
+            high = mid;
+        } else {
+            low = mid + 1;
+        }
+    }
+    return low;
+}
+function findUtilityInsertIndexLinear(rules, utility) {
+    for(let i = 0; i < rules.length; i++){
+        const rule = rules[i];
+        if (!(rule instanceof Utility)) continue;
+        if (compareRulePriority(utility, rule) < 0) {
+            return i;
+        }
+    }
+    return rules.length;
+}
+class UtilityLayer extends Layer {
+    rules = [];
+    insert(utility) {
+        if (this.get(utility.key)) return;
+        if ('valid' in utility && !utility.valid) return;
+        let index = this.rules.length;
+        if (utility instanceof Utility) {
+            index = findUtilityInsertIndex(this.rules, utility);
+        }
+        const insertedIndex = super.insert(utility, index);
+        if (insertedIndex === undefined) return;
+        this.insertVariables(utility);
+        this.insertAnimations(utility);
+        return insertedIndex;
+    }
+    delete(key) {
+        const utility = super.delete(key);
+        if (!utility) return;
+        const deleteLayerToken = (layerToken, layer, visited = new Set())=>{
+            if (visited.has(layerToken)) return;
+            visited.add(layerToken);
+            const count = layer.tokenCounts.get(layerToken) ?? 0;
+            const variable = layer === this.css.themeLayer ? this.css.variables.get(layerToken) : undefined;
+            if (count <= 1) {
+                const deletedRule = layer.delete(layerToken);
+                layer.tokenCounts.delete(layerToken);
+                variable?.dependencies?.forEach((dependency)=>deleteLayerToken(dependency, layer, visited));
+                return deletedRule;
+            } else {
+                layer.tokenCounts.set(layerToken, count - 1);
+                variable?.dependencies?.forEach((dependency)=>deleteLayerToken(dependency, layer, visited));
+            }
+        };
+        if ('variableNames' in utility) utility.variableNames?.forEach((eachVariableName)=>{
+            deleteLayerToken(eachVariableName, this.css.themeLayer);
+        });
+        if ('animationNames' in utility) utility.animationNames?.forEach((eachAnimationName)=>{
+            const deletedAnimationRule = deleteLayerToken(eachAnimationName, this.css.animationsNonLayer);
+            const variableNames = deletedAnimationRule && 'variableNames' in deletedAnimationRule ? deletedAnimationRule.variableNames : undefined;
+            if (variableNames) {
+                variableNames.forEach((eachVariableName)=>{
+                    deleteLayerToken(eachVariableName, this.css.themeLayer);
+                });
+            }
+        });
+        return utility;
+    }
+    insertVariables(utility) {
+        if (!('variableNames' in utility)) return;
+        const insertVariable = (eachVariableName, visited = new Set())=>{
+            if (visited.has(eachVariableName)) return;
+            visited.add(eachVariableName);
+            const variable = this.css.variables.get(eachVariableName);
+            if (!variable || variable.inline) return;
+            if (this.css.themeLayer.rules.find(({ name })=>name === eachVariableName) || this.css.isEmittedGlobalsVariable(eachVariableName)) {
+                const count = this.css.themeLayer.tokenCounts.get(eachVariableName) || 0;
+                this.css.themeLayer.tokenCounts.set(eachVariableName, count + 1);
+            } else {
+                const newRule = new VariableRule(eachVariableName, variable, this.css);
+                this.css.themeLayer.insert(newRule);
+                this.css.themeLayer.tokenCounts.set(eachVariableName, 1);
+            }
+            variable.dependencies?.forEach((dependency)=>insertVariable(dependency, visited));
+        };
+        utility.variableNames?.forEach((eachVariableName)=>insertVariable(eachVariableName));
+    }
+    insertAnimations(utility) {
+        if (!('animationNames' in utility)) return;
+        utility.animationNames?.forEach((eachAnimationName)=>{
+            if (this.css.animationsNonLayer.rules.find(({ name })=>name === eachAnimationName) || this.css.isEmittedGlobalsAnimation(eachAnimationName)) {
+                const count = this.css.animationsNonLayer.tokenCounts.get(eachAnimationName) || 0;
+                this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, count + 1);
+            } else {
+                const keyframes = this.css.animations.get(eachAnimationName);
+                if (!keyframes) return;
+                const newRule = new AnimationRule(eachAnimationName, keyframes, this.css);
+                this.css.animationsNonLayer.insert(newRule);
+                this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, 1);
+                this.insertVariables(newRule);
+            }
+        });
+    }
+}
+
+export { UtilityLayer as default };