@ng-native/fabric 0.3.0 → 0.4.0

package/dist/css.js

@@ -6,6 +6,7 @@
  * framework-agnostic and knows nothing about Angular.
  */
 import { mixChannels, mixColours, } from "./color-mix.js";
+import { ELEMENT_STYLES } from "./element-styles.js";
 import { relativeColour } from "./relative-colour.js";
 /** A run of CSS whitespace: spaces, tabs, newlines, carriage returns and form feeds, and no other. */
 export const CSS_SPACE = /[ \t\n\r\f]+/;
@@ -57,7 +58,15 @@ const INHERITED = new Set([
     'textShadowRadius',
     'textShadowColor',
     'selectable',
+    // CSS inherits it, and its `none` is the element alone: a descendant's `auto` takes touches
+    // again. The engine commits a computed `none` as native's `box-none`, which means that.
+    'pointerEvents',
 ]);
+/**
+ * The `pointer-events` values CSS has. Native's own `box-none` and `box-only` say what their
+ * children do already, so neither is handed down.
+ */
+const INHERITED_POINTER_EVENTS = new Set(['none', 'auto']);
 /**
  * `border-style: none`, which the compiler writes as a style native does not have. On the web it
  * makes every border width 0, whichever rule set the width, so `border-hidden border-x` draws no
@@ -353,6 +362,44 @@ function carryDeferred(deferred, rule) {
         (kept ??= []).push(...rule.deferred);
     return kept;
 }
+const NO_DECLARATIONS = Object.freeze({});
+const pick = (from, names) => Object.fromEntries(names.map((name) => [name, from[name]]));
+const isImportant = (rule) => rule.important !== undefined ||
+    rule.importantTokens !== undefined ||
+    rule.deferred?.some((one) => one.important) === true;
+/**
+ * The matched rules in the order their declarations apply, weakest first.
+ *
+ * That is the order they matched in, unless a layered rule is important. Layers turn round for
+ * `!important`: an important declaration in a layer beats one in a later layer, and both beat one
+ * in no layer. So each such rule is split, its plain declarations where it matched, and its
+ * important ones after every plain one, in the layers' order reversed.
+ */
+function byImportance(matched, places) {
+    if (!matched.some((rule) => rule.layer !== undefined && isImportant(rule)))
+        return matched;
+    const plain = matched.map((rule) => isImportant(rule)
+        ? {
+            ...rule,
+            important: undefined,
+            importantTokens: undefined,
+            deferred: rule.deferred?.filter((one) => !one.important),
+        }
+        : rule);
+    const important = matched
+        .filter(isImportant)
+        // Stable, so rules of one layer keep the order their specificity gave them. Sorted before
+        // they are copied, since a rule's place is kept by the rule itself.
+        .sort((a, b) => layerOrder(places.get(b), places.get(a)))
+        .map((rule) => ({
+        ...rule,
+        declarations: NO_DECLARATIONS,
+        // Its important custom properties alone: the plain ones were applied where it matched.
+        tokens: rule.importantTokens && pick(rule.tokens, rule.importantTokens),
+        deferred: rule.deferred?.filter((one) => one.important),
+    }));
+    return [...plain, ...important];
+}
 function countPosition(node, siblings, fromEnd) {
     let position = 0;
     let seen = 0;
@@ -388,6 +435,35 @@ function lastElement(siblings) {
  * precedence people already have in their fingers rather than inventing a rule for native.
  */
 const COMPONENT_SPECIFICITY_BUMP = 1_000;
+/**
+ * Two rules' layers, weakest first: a layer before each one named after it, a layer's nested
+ * layers before its own rules, and every layered rule before a rule in no layer.
+ */
+function layerOrder(a, b) {
+    if (a === b)
+        return 0;
+    if (a === undefined)
+        return 1;
+    if (b === undefined)
+        return -1;
+    const shared = Math.min(a.length, b.length);
+    for (let depth = 0; depth < shared; depth++) {
+        if (a[depth] !== b[depth])
+            return a[depth] - b[depth];
+    }
+    // One is nested in the other, whose own rules are the stronger.
+    return b.length - a.length;
+}
+/**
+ * The engine's own styles for HTML's text elements, as rules to match before any a stylesheet
+ * holds, so every rule an author writes beats them whatever its specificity, as a browser's own
+ * sheet is beaten. Offered only to a node marked `styled`, which few are.
+ */
+const ELEMENT_ENTRIES = ELEMENT_STYLES.rules.map((rule) => ({
+    rule,
+    sheet: ELEMENT_STYLES,
+    weight: rule.specificity,
+}));
 /**
  * The bucket a rule is filed under: the most selective simple selector in its rightmost compound,
  * which is what a browser calls the key selector.
@@ -499,12 +575,82 @@ function inheritFrom(parentInherited, own) {
     for (const key of Object.keys(own)) {
         if (!INHERITED.has(key))
             continue;
+        // `pointer-events: inherit`, which only an inline style on an element no rule matches still
+        // holds here: what the parent hands down stands.
+        if (key === 'pointerEvents' && own[key] === 'inherit')
+            continue;
         if (inherited === parentInherited)
             inherited = { ...parentInherited };
-        inherited[key] = own[key];
+        if (key === 'pointerEvents' && !INHERITED_POINTER_EVENTS.has(own[key])) {
+            delete inherited[key];
+        }
+        else {
+            inherited[key] = own[key];
+        }
     }
     return inherited;
 }
+/**
+ * A text decoration's colour, which travels with its line rather than inheriting on its own. A
+ * decoration is drawn under the text inside the element that declares it, in that element's
+ * decoration colour or its text colour, and a text's own decoration colour only colours a line it
+ * declares itself. `style` is the node's, and gets the colour its line is drawn in; what its
+ * children inherit is returned.
+ */
+function decorate(style, inherited, own) {
+    const declared = own['textDecorationLine'] !== undefined;
+    // With no line declared here or above, nothing is drawn and the colour is left as computed.
+    if (!declared && !drawsLine(inherited['textDecorationLine']))
+        return inherited;
+    const colour = declared
+        ? (own['textDecorationColor'] ?? style['color'])
+        : inherited['textDecorationColor'];
+    if (colour === undefined)
+        delete style['textDecorationColor'];
+    else
+        style['textDecorationColor'] = colour;
+    if (!declared || inherited['textDecorationColor'] === colour)
+        return inherited;
+    const { textDecorationColor: _parent, ...rest } = inherited;
+    return colour === undefined ? rest : { ...rest, textDecorationColor: colour };
+}
+function drawsLine(line) {
+    return line !== undefined && line !== 'none';
+}
+/** Whether an inline style sets a property children inherit. Allocates nothing: it runs per set. */
+export function setsInherited(style) {
+    if (!style || typeof style !== 'object')
+        return false;
+    if (Array.isArray(style))
+        return style.some(setsInherited);
+    for (const key in style) {
+        if (INHERITED.has(key) && style[key] != null)
+            return true;
+    }
+    return false;
+}
+/**
+ * The inherited properties a node's inline style sets, or null for none. Inline style is the
+ * strongest normal declaration on its element, so what it sets is inherited, and read by
+ * `color: inherit` and `currentColor`, as a rule's would be.
+ */
+export function inlineInherited(style) {
+    let out = null;
+    // Flattened first, as native applies it, so a later entry's null clears an earlier value.
+    for (const [key, value] of Object.entries(flattenInline(style, {}))) {
+        if (INHERITED.has(key) && value !== undefined && value !== null)
+            (out ??= {})[key] = value;
+    }
+    return out;
+}
+function flattenInline(style, into) {
+    if (Array.isArray(style))
+        for (const entry of style)
+            flattenInline(entry, into);
+    else if (style && typeof style === 'object')
+        Object.assign(into, style);
+    return into;
+}
 /**
  * The runtime half of CSS for one engine: the global sheet, the conditions media queries are
  * evaluated against, and the memo that makes resolution cost nodes x rules rather than
@@ -542,6 +688,21 @@ export class StyleResolver {
      * single index.
      */
     merged = new WeakMap();
+    /**
+     * Whether any sheet merged so far has a rule in a cascade layer. Until one does, rules are
+     * ordered by weight alone and the cascade does not look for layers, which is nearly every app.
+     * It stays set once a layered sheet has gone, which costs a look at each cascade and no more.
+     */
+    layered = false;
+    /**
+     * Every layer the sheets seen so far have named, in the order each name was first seen, which
+     * is the one order a document has for them. A name keeps its place when its sheet is replaced.
+     */
+    layerNames = { place: 0, nested: new Map() };
+    /** Each layered rule's place among them, set when its sheet is first merged. */
+    layerPlaces = new WeakMap();
+    layeredSheets = new WeakSet();
+    unnamedLayers = 0;
     /**
      * The application-level sheet, if any: the one set of rules allowed to match a node whatever
      * component created it, which is what resets, utility classes and `:root` tokens all need.
@@ -641,11 +802,13 @@ export class StyleResolver {
             return cached;
         }
         const parentInherited = parent ? parent.inherited : EMPTY;
-        if (this.hasNoRules(node)) {
+        // A box the engine made around loose text is in no template, so no rule matches it.
+        if (node.anonymous || this.hasNoRules(node)) {
             return this.unstyled(node, epoch, parent, parentContext, parentInherited);
         }
         styleStats.nodesResolved++;
-        const matched = this.matched(node, this.rulesFor(node));
+        const candidates = this.rulesFor(node);
+        const matched = this.matched(node, node.styled ? ELEMENT_ENTRIES.concat(candidates) : candidates);
         const parentTokens = parent ? parent.tokens : this.tokensOnRoot;
         const styled = this.styled(node, matched, parentTokens, parentInherited);
         const cache = {
@@ -685,7 +848,9 @@ export class StyleResolver {
             node.hostSheet === null &&
             this.globalSheet === null &&
             this.addedSheets.length === 0 &&
-            !node.customProperties);
+            !node.customProperties &&
+            !node.boundStyle &&
+            !node.styled);
     }
     /**
      * A node with no rules anywhere: it renders with what it inherits and passes the same map on.
@@ -698,7 +863,10 @@ export class StyleResolver {
      */
     unstyled(node, epoch, parent, parentContext, parentInherited) {
         const tokens = parent ? parent.tokens : this.tokensOnRoot;
-        if (parentInherited === EMPTY &&
+        // What inline style sets is inherited too, with no rule to read it against.
+        const inline = node.inlineInherits ? inlineInherited(node.props['style']) : null;
+        if (!inline &&
+            parentInherited === EMPTY &&
             parentContext === ROOT_CONTEXT &&
             tokens === NO_TOKENS &&
             !node.styleDirty) {
@@ -714,7 +882,7 @@ export class StyleResolver {
             context: {},
             parentContext,
             style: parentInherited,
-            inherited: parentInherited,
+            inherited: inline ? inheritFrom(parentInherited, inline) : parentInherited,
             tokens,
         };
         node.styleCache = passthrough;
@@ -756,6 +924,7 @@ export class StyleResolver {
         const add = (from, bump) => {
             if (!from)
                 return;
+            this.placeLayers(from);
             for (const rule of from.rules) {
                 entries.push({ rule, sheet: from, weight: rule.specificity + bump });
             }
@@ -765,7 +934,41 @@ export class StyleResolver {
         add(sheet, COMPONENT_SPECIFICITY_BUMP);
         for (const added of this.addedSheets)
             add(added, 0);
-        return entries.sort((a, b) => a.weight - b.weight);
+        if (!entries.some((entry) => entry.rule.layer !== undefined)) {
+            return entries.sort((a, b) => a.weight - b.weight);
+        }
+        this.layered = true;
+        const places = this.layerPlaces;
+        return entries.sort((a, b) => layerOrder(places.get(a.rule), places.get(b.rule)) || a.weight - b.weight);
+    }
+    /**
+     * Gives each of a sheet's layers its place among every sheet's, the first time the sheet is
+     * merged, and each of its layered rules that place. Sheets are merged in the order a document
+     * holds them: the app's global sheet, then each component's as it first renders.
+     */
+    placeLayers(sheet) {
+        if (!sheet.layers || this.layeredSheets.has(sheet))
+            return;
+        this.layeredSheets.add(sheet);
+        // A block with no name is a layer of this sheet's alone.
+        const unnamed = `\0${this.unnamedLayers++}`;
+        const places = sheet.layers.map((path) => {
+            const place = [];
+            let names = this.layerNames;
+            for (const part of path) {
+                const name = part.startsWith('\0') ? unnamed + part : part;
+                let nested = names.nested.get(name);
+                if (!nested)
+                    names.nested.set(name, (nested = { place: names.nested.size, nested: new Map() }));
+                place.push(nested.place);
+                names = nested;
+            }
+            return place;
+        });
+        for (const rule of sheet.rules) {
+            if (rule.layer !== undefined)
+                this.layerPlaces.set(rule, places[rule.layer]);
+        }
     }
     /**
      * A node's style from the rules it matched, shared with every other node that matched the same
@@ -777,8 +980,11 @@ export class StyleResolver {
      * written to after, so sharing it is safe; each node still has a cache and a context of its own.
      */
     styled(node, matched, parentTokens, parentInherited) {
-        if (node.customProperties)
-            return this.style(node, matched, parentTokens, parentInherited);
+        // Shared between nodes that match alike, unless the node sets something of its own.
+        const inline = node.inlineInherits ? inlineInherited(node.props['style']) : null;
+        if (node.customProperties || inline || node.boundStyle) {
+            return this.style(node, matched, parentTokens, parentInherited, inline);
+        }
         if (this.sharedGeneration !== this.generation) {
             this.shared.clear();
             this.sharedGeneration = this.generation;
@@ -808,8 +1014,15 @@ export class StyleResolver {
         return id;
     }
     /** A node's style from the rules it matched, worked out. */
-    style(node, matched, parentTokens, parentInherited) {
-        const result = this.cascade(matched);
+    style(node, matched, parentTokens, parentInherited, inline = null) {
+        // Inline style is the last normal declaration, under every important one.
+        const bound = node.boundStyle;
+        const result = this.cascade(inline || bound
+            ? [
+                ...matched,
+                { declarations: inline ?? EMPTY, ...(bound && { deferred: bound }) },
+            ]
+            : matched);
         // Tokens are in scope for this node's own declarations as well as its descendants', so they
         // are merged before any `var()` here is resolved.
         const tokens = tokensInScope(parentTokens, result.tokens, node.customProperties);
@@ -819,11 +1032,11 @@ export class StyleResolver {
         }
         if (own['borderStyle'] === 'none')
             drawNoBorder(own);
-        return {
-            style: { ...parentInherited, ...own },
-            inherited: inheritFrom(parentInherited, own),
-            tokens,
-        };
+        // `pointer-events: inherit` won the cascade: what the parent hands down stands.
+        if (own['pointerEvents'] === 'inherit')
+            delete own['pointerEvents'];
+        const style = { ...parentInherited, ...own };
+        return { style, inherited: decorate(style, inheritFrom(parentInherited, own), own), tokens };
     }
     /** The rules that apply to a node, weakest first. */
     matched(node, entries) {
@@ -840,8 +1053,9 @@ export class StyleResolver {
         const important = {};
         let hasImportant = false;
         let tokens = null;
+        let importantTokens = null;
         let deferred = null;
-        for (const rule of matched) {
+        for (const rule of this.layered ? byImportance(matched, this.layerPlaces) : matched) {
             Object.assign(normal, rule.declarations);
             if (rule.important) {
                 Object.assign(important, rule.important);
@@ -849,8 +1063,14 @@ export class StyleResolver {
             }
             if (rule.tokens)
                 Object.assign((tokens ??= {}), rule.tokens);
+            // An important custom property beats every plain one, whatever the rules' order.
+            if (rule.importantTokens) {
+                Object.assign((importantTokens ??= {}), pick(rule.tokens, rule.importantTokens));
+            }
             deferred = carryDeferred(deferred, rule);
         }
+        if (importantTokens)
+            Object.assign(tokens, importantTokens);
         return {
             declarations: hasImportant ? { ...normal, ...important } : normal,
             important: hasImportant ? important : null,
@@ -969,6 +1189,14 @@ export class StyleResolver {
         const values = lineValues(line, tokens);
         if (!values)
             return undefined;
+        if (line.colour !== undefined) {
+            // A colour that cannot be worked out makes the whole line invalid, as an unset token does.
+            const colour = this.settledWithin(line.colour, declaration, own, parentInherited, tokens);
+            if (colour === undefined)
+                return undefined;
+            for (const prop of line.colors)
+                values[prop] = colour;
+        }
         // `currentcolor` is the colour in scope, which only the node knows.
         if (values[line.colors[0]] === 'currentcolor') {
             const colour = own['color'] ?? parentInherited['color'] ?? 'black';
@@ -993,7 +1221,7 @@ export class StyleResolver {
             return;
         if (declaration.alternatives?.some((alternative) => alternative in tokens))
             return;
-        this.onUndefinedToken(name, declaration.props);
+        this.onUndefinedToken(name, declaration.props, declaration.on);
     }
     /** A display token set to a value native has no display for. */
     reportDisplay(declaration, tokens) {
@@ -1022,13 +1250,15 @@ export class StyleResolver {
         const fill = (part) => this.filledIn(part, declaration, own, parentInherited, tokens);
         if (Array.isArray(value))
             return this.filledList(value, fill, tokens);
-        const marked = settledMarker(value, tokens);
         // `currentcolor` is the colour in scope, which only the node knows: Tailwind's ring default.
         // On `color` itself that is the inherited colour, as CSS reads it.
-        if (marked === 'currentcolor') {
+        const current = () => {
             const ownColour = declaration.props.includes('color') ? undefined : own['color'];
-            return ownColour ?? parentInherited['color'] ?? 'black';
-        }
+            return (ownColour ?? parentInherited['color'] ?? 'black');
+        };
+        const marked = settledMarker(value, tokens, current);
+        if (marked === 'currentcolor')
+            return current();
         if (marked !== NOT_A_MARKER)
             return marked ?? UNSETTLED;
         const pending = value.__defer;
@@ -1531,6 +1761,75 @@ function tokenForm(token, kind) {
     const value = formOf(token, kind);
     return value === undefined && kind === 'color' && isCurrentColour(token) ? CURRENT_COLOUR : value;
 }
+const BOUND_NUMBERS = new Set([
+    'opacity',
+    'flex',
+    'flexGrow',
+    'flexShrink',
+    'zIndex',
+    'aspectRatio',
+    'elevation',
+]);
+const BOUND_LENGTH = /^(?:(?:min|max)?(?:width|height)|top|right|bottom|left|start|end|gap|fontSize|letterSpacing)$|(?:margin|padding|inset|Width|Radius|Gap|Basis)/i;
+/** The properties whose token is read in a form of its own. */
+const BOUND_KINDS = {
+    display: 'display',
+    transform: 'transform',
+    boxShadow: 'shadow',
+    filter: 'filter',
+};
+/** What a token is read as for a bound declaration of `prop`, as the compiler says for a rule. */
+function boundKind(prop) {
+    // `fill` and `stroke` are a shape's paint, which is a colour.
+    if (/color$/i.test(prop) || prop === 'fill' || prop === 'stroke')
+        return 'color';
+    if (prop === 'fontWeight')
+        return 'weight';
+    if (prop === 'fontFamily')
+        return 'family';
+    if (prop === 'lineHeight')
+        return 'lineHeight';
+    if (prop in BOUND_KINDS)
+        return BOUND_KINDS[prop];
+    if (BOUND_NUMBERS.has(prop))
+        return 'number';
+    return BOUND_LENGTH.test(prop) ? 'length' : 'keyword';
+}
+/**
+ * A bound declaration whose value is one `var()`, `var(--brand, red)`, as the deferred declaration
+ * the compiler writes for the same value in a rule. `token` is the value as a token, which is an
+ * alias when it is a `var()`; null for any other.
+ *
+ * ponytail: the whole value has to be the `var()`. One inside a longer value, `calc()` included,
+ * is what the compiler parses at build time and nothing here does; write the sum in a custom
+ * property, `[style.--gap]`, and read that in the stylesheet.
+ */
+export function boundDeclaration(prop, token, on) {
+    if (!token?.alias)
+        return null;
+    const kind = boundKind(prop);
+    const [reference, ...alternatives] = aliasesOf(token);
+    for (; token?.alias; token = token.fallback)
+        ;
+    // `tokenForm`, so a fallback of `currentColor` is the colour of the element, as in a rule.
+    const fallback = token && !isDerived(token) ? tokenForm(token, kind) : undefined;
+    return {
+        props: [prop],
+        ...(on === undefined ? {} : { on }),
+        kind,
+        reference: reference,
+        ...(alternatives.length ? { alternatives } : {}),
+        ...(fallback !== undefined ? { fallback } : {}),
+        ...(token && isDerived(token) ? { fallbackToken: token } : {}),
+    };
+}
+/** The names a `var()` tries in turn: its own, then each `var()` nested as its fallback. */
+function aliasesOf(token) {
+    const names = [];
+    for (; token?.alias; token = token.fallback)
+        names.push(token.alias);
+    return names;
+}
 /** The fallback written, or one made of other tokens, worked out from the tokens where it is used. */
 function fallbackOf(declaration, tokens) {
     const token = declaration.fallbackToken;
@@ -1744,8 +2043,11 @@ function placed(position, tokens) {
 /**
  * A colour expression with its tokens looked up and any mix in it worked out. Undefined when a
  * token it needs is not defined anywhere and has nothing to fall back to.
+ *
+ * `current` is the node's colour, for a `currentColor` inside a mix or a relative colour. One that
+ * is the whole expression is answered as `currentcolor`, for the caller to fill in.
  */
-function resolveColour(expression, tokens) {
+function resolveColour(expression, tokens, current) {
     if ('color' in expression)
         return expression.color;
     if ('channels' in expression)
@@ -1756,15 +2058,27 @@ function resolveColour(expression, tokens) {
         return tokenColour(expression, tokens);
     if ('relative' in expression) {
         const { space, from, channels, alpha } = expression.relative;
-        const origin = resolveColour(from, tokens);
+        const origin = innerColour(from, tokens, current);
         return origin === undefined ? undefined : relativeColour(space, origin, channels, alpha);
     }
-    const sides = mixSides(expression.mix, tokens);
+    const sides = mixSides(expression.mix, tokens, current);
     return sides && mixColours(expression.mix.space, ...sides, expression.mix.hue);
 }
+/** A colour inside another: `currentColor` there, written or in a token, is the node's colour. */
+function innerColour(expression, tokens, current) {
+    if (!current)
+        return resolveColour(expression, tokens);
+    if ('reference' in expression) {
+        const names = [expression.reference, ...(expression.alternatives ?? [])];
+        if (isCurrentColour(firstSet(names, tokens)))
+            return current();
+    }
+    const colour = resolveColour(expression, tokens, current);
+    return colour?.toLowerCase() === 'currentcolor' ? current() : colour;
+}
 /** A mix's two sides, a mix inside it unrounded, as CSS rounds only the colour at the end. */
-function mixSides(mix, tokens) {
-    const colour = (side) => 'mix' in side ? unroundedMix(side.mix, tokens) : resolveColour(side, tokens);
+function mixSides(mix, tokens, current) {
+    const colour = (side) => 'mix' in side ? unroundedMix(side.mix, tokens, current) : innerColour(side, tokens, current);
     const first = colour(mix.a);
     const second = colour(mix.b);
     if (first === undefined || second === undefined)
@@ -1774,8 +2088,8 @@ function mixSides(mix, tokens) {
         { colour: second, percentage: mix.bPercentage },
     ];
 }
-function unroundedMix(mix, tokens) {
-    const sides = mixSides(mix, tokens);
+function unroundedMix(mix, tokens, current) {
+    const sides = mixSides(mix, tokens, current);
     return sides && mixChannels(mix.space, ...sides, mix.hue);
 }
 /** A calc marker worked out, as its slot takes it; undefined when a token in it is not set. */
@@ -1951,10 +2265,10 @@ const NEEDS_FILLING = new WeakMap();
 /** What `settledMarker` says of a part that is not a token's marker at all. */
 const NOT_A_MARKER = Symbol('not a marker');
 /** A colour, length or calc marker settled from the tokens, or undefined when one cannot be. */
-function settledMarker(value, tokens) {
+function settledMarker(value, tokens, current) {
     const colour = colourMarker(value);
     if (colour)
-        return resolveColour(colour, tokens);
+        return resolveColour(colour, tokens, current);
     // Whether a shadow is inset, from a token that is the word or nothing: `ring-inset`.
     const inset = value.__inset;
     if (inset)