@ng-native/fabric 0.13.0 → 0.15.0

package/dist/css.js

@@ -208,12 +208,15 @@ export const styleStats = {
     nodesResolved: 0,
     /** Rules filed by key selector: each sheet's once, however many sheets come after it. */
     rulesFiled: 0,
+    /** Nodes asked whether a rule `:has()` was asked for could be for them: see `isFor`. */
+    subjectTests: 0,
 };
 export function resetStyleStats() {
     styleStats.compoundTests = 0;
     styleStats.ruleTests = 0;
     styleStats.nodesResolved = 0;
     styleStats.rulesFiled = 0;
+    styleStats.subjectTests = 0;
 }
 /** A prop's value as an attribute test compares it: in lower case, under the i flag. */
 const attributeText = (actual, test) => test.insensitive ? String(actual).toLowerCase() : String(actual);
@@ -252,8 +255,8 @@ function matchesValue(value, operator, expected) {
         case 'substring':
             return value.includes(expected);
         case 'includes':
-            // `~=` matches one whole word of a space-separated list.
-            return value.split(/\s+/).includes(expected);
+            // `~=` matches one whole word of a list split at CSS's spaces, which a no-break space is not.
+            return value.split(CSS_SPACE).includes(expected);
         case 'dash-match':
             // `|=` matches the value itself or the value followed by a hyphen, as `lang` uses.
             return value === expected || value.startsWith(`${expected}-`);
@@ -288,7 +291,7 @@ function matchesCompound(node, compound, sheet) {
                 return false;
         }
     }
-    if (compound.type !== undefined && compound.type !== node.name)
+    if (compound.type !== undefined && compound.type !== node.tag)
         return false;
     if (compound.own !== undefined && !ownedBy(node, compound, sheet))
         return false;
@@ -511,8 +514,8 @@ function bitsAbove(node) {
         if (up.classes)
             for (const className of up.classes)
                 add(bitOf('.', className));
-        if (up.name !== undefined)
-            add(bitOf('<', up.name));
+        if (up.tag !== undefined)
+            add(bitOf('<', up.tag));
         const id = up.props?.['nativeID'];
         if (typeof id === 'string')
             add(bitOf('#', id));
@@ -640,6 +643,36 @@ export function placeReadElsewhere(sheet) {
     }
     return known;
 }
+const NAMED_BESIDE = new WeakMap();
+/**
+ * The props a sheet's rules ask of an element before another in a child list, `[data-on] ~ .x`:
+ * those whose change can restyle the elements after it. An id is asked as `nativeID`.
+ */
+export function namedBeside(sheet) {
+    let named = NAMED_BESIDE.get(sheet);
+    if (named === undefined) {
+        named = new Set();
+        for (const rule of sheet.rules) {
+            rule.combinators.forEach((joined, at) => {
+                if (joined === 'next-sibling' || joined === 'later-sibling') {
+                    propsNamed(rule.compounds[at], named);
+                }
+            });
+        }
+        NAMED_BESIDE.set(sheet, named);
+    }
+    return named;
+}
+/** Add each prop a compound, or one nested in it at any depth, asks about: an attribute or an id. */
+function propsNamed(compound, into) {
+    if (compound.id !== undefined)
+        into.add('nativeID');
+    for (const test of compound.attributes ?? [])
+        into.add(test.name);
+    const within = (compound.has ?? []).flatMap((test) => test.any);
+    for (const inner of [...nestedCompounds(compound), ...within])
+        propsNamed(inner, into);
+}
 /** Whether a compound, or one nested in it at any depth, asks about a place in a child list. */
 function readsPlace(compound) {
     if (compound.nth?.length)
@@ -918,7 +951,7 @@ function countPosition(node, siblings, fromEnd, ofType) {
     let position = 0;
     let seen = 0;
     for (const sibling of siblings) {
-        if (!isElement(sibling) || (ofType && sibling.name !== node.name))
+        if (!isElement(sibling) || (ofType && sibling.tag !== node.tag))
             continue;
         seen++;
         if (sibling === node)
@@ -1115,7 +1148,7 @@ function reach(node, index, found) {
     };
     if (index.universal.length)
         found.push(...index.universal);
-    take(`type:${node.name}`);
+    take(`type:${node.tag}`);
     const id = node.props['nativeID'];
     if (typeof id === 'string')
         take(`id:${id}`);
@@ -1187,6 +1220,13 @@ function importantNames(result, twin) {
 }
 /** What `em` falls back to when nothing in scope has set a font size. The web's default. */
 const DEFAULT_FONT_SIZE = 16;
+/**
+ * The rules a node matched, to style it from again: for a change above it, and not for one of
+ * its own or beneath it, which can change what it matches.
+ */
+function rulesKept(cached, node) {
+    return node.ownDirty || node.hasDirty ? undefined : cached.rules;
+}
 /** Shared empty result. Never handed out anywhere that mutates it. */
 const EMPTY = {};
 /** Stands in for the parent of a root node, so the comparison needs no null case. */
@@ -1287,14 +1327,19 @@ function classReach(sheet) {
     for (const rule of sheet.rules) {
         const every = new Set();
         collectClasses(rule, every, reads, named);
-        const { own, inside } = classPlaces(rule);
+        const { own, inside, beneath, parentHas } = classPlaces(rule);
         for (const name of every) {
-            if (!own.has(name) && !inside.has(name))
+            const placed = own.has(name) || inside.has(name) || beneath.has(name) || parentHas.has(name);
+            if (!placed)
                 classes.set(name, true);
             if (own.has(name))
                 noteOwn(classes, name);
             if (inside.has(name))
                 noteInside(classes, name, rule);
+            if (beneath.has(name))
+                noteBeneath(classes, name, 'beneath');
+            if (parentHas.has(name))
+                noteBeneath(classes, name, 'parentHas');
         }
     }
     reaches.set(sheet, (found = { classes, reads, named }));
@@ -1310,6 +1355,16 @@ function noteOwn(found, name) {
     else
         found.set(name, { ...noSubjects(), own: true });
 }
+/** Note a rule as one that names a class in `:has()`, or in `:has(> )` alone. */
+function noteBeneath(found, name, how) {
+    const subjects = found.get(name);
+    if (subjects === true)
+        return;
+    if (subjects)
+        subjects[how] = true;
+    else
+        found.set(name, { ...noSubjects(), [how]: true });
+}
 /** Note a rule as one that names a class as what its element is inside. */
 function noteInside(found, name, rule) {
     let subjects = found.get(name);
@@ -1333,8 +1388,6 @@ const noSubjects = () => ({
     inside: new Set(),
     any: false,
 });
-/** The reach of classes that rules are for the element of, and for nothing under it. */
-const OWN_ALONE = { ...noSubjects(), own: true };
 /** Add to `into` what `from` is for. */
 function addSubjects(into, from) {
     for (const name of from.classes)
@@ -1346,6 +1399,17 @@ function addSubjects(into, from) {
     into.any ||= from.any;
     if (from.own)
         into.own = true;
+    if (from.beneath)
+        into.beneath = true;
+    if (from.parentHas)
+        into.parentHas = true;
+}
+/** What all of `each` are for, as one. */
+export function joinSubjects(each) {
+    const all = noSubjects();
+    for (const one of each)
+        addSubjects(all, one);
+    return all;
 }
 /**
  * Where a rule names each class it names, for the classes it names in no other place than these:
@@ -1354,21 +1418,29 @@ function addSubjects(into, from) {
  *   it, which are asked of that element;
  * - `inside`, as what that element is inside: the classes of a compound before the last, with
  *   nothing but `>` and a space between there and the element, and those of what `:is(.box *)`
- *   and `:is(.box > *)` put over it.
+ *   and `:is(.box > *)` put over it;
+ * - `beneath`, inside `:has()`, wherever in the rule that is: what it asks of is under the box
+ *   that answers it;
+ * - `parentHas`, of what `:has(> )` asks of the box's children themselves, and nowhere else in
+ *   `:has()`: the element is right under that box.
  *
- * A class named anywhere else in the rule is in neither, whatever else names it: beside the
- * element, inside `:has()` or `:host-context()`, or in `:not()` of a box the element is in.
+ * A class named anywhere else in the rule is in none, whatever else names it: beside the element,
+ * inside `:host-context()`, or in `:not()` of a box the element is in. A test of the class
+ * attribute is placed as a class is, by `classTestKey`.
  */
 function classPlaces(rule) {
     const own = new Set();
     const inside = new Set();
+    const beneath = new Set();
+    const parentHas = new Set();
     const elsewhere = new Set();
+    const below = { beneath, parentHas, elsewhere };
     const last = rule.compounds.length - 1;
     let under = true;
     for (let index = last; index >= 0; index--) {
         const compound = rule.compounds[index];
         if (index === last) {
-            placeClasses(compound, own, inside, elsewhere);
+            placeClasses(compound, own, inside, below);
             continue;
         }
         const joined = rule.combinators[index];
@@ -1376,36 +1448,75 @@ function classPlaces(rule) {
         // A box the element is under, by its classes and by those it is asked to have or not to,
         // `.box:not(.busy) .row`: each is asked of that box, as its own are.
         const over = under ? inside : elsewhere;
-        placeClasses(compound, over, over, elsewhere);
+        placeClasses(compound, over, over, below);
     }
     for (const name of elsewhere) {
         own.delete(name);
         inside.delete(name);
+        beneath.delete(name);
+        parentHas.delete(name);
     }
-    return { own, inside };
+    return { own, inside, beneath, parentHas };
 }
 /**
  * The classes of a compound asked of the element a rule is for, into `at`, and of the compounds
  * it puts over that element, into `inside`. What any other part of it names goes `elsewhere`:
  * a part read here by name is one this knows the reach of, and one added later is not.
  */
-function placeClasses(compound, at, inside, elsewhere) {
-    const { classes, is, not, ancestors, parents, type: _t, id: _i, root: _r, pseudo: _p, ...rest } = compound;
-    for (const name of classes)
+function placeClasses(compound, at, inside, below) {
+    const { classes, is, not, ancestors, parents, attributes, has, type: _t, id: _i, root: _r, pseudo: _p, ...rest } = compound;
+    for (const name of namesOf(classes, attributes))
         at.add(name);
     for (const alternatives of is ?? []) {
         for (const option of alternatives)
-            placeClasses(option, at, inside, elsewhere);
+            placeClasses(option, at, inside, below);
     }
     for (const excluded of not ?? [])
-        placeClasses(excluded, at, inside, elsewhere);
+        placeClasses(excluded, at, inside, below);
     // What is over the element is over it whichever of these said so, and what is over that is too.
     for (const above of [...(ancestors ?? []), ...(parents ?? [])]) {
-        placeClasses(above, inside, inside, elsewhere);
+        placeClasses(above, inside, inside, below);
     }
-    // `attributes` among them: a test of the `class` attribute is answered through `classTests`.
-    collectClasses(rest, elsewhere, []);
+    placeHas(has, below);
+    collectClasses(rest, below.elsewhere, []);
+}
+/**
+ * The classes `:has()` asks of what is under the box that answers it, into `beneath`, wherever
+ * in the rule it is written, or into `parentHas` for what `:has(> )` asks of the box's children.
+ * One it can ask of what is above the box goes `elsewhere`: `:is()` in `:has()` is not relative,
+ * so the `.night` of `:has(:is(.night .cell))` can be any element over the cell.
+ */
+function placeHas(tests, below) {
+    for (const test of tests ?? []) {
+        const into = test.child ? below.parentHas : below.beneath;
+        for (const compound of test.any)
+            placeBeneath(compound, into, below);
+    }
+}
+/** `placeHas` for one compound of a `:has()` argument, whose own classes go `into`. */
+function placeBeneath(compound, into, below) {
+    const { classes, attributes, is, not, has, type: _t, id: _i, root: _r, pseudo: _p, ...rest } = compound;
+    for (const name of namesOf(classes, attributes))
+        into.add(name);
+    for (const alternatives of is ?? []) {
+        for (const option of alternatives)
+            placeBeneath(option, into, below);
+    }
+    for (const excluded of not ?? [])
+        placeBeneath(excluded, into, below);
+    placeHas(has, below);
+    collectClasses(rest, below.elsewhere, []);
+}
+/** A compound's classes, and its tests of the class attribute, which are asked as its classes are. */
+function namesOf(classes, attributes) {
+    const tests = attributes?.filter((test) => test.name === 'class');
+    return tests?.length ? [...classes, ...tests.map(classTestKey)] : classes;
 }
+/**
+ * A test of the class attribute, `[class^="p-"]`, by a name no class can have: it has a reach
+ * as a class does, for what any class it answers can restyle.
+ */
+const classTestKey = (test) => `\0${test.operator ?? ''}${test.insensitive ? 'i' : ''}\0${test.value ?? ''}`;
 /** What a rule declares, which names no element. */
 const DECLARED = new Set(['declarations', 'important', 'tokens']);
 /**
@@ -1425,8 +1536,10 @@ function collectClasses(value, into, reads, named) {
     if (Array.isArray(part.attributes)) {
         for (const test of part.attributes) {
             named?.add(test.name);
-            if (test.name === 'class')
-                reads.push(test);
+            if (test.name !== 'class')
+                continue;
+            reads.push(test);
+            into.add(classTestKey(test));
         }
     }
     for (const [key, inner] of Object.entries(value)) {
@@ -1460,7 +1573,7 @@ function boxAround(rule) {
 }
 /** Whether a rule among these could be for a node: never no where one is. */
 function writtenFor(of, node) {
-    if (of.any || of.types.has(node.name))
+    if (of.any || of.types.has(node.tag))
         return true;
     for (const name of node.classes ?? [])
         if (of.classes.has(name))
@@ -1725,8 +1838,11 @@ export class StyleResolver {
         const at = replacing ? this.addedSheets.indexOf(replacing) : -1;
         if (at === -1)
             this.addedSheets.push(sheet);
-        else
+        else {
             this.addedSheets[at] = sheet;
+            this.forgetBeside(replacing);
+        }
+        this.noteBeside(sheet);
         // One added at the end is filed after what is there. One in another's place files them all again.
         if (at !== -1)
             this.filed = null;
@@ -1753,7 +1869,7 @@ export class StyleResolver {
     /** How far each class named by the sheets met so far reaches: see `classReach`. */
     reach = new Map();
     /** The tests of the `class` attribute itself in those sheets, which any class may answer. */
-    classTests = [];
+    classTests = new Map();
     noted = new WeakSet();
     /**
      * The sheets with a rule written with `::ng-deep`, which is for what is under the component
@@ -1761,9 +1877,17 @@ export class StyleResolver {
      */
     deepSheets = new Set();
     deepIndexes = new WeakMap();
-    /** Read the classes a sheet names, once, as soon as any node is given it. */
-    noteSheet(sheet) {
-        if (!sheet || this.noted.has(sheet))
+    /**
+     * Read the classes a sheet names, once, as soon as any node is given it. One `scoped` to a
+     * component or a host asks of its elements for good, global or not.
+     */
+    noteSheet(sheet, scoped = false) {
+        if (!sheet)
+            return;
+        if (scoped)
+            this.scoped.add(sheet);
+        this.noteBeside(sheet);
+        if (this.noted.has(sheet))
             return;
         this.noted.add(sheet);
         if (sheet.rules.some((rule) => rule.deep))
@@ -1771,7 +1895,8 @@ export class StyleResolver {
         const { classes, reads, named } = classReach(sheet);
         for (const [name, how] of classes)
             this.noteReach(name, how);
-        this.classTests.push(...reads);
+        for (const test of reads)
+            this.classTests.set(classTestKey(test), test);
         for (const name of named)
             this.named.add(name);
     }
@@ -1784,6 +1909,37 @@ export class StyleResolver {
     reads(prop) {
         return this.named.has(prop);
     }
+    /**
+     * By prop, how many sheets in play ask it of an element before another: see `namedBeside`. A
+     * global sheet taken away, or replaced, asks no more.
+     */
+    besideNamed = new Map();
+    besideNoted = new WeakSet();
+    /** The sheets a component or a host was given: see `noteSheet`. */
+    scoped = new WeakSet();
+    noteBeside(sheet) {
+        if (this.besideNoted.has(sheet))
+            return;
+        this.besideNoted.add(sheet);
+        for (const name of namedBeside(sheet)) {
+            this.besideNamed.set(name, (this.besideNamed.get(name) ?? 0) + 1);
+        }
+    }
+    forgetBeside(sheet) {
+        if (this.scoped.has(sheet) || !this.besideNoted.delete(sheet))
+            return;
+        for (const name of namedBeside(sheet)) {
+            const left = this.besideNamed.get(name) - 1;
+            if (left)
+                this.besideNamed.set(name, left);
+            else
+                this.besideNamed.delete(name);
+        }
+    }
+    /** Whether a prop changing can change what the elements after its element match. */
+    readsBeside(prop) {
+        return this.besideNamed.has(prop);
+    }
     noteReach(name, how) {
         const had = this.reach.get(name);
         if (had === true)
@@ -1807,28 +1963,29 @@ export class StyleResolver {
      * of them and nothing is styled again.
      */
     reachOf(classes) {
-        let under = null;
-        let own = false;
+        let found = null;
         for (const name of classes) {
-            const how = this.reach.get(name);
-            if (how === true || this.classTests.some((test) => answers(test, name)))
-                return true;
-            if (!how)
-                continue;
-            own ||= how.own === true;
-            // Made only for a class that reaches under: most are a rule's own, and this is asked for
-            // every element as it is given its classes.
-            if (this.reachesUnder(how))
-                addSubjects((under ??= noSubjects()), how);
+            for (const how of this.reachesOf(name)) {
+                if (how === true)
+                    return true;
+                addSubjects((found ??= noSubjects()), how);
+            }
+        }
+        return found;
+    }
+    /** How far a class reaches by its name, and by each test of the class attribute it answers. */
+    *reachesOf(name) {
+        const how = this.reach.get(name);
+        if (how)
+            yield how;
+        for (const [key, test] of this.classTests) {
+            if (answers(test, name))
+                yield this.reach.get(key) ?? true;
         }
-        if (!under)
-            return own ? OWN_ALONE : null;
-        if (own)
-            under.own = true;
-        return under;
     }
     /** Whether one of the rules `subjects` stands for could be for a node. */
     isFor(subjects, node) {
+        styleStats.subjectTests++;
         return writtenFor(subjects, node);
     }
     /**
@@ -1860,6 +2017,7 @@ export class StyleResolver {
         if (at === -1)
             return false;
         this.addedSheets.splice(at, 1);
+        this.forgetBeside(sheet);
         this.filed = null;
         this.additions.length = 0;
         this.generation = ++generations;
@@ -1919,8 +2077,7 @@ export class StyleResolver {
             return this.unstyled(node, epoch, parent, parentInherited, scope, parentScope);
         }
         styleStats.nodesResolved++;
-        // Its own rules are found again for a change of its own, and not for one above it.
-        const rules = stands && !node.ownDirty ? cached.rules : undefined;
+        const rules = stands ? rulesKept(cached, node) : undefined;
         const matched = found ?? rules ?? this.matchedBy(node);
         const parentTokens = parent ? parent.tokens : this.tokensOnRoot;
         this.heir(node, parent, matched);
@@ -1938,11 +2095,13 @@ export class StyleResolver {
      * change it was marked on the element, its parent's `scope` is the one it was styled under,
      * and no sheet that could match it has come since. It is being styled again all the same, for
      * a change of its own that alters nothing under it, or for what it inherits.
+     *
+     * A change beneath it is not one: what it answers `:has()` is asked again, and the elements a
+     * rule asking that of it is for are marked on their own (`markUnderHas`), not all under it.
      */
     matchesStand(cached, node, parentScope) {
         return (cached !== null &&
             !node.styleDirty &&
-            !node.hasDirty &&
             !node.stateDirty &&
             cached.scope !== SHARED_SCOPE &&
             parentScope !== SHARED_SCOPE &&
@@ -3298,14 +3457,17 @@ function boundKind(prop) {
  * 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.
+ * A colour made of tokens, `color-mix(in srgb, var(--brand), white 20%)`, is worked out from the
+ * tokens where it is used, as a fallback of the same shape is.
+ *
+ * ponytail: any other value has to be the whole `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);
+    if (!token?.alias)
+        return derivedColour(prop, token, kind, on);
     const [reference, ...alternatives] = aliasesOf(token);
     for (; token?.alias; token = token.fallback)
         ;
@@ -3321,6 +3483,53 @@ export function boundDeclaration(prop, token, on) {
         ...(token && isDerived(token) ? { fallbackToken: token } : {}),
     };
 }
+/** A CSS number: `1.5`, `+1.5`, `.5`, `1e0`, `-2`. */
+const CSS_NUMBER = String.raw `[+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?`;
+/** A length in `em` or a viewport unit, the whole value: `2em`, `-0.5em`, `50vw`. */
+const RELATIVE_LENGTH = new RegExp(String.raw `^\s*(${CSS_NUMBER})(em|vw|vh|vmin|vmax)\s*$`, 'i');
+/** A number with no unit, as a `line-height` is written: a multiple of the font size. */
+const UNITLESS = new RegExp(String.raw `^\s*(${CSS_NUMBER})\s*$`, 'i');
+/** A negative `line-height`, of a number or a length, which CSS has no value for. */
+const NEGATIVE = new RegExp(String.raw `^\s*-(?:\d|\.\d)`);
+/** Whether `text` is a `line-height` below zero, which a browser drops: `-1.5`, `-1em`, `-2px`. */
+export const isNegativeLineHeight = (prop, text) => prop === 'lineHeight' && NEGATIVE.test(text);
+/**
+ * A bound declaration of a length in `em` or a viewport unit, `[style.width]="'2em'"`, as the
+ * deferred declaration the compiler writes for the same value in a rule: measured where it is
+ * used, against the font size in scope. A viewport unit is measured against the viewport, and
+ * again when it changes. A `line-height` with no unit is the number a rule hands down. Null for
+ * any other value, and for a property that takes no length.
+ */
+export function boundRelativeLength(prop, text, on) {
+    const kind = boundKind(prop);
+    if (kind !== 'length' && kind !== 'lineHeight')
+        return null;
+    const relative = RELATIVE_LENGTH.exec(text);
+    if (relative) {
+        const unit = relative[2].toLowerCase();
+        return {
+            props: [prop],
+            ...(on === undefined ? {} : { on }),
+            compute: { unit, factor: Number(relative[1]) },
+        };
+    }
+    // A line height with no unit is a number each text under it multiplies its own font size by,
+    // not the points it comes to here: the compiler writes the same for it in a rule.
+    const unitless = kind === 'lineHeight' ? UNITLESS.exec(text) : null;
+    if (!unitless)
+        return null;
+    return {
+        props: [prop],
+        ...(on === undefined ? {} : { on }),
+        compute: { unit: 'em', factor: Number(unitless[1]), multiple: true },
+    };
+}
+/** A bound colour made of tokens, worked out where it is used; null for any other value. */
+function derivedColour(prop, token, kind, on) {
+    if (!token || kind !== 'color' || !isDerived(token))
+        return null;
+    return { props: [prop], ...(on === undefined ? {} : { on }), kind, fallbackToken: token };
+}
 /** The names a `var()` tries in turn: its own, then each `var()` nested as its fallback. */
 function aliasesOf(token) {
     const names = [];