@ng-native/fabric 0.4.0 → 0.5.0

package/dist/css.js

@@ -89,6 +89,80 @@ function drawNoBorder(own) {
  * The cost is one integer increment per comparison, against a Set lookup and several property
  * reads, so it does not distort what it measures.
  */
+/**
+ * What a sheet asks about a pressed element. `own` is whether a rule styles one, `.button:active`,
+ * which matching the pressed elements again answers. `elsewhere` is each compound that asks about
+ * a pressed element from another one: `.card:active .title`, `.a:active + .b`, or `:active`
+ * inside `:not()`, `:is()` or `:has()`. An element such a compound could be is restyled with
+ * everything under it when it is pressed, as what it changes is not itself alone.
+ */
+export function usesActive(sheet) {
+    const known = ACTIVE_USE.get(sheet);
+    if (known)
+        return known;
+    let own = false;
+    const elsewhere = [];
+    for (const rule of sheet.rules) {
+        rule.compounds.forEach((compound, at) => {
+            const subject = at === rule.compounds.length - 1;
+            // Asked of the element itself, on the compound or in its `:is()` and `:not()`: the
+            // subject's is its own, and any other compound's is of the element that compound is.
+            if (activeItself(compound, elsewhere)) {
+                if (subject)
+                    own = true;
+                else
+                    elsewhere.push(compound);
+            }
+            activeAround(compound, elsewhere);
+        });
+    }
+    const use = { own, elsewhere };
+    ACTIVE_USE.set(sheet, use);
+    return use;
+}
+const isActive = (compound) => compound.pseudo?.includes('active') === true;
+/**
+ * Whether a compound asks about the pressed state of the element it matches: on itself, in a
+ * `:not()`, or as the last compound of an `:is()` argument. The compounds before the last in
+ * such an argument are other elements, and are collected as they are.
+ */
+function activeItself(compound, elsewhere) {
+    let itself = isActive(compound);
+    for (const inner of compound.not ?? []) {
+        if (activeItself(inner, elsewhere))
+            itself = true;
+        activeAround(inner, elsewhere);
+    }
+    for (const chain of compound.is ?? []) {
+        chain.forEach((inner, at) => {
+            const asked = activeItself(inner, elsewhere);
+            if (asked && at === chain.length - 1)
+                itself = true;
+            else if (asked)
+                elsewhere.push(inner);
+            activeAround(inner, elsewhere);
+        });
+    }
+    return itself;
+}
+/** Each compound that asks about a pressed element around the one a compound matches. */
+function activeAround(compound, elsewhere) {
+    const collect = (value) => {
+        if (!value || typeof value !== 'object')
+            return;
+        if (Array.isArray(value))
+            return value.forEach(collect);
+        if (isActive(value))
+            elsewhere.push(value);
+        for (const inside of Object.values(value))
+            collect(inside);
+    };
+    for (const [key, inside] of Object.entries(compound)) {
+        if (key !== 'is' && key !== 'not' && key !== 'pseudo')
+            collect(inside);
+    }
+}
+const ACTIVE_USE = new WeakMap();
 export const styleStats = {
     /** Calls to `matchesCompound`, the innermost unit of matching work. */
     compoundTests: 0,
@@ -190,6 +264,21 @@ function matchesCompound(node, compound, sheet) {
                 return false;
         }
     }
+    if (compound.has) {
+        for (const test of compound.has) {
+            if (!hasBeneath(node, test, sheet))
+                return false;
+        }
+    }
+    if (compound.parents) {
+        const parent = node.parent;
+        if (!parent)
+            return false;
+        for (const above of compound.parents) {
+            if (!matchesCompound(parent, above, sheet))
+                return false;
+        }
+    }
     if (compound.ancestors) {
         for (const ancestor of compound.ancestors) {
             let found = false;
@@ -212,6 +301,18 @@ function matchesCompound(node, compound, sheet) {
     }
     return true;
 }
+/** Whether some element beneath `node`, or some child of it for `:has(> x)`, matches the test. */
+function hasBeneath(node, test, sheet) {
+    for (const child of node.children ?? []) {
+        if (child.kind !== undefined && child.kind !== 'element')
+            continue;
+        if (test.any.some((option) => matchesCompound(child, option, sheet)))
+            return true;
+        if (!test.child && hasBeneath(child, test, sheet))
+            return true;
+    }
+    return false;
+}
 /**
  * Right-to-left matching, as every CSS engine does it: the rightmost compound is the cheapest
  * filter and rejects almost everything immediately.
@@ -341,6 +442,133 @@ function overriddenBy(deferred, declarations, important) {
     }
     return kept.length ? kept : null;
 }
+/**
+ * The logical property and the physical one for the same corner or edge, left to right. CSS
+ * settles the two as one property, the later declaration winning. A native view has a prop for
+ * each and takes one whatever their order: React Native the physical corner, Yoga the logical
+ * edge. So a declaration of either takes the other out of the cascade.
+ */
+const SIDES_LTR = [
+    ['borderStartStartRadius', 'borderTopLeftRadius'],
+    ['borderStartEndRadius', 'borderTopRightRadius'],
+    ['borderEndStartRadius', 'borderBottomLeftRadius'],
+    ['borderEndEndRadius', 'borderBottomRightRadius'],
+    ...['margin', 'padding'].flatMap((box) => [
+        [`${box}Start`, `${box}Left`],
+        [`${box}End`, `${box}Right`],
+    ]),
+    ...['Width', 'Color'].flatMap((part) => [
+        [`borderStart${part}`, `borderLeft${part}`],
+        [`borderEnd${part}`, `borderRight${part}`],
+    ]),
+    ['start', 'left'],
+    ['end', 'right'],
+];
+const mirrored = (physical) => physical.includes('Left') || physical === 'left'
+    ? physical.replace('Left', 'Right').replace('left', 'right')
+    : physical.replace('Right', 'Left').replace('right', 'left');
+/** Each property's other form, both ways, in a layout of each direction. */
+const twins = (pairs) => Object.fromEntries(pairs.flatMap(([logical, physical]) => [
+    [logical, physical],
+    [physical, logical],
+]));
+const TWIN = {
+    ltr: twins(SIDES_LTR),
+    rtl: twins(SIDES_LTR.map(([logical, physical]) => [logical, mirrored(physical)])),
+};
+const sidedOf = new WeakMap();
+function sided(rule) {
+    let found = sidedOf.get(rule);
+    if (found !== undefined)
+        return found;
+    const twin = TWIN.ltr;
+    const plain = Object.keys(rule.declarations).filter((key) => key in twin);
+    const important = rule.important ? Object.keys(rule.important).filter((key) => key in twin) : [];
+    for (const declaration of rule.deferred ?? []) {
+        for (const prop of declaration.props) {
+            if (prop in twin)
+                (declaration.important ? important : plain).push(prop);
+        }
+    }
+    found = plain.length || important.length ? { plain, important } : null;
+    sidedOf.set(rule, found);
+    return found;
+}
+/** Of `keys`, in the order a rule wrote them, each whose other form comes after it. */
+function writtenEarlier(keys, twin) {
+    return keys.filter((key, at) => keys.indexOf(twin[key]) > at);
+}
+/** The other form of each of `keys`, as the record `overriddenBy` reads. */
+function twinsOf(keys, twin) {
+    const out = {};
+    for (const key of keys)
+        out[twin[key]] = true;
+    return out;
+}
+/**
+ * One cascade's settling of the corners and edges set in both forms: each rule's are taken out of
+ * what the rules before it left, in the form the rule does not use.
+ */
+class OtherForms {
+    /** Worked out for the first rule that sets a corner or an edge, which most elements have none of. */
+    twin = null;
+    overImportant = null;
+    direction;
+    constructor(direction) {
+        this.direction = direction;
+    }
+    /** Before `rule` is applied: the other form of what it sets goes, as the same property would. */
+    before(rule, normal, important, deferred) {
+        const sides = sided(rule);
+        if (!sides)
+            return deferred;
+        const twin = (this.twin ??= TWIN[this.direction()]);
+        const plain = twinsOf(sides.plain, twin);
+        for (const key in plain)
+            delete normal[key];
+        let kept = deferred && overriddenBy(deferred, plain, false);
+        if (!sides.important.length)
+            return kept;
+        const gone = twinsOf(sides.important, twin);
+        for (const key in gone)
+            delete important[key];
+        kept &&= overriddenBy(kept, gone, true);
+        Object.assign((this.overImportant ??= {}), gone);
+        return kept;
+    }
+    /**
+     * Once `rule` is applied, its deferred values among `deferred`: where it wrote both forms, the
+     * one it wrote later stands, among its plain declarations and among its important ones. The
+     * order is the rule's own, sent with it, since a value settled on device is in another list.
+     */
+    within(rule, normal, important, deferred) {
+        if (!rule.sides && !rule.importantSides)
+            return deferred;
+        const twin = (this.twin ??= TWIN[this.direction()]);
+        let kept = deferred;
+        const settle = (order, into, tier) => {
+            const lost = {};
+            for (const key of writtenEarlier(order, twin)) {
+                delete into[key];
+                lost[key] = true;
+            }
+            kept &&= overriddenBy(kept, lost, tier);
+        };
+        if (rule.sides)
+            settle(rule.sides, normal, false);
+        if (rule.importantSides)
+            settle(rule.importantSides, important, true);
+        return kept;
+    }
+    /** An important one stands over the other form wherever that was set, as over its own. */
+    after(normal, deferred) {
+        if (!this.overImportant)
+            return deferred;
+        for (const key in this.overImportant)
+            delete normal[key];
+        return deferred && overriddenBy(deferred, this.overImportant, false);
+    }
+}
 /**
  * The deferred values still standing once `rule` has been applied, plus its own.
  *
@@ -801,6 +1029,9 @@ export class StyleResolver {
             cached.epoch = epoch;
             return cached;
         }
+        const kept = this.kept(node, parentContext, epoch);
+        if (kept)
+            return kept;
         const parentInherited = parent ? parent.inherited : EMPTY;
         // A box the engine made around loose text is in no template, so no rule matches it.
         if (node.anonymous || this.hasNoRules(node)) {
@@ -817,11 +1048,70 @@ export class StyleResolver {
             context: {},
             parentContext,
             ...styled,
+            ...this.record(matched),
         };
         node.styleCache = cache;
         node.styleDirty = false;
+        node.hasDirty = false;
+        node.stateDirty = false;
         return cache;
     }
+    /** The rules a node matched, for its cache to keep, while a sheet uses `:has()`. */
+    record(matched) {
+        return this.tracksHas ? { matched } : {};
+    }
+    /**
+     * Set by the engine once a sheet uses `:has()`. Until then no cache keeps the rules it matched,
+     * so an app that never asks pays nothing for it.
+     */
+    tracksHas = false;
+    /**
+     * The cache of a node whose subtree changed, and nothing else, when it matches the rules it
+     * did: keeping the object is what leaves everything under it alone. Nothing when it has to be
+     * resolved, as it does with no record of what it matched, made before any sheet asked.
+     */
+    keptBeneath(node, parentContext, epoch) {
+        const cached = node.styleCache;
+        const stands = (node.hasDirty === true || node.stateDirty === true) &&
+            cached?.matched !== undefined &&
+            !node.styleDirty &&
+            cached.parentContext === parentContext &&
+            cached.generation === this.generation;
+        if (!stands)
+            return null;
+        const candidates = this.rulesFor(node);
+        const now = this.matched(node, node.styled ? ELEMENT_ENTRIES.concat(candidates) : candidates);
+        const before = cached.matched;
+        if (now.length !== before.length || now.some((rule, i) => rule !== before[i]))
+            return null;
+        node.hasDirty = false;
+        node.stateDirty = false;
+        cached.epoch = epoch;
+        return cached;
+    }
+    /** A cache that still stands for a node marked for its subtree or its state alone. */
+    kept(node, parentContext, epoch) {
+        return (this.keptBeneath(node, parentContext, epoch) ?? this.keptUnmatched(node, parentContext, epoch));
+    }
+    /**
+     * The cache of a node whose pressed state changed and nothing else, where no rule can match
+     * it at all: it has no style of its own to change, so it and all under it stay as they are.
+     */
+    keptUnmatched(node, parentContext, epoch) {
+        const cached = node.styleCache;
+        const stands = node.stateDirty === true &&
+            cached !== null &&
+            !node.styleDirty &&
+            !node.hasDirty &&
+            cached.parentContext === parentContext &&
+            cached.generation === this.generation &&
+            (node.anonymous === true || this.hasNoRules(node));
+        if (!stands)
+            return null;
+        node.stateDirty = false;
+        cached.epoch = epoch;
+        return cached;
+    }
     /**
      * Whether a node's last answer still stands under a parent that resolved to `parentContext`,
      * without resolving it. What lets a commit step over a clean child in one comparison.
@@ -836,6 +1126,8 @@ export class StyleResolver {
     reusable(cached, node, parentContext) {
         return (cached !== null &&
             !node.styleDirty &&
+            !node.hasDirty &&
+            !node.stateDirty &&
             cached.parentContext === parentContext &&
             cached.generation === this.generation);
     }
@@ -1022,7 +1314,7 @@ export class StyleResolver {
                 ...matched,
                 { declarations: inline ?? EMPTY, ...(bound && { deferred: bound }) },
             ]
-            : matched);
+            : matched, parentInherited);
         // 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);
@@ -1048,14 +1340,16 @@ export class StyleResolver {
         return out;
     }
     /** The declarations of the rules a node matched. The list is sorted, so later simply wins. */
-    cascade(matched) {
+    cascade(matched, parentInherited) {
         const normal = {};
         const important = {};
         let hasImportant = false;
         let tokens = null;
         let importantTokens = null;
         let deferred = null;
+        const forms = new OtherForms(() => this.directionOf(matched, parentInherited));
         for (const rule of this.layered ? byImportance(matched, this.layerPlaces) : matched) {
+            deferred = forms.before(rule, normal, important, deferred);
             Object.assign(normal, rule.declarations);
             if (rule.important) {
                 Object.assign(important, rule.important);
@@ -1067,10 +1361,11 @@ export class StyleResolver {
             if (rule.importantTokens) {
                 Object.assign((importantTokens ??= {}), pick(rule.tokens, rule.importantTokens));
             }
-            deferred = carryDeferred(deferred, rule);
+            deferred = forms.within(rule, normal, important, carryDeferred(deferred, rule));
         }
         if (importantTokens)
             Object.assign(tokens, importantTokens);
+        deferred = forms.after(normal, deferred);
         return {
             declarations: hasImportant ? { ...normal, ...important } : normal,
             important: hasImportant ? important : null,
@@ -1078,6 +1373,37 @@ export class StyleResolver {
             deferred,
         };
     }
+    /**
+     * An inline style over the style the cascade settled, both already in `style`: a corner or an
+     * edge the inline style sets takes the other form of it out, as a later rule would.
+     */
+    overOtherForms(inline, style) {
+        let twin = null;
+        const written = Object.keys(inline);
+        for (const [at, key] of written.entries()) {
+            if (!(key in TWIN.ltr))
+                continue;
+            twin ??= TWIN[(style['direction'] ?? this.conditions.direction) === 'rtl' ? 'rtl' : 'ltr'];
+            const other = twin[key];
+            // Where the inline style sets both, the one it set later stands.
+            if (written.indexOf(other) < at)
+                delete style[other];
+        }
+    }
+    /**
+     * The direction an element is laid out in: the last `direction` its own rules give it, the one
+     * it inherits, or the app's. A logical corner is a different physical one in each.
+     */
+    directionOf(matched, parentInherited) {
+        let plain;
+        let important;
+        for (const rule of matched) {
+            plain = rule.declarations['direction'] ?? plain;
+            important = rule.important?.['direction'] ?? important;
+        }
+        const direction = important ?? plain ?? parentInherited['direction'] ?? this.conditions.direction;
+        return direction === 'rtl' ? 'rtl' : 'ltr';
+    }
     /**
      * Whether a rule's media query holds, memoised per rule.
      *
@@ -1115,7 +1441,9 @@ export class StyleResolver {
     }
     /** What the device answers for a feature that is a keyword rather than a measurement. */
     preference(feature) {
-        const { width, height, colorScheme, reducedMotion } = this.conditions;
+        const { width, height, colorScheme, reducedMotion, direction } = this.conditions;
+        if (feature === 'direction')
+            return direction ?? 'ltr';
         if (feature === 'orientation')
             return width > height ? 'landscape' : 'portrait';
         if (feature === 'prefers-color-scheme')