@ng-native/fabric 0.5.0 → 0.7.0

package/dist/css.js

@@ -29,6 +29,15 @@ function formOf(token, kind) {
     const stand = STAND_IN[kind];
     return token[kind] ?? (stand ? token[stand] : undefined);
 }
+/**
+ * Whether a child is one `:empty` sees. An anchor is a comment on the web, which it does not;
+ * nor text of no length, which a binding to nothing leaves behind.
+ */
+export function fills(child) {
+    if (child.kind === 'anchor')
+        return false;
+    return child.kind !== 'text' || child.text !== '';
+}
 /**
  * Properties CSS inherits that mean something on native.
  *
@@ -79,6 +88,32 @@ function drawNoBorder(own) {
             own[key] = 0;
     own['borderWidth'] = 0;
 }
+/** Each side's own style, as the compiler keeps it, and the width it is the style of. */
+const SIDE_STYLES = ['Top', 'Right', 'Bottom', 'Left', 'Start', 'End'].map((side) => [`border${side}Style`, `border${side}Width`]);
+/**
+ * Settle a border side by side, once the cascade has picked each side's style: a side styled
+ * `none` has no width, whichever rule set one, and the one style native has is that of a side
+ * that is drawn. With no side drawn and no style at all, there is no border. A side's own style
+ * is not sent on: native has none.
+ */
+function settleBorders(own) {
+    let drawn;
+    for (const [style, width] of SIDE_STYLES) {
+        if (!(style in own))
+            continue;
+        if (own[style] === 'none')
+            own[width] = 0;
+        else
+            drawn ??= own[style];
+        delete own[style];
+    }
+    if (own['borderStyle'] !== 'none')
+        return;
+    if (drawn === undefined)
+        drawNoBorder(own);
+    else
+        own['borderStyle'] = drawn;
+}
 /**
  * Deterministic work counters for the matcher.
  *
@@ -170,11 +205,14 @@ export const styleStats = {
     ruleTests: 0,
     /** Nodes cascaded, as opposed to handed back from the memo. */
     nodesResolved: 0,
+    /** Rules filed by key selector: each sheet's once, however many sheets come after it. */
+    rulesFiled: 0,
 };
 export function resetStyleStats() {
     styleStats.compoundTests = 0;
     styleStats.ruleTests = 0;
     styleStats.nodesResolved = 0;
+    styleStats.rulesFiled = 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);
@@ -242,10 +280,8 @@ function matchesCompound(node, compound, sheet) {
                 return false;
         }
     }
-    // An anchor is a comment on the web, and :empty does not see comments.
-    if (compound.empty !== undefined && node.children?.some((child) => child.kind !== 'anchor')) {
+    if (compound.empty !== undefined && node.children?.some(fills))
         return false;
-    }
     if (compound.nth !== undefined) {
         for (const test of compound.nth) {
             if (!matchesNth(node, test))
@@ -383,8 +419,152 @@ function matchAny(first, next, rule, index, compound, sheet) {
     }
     return false;
 }
+const TAKES_PARENTS = new WeakMap();
+/** Whether a rule has an `inherit` in it, which is settled from the parent's own style. */
+function takesParents(rule) {
+    let takes = TAKES_PARENTS.get(rule);
+    if (takes === undefined) {
+        takes = rule.deferred?.some((declaration) => declaration.inherit) === true;
+        TAKES_PARENTS.set(rule, takes);
+    }
+    return takes;
+}
 /** Whether a node is one of the children CSS counts. Text and anchors are children, not elements. */
 const isElement = (node) => node.kind === undefined || node.kind === 'element';
+/** A node's first `count` elements, or its last, skipping everything that is not one. */
+export function elementsAtEnd(siblings, count, fromEnd) {
+    const found = [];
+    for (let step = 0; step < siblings.length && found.length < count; step++) {
+        const sibling = siblings[fromEnd ? siblings.length - 1 - step : step];
+        if (isElement(sibling))
+            found.push(sibling);
+    }
+    return found;
+}
+const REACH = new WeakMap();
+/**
+ * How far a sheet asks about a child list beyond which element is first and which is last.
+ * Where no sheet reaches either way, only the elements at the two ends can match differently.
+ */
+export function siblingReach(sheet) {
+    let known = REACH.get(sheet);
+    if (known === undefined) {
+        const reach = { after: 0, before: false };
+        for (const rule of sheet.rules) {
+            reach.after = Math.max(reach.after, stepsAlong(rule.combinators));
+            for (const compound of rule.compounds)
+                countSiblings(compound, reach, false);
+        }
+        known = reach;
+        REACH.set(sheet, known);
+    }
+    return known;
+}
+/**
+ * How many elements on from one a rule's combinators read: every later one for a `~`, and
+ * otherwise its longest run of `+`. A run ends at a descendant or child combinator, which steps
+ * out of the list.
+ */
+function stepsAlong(combinators) {
+    let longest = 0;
+    let run = 0;
+    for (const one of combinators) {
+        if (one === 'later-sibling')
+            return Infinity;
+        run = one === 'next-sibling' ? run + 1 : 0;
+        longest = Math.max(longest, run);
+    }
+    return longest;
+}
+/**
+ * Note in `reach` which end a compound, or one nested in it, counts its siblings from, further
+ * than the first or last. A count inside a `:has()` is read as both: what it is asked of is
+ * matched again by other means, and which way it reaches is not worked out.
+ */
+function countSiblings(compound, reach, withinHas) {
+    // Which is first and which is last is the ends, and no count.
+    const counts = (compound.nth ?? []).filter((test) => test.a !== 0 || test.b !== 1);
+    if (counts.some((test) => withinHas || !test.fromEnd))
+        reach.after = Infinity;
+    if (counts.some((test) => withinHas || test.fromEnd))
+        reach.before = true;
+    for (const inner of nestedCompounds(compound))
+        countSiblings(inner, reach, withinHas);
+    for (const test of compound.has ?? []) {
+        for (const inner of test.any)
+            countSiblings(inner, reach, true);
+    }
+}
+const PLACE_ELSEWHERE = new WeakMap();
+/**
+ * Each compound in a sheet whose element's place among its siblings is read from another
+ * element: one with something under it in the rule, `.row:nth-child(odd) .label` and
+ * `.a + .b .c`, or one an `:is()` or `:host-context()` looks for above the element styled.
+ *
+ * An element whose place changed is matched again, and where it matches the rules it did, it
+ * and everything under it are left as they were: its own rules are all that its place can
+ * change. Not an element one of these could be. What is under that one can match differently
+ * though it matches the same, so it is styled again with everything under it.
+ *
+ * A place read by the element a rule styles, or by the elements before it that the rule steps
+ * from (`.a:first-child + .b`), is that element's own: the rules it matches say.
+ */
+export function placeReadElsewhere(sheet) {
+    let known = PLACE_ELSEWHERE.get(sheet);
+    if (known === undefined) {
+        const elsewhere = [];
+        for (const rule of sheet.rules) {
+            // A run of compounds joined by `+` and `~` is one child list. Every run but the last is
+            // above the element styled, and its last compound is the element the rest hangs under.
+            let start = 0;
+            rule.compounds.forEach((compound, at) => {
+                placeReadAbove(compound, elsewhere);
+                const joined = rule.combinators[at];
+                if (joined === 'next-sibling' || joined === 'later-sibling')
+                    return;
+                const run = rule.compounds.slice(start, at + 1);
+                start = at + 1;
+                const above = at < rule.compounds.length - 1;
+                if (above && (run.length > 1 || run.some(readsPlace)))
+                    elsewhere.push(compound);
+            });
+        }
+        known = elsewhere;
+        PLACE_ELSEWHERE.set(sheet, known);
+    }
+    return known;
+}
+/** 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)
+        return true;
+    const within = (compound.has ?? []).flatMap((test) => test.any);
+    return [...nestedCompounds(compound), ...within].some(readsPlace);
+}
+/**
+ * Collect the compounds nested in one that are matched against an element above the one it is
+ * matched against, and ask about that element's place: `:is(.group:first-child *)`.
+ */
+function placeReadAbove(compound, elsewhere) {
+    const above = [
+        ...(compound.ancestors ?? []),
+        ...(compound.parents ?? []),
+        ...(compound.hostContext ?? []),
+    ];
+    for (const inner of above)
+        if (readsPlace(inner))
+            elsewhere.push(inner);
+    for (const inner of nestedCompounds(compound))
+        placeReadAbove(inner, elsewhere);
+}
+/** The compounds nested in one, a `:has()`'s apart. */
+const nestedCompounds = (compound) => [
+    ...(compound.not ?? []),
+    ...(compound.is ?? []).flat(),
+    ...(compound.ancestors ?? []),
+    ...(compound.parents ?? []),
+    ...(compound.hostContext ?? []),
+];
 /** The element before this one, skipping everything that is not one. */
 function previousElement(node) {
     const siblings = node.parent?.children;
@@ -702,69 +882,150 @@ const ELEMENT_ENTRIES = ELEMENT_STYLES.rules.map((rule) => ({
  * is offered to everything, because the alternative is a rule that silently stops applying.
  */
 export function ruleKey(rule) {
+    return ruleKeys(rule)[0];
+}
+/**
+ * Every bucket a rule is filed under. One, but for a rule whose rightmost compound is only an
+ * `:is()` of compounds that each have a key: it is filed under each of theirs, since a node it
+ * matches has one of them.
+ *
+ * A rule that says nothing of the node's own name can still say whose child it is, `.row > *`.
+ * It is filed under the parent's class, and offered to the children of an element that has it.
+ */
+export function ruleKeys(rule) {
     const key = rule.compounds[rule.compounds.length - 1];
     if (!key)
-        return UNIVERSAL;
+        return EVERY_NODE;
     if (key.classes.length)
-        return `class:${key.classes[0]}`;
+        return [`class:${key.classes[0]}`];
     if (key.id !== undefined)
-        return `id:${key.id}`;
+        return [`id:${key.id}`];
     if (key.type !== undefined)
-        return `type:${key.type}`;
-    return UNIVERSAL;
+        return [`type:${key.type}`];
+    const held = parentClass(rule, key);
+    if (held !== undefined)
+        return [`in:${held}`];
+    return alternativeKeys(key) ?? EVERY_NODE;
+}
+/** A class the node's parent has to have for the rule to match, where its selector says one. */
+function parentClass(rule, key) {
+    const written = key.parents?.find((compound) => compound.classes.length > 0);
+    if (written)
+        return written.classes[0];
+    if (rule.combinators[rule.combinators.length - 1] !== 'child')
+        return undefined;
+    return rule.compounds[rule.compounds.length - 2]?.classes[0];
+}
+/** The keys of each compound a bare `:is()` takes, or nothing where one of them has none. */
+function alternativeKeys(key) {
+    const any = key.is?.[0];
+    if (!any?.length)
+        return undefined;
+    const keys = [];
+    for (const one of any) {
+        if (one.classes.length)
+            keys.push(`class:${one.classes[0]}`);
+        else if (one.id !== undefined)
+            keys.push(`id:${one.id}`);
+        else if (one.type !== undefined)
+            keys.push(`type:${one.type}`);
+        else
+            return undefined;
+    }
+    return keys;
 }
 const UNIVERSAL = '*';
-/** File a merged, sorted rule list by key selector. Done once per sheet pair, not per node. */
-export function indexRules(entries) {
-    const buckets = new Map();
-    const universal = [];
-    entries.forEach((entry, at) => {
-        const key = ruleKey(entry.rule);
-        if (key === UNIVERSAL) {
-            universal.push({ entry, at });
-            return;
+const EVERY_NODE = [UNIVERSAL];
+/**
+ * Where each kind of sheet is filed, as a multiple of the room one sheet's rules are given: the
+ * global sheet first, then a host's own, its creator's, and each added sheet after those.
+ */
+const SHEET_ROOM = 1_000_000;
+const HOSTS = 1;
+const CREATED = 2;
+const ADDED = 3;
+/**
+ * File rules by key selector, each at `from` and on: its place among every rule there is, which
+ * settles the order of two of the same weight. Into an index there already where one is given,
+ * so a sheet that arrives later is added to what is filed and nothing is filed again.
+ */
+export function indexRules(entries, into = { buckets: new Map(), universal: [] }, from = 0) {
+    styleStats.rulesFiled += entries.length;
+    entries.forEach((entry, n) => {
+        const indexed = { entry, at: from + n };
+        for (const key of ruleKeys(entry.rule)) {
+            if (key === UNIVERSAL) {
+                into.universal.push(indexed);
+                continue;
+            }
+            const bucket = into.buckets.get(key);
+            if (bucket)
+                bucket.push(indexed);
+            else
+                into.buckets.set(key, [indexed]);
         }
-        let bucket = buckets.get(key);
-        if (!bucket)
-            buckets.set(key, (bucket = []));
-        bucket.push({ entry, at });
     });
-    return { buckets, universal };
+    return into;
+}
+/** Rules in the order they were filed in, which is the order of a list sorted before it was. */
+const byPlace = (a, b) => a.at - b.at;
+/** Add to `found` what one index holds in the buckets a node's name, id and classes reach. */
+function reach(node, index, found) {
+    const take = (key) => {
+        const bucket = index.buckets.get(key);
+        if (bucket)
+            found.push(...bucket);
+    };
+    if (index.universal.length)
+        found.push(...index.universal);
+    take(`type:${node.name}`);
+    const id = node.props['nativeID'];
+    if (typeof id === 'string')
+        take(`id:${id}`);
+    if (node.classes)
+        for (const name of node.classes)
+            take(`class:${name}`);
+    // What is written for any child of an element with one of the parent's classes.
+    const around = node.parent?.classes;
+    if (around)
+        for (const name of around)
+            take(`in:${name}`);
 }
 /**
- * The rules worth trying against a node, in the order they were merged in.
+ * The rules worth trying against a node, in cascade order: `order` says which of two comes
+ * first, and with none it is the order they were filed in.
  *
- * Each bucket is already in order, so the collected list only needs sorting when more than one
- * contributed - which for a node with one class and a name is the common case, and cheap: the
- * lists are short by construction, which is the entire point of the index.
+ * From each index, only the buckets the node's name, id and classes reach, which is the entire
+ * point of the index: the lists are short by construction, so sorting them is cheap.
  */
-export function candidateRules(node, index) {
+export function candidateRules(node, indexes, order = byPlace) {
     const found = [];
-    if (index.universal.length)
-        found.push(index.universal);
-    const byName = index.buckets.get(`type:${node.name}`);
-    if (byName)
-        found.push(byName);
-    const id = node.props['nativeID'];
-    if (typeof id === 'string') {
-        const byId = index.buckets.get(`id:${id}`);
-        if (byId)
-            found.push(byId);
-    }
-    if (node.classes) {
-        for (const name of node.classes) {
-            const byClass = index.buckets.get(`class:${name}`);
-            if (byClass)
-                found.push(byClass);
-        }
-    }
-    if (!found.length)
-        return [];
-    if (found.length === 1)
-        return found[0].map((indexed) => indexed.entry);
-    const merged = found.flat();
-    merged.sort((a, b) => a.at - b.at);
-    return merged.map((indexed) => indexed.entry);
+    const all = Array.isArray(indexes) ? indexes : [indexes];
+    for (const index of all)
+        reach(node, index, found);
+    if (found.length < 2)
+        return found.map((indexed) => indexed.entry);
+    found.sort(order);
+    // A rule filed under two keys the node has is offered once.
+    const offered = [];
+    for (let i = 0; i < found.length; i++) {
+        if (found[i] !== found[i - 1])
+            offered.push(found[i].entry);
+    }
+    return offered;
+}
+/**
+ * The properties the rules matching a node declared `!important`, or nothing where none did:
+ * each by its own name and by the other form of it, so `margin-left` stands over an inline
+ * `marginStart` as it does over an inline `marginLeft`.
+ */
+function importantNames(result, twin) {
+    const deferred = result.deferred?.filter((one) => one.important) ?? [];
+    if (!result.important && !deferred.length)
+        return undefined;
+    const names = [...Object.keys(result.important ?? {}), ...deferred.flatMap((one) => one.props)];
+    const sided = names.filter((name) => name in TWIN.ltr);
+    return new Set(sided.length ? [...names, ...sided.map((name) => twin()[name])] : names);
 }
 /** What `em` falls back to when nothing in scope has set a font size. The web's default. */
 const DEFAULT_FONT_SIZE = 16;
@@ -774,14 +1035,186 @@ const EMPTY = {};
 const ROOT_CONTEXT = {};
 /** Shared empty token map, for the overwhelmingly common case of a subtree defining none. */
 const NO_TOKENS = {};
-/** Stands in for "created by a component with no sheet" as a cache key. */
-const NO_SHEET = { rules: [] };
 /**
  * Conditions generations are unique across every resolver in the process, not merely
  * increasing within one, because the memo they stamp lives on the compiled rule and a sheet is
  * shared by every engine that mounts the component.
  */
 let generations = 0;
+const subjects = new WeakMap();
+function subjectsOf(sheet) {
+    let found = subjects.get(sheet);
+    if (found)
+        return found;
+    const classes = new Set();
+    const types = new Set();
+    const inside = new Set();
+    const all = { classes, types, inside, any: false };
+    for (const rule of sheet.rules)
+        noteSubject(all, rule);
+    subjects.set(sheet, (found = all));
+    return found;
+}
+/** Note in `into` what a rule is for. */
+function noteSubject(into, rule) {
+    const subject = rule.compounds.at(-1);
+    // One class of several is enough to ask: a node without it matches none of them.
+    if (subject?.classes.length)
+        into.classes.add(subject.classes[0]);
+    else if (boxAround(rule) !== undefined)
+        into.inside.add(boxAround(rule));
+    else if (subject?.type && subject.type !== '*')
+        into.types.add(subject.type);
+    else
+        into.any = true;
+}
+const reaches = new WeakMap();
+/**
+ * How far each class a sheet's selectors name reaches, and the tests of the `class` attribute
+ * itself that are in them.
+ *
+ * The rules are walked whole for the classes in them, whatever a selector is made of: a part of
+ * one added later counts as a class that reaches everything, without being named here.
+ */
+function classReach(sheet) {
+    let found = reaches.get(sheet);
+    if (found)
+        return found;
+    const classes = new Map();
+    const reads = [];
+    for (const rule of sheet.rules) {
+        const every = new Set();
+        collectClasses(rule, every, reads);
+        const inside = classesInside(rule);
+        for (const name of every) {
+            if (!inside.has(name))
+                classes.set(name, true);
+            else
+                noteInside(classes, name, rule);
+        }
+    }
+    reaches.set(sheet, (found = { classes, reads }));
+    return found;
+}
+/** 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);
+    if (subjects === true)
+        return;
+    if (!subjects)
+        found.set(name, (subjects = noSubjects()));
+    const subject = rule.compounds.at(-1);
+    if (subject?.classes.length)
+        subjects.classes.add(subject.classes[0]);
+    else if (subject?.type && subject.type !== '*')
+        subjects.types.add(subject.type);
+    // A rule for anything in the box, `.busy > *`: anything under the node the class changed
+    // on. Asking which box has the class finds none once the class has gone from it.
+    else
+        subjects.any = true;
+}
+const noSubjects = () => ({
+    classes: new Set(),
+    types: new Set(),
+    inside: new Set(),
+    any: false,
+});
+/** Add to `into` what `from` is for. */
+function addSubjects(into, from) {
+    for (const name of from.classes)
+        into.classes.add(name);
+    for (const name of from.types)
+        into.types.add(name);
+    for (const name of from.inside)
+        into.inside.add(name);
+    into.any ||= from.any;
+}
+/**
+ * The classes a rule names only as what its element is inside: on a compound before the last,
+ * with nothing but `>` and a space between there and the element, and nowhere else in the rule.
+ */
+function classesInside(rule) {
+    const inside = new Set();
+    const elsewhere = new Set();
+    const last = rule.compounds.length - 1;
+    let under = true;
+    for (let index = last; index >= 0; index--) {
+        const compound = rule.compounds[index];
+        if (index < last) {
+            const joined = rule.combinators[index];
+            under &&= joined === 'child' || joined === 'descendant';
+        }
+        const { classes, ...rest } = compound;
+        collectClasses(rest, elsewhere, []);
+        for (const name of classes)
+            (index < last && under ? inside : elsewhere).add(name);
+    }
+    for (const name of elsewhere)
+        inside.delete(name);
+    return inside;
+}
+/** What a rule declares, which names no element. */
+const DECLARED = new Set(['declarations', 'important', 'tokens']);
+/** Add each class under `value` to `into`, and each test of the `class` attribute to `reads`. */
+function collectClasses(value, into, reads) {
+    if (value === null || typeof value !== 'object')
+        return;
+    if (Array.isArray(value))
+        return value.forEach((inner) => collectClasses(inner, into, reads));
+    const part = value;
+    if (Array.isArray(part.classes))
+        for (const name of part.classes)
+            into.add(String(name));
+    if (Array.isArray(part.attributes)) {
+        for (const test of part.attributes)
+            if (test.name === 'class')
+                reads.push(test);
+    }
+    for (const [key, inner] of Object.entries(value)) {
+        if (!DECLARED.has(key))
+            collectClasses(inner, into, reads);
+    }
+}
+/**
+ * Whether a class coming or going could change what a test of the `class` attribute answers.
+ * One class of the list where the test is for a whole class or for part of one; any class
+ * where it is for how the list starts or ends, or for a part with a space in it.
+ */
+function answers(test, name) {
+    const value = test.value ?? '';
+    const folded = test.insensitive ? name.toLowerCase() : name;
+    if (test.operator === 'includes')
+        return folded === value;
+    if (test.operator === 'substring' && !/\s/.test(value))
+        return folded.includes(value);
+    return true;
+}
+/**
+ * A class of the nearest box a rule's subject has to be in: the compound before it, where that
+ * is joined as what holds it and names a class. Nothing where it is a sibling, or has no class.
+ */
+function boxAround(rule) {
+    const joined = rule.combinators.at(-1);
+    if (joined !== 'child' && joined !== 'descendant')
+        return undefined;
+    return rule.compounds.at(-2)?.classes[0];
+}
+/** 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))
+        return true;
+    for (const name of node.classes ?? [])
+        if (of.classes.has(name))
+            return true;
+    if (!of.inside.size)
+        return false;
+    for (let over = node.parent; over; over = over.parent) {
+        for (const name of over.classes ?? [])
+            if (of.inside.has(name))
+                return true;
+    }
+    return false;
+}
 function emptyCacheFor(epoch, generation) {
     return {
         epoch,
@@ -793,6 +1226,40 @@ function emptyCacheFor(epoch, generation) {
         tokens: NO_TOKENS,
     };
 }
+function isMultiple(value) {
+    return typeof value === 'object' && value !== null && 'multiple' in value;
+}
+/** A line-height as points, for a node of font size `size`: what an em of it comes to. */
+function lineHeightPoints(line, size) {
+    const points = line.multiple * (typeof size === 'number' ? size : DEFAULT_FONT_SIZE);
+    return Math.round(points * 1000) / 1000;
+}
+/** A node's style with a unitless line-height it set or inherited worked out against its font size. */
+function settleLineHeight(style) {
+    const line = style['lineHeight'];
+    if (isMultiple(line))
+        style['lineHeight'] = lineHeightPoints(line, style['fontSize']);
+}
+/** The styles of nodes with no rules, by the map they inherit, for one that hands down a multiple. */
+const unstyledStyles = new WeakMap();
+/**
+ * The style of a node no rule matches: what it inherits, with a unitless line-height worked out
+ * against its font size, which an inline style can set. The same object where there is none.
+ */
+function unstyledStyle(inherited, inline) {
+    const line = inherited['lineHeight'];
+    if (!isMultiple(line))
+        return inherited;
+    const size = inline?.['fontSize'];
+    if (typeof size === 'number')
+        return { ...inherited, lineHeight: lineHeightPoints(line, size) };
+    let style = unstyledStyles.get(inherited);
+    if (!style) {
+        style = { ...inherited, lineHeight: lineHeightPoints(line, inherited['fontSize']) };
+        unstyledStyles.set(inherited, style);
+    }
+    return style;
+}
 /**
  * What this node's children inherit: the parent's map, overlaid with any inheritable value the
  * node set itself. Copied on first write only, so a node that sets none hands the same object on
@@ -915,7 +1382,12 @@ export class StyleResolver {
      * selector. Keyed by the creating sheet and then the hosted one, so a component's nodes share a
      * single index.
      */
-    merged = new WeakMap();
+    /** The global sheet and every sheet added to it, filed by key selector. See `rulesFor`. */
+    filed = null;
+    /** How many of the added sheets `filed` holds: one added since is filed at the next read. */
+    filedAdded = 0;
+    /** A component's own sheet, indexed once for each place it can take: a host's, or its creator's. */
+    ownIndexes = 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.
@@ -986,8 +1458,94 @@ export class StyleResolver {
             this.addedSheets.push(sheet);
         else
             this.addedSheets[at] = sheet;
-        this.merged = new WeakMap();
+        // 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;
+        const before = this.generation;
         this.generation = ++generations;
+        // One that takes another's place can change what any node comes to. One that names layers
+        // cannot: a layer has its place from the first sheet to name it, and a new name comes last.
+        if (at !== -1)
+            this.additions.length = 0;
+        else
+            this.additions.push({ before, after: this.generation, subjects: subjectsOf(sheet) });
+        return true;
+    }
+    /**
+     * The sheets added one after another with nothing else changed between them, each with the
+     * generation it began and ended: a cache made before them still stands for a node none of
+     * them could match. Emptied by anything else that moves the generation on.
+     */
+    additions = [];
+    /** Whether a sheet could match a node: one of its rules is written for it. */
+    couldMatch(sheet, node) {
+        return writtenFor(subjectsOf(sheet), node);
+    }
+    /** 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 = [];
+    noted = new WeakSet();
+    /** Read the classes a sheet names, once, as soon as any node is given it. */
+    noteSheet(sheet) {
+        if (!sheet || this.noted.has(sheet))
+            return;
+        this.noted.add(sheet);
+        const { classes, reads } = classReach(sheet);
+        for (const [name, how] of classes)
+            this.noteReach(name, how);
+        this.classTests.push(...reads);
+    }
+    noteReach(name, how) {
+        const had = this.reach.get(name);
+        if (had === true)
+            return;
+        if (how === true)
+            this.reach.set(name, true);
+        else
+            addSubjects(had ?? this.reach.set(name, noSubjects()).get(name), how);
+    }
+    /**
+     * What classes coming to an element or going from it can restyle: `true` for it and all
+     * under it and after it, as any change to it does; the elements under it to restyle, by what
+     * rules are for; or null, where no rule names any of them and nothing is styled again.
+     */
+    reachOf(classes) {
+        let under = 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)
+                addSubjects((under ??= noSubjects()), how);
+        }
+        return under;
+    }
+    /** Whether one of the rules `subjects` stands for could be for a node. */
+    isFor(subjects, node) {
+        return writtenFor(subjects, node);
+    }
+    /**
+     * Whether a cache is of this generation, or of one before sheets that could not match the
+     * node were added, which leaves it as it was: it is then brought up to this one.
+     */
+    current(cached, node) {
+        if (cached.generation === this.generation)
+            return true;
+        // The one cache shared by every node with nothing to style is not one node's to move on.
+        if (cached.context === ROOT_CONTEXT)
+            return false;
+        let at = cached.generation;
+        for (const added of this.additions) {
+            if (added.before !== at)
+                continue;
+            if (writtenFor(added.subjects, node))
+                return false;
+            at = added.after;
+        }
+        if (at !== this.generation)
+            return false;
+        cached.generation = at;
         return true;
     }
     /** Stop matching a sheet `addGlobalSheet` added; false when it is not one. */
@@ -996,16 +1554,19 @@ export class StyleResolver {
         if (at === -1)
             return false;
         this.addedSheets.splice(at, 1);
-        this.merged = new WeakMap();
+        this.filed = null;
+        this.additions.length = 0;
         this.generation = ++generations;
         return true;
     }
     setConditions(next) {
         this.conditions = next;
+        this.additions.length = 0;
         this.generation = ++generations;
     }
     setRootTokens(next) {
         this.tokensOnRoot = next;
+        this.additions.length = 0;
         this.generation = ++generations;
     }
     /**
@@ -1030,6 +1591,10 @@ export class StyleResolver {
             return cached;
         }
         const kept = this.kept(node, parentContext, epoch);
+        // The rules it was just found to match, where they are not the ones it did. Taken here
+        // whether or not they are used, so that none is left for the next node resolved.
+        const found = this.justMatched;
+        this.justMatched = null;
         if (kept)
             return kept;
         const parentInherited = parent ? parent.inherited : EMPTY;
@@ -1038,31 +1603,37 @@ export class StyleResolver {
             return this.unstyled(node, epoch, parent, parentContext, parentInherited);
         }
         styleStats.nodesResolved++;
-        const candidates = this.rulesFor(node);
-        const matched = this.matched(node, node.styled ? ELEMENT_ENTRIES.concat(candidates) : candidates);
+        const matched = found ?? this.matchedBy(node);
         const parentTokens = parent ? parent.tokens : this.tokensOnRoot;
+        this.heir(node, parent, matched);
         const styled = this.styled(node, matched, parentTokens, parentInherited);
+        const cache = this.cached(epoch, parentContext, styled, matched);
+        node.styleCache = cache;
+        node.styleDirty = false;
+        node.hasDirty = false;
+        node.stateDirty = false;
+        return cache;
+    }
+    /**
+     * A cache of a node just styled, with a context of its own. It keeps the rules the node
+     * matched, for the node to be compared with, once a sheet has a use for them: see `tracksHas`.
+     */
+    cached(epoch, parentContext, styled, matched) {
         const cache = {
             epoch,
             generation: this.generation,
             context: {},
             parentContext,
             ...styled,
-            ...this.record(matched),
         };
-        node.styleCache = cache;
-        node.styleDirty = false;
-        node.hasDirty = false;
-        node.stateDirty = false;
+        if (this.tracksHas)
+            cache.matched = matched;
         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.
+     * Set by the engine once a sheet uses `:has()`, styles a pressed element or asks about a place
+     * in a child list. Until then no cache keeps the rules it matched, so an app that never asks
+     * pays nothing for it.
      */
     tracksHas = false;
     /**
@@ -1076,19 +1647,31 @@ export class StyleResolver {
             cached?.matched !== undefined &&
             !node.styleDirty &&
             cached.parentContext === parentContext &&
-            cached.generation === this.generation;
+            this.current(cached, node);
         if (!stands)
             return null;
-        const candidates = this.rulesFor(node);
-        const now = this.matched(node, node.styled ? ELEMENT_ENTRIES.concat(candidates) : candidates);
+        const now = this.matchedBy(node);
         const before = cached.matched;
-        if (now.length !== before.length || now.some((rule, i) => rule !== before[i]))
+        if (now.length !== before.length || now.some((rule, i) => rule !== before[i])) {
+            // It is styled again next, from the rules just found rather than from finding them twice.
+            this.justMatched = now;
             return null;
+        }
         node.hasDirty = false;
         node.stateDirty = false;
         cached.epoch = epoch;
         return cached;
     }
+    /** The rules a node matches now, weakest first. */
+    matchedBy(node) {
+        const candidates = this.rulesFor(node);
+        return this.matched(node, node.styled ? ELEMENT_ENTRIES.concat(candidates) : candidates);
+    }
+    /**
+     * The rules `keptBeneath` found the node being resolved to match, where they are other than
+     * it matched before: it is styled from them next, rather than matched a second time.
+     */
+    justMatched = null;
     /** 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));
@@ -1104,7 +1687,7 @@ export class StyleResolver {
             !node.styleDirty &&
             !node.hasDirty &&
             cached.parentContext === parentContext &&
-            cached.generation === this.generation &&
+            this.current(cached, node) &&
             (node.anonymous === true || this.hasNoRules(node));
         if (!stands)
             return null;
@@ -1129,7 +1712,7 @@ export class StyleResolver {
             !node.hasDirty &&
             !node.stateDirty &&
             cached.parentContext === parentContext &&
-            cached.generation === this.generation);
+            this.current(cached, node));
     }
     /**
      * Nothing anywhere can match this node, and it sets no custom property of its own, so its style
@@ -1173,65 +1756,80 @@ export class StyleResolver {
             generation: this.generation,
             context: {},
             parentContext,
-            style: parentInherited,
+            style: unstyledStyle(parentInherited, inline),
             inherited: inline ? inheritFrom(parentInherited, inline) : parentInherited,
             tokens,
         };
         node.styleCache = passthrough;
         node.styleDirty = false;
+        node.stateDirty = false;
         return passthrough;
     }
     /**
-     * The rules worth trying against a node.
+     * The rules worth trying against a node, in cascade order.
      *
-     * The merged list is built once per (creating sheet, hosted sheet) pair and indexed by key
-     * selector; what comes back here is only the buckets this node can reach. For a component's own
-     * sheet that changes little, but a global utility sheet is hundreds of rules and a screen is a
-     * thousand nodes, and the difference is between a million match attempts and a few thousand.
-     */
-    rulesFor(node) {
-        const creator = node.sheet ?? NO_SHEET;
-        let byHost = this.merged.get(creator);
-        if (!byHost)
-            this.merged.set(creator, (byHost = new Map()));
-        let index = byHost.get(node.hostSheet);
-        if (!index) {
-            byHost.set(node.hostSheet, (index = indexRules(this.merge(node.sheet, node.hostSheet))));
-        }
-        return candidateRules(node, index);
-    }
-    /**
-     * Weakest first. A host node is matched against two component sheets: the one belonging to the
-     * component it hosts, whose `:host` rules exist to reach exactly this node, and the one that
-     * created it. Both carry the bump; the creator comes later and so wins a tie, as the outer
-     * document does over `:host` on the web. The sort is stable, so within one sheet source order
-     * survives and a later sheet wins equal weight.
+     * Every sheet is filed once, by key selector: the app's global sheet and each sheet added to it
+     * in one index, and a component's own in one of its own. What comes back is only the buckets
+     * this node can reach. A global utility sheet is hundreds of rules and a screen is a thousand
+     * nodes, and the difference is between a million match attempts and a few thousand. A library
+     * adds a sheet for each of its components as the component first renders, dozens on one
+     * screen, so one more is added to what is filed and nothing is filed again.
+     *
+     * Sheets are filed in the order a document holds them, which is the order of two rules of the
+     * same weight, and where a layer gets its place: the app's global sheet, the host's own, the
+     * creating component's, then each added sheet as it came. The component layers get a small
+     * specificity bump, so the encapsulation attribute Angular adds on the web does not have to
+     * be written.
      *
      * A sheet added with `addGlobalSheet` comes last, with no bump: a browser adds a None
      * component's CSS when the component first renders, after the styles of the components around
      * it, so it loses to their extra attribute and wins a tie with them.
      */
-    merge(sheet, hostSheet) {
-        const entries = [];
-        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 });
-            }
-        };
-        add(this.globalSheet, 0);
-        add(hostSheet, COMPONENT_SPECIFICITY_BUMP);
-        add(sheet, COMPONENT_SPECIFICITY_BUMP);
-        for (const added of this.addedSheets)
-            add(added, 0);
-        if (!entries.some((entry) => entry.rule.layer !== undefined)) {
-            return entries.sort((a, b) => a.weight - b.weight);
+    rulesFor(node) {
+        if (this.globalSheet)
+            this.placeLayers(this.globalSheet);
+        const indexes = [];
+        if (node.hostSheet)
+            indexes.push(this.ownIndex(node.hostSheet, HOSTS));
+        if (node.sheet)
+            indexes.push(this.ownIndex(node.sheet, CREATED));
+        indexes.push(this.sharedIndex());
+        return candidateRules(node, indexes, this.cascadeOrder);
+    }
+    /** Weakest first: by layer where any sheet has one, then by weight, then as they were filed. */
+    cascadeOrder = (a, b) => {
+        const layers = this.layered
+            ? layerOrder(this.layerPlaces.get(a.entry.rule), this.layerPlaces.get(b.entry.rule))
+            : 0;
+        return layers || a.entry.weight - b.entry.weight || a.at - b.at;
+    };
+    /** A component's sheet as the rules of a host or of a creator, which differ only in their place. */
+    ownIndex(sheet, role) {
+        let roles = this.ownIndexes.get(sheet);
+        if (!roles)
+            this.ownIndexes.set(sheet, (roles = []));
+        return (roles[role] ??= indexRules(this.entries(sheet, COMPONENT_SPECIFICITY_BUMP), undefined, role * SHEET_ROOM));
+    }
+    /** The app's global sheet and every sheet added to it, with any added since the last read. */
+    sharedIndex() {
+        if (!this.filed) {
+            this.filed = { buckets: new Map(), universal: [] };
+            this.filedAdded = 0;
+            if (this.globalSheet)
+                indexRules(this.entries(this.globalSheet, 0), this.filed, 0);
+        }
+        for (; this.filedAdded < this.addedSheets.length; this.filedAdded++) {
+            const from = (ADDED + this.filedAdded) * SHEET_ROOM;
+            indexRules(this.entries(this.addedSheets[this.filedAdded], 0), this.filed, from);
         }
-        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);
+        return this.filed;
+    }
+    /** A sheet's rules at their weight here, with its layers given their places. */
+    entries(sheet, bump) {
+        this.placeLayers(sheet);
+        if (sheet.rules.some((rule) => rule.layer !== undefined))
+            this.layered = true;
+        return sheet.rules.map((rule) => ({ rule, sheet, weight: rule.specificity + bump }));
     }
     /**
      * Gives each of a sheet's layers its place among every sheet's, the first time the sheet is
@@ -1274,7 +1872,8 @@ export class StyleResolver {
     styled(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) {
+        // Nor one that takes a value from its parent's own style, which two parents differ in.
+        if (node.customProperties || inline || node.boundStyle || matched.some(takesParents)) {
             return this.style(node, matched, parentTokens, parentInherited, inline);
         }
         if (this.sharedGeneration !== this.generation) {
@@ -1317,18 +1916,21 @@ export class StyleResolver {
             : 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);
+        const tokens = tokensInScope(parentTokens, result.tokens, node.customProperties, result.importantTokens);
         const own = result.declarations;
         if (result.deferred) {
             this.applyDeferred(result.deferred, own, tokens, parentInherited, result.important);
         }
-        if (own['borderStyle'] === 'none')
-            drawNoBorder(own);
+        settleBorders(own);
         // `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 };
+        settleLineHeight(style);
+        const inherited = decorate(style, inheritFrom(parentInherited, own), own);
+        const rtl = (style['direction'] ?? this.conditions.direction) === 'rtl';
+        const important = importantNames(result, () => TWIN[rtl ? 'rtl' : 'ltr']);
+        return important ? { style, inherited, tokens, important } : { style, inherited, tokens };
     }
     /** The rules that apply to a node, weakest first. */
     matched(node, entries) {
@@ -1370,6 +1972,7 @@ export class StyleResolver {
             declarations: hasImportant ? { ...normal, ...important } : normal,
             important: hasImportant ? important : null,
             tokens,
+            importantTokens,
             deferred,
         };
     }
@@ -1470,6 +2073,10 @@ export class StyleResolver {
      */
     applyDeferred(deferred, own, tokens, parentInherited, important) {
         for (const declaration of settlingOrder(deferred)) {
+            if (declaration.inherit) {
+                this.inherit(declaration, own, parentInherited, important);
+                continue;
+            }
             const settled = this.settled(declaration, own, parentInherited, tokens);
             if (settled === undefined && this.onUndefinedToken) {
                 this.reportUndefined(declaration, tokens);
@@ -1488,6 +2095,42 @@ export class StyleResolver {
             }
         }
     }
+    /** Note what the node being resolved takes an `inherit` from, and that its parent has an heir. */
+    heir(node, parent, matched) {
+        this.parentOf = parent;
+        this.parentInline = node.parent?.props['style'];
+        if (parent && matched.some(takesParents))
+            parent.heirs = true;
+    }
+    /** What the parent of the node being resolved came to: an `inherit` takes its values from it. */
+    parentOf = null;
+    /** That parent's inline style, which is over what its rules gave it. */
+    parentInline;
+    /** What the parent's inline style sets, under what its rules marked important, as on the parent. */
+    parentSet() {
+        if (!this.parentInline)
+            return EMPTY;
+        const inline = flattenInline(this.parentInline, {});
+        for (const prop of this.parentOf?.important ?? [])
+            delete inline[prop];
+        return inline;
+    }
+    /**
+     * `inherit`: each prop as the parent has it, handed down or its own, and gone where the parent
+     * has none, which is what a weaker rule's value for it gives way to.
+     */
+    inherit(declaration, own, parentInherited, important) {
+        const inline = this.parentSet();
+        for (const prop of declaration.props) {
+            if (!declaration.important && important !== null && prop in important)
+                continue;
+            const value = inline[prop] ?? parentInherited[prop] ?? this.parentOf?.style[prop];
+            if (value === undefined)
+                delete own[prop];
+            else
+                own[prop] = value;
+        }
+    }
     /** One deferred declaration's value, from the tokens in scope and the node's own style. */
     settled(declaration, own, parentInherited, tokens) {
         if (declaration.within !== undefined) {
@@ -1625,9 +2268,11 @@ export class StyleResolver {
     }
     /** A length relative to the viewport or to the font size in scope. */
     computed(declaration, own, parentInherited) {
-        const { unit, factor, offset = 0 } = declaration.compute;
+        const { unit, factor, offset = 0, multiple } = declaration.compute;
         if (unit !== 'em')
             return this.viewportLength(unit, factor) + offset;
+        if (multiple && !offset)
+            return { multiple: factor };
         // The font size in scope. On `font-size` itself that is the inherited size rather than the
         // one being computed, which is what makes a nested `1.5em` compound as on the web.
         const base = declaration.props.includes('fontSize')
@@ -1670,9 +2315,34 @@ function settlingOrder(deferred) {
  * The tokens in scope at a node: its parent's, overlaid with what its rules define, overlaid with
  * what it sets itself, which wins as inline style does.
  */
-function tokensInScope(parentTokens, ruleTokens, custom) {
-    const own = custom ? { ...ruleTokens, ...custom } : ruleTokens;
-    return own ? resolveAliases(own, { ...parentTokens, ...own }, parentTokens) : parentTokens;
+function tokensInScope(parentTokens, ruleTokens, custom, important = null) {
+    // What the element sets is over its rules' definitions, but for the ones marked important.
+    const own = custom ? { ...ruleTokens, ...custom, ...important } : ruleTokens;
+    if (!own || changesNothing(own, parentTokens))
+        return parentTokens;
+    return resolveAliases(own, { ...parentTokens, ...own }, parentTokens);
+}
+/**
+ * Whether a node's own definitions leave every token as its parent has it: each is the value the
+ * parent has already, from the same rule, or a CSS-wide keyword that comes to what is in scope.
+ * Tailwind writes `--tw-translate-x: 0`, `--tw-blur: initial` and forty more like them on every
+ * element, so on nearly every node this is all there is, and the parent's map is handed on as it
+ * is where a copy of it, a few hundred tokens, would be made.
+ */
+function changesNothing(own, parentTokens) {
+    for (const name in own) {
+        const value = own[name];
+        // The very value its parent has: the one rule gave it to both, as `*` gives every element.
+        if (parentTokens[name] === value)
+            continue;
+        const word = value.keyword;
+        if (word === undefined || !CSS_WIDE.has(word))
+            return false;
+        // `inherit` and `unset` are the parent's value whatever it is; the rest are no value at all.
+        if (word !== 'inherit' && word !== 'unset' && parentTokens[name] !== undefined)
+            return false;
+    }
+    return true;
 }
 function resolveAliases(own, merged, parentTokens) {
     const names = Object.keys(own);
@@ -2231,7 +2901,8 @@ const LINE_INITIAL = {
     color: 'currentcolor',
 };
 function fillRole(line, values, role, value) {
-    const props = { width: line.widths, color: line.colors, style: [line.style] }[role];
+    const styles = [line.style, ...(line.marks ?? [])];
+    const props = { width: line.widths, color: line.colors, style: styles }[role];
     for (const prop of props)
         values[prop] = value;
 }
@@ -2409,17 +3080,26 @@ 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)
+    const shares = [mix.aPercentage, mix.bPercentage].map((share) => shareOf(share, tokens));
+    // A share that is a token nothing sets: no mix, as CSS has no colour for one.
+    if (first === undefined || second === undefined || shares.includes(null))
         return undefined;
     return [
-        { colour: first, percentage: mix.aPercentage },
-        { colour: second, percentage: mix.bPercentage },
+        { colour: first, percentage: shares[0] ?? undefined },
+        { colour: second, percentage: shares[1] ?? undefined },
     ];
 }
 function unroundedMix(mix, tokens, current) {
     const sides = mixSides(mix, tokens, current);
     return sides && mixChannels(mix.space, ...sides, mix.hue);
 }
+/** A share as the percentage it comes to: undefined for none written, null for a token unset. */
+function shareOf(share, tokens) {
+    if (share === undefined || typeof share === 'number')
+        return share;
+    const factor = tokens[share.reference]?.number ?? share.fallback;
+    return factor === undefined ? null : factor * share.scale;
+}
 /** A calc marker worked out, as its slot takes it; undefined when a token in it is not set. */
 function resolveCalc(marker, tokens) {
     const percentage = wholePercentage(marker, tokens);
@@ -2694,7 +3374,7 @@ const RGB = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)
  * mix. A value that is not one of ours is returned untouched: it may be a platform colour, and a
  * colour nobody can parse is better painted as it stands than dropped.
  */
-function faded(value, fraction) {
+export function faded(value, fraction) {
     if (typeof value !== 'string')
         return value;
     const parts = RGB.exec(value);