@ng-native/fabric 0.3.0 → 0.5.0

package/dist/css.js

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