@ng-native/fabric 0.2.0 → 0.4.0

package/dist/css.js

@@ -5,17 +5,27 @@
  * specificity maths, sorting), so this only walks a pre-sorted rule list and merges. It is
  * framework-agnostic and knows nothing about Angular.
  */
-import { mixColours } from "./color-mix.js";
+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]+/;
 /**
  * Where a form a token does not have can be read from instead. A length is already a
  * line-height and a single word is already a family, so neither is stored twice in every token
  * that happens to be one. The compiler reads fallbacks with the same table.
  */
-const STAND_IN = { lineHeight: 'length', family: 'keyword' };
+const STAND_IN = {
+    lineHeight: 'length',
+    family: 'keyword',
+};
 function formOf(token, kind) {
     if (!token)
         return undefined;
+    // A display is a word, read as one native has where it is used: see `displayOf`. Two words,
+    // `inline flex`, are a family when the stylesheet wrote them, as a font stack's first name is.
+    if (kind === 'display')
+        return token.keyword ?? token.family;
     const stand = STAND_IN[kind];
     return token[kind] ?? (stand ? token[stand] : undefined);
 }
@@ -48,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
@@ -344,6 +362,44 @@ function carryDeferred(deferred, rule) {
         (kept ??= []).push(...rule.deferred);
     return kept;
 }
+const NO_DECLARATIONS = Object.freeze({});
+const pick = (from, names) => Object.fromEntries(names.map((name) => [name, from[name]]));
+const isImportant = (rule) => rule.important !== undefined ||
+    rule.importantTokens !== undefined ||
+    rule.deferred?.some((one) => one.important) === true;
+/**
+ * The matched rules in the order their declarations apply, weakest first.
+ *
+ * That is the order they matched in, unless a layered rule is important. Layers turn round for
+ * `!important`: an important declaration in a layer beats one in a later layer, and both beat one
+ * in no layer. So each such rule is split, its plain declarations where it matched, and its
+ * important ones after every plain one, in the layers' order reversed.
+ */
+function byImportance(matched, places) {
+    if (!matched.some((rule) => rule.layer !== undefined && isImportant(rule)))
+        return matched;
+    const plain = matched.map((rule) => isImportant(rule)
+        ? {
+            ...rule,
+            important: undefined,
+            importantTokens: undefined,
+            deferred: rule.deferred?.filter((one) => !one.important),
+        }
+        : rule);
+    const important = matched
+        .filter(isImportant)
+        // Stable, so rules of one layer keep the order their specificity gave them. Sorted before
+        // they are copied, since a rule's place is kept by the rule itself.
+        .sort((a, b) => layerOrder(places.get(b), places.get(a)))
+        .map((rule) => ({
+        ...rule,
+        declarations: NO_DECLARATIONS,
+        // Its important custom properties alone: the plain ones were applied where it matched.
+        tokens: rule.importantTokens && pick(rule.tokens, rule.importantTokens),
+        deferred: rule.deferred?.filter((one) => one.important),
+    }));
+    return [...plain, ...important];
+}
 function countPosition(node, siblings, fromEnd) {
     let position = 0;
     let seen = 0;
@@ -379,6 +435,35 @@ function lastElement(siblings) {
  * precedence people already have in their fingers rather than inventing a rule for native.
  */
 const COMPONENT_SPECIFICITY_BUMP = 1_000;
+/**
+ * Two rules' layers, weakest first: a layer before each one named after it, a layer's nested
+ * layers before its own rules, and every layered rule before a rule in no layer.
+ */
+function layerOrder(a, b) {
+    if (a === b)
+        return 0;
+    if (a === undefined)
+        return 1;
+    if (b === undefined)
+        return -1;
+    const shared = Math.min(a.length, b.length);
+    for (let depth = 0; depth < shared; depth++) {
+        if (a[depth] !== b[depth])
+            return a[depth] - b[depth];
+    }
+    // One is nested in the other, whose own rules are the stronger.
+    return b.length - a.length;
+}
+/**
+ * The engine's own styles for HTML's text elements, as rules to match before any a stylesheet
+ * holds, so every rule an author writes beats them whatever its specificity, as a browser's own
+ * sheet is beaten. Offered only to a node marked `styled`, which few are.
+ */
+const ELEMENT_ENTRIES = ELEMENT_STYLES.rules.map((rule) => ({
+    rule,
+    sheet: ELEMENT_STYLES,
+    weight: rule.specificity,
+}));
 /**
  * The bucket a rule is filed under: the most selective simple selector in its rightmost compound,
  * which is what a browser calls the key selector.
@@ -490,12 +575,82 @@ function inheritFrom(parentInherited, own) {
     for (const key of Object.keys(own)) {
         if (!INHERITED.has(key))
             continue;
+        // `pointer-events: inherit`, which only an inline style on an element no rule matches still
+        // holds here: what the parent hands down stands.
+        if (key === 'pointerEvents' && own[key] === 'inherit')
+            continue;
         if (inherited === parentInherited)
             inherited = { ...parentInherited };
-        inherited[key] = own[key];
+        if (key === 'pointerEvents' && !INHERITED_POINTER_EVENTS.has(own[key])) {
+            delete inherited[key];
+        }
+        else {
+            inherited[key] = own[key];
+        }
     }
     return inherited;
 }
+/**
+ * A text decoration's colour, which travels with its line rather than inheriting on its own. A
+ * decoration is drawn under the text inside the element that declares it, in that element's
+ * decoration colour or its text colour, and a text's own decoration colour only colours a line it
+ * declares itself. `style` is the node's, and gets the colour its line is drawn in; what its
+ * children inherit is returned.
+ */
+function decorate(style, inherited, own) {
+    const declared = own['textDecorationLine'] !== undefined;
+    // With no line declared here or above, nothing is drawn and the colour is left as computed.
+    if (!declared && !drawsLine(inherited['textDecorationLine']))
+        return inherited;
+    const colour = declared
+        ? (own['textDecorationColor'] ?? style['color'])
+        : inherited['textDecorationColor'];
+    if (colour === undefined)
+        delete style['textDecorationColor'];
+    else
+        style['textDecorationColor'] = colour;
+    if (!declared || inherited['textDecorationColor'] === colour)
+        return inherited;
+    const { textDecorationColor: _parent, ...rest } = inherited;
+    return colour === undefined ? rest : { ...rest, textDecorationColor: colour };
+}
+function drawsLine(line) {
+    return line !== undefined && line !== 'none';
+}
+/** Whether an inline style sets a property children inherit. Allocates nothing: it runs per set. */
+export function setsInherited(style) {
+    if (!style || typeof style !== 'object')
+        return false;
+    if (Array.isArray(style))
+        return style.some(setsInherited);
+    for (const key in style) {
+        if (INHERITED.has(key) && style[key] != null)
+            return true;
+    }
+    return false;
+}
+/**
+ * The inherited properties a node's inline style sets, or null for none. Inline style is the
+ * strongest normal declaration on its element, so what it sets is inherited, and read by
+ * `color: inherit` and `currentColor`, as a rule's would be.
+ */
+export function inlineInherited(style) {
+    let out = null;
+    // Flattened first, as native applies it, so a later entry's null clears an earlier value.
+    for (const [key, value] of Object.entries(flattenInline(style, {}))) {
+        if (INHERITED.has(key) && value !== undefined && value !== null)
+            (out ??= {})[key] = value;
+    }
+    return out;
+}
+function flattenInline(style, into) {
+    if (Array.isArray(style))
+        for (const entry of style)
+            flattenInline(entry, into);
+    else if (style && typeof style === 'object')
+        Object.assign(into, style);
+    return into;
+}
 /**
  * The runtime half of CSS for one engine: the global sheet, the conditions media queries are
  * evaluated against, and the memo that makes resolution cost nodes x rules rather than
@@ -533,11 +688,32 @@ 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.
      */
     globalSheet;
+    /**
+     * Global sheets added once the engine is running, in the order they came: a
+     * `ViewEncapsulation.None` component's, which a browser adds to the document unscoped when the
+     * component first renders, after the application's own. See `addGlobalSheet`.
+     */
+    addedSheets = [];
     /**
      * Custom properties the host supplies rather than the stylesheet: the safe-area insets, and
      * whatever else is a property of the device instead of the design.
@@ -556,10 +732,46 @@ export class StyleResolver {
      * which is dropped. Set only in development, where it is how the engine says so.
      */
     onUndefinedToken = null;
+    /**
+     * Told of a `display: var()` whose token holds no display native has, `grid` or `table`, which
+     * leaves display unset. Set only in development, where it is how the engine says so: the
+     * compiler refuses the same value written out, but a token is only known here.
+     */
+    onUnreadDisplay = null;
     constructor(globalSheet, conditions) {
         this.globalSheet = globalSheet;
         this.conditions = conditions;
     }
+    /**
+     * Match `sheet` against every node from now on, as a global sheet, after the application's;
+     * false when it already is. Every cached result goes, as on a theme switch: rules that were not
+     * there can now match anything. `:host` in it matches nothing, since no node hosts it.
+     *
+     * With `replacing`, a sheet added before, it takes that one's place, and so its order: a hot
+     * swap of the component's CSS edits the sheet where it is.
+     */
+    addGlobalSheet(sheet, replacing) {
+        if (sheet === this.globalSheet || this.addedSheets.includes(sheet))
+            return false;
+        const at = replacing ? this.addedSheets.indexOf(replacing) : -1;
+        if (at === -1)
+            this.addedSheets.push(sheet);
+        else
+            this.addedSheets[at] = sheet;
+        this.merged = new WeakMap();
+        this.generation = ++generations;
+        return true;
+    }
+    /** Stop matching a sheet `addGlobalSheet` added; false when it is not one. */
+    removeGlobalSheet(sheet) {
+        const at = this.addedSheets.indexOf(sheet);
+        if (at === -1)
+            return false;
+        this.addedSheets.splice(at, 1);
+        this.merged = new WeakMap();
+        this.generation = ++generations;
+        return true;
+    }
     setConditions(next) {
         this.conditions = next;
         this.generation = ++generations;
@@ -590,11 +802,13 @@ export class StyleResolver {
             return cached;
         }
         const parentInherited = parent ? parent.inherited : EMPTY;
-        if (this.hasNoRules(node)) {
+        // A box the engine made around loose text is in no template, so no rule matches it.
+        if (node.anonymous || this.hasNoRules(node)) {
             return this.unstyled(node, epoch, parent, parentContext, parentInherited);
         }
         styleStats.nodesResolved++;
-        const matched = this.matched(node, this.rulesFor(node));
+        const candidates = this.rulesFor(node);
+        const matched = this.matched(node, node.styled ? ELEMENT_ENTRIES.concat(candidates) : candidates);
         const parentTokens = parent ? parent.tokens : this.tokensOnRoot;
         const styled = this.styled(node, matched, parentTokens, parentInherited);
         const cache = {
@@ -633,17 +847,29 @@ export class StyleResolver {
         return (node.sheet === null &&
             node.hostSheet === null &&
             this.globalSheet === null &&
-            !node.customProperties);
+            this.addedSheets.length === 0 &&
+            !node.customProperties &&
+            !node.boundStyle &&
+            !node.styled);
     }
     /**
      * A node with no rules anywhere: it renders with what it inherits and passes the same map on.
      *
      * It still mints a context, because a rule further down may match on one of *its* classes.
      * When there is nothing to inherit either, one shared cache object serves every such node, so
-     * an application that writes no CSS allocates nothing per node.
+     * an application that writes no CSS allocates nothing per node. Not when there are tokens to
+     * carry: the shared object holds none, and the surface root answering with it dropped every
+     * token the device had seeded.
      */
     unstyled(node, epoch, parent, parentContext, parentInherited) {
-        if (parentInherited === EMPTY && parentContext === ROOT_CONTEXT && !node.styleDirty) {
+        const tokens = parent ? parent.tokens : this.tokensOnRoot;
+        // 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) {
             if (this.emptyCache.epoch !== epoch || this.emptyCache.generation !== this.generation) {
                 this.emptyCache = emptyCacheFor(epoch, this.generation);
             }
@@ -656,8 +882,8 @@ export class StyleResolver {
             context: {},
             parentContext,
             style: parentInherited,
-            inherited: parentInherited,
-            tokens: parent ? parent.tokens : this.tokensOnRoot,
+            inherited: inline ? inheritFrom(parentInherited, inline) : parentInherited,
+            tokens,
         };
         node.styleCache = passthrough;
         node.styleDirty = false;
@@ -688,12 +914,17 @@ export class StyleResolver {
      * 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.
+     *
+     * 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 });
             }
@@ -701,7 +932,43 @@ export class StyleResolver {
         add(this.globalSheet, 0);
         add(hostSheet, COMPONENT_SPECIFICITY_BUMP);
         add(sheet, COMPONENT_SPECIFICITY_BUMP);
-        return entries.sort((a, b) => a.weight - b.weight);
+        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);
+        }
+        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
@@ -713,8 +980,11 @@ export class StyleResolver {
      * written to after, so sharing it is safe; each node still has a cache and a context of its own.
      */
     styled(node, matched, parentTokens, parentInherited) {
-        if (node.customProperties)
-            return this.style(node, matched, parentTokens, parentInherited);
+        // Shared between nodes that match alike, unless the node sets something of its own.
+        const inline = node.inlineInherits ? inlineInherited(node.props['style']) : null;
+        if (node.customProperties || inline || node.boundStyle) {
+            return this.style(node, matched, parentTokens, parentInherited, inline);
+        }
         if (this.sharedGeneration !== this.generation) {
             this.shared.clear();
             this.sharedGeneration = this.generation;
@@ -744,8 +1014,15 @@ export class StyleResolver {
         return id;
     }
     /** A node's style from the rules it matched, worked out. */
-    style(node, matched, parentTokens, parentInherited) {
-        const result = this.cascade(matched);
+    style(node, matched, parentTokens, parentInherited, inline = null) {
+        // Inline style is the last normal declaration, under every important one.
+        const bound = node.boundStyle;
+        const result = this.cascade(inline || bound
+            ? [
+                ...matched,
+                { declarations: inline ?? EMPTY, ...(bound && { deferred: bound }) },
+            ]
+            : matched);
         // Tokens are in scope for this node's own declarations as well as its descendants', so they
         // are merged before any `var()` here is resolved.
         const tokens = tokensInScope(parentTokens, result.tokens, node.customProperties);
@@ -755,11 +1032,11 @@ export class StyleResolver {
         }
         if (own['borderStyle'] === 'none')
             drawNoBorder(own);
-        return {
-            style: { ...parentInherited, ...own },
-            inherited: inheritFrom(parentInherited, own),
-            tokens,
-        };
+        // `pointer-events: inherit` won the cascade: what the parent hands down stands.
+        if (own['pointerEvents'] === 'inherit')
+            delete own['pointerEvents'];
+        const style = { ...parentInherited, ...own };
+        return { style, inherited: decorate(style, inheritFrom(parentInherited, own), own), tokens };
     }
     /** The rules that apply to a node, weakest first. */
     matched(node, entries) {
@@ -776,8 +1053,9 @@ export class StyleResolver {
         const important = {};
         let hasImportant = false;
         let tokens = null;
+        let importantTokens = null;
         let deferred = null;
-        for (const rule of matched) {
+        for (const rule of this.layered ? byImportance(matched, this.layerPlaces) : matched) {
             Object.assign(normal, rule.declarations);
             if (rule.important) {
                 Object.assign(important, rule.important);
@@ -785,8 +1063,14 @@ export class StyleResolver {
             }
             if (rule.tokens)
                 Object.assign((tokens ??= {}), rule.tokens);
+            // An important custom property beats every plain one, whatever the rules' order.
+            if (rule.importantTokens) {
+                Object.assign((importantTokens ??= {}), pick(rule.tokens, rule.importantTokens));
+            }
             deferred = carryDeferred(deferred, rule);
         }
+        if (importantTokens)
+            Object.assign(tokens, importantTokens);
         return {
             declarations: hasImportant ? { ...normal, ...important } : normal,
             important: hasImportant ? important : null,
@@ -862,13 +1146,17 @@ export class StyleResolver {
             if (settled === undefined && this.onUndefinedToken) {
                 this.reportUndefined(declaration, tokens);
             }
+            const outranked = (prop) => !declaration.important && important !== null && prop in important;
+            // Said only of a display that is written: an important one wins over the token's.
+            const unread = settled === undefined && declaration.kind === 'display';
+            if (unread && this.onUnreadDisplay && !outranked('display')) {
+                this.reportDisplay(declaration, tokens);
+            }
             const value = settled ?? declaration.unset;
-            if (value === undefined)
-                continue;
             for (const prop of declaration.props) {
-                if (!declaration.important && important && prop in important)
+                if (outranked(prop))
                     continue;
-                own[prop] = value;
+                write(own, prop, value, declaration.line !== undefined);
             }
         }
     }
@@ -879,6 +1167,8 @@ export class StyleResolver {
         }
         if (declaration.compute)
             return this.computed(declaration, own, parentInherited);
+        if (declaration.line)
+            return this.settledLine(declaration, own, parentInherited, tokens);
         const value = referenced(declaration, tokens);
         if (declaration.whenSet !== undefined)
             return value === undefined ? undefined : declaration.whenSet;
@@ -893,6 +1183,35 @@ export class StyleResolver {
             ? this.settledWithin(value, declaration, own, parentInherited, tokens)
             : value;
     }
+    /** A line's longhands from its tokens, with a width in `em` worked out against the font size. */
+    settledLine(declaration, own, parentInherited, tokens) {
+        const line = declaration.line;
+        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';
+            for (const prop of line.colors)
+                values[prop] = colour;
+        }
+        const width = values[line.widths[0]];
+        if (!width?.__defer)
+            return values;
+        // No less than zero, as CSS clamps a line's width: `calc(var(--w) - 2px)` with an em token.
+        const points = this.computed({ ...declaration, compute: width.__defer }, own, parentInherited);
+        for (const prop of line.widths)
+            values[prop] = Math.max(points, 0);
+        return values;
+    }
     /** A reference with nothing defined for it and nothing to fall back to. */
     reportUndefined(declaration, tokens) {
         const name = declaration.reference;
@@ -902,7 +1221,14 @@ 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) {
+        const names = [declaration.reference, ...(declaration.alternatives ?? [])];
+        const name = names.find((candidate) => tokens[candidate] !== undefined);
+        if (name)
+            this.onUnreadDisplay(name, formOf(tokens[name], 'display'));
     }
     /**
      * A structured value with every deferred length and colour inside it settled, or undefined when
@@ -924,10 +1250,15 @@ export class StyleResolver {
         const fill = (part) => this.filledIn(part, declaration, own, parentInherited, tokens);
         if (Array.isArray(value))
             return this.filledList(value, fill, tokens);
-        const marked = settledMarker(value, tokens);
         // `currentcolor` is the colour in scope, which only the node knows: Tailwind's ring default.
+        // On `color` itself that is the inherited colour, as CSS reads it.
+        const current = () => {
+            const ownColour = declaration.props.includes('color') ? undefined : own['color'];
+            return (ownColour ?? parentInherited['color'] ?? 'black');
+        };
+        const marked = settledMarker(value, tokens, current);
         if (marked === 'currentcolor')
-            return own['color'] ?? parentInherited['color'] ?? 'black';
+            return current();
         if (marked !== NOT_A_MARKER)
             return marked ?? UNSETTLED;
         const pending = value.__defer;
@@ -957,7 +1288,7 @@ export class StyleResolver {
                 parts.push(filled);
                 continue;
             }
-            const filled = fill(formOf(tokens[slot.marker.reference], slot.kind) ?? slot.marker.fallback);
+            const filled = fill(substitute(slot.marker, tokens, (token) => slotEntries(token, slot.kind)));
             if (filled === UNSETTLED || !Array.isArray(filled))
                 return UNSETTLED;
             parts.push(...filled);
@@ -1013,10 +1344,15 @@ function settlingOrder(deferred) {
  */
 function tokensInScope(parentTokens, ruleTokens, custom) {
     const own = custom ? { ...ruleTokens, ...custom } : ruleTokens;
-    return own ? resolveAliases(own, { ...parentTokens, ...own }) : parentTokens;
+    return own ? resolveAliases(own, { ...parentTokens, ...own }, parentTokens) : parentTokens;
 }
-function resolveAliases(own, merged) {
+function resolveAliases(own, merged, parentTokens) {
     const names = Object.keys(own);
+    for (const name of names) {
+        const word = own[name].keyword;
+        if (word !== undefined && CSS_WIDE.has(word))
+            cssWide(merged, name, word, parentTokens);
+    }
     const aliases = names.filter((name) => own[name].alias);
     followAliases(aliases, merged);
     // Left to work out: each token made of others and each alias that came to one, by a link or a
@@ -1026,6 +1362,25 @@ function resolveAliases(own, merged) {
         settleDerived(own, merged, pending);
     return merged;
 }
+const CSS_WIDE = new Set([
+    'initial',
+    'inherit',
+    'unset',
+    'revert',
+    'revert-layer',
+]);
+/**
+ * A token set to a CSS-wide keyword, as CSS has one: its parent's value for `inherit` and `unset`,
+ * since a custom property inherits, and otherwise its initial value, which is to be unset. Tailwind
+ * writes `--tw-blur: initial` for each filter slot a node has not filled.
+ */
+function cssWide(merged, name, word, parentTokens) {
+    const inherited = word === 'inherit' || word === 'unset' ? parentTokens[name] : undefined;
+    if (inherited)
+        merged[name] = inherited;
+    else
+        delete merged[name];
+}
 /** What a token not yet worked out reads as while another is: set, with no form of any kind. */
 const PENDING = Object.freeze({});
 /**
@@ -1051,7 +1406,7 @@ function settleDerived(own, merged, pending) {
         for (const name of pending) {
             read = new Set();
             const token = own[name];
-            const value = token.alias ? substitutedIn(token, view) : derived(token, view);
+            const value = token.alias ? substitutedIn(token, view) : workedOut(token, view);
             if (read.size) {
                 waitingOn.set(name, read);
                 continue;
@@ -1077,7 +1432,87 @@ function substitutedIn(token, tokens) {
             return target;
         link = link.fallback;
     }
-    return link && isDerived(link) ? derived(link, tokens) : link;
+    return link && isDerived(link) ? workedOut(link, tokens) : link;
+}
+/**
+ * A token that is set but makes no valid value. A use site finds it set, so takes no fallback, and
+ * in no form, so its property is unset, as CSS substitutes such a token and then unsets it.
+ */
+const INVALID = Object.freeze({});
+/**
+ * A token made of others, worked out: invalid when it makes nothing valid, as `hsl()` of a
+ * percentage hue does, and unset only when a `var()` in it has nothing to be substituted with.
+ */
+function workedOut(token, tokens) {
+    return derived(token, tokens) ?? (substitutable(token, tokens) ? INVALID : undefined);
+}
+/** Whether each `var()` in a token made of others names a token that is set, or has a fallback. */
+function substitutable(token, tokens) {
+    if (token.hsl)
+        return hslSubstitutable(token.hsl, tokens);
+    if (token.deferredColour)
+        return colourSubstitutable(token.deferredColour, tokens);
+    // Each marker is one reading of the same text, and a fallback one cannot read is dropped from it.
+    return token.deferredCalc.some((marker) => calcSubstitutable(marker.expression, tokens));
+}
+function hslSubstitutable(hsl, tokens) {
+    return [hsl.h, hsl.s, hsl.l, hsl.alpha].every((channel) => typeof channel !== 'object' ||
+        tokens[channel.reference] !== undefined ||
+        channel.fallback !== undefined);
+}
+function calcSubstitutable(expression, tokens) {
+    if (Array.isArray(expression)) {
+        return expression.slice(1).every((side) => calcSubstitutable(side, tokens));
+    }
+    if (typeof expression !== 'object' || 'percentage' in expression)
+        return true;
+    const leaf = expression;
+    if (tokens[leaf.reference] !== undefined)
+        return true;
+    return leaf.fallback !== undefined && calcSubstitutable(leaf.fallback, tokens);
+}
+function colourSubstitutable(expression, tokens) {
+    if ('color' in expression)
+        return true;
+    if ('hsl' in expression)
+        return hslSubstitutable(expression.hsl, tokens);
+    if ('relative' in expression)
+        return colourSubstitutable(expression.relative.from, tokens);
+    if ('mix' in expression) {
+        const { a, b } = expression.mix;
+        return colourSubstitutable(a, tokens) && colourSubstitutable(b, tokens);
+    }
+    if ('channels' in expression) {
+        const { channels, alpha } = expression;
+        const set = (one) => tokens[one.reference] !== undefined || one.fallback !== undefined;
+        return set(channels) && (typeof alpha !== 'object' || set(alpha));
+    }
+    return referenceSubstitutable(expression, tokens);
+}
+/** A colour's `var()`: a token or alternative that is set, or a fallback that can be worked out. */
+function referenceSubstitutable(expression, tokens) {
+    const names = [expression.reference, ...(expression.alternatives ?? [])];
+    if (names.some((name) => tokens[name] !== undefined))
+        return true;
+    if (expression.fallback !== undefined)
+        return true;
+    const token = expression.fallbackToken;
+    return token !== undefined && (!isDerived(token) || substitutable(token, tokens));
+}
+/**
+ * A reference read from its token when that is set, in whatever form `read` finds, and its
+ * fallback only when it is not.
+ */
+function substitute(marker, tokens, read) {
+    const token = tokens[marker.reference];
+    return token === undefined ? marker.fallback : read(token);
+}
+/** The first of the names that is set: the one a `var()` and its `var()` fallbacks substitute. */
+function firstSet(names, tokens) {
+    for (const name of names)
+        if (tokens[name] !== undefined)
+            return tokens[name];
+    return undefined;
 }
 /** The names among `names` that reach themselves by what each waits on. */
 function inCycles(names, waitingOn) {
@@ -1134,36 +1569,78 @@ function calcToken(markers, tokens) {
             token = { ...token, length: value };
         else if (typeof value === 'number')
             token = { ...token, number: value };
+        // Arithmetic of a percentage, `calc(var(--half) * 2)`, is a percentage, as a token written
+        // `100%` is, so an hsl() does not read it as a bare number of percent.
+        const percentage = marker.kind === 'number' && calcType(marker.expression, tokens) === '%';
+        if (percentage && typeof value === 'number' && token?.length === undefined) {
+            token = { ...token, length: `${Math.round(value * 100000) / 1000}%` };
+        }
     }
     return token;
 }
+/**
+ * What a calc() of numbers and percentage tokens makes, as CSS types it: a number, `''`, a
+ * percentage, `'%'`, or neither, as a percentage added to a number is, or one percentage
+ * multiplied by another.
+ */
+function calcType(expression, tokens) {
+    if (typeof expression === 'number')
+        return '';
+    if (!Array.isArray(expression))
+        return leafType(expression, tokens);
+    const [op, a, b] = expression;
+    const left = calcType(a, tokens);
+    const right = calcType(b, tokens);
+    if (left === undefined || right === undefined)
+        return undefined;
+    if (op === '*')
+        return left && right ? undefined : left || right;
+    if (op === '/')
+        return right ? undefined : left;
+    return left === right ? left : undefined;
+}
+/** What one token in a calc() is, as `calcType` reads it: its fallback's type when it is unset. */
+function leafType(leaf, tokens) {
+    if ('percentage' in leaf)
+        return '%';
+    const token = tokens[leaf.reference];
+    if (!token)
+        return leaf.fallback === undefined ? undefined : calcType(leaf.fallback, tokens);
+    return typeof token.length === 'string' && token.length.endsWith('%') ? '%' : '';
+}
 /** An `hsl()` token's channels, read from the tokens in scope, as the colour they make. */
 function resolveHsl(hsl, tokens) {
-    const h = hslChannel(hsl.h, tokens, true);
-    const s = hslChannel(hsl.s, tokens);
-    const l = hslChannel(hsl.l, tokens);
-    const alpha = hsl.alpha === undefined ? 1 : hslChannel(hsl.alpha, tokens);
+    const h = hslChannel(hsl.h, tokens, 'hue');
+    const s = hslChannel(hsl.s, tokens, hsl.legacy ? 'legacy' : 'percentage');
+    const l = hslChannel(hsl.l, tokens, hsl.legacy ? 'legacy' : 'percentage');
+    const alpha = hsl.alpha === undefined ? 1 : hslChannel(hsl.alpha, tokens, 'alpha');
     if (h === undefined || s === undefined || l === undefined || alpha === undefined) {
         return undefined;
     }
     return hslToRgb(h, s, l, alpha);
 }
 /**
- * A channel's number, or undefined when its token is the wrong kind for the slot: a hue is a
- * number or an angle, read in degrees, as `0.5turn` is 180 and not 0.5, and never a percentage; a
- * saturation, a lightness or an alpha is never an angle. The fallback is only for a token that is
- * not set, as a set one is substituted, whatever it holds.
+ * A channel's number, or undefined when its token is the wrong kind for the slot, as the token's
+ * text substituted into the hsl() would read: a hue is a number or an angle, read in degrees, as
+ * `0.5turn` is 180 and not 0.5, and never a percentage; a saturation or a lightness is a
+ * percentage, or a bare number of percent, `--s: 100`, though not in the legacy comma syntax; an
+ * alpha is a number or a percentage. The fallback is only for a token that is not set, as a set
+ * one is substituted, whatever it holds.
  */
-function hslChannel(channel, tokens, hue = false) {
+function hslChannel(channel, tokens, slot) {
     if (typeof channel === 'number')
         return channel;
     const token = tokens[channel.reference];
     if (!token)
         return channel.fallback;
-    if (!hue)
-        return token.angle === undefined ? token.number : undefined;
     const percentage = typeof token.length === 'string' && token.length.endsWith('%');
-    return percentage ? undefined : (token.angle ?? token.number);
+    if (slot === 'hue')
+        return percentage ? undefined : (token.angle ?? token.number);
+    if (token.angle !== undefined || token.number === undefined)
+        return undefined;
+    if (percentage || slot === 'alpha')
+        return token.number;
+    return slot === 'legacy' ? undefined : token.number / 100;
 }
 /**
  * `hsl(h, s, l)` converted to sRGB, printed the same way `fromChannels` prints an rgba() built
@@ -1232,28 +1709,236 @@ function substituted(value, tokens, path, depth) {
 function referenced(declaration, tokens) {
     if (declaration.gradient)
         return paintLayers(declaration.gradient, tokens);
-    let value = formOf(tokens[declaration.reference], declaration.kind);
+    // The first token set is substituted, whatever it holds: one of the wrong kind leaves the
+    // property unset rather than trying the next, or the fallback.
+    const names = [declaration.reference, ...(declaration.alternatives ?? [])];
+    const token = firstSet(names, tokens);
+    let value = token ? tokenForm(token, declaration.kind) : fallbackOf(declaration, tokens);
     // `calc(var(--n) * 1px)`: the arithmetic gives a unitless token its unit, which is the usual
-    // way to turn a count into a length. So a length with arithmetic reads the bare number too.
-    if (value === undefined && declaration.adjust && declaration.kind === 'length') {
-        value = tokens[declaration.reference]?.number;
-    }
-    for (const alternative of declaration.alternatives ?? []) {
-        if (value !== undefined)
-            break;
-        value = formOf(tokens[alternative], declaration.kind);
+    // way to turn a count into a length. So it reads the bare number, and a length is no such thing.
+    if (token && declaration.adjust?.number && declaration.kind === 'length') {
+        value = token.number;
     }
-    value ??= fallbackOf(declaration, tokens);
+    if (declaration.kind === 'display')
+        return displayOf(value);
     const base = CHANNEL_KINDS.has(declaration.kind)
         ? fromChannels(value, declaration.alpha, tokens, declaration.space)
         : value;
     return declaration.adjust ? adjusted(base, declaration.adjust) : base;
 }
+/**
+ * What native displays for a keyword: flex, none or contents. A block, inline, inline-block,
+ * flow-root or inline-flex box is flex, as the compiler reads one written out, and so is `flow`,
+ * which is a block. Anything else, a grid or a table, is no display native has, so the property
+ * is unset.
+ */
+const DISPLAYS = new Map([
+    ...['flex', 'block', 'inline', 'inline-block', 'flow-root', 'inline-flex', 'flow'].map((word) => [word, 'flex']),
+    ['none', 'none'],
+    ['contents', 'contents'],
+]);
+/**
+ * The two-keyword form, an outer display and an inner one in either order: `inline flex` is
+ * `inline-flex` and `block flow` is `block`, as Chrome computes them, so each is flex here.
+ */
+const OUTER = new Set(['block', 'inline']);
+const INNER = new Set(['flow', 'flow-root', 'flex']);
+function displayOf(value) {
+    if (typeof value !== 'string')
+        return undefined;
+    const words = value.toLowerCase().split(CSS_SPACE);
+    if (words.length === 1)
+        return DISPLAYS.get(words[0]);
+    const [first, second] = words;
+    const pair = (OUTER.has(first) && INNER.has(second)) || (INNER.has(first) && OUTER.has(second));
+    return words.length === 2 && pair ? 'flex' : undefined;
+}
+/**
+ * A set token's value in the form wanted. A token of `currentColor` is the colour in scope where
+ * it is used, not where it is set, so it is the marker the node fills in.
+ */
+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;
     return declaration.fallback ?? (token && formOf(derived(token, tokens), declaration.kind));
 }
+/**
+ * One longhand of a deferred declaration written to the node's own style. Unset when the value is
+ * nothing, as CSS has a declaration invalid once its tokens are known: it still wins the cascade,
+ * so what a weaker rule set goes, and the property inherits or starts over. A line's value is one
+ * per longhand, and leaves the ones it was written with alone.
+ */
+function write(own, prop, value, perProp) {
+    if (value === undefined)
+        delete own[prop];
+    else if (!perProp)
+        own[prop] = value;
+    else if (prop in value) {
+        own[prop] = value[prop];
+    }
+}
+/** The styles a line's token can be, as the compiler reads a written one. */
+const LINE_STYLES = new Set([
+    'solid',
+    'dashed',
+    'dotted',
+    'double',
+    'groove',
+    'ridge',
+    'inset',
+    'none',
+    'hidden',
+]);
+const LINE_WIDTHS = { thin: 1, medium: 3, thick: 5 };
+/** What a line's token substitutes to: a token, or nothing at all, `var(--x,)` or `--x: ;`. */
+const NOTHING = Symbol('nothing');
+/**
+ * A line's longhands, each token given the one role its form says and the written parts did not
+ * take. Undefined when a token is unset with nothing to fall back to, fits no role left, or would
+ * take a role twice: CSS makes the whole shorthand invalid then.
+ */
+function lineValues(line, tokens) {
+    const open = new Set(line.roles);
+    const values = {};
+    for (const reference of line.references) {
+        const token = lineToken(reference, tokens);
+        if (token === undefined)
+            return undefined;
+        if (token === NOTHING)
+            continue;
+        const found = reference.adjust
+            ? computedWidth(token, open, reference.adjust)
+            : lineRole(token, open);
+        if (!found)
+            return undefined;
+        open.delete(found.role);
+        fillRole(line, values, found.role, found.value);
+    }
+    // A part no token filled takes its initial value, as one left out of a written line does.
+    for (const role of open)
+        fillRole(line, values, role, LINE_INITIAL[role]);
+    return values;
+}
+/** A token of `currentColor`, in any case. */
+const isCurrentColour = (token) => token?.keyword?.toLowerCase() === 'currentcolor';
+/** The marker the compiler writes for `currentColor`, which the node fills in. */
+const CURRENT_COLOUR = { __colour: { color: 'currentcolor' } };
+/** What a line's width, style and colour are when it leaves them out. */
+const LINE_INITIAL = {
+    width: LINE_WIDTHS['medium'],
+    style: 'none',
+    color: 'currentcolor',
+};
+function fillRole(line, values, role, value) {
+    const props = { width: line.widths, color: line.colors, style: [line.style] }[role];
+    for (const prop of props)
+        values[prop] = value;
+}
+function lineToken(reference, tokens) {
+    const set = firstSet([reference.reference, ...(reference.alternatives ?? [])], tokens);
+    if (set)
+        return set.keyword?.trim() === '' ? NOTHING : set;
+    if (reference.empty)
+        return NOTHING;
+    const { fallback } = reference;
+    return fallback && isDerived(fallback) ? derived(fallback, tokens) : fallback;
+}
+/** The role a token's form says it has, among those still open. */
+function lineRole(token, open) {
+    const word = token.keyword;
+    const width = word && word in LINE_WIDTHS ? LINE_WIDTHS[word] : token.length;
+    if (open.has('width') && (typeof width === 'number' || isDeferredLength(width))) {
+        return { role: 'width', value: width };
+    }
+    if (open.has('style') && word && LINE_STYLES.has(word))
+        return { role: 'style', value: word };
+    const color = isCurrentColour(token) ? 'currentcolor' : formOf(token, 'color');
+    return open.has('color') && color !== undefined ? { role: 'color', value: color } : undefined;
+}
+/** A `calc()` of a token, which is a width, and no less than zero, as CSS clamps one. */
+function computedWidth(token, open, adjust) {
+    // A bare number only when the calc() gives it its unit: `calc(var(--n) * 1px)`.
+    const length = adjust.number ? token.number : token.length;
+    if (!open.has('width') || (typeof length !== 'number' && !isDeferredLength(length))) {
+        return undefined;
+    }
+    const value = adjusted(length, adjust);
+    return { role: 'width', value: typeof value === 'number' ? Math.max(value, 0) : value };
+}
+const isDeferredLength = (value) => typeof value === 'object' && value !== null && '__defer' in value;
 const CHANNEL_KINDS = new Set(['channels', 'hslChannels']);
 /**
  * `13, 110, 253` as the colour it is, at the alpha the token beside it says, if one does: the
@@ -1263,8 +1948,8 @@ function fromChannels(value, alpha, tokens, space) {
     if (!Array.isArray(value) || value.length !== 3)
         return undefined;
     // An alpha naming a token nothing set, with no fallback, is no colour: CSS drops it.
-    const opacity = alpha ? (tokens[alpha.reference]?.number ?? alpha.fallback) : 1;
-    if (opacity === undefined)
+    const opacity = alpha ? substitute(alpha, tokens, (token) => token.number) : 1;
+    if (typeof opacity !== 'number')
         return undefined;
     if (space === 'hsl')
         return hslToRgb(value[0], value[1], value[2], opacity);
@@ -1295,29 +1980,47 @@ function paintLayers(gradient, tokens) {
  */
 function paintGradient(template, tokens) {
     const colorStops = paintedStops(template, tokens);
-    if (colorStops.length < 2)
+    if (!colorStops || colorStops.length < 2)
         return undefined;
     const position = template.position && placed(template.position, tokens);
     if (position === null)
         return undefined;
     return [{ ...template, colorStops, ...(position ? { position } : {}) }];
 }
-/** A template's stops with their tokens read, leaving out any whose colour is not set. */
+/**
+ * A template's stops with their tokens read, leaving out any whose colour is not set. Undefined
+ * when a stop's colour or position token is set but no such thing, which makes the gradient
+ * invalid, as CSS substitutes a set token rather than falling back.
+ */
 function paintedStops(template, tokens) {
     const colorStops = [];
     for (const stop of template.colorStops) {
-        const color = stop.colour ? resolveColour(stop.colour, tokens) : tokens[stop.reference]?.color;
+        const token = stop.colour ? undefined : tokens[stop.reference];
+        const color = stop.colour ? resolveColour(stop.colour, tokens) : token?.color;
+        // `none` is how the Tailwind flattening writes `via-none`: the stop left out, not invalid.
+        if (color === undefined && token && token.keyword !== 'none')
+            return undefined;
         if (color === undefined)
             continue;
-        const position = stop.positionReference
-            ? (tokens[stop.positionReference]?.length ?? stop.position)
-            : stop.position;
+        const position = stopPosition(stop, tokens);
+        if (position === INVALID_POSITION)
+            return undefined;
         // Written even when there is none: Fabric looks the key up before it looks at the value, and
         // silently skips a stop that has not got one.
         colorStops.push({ color, position: position ?? null });
     }
     return colorStops;
 }
+const INVALID_POSITION = Symbol('invalid position');
+/** A stop's position: its token's when that is set, the one written otherwise. */
+function stopPosition(stop, tokens) {
+    if (!stop.positionReference)
+        return stop.position;
+    const token = tokens[stop.positionReference];
+    if (!token)
+        return stop.position;
+    return token.length ?? INVALID_POSITION;
+}
 /**
  * A radial gradient's centre with any token in it read, or null when a token it needs is not set
  * and has nothing written beside it: CSS would not paint the gradient then, and neither does this.
@@ -1329,8 +2032,8 @@ function placed(position, tokens) {
             out[edge] = offset;
             continue;
         }
-        const { reference, fallback } = offset;
-        const value = tokens[reference]?.length ?? fallback;
+        const marker = offset;
+        const value = substitute(marker, tokens, (token) => token.length);
         if (value === undefined || typeof value === 'object')
             return null;
         out[edge] = value;
@@ -1340,8 +2043,11 @@ function placed(position, tokens) {
 /**
  * A colour expression with its tokens looked up and any mix in it worked out. Undefined when a
  * token it needs is not defined anywhere and has nothing to fall back to.
+ *
+ * `current` is the node's colour, for a `currentColor` inside a mix or a relative colour. One that
+ * is the whole expression is answered as `currentcolor`, for the caller to fill in.
  */
-function resolveColour(expression, tokens) {
+function resolveColour(expression, tokens, current) {
     if ('color' in expression)
         return expression.color;
     if ('channels' in expression)
@@ -1352,15 +2058,39 @@ 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 { space, hue, a, aPercentage, b, bPercentage } = expression.mix;
-    const first = resolveColour(a, tokens);
-    const second = resolveColour(b, 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, 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)
         return undefined;
-    return mixColours(space, { colour: first, percentage: aPercentage }, { colour: second, percentage: bPercentage }, hue);
+    return [
+        { colour: first, percentage: mix.aPercentage },
+        { colour: second, percentage: mix.bPercentage },
+    ];
+}
+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. */
 function resolveCalc(marker, tokens) {
@@ -1369,6 +2099,9 @@ function resolveCalc(marker, tokens) {
         return percentage;
     if (bareNumberAsLength(marker, tokens) || notAnAngle(marker, tokens))
         return undefined;
+    // A percentage and a number added together, `calc(var(--n) + 10%)`, are neither, and invalid.
+    if (marker.kind === 'number' && calcType(marker.expression, tokens) === undefined)
+        return undefined;
     const value = calculated(marker.expression, marker.kind, tokens);
     if (value === undefined || !Number.isFinite(value))
         return undefined;
@@ -1422,11 +2155,8 @@ function wholePercentage(marker, tokens) {
 function calculated(expression, kind, tokens) {
     if (typeof expression === 'number')
         return expression;
-    if (!Array.isArray(expression)) {
-        const leaf = expression;
-        const own = tokenNumber(tokens[leaf.reference], kind);
-        return (own ?? (leaf.fallback === undefined ? undefined : calculated(leaf.fallback, kind, tokens)));
-    }
+    if (!Array.isArray(expression))
+        return leafValue(expression, kind, tokens);
     const [op, a, b] = expression;
     const left = calculated(a, kind, tokens);
     const right = calculated(b, kind, tokens);
@@ -1444,6 +2174,15 @@ function calculated(expression, kind, tokens) {
         return Math.min(left, right);
     return left / right;
 }
+/** A written percentage, or a token, as `calculated` reads it: its fallback when it is unset. */
+function leafValue(leaf, kind, tokens) {
+    if ('percentage' in leaf)
+        return leaf.percentage;
+    const token = tokens[leaf.reference];
+    if (token)
+        return tokenNumber(token, kind);
+    return leaf.fallback === undefined ? undefined : calculated(leaf.fallback, kind, tokens);
+}
 /** Where each kind of slot reads a token from, before its bare number. */
 const FORM_OF_KIND = {
     length: (token) => token.length,
@@ -1468,6 +2207,10 @@ function tokenNumber(token, kind) {
         return undefined;
     return token.number;
 }
+/** What a token set in a slot stands for: its entries, or none for one set to nothing, `--tw-blur: ;`. */
+function slotEntries(token, kind) {
+    return formOf(token, kind) ?? (token.keyword?.trim() === '' ? [] : undefined);
+}
 /** The slot a list entry can be instead of an entry: one per list property that has them. */
 const SLOT_KINDS = {
     __shadows: 'shadow',
@@ -1488,7 +2231,9 @@ function slotOf(part) {
     return undefined;
 }
 function resolveLength(marker, tokens) {
-    const value = formOf(tokens[marker.reference], 'length') ?? marker.fallback;
+    // A number when the arithmetic gives it its unit, as `referenced` reads one.
+    const form = marker.adjust?.number ? 'number' : 'length';
+    const value = substitute(marker, tokens, (token) => formOf(token, form));
     if (typeof value !== 'number')
         return undefined;
     return marker.adjust ? adjusted(value, marker.adjust) : value;
@@ -1520,10 +2265,10 @@ const NEEDS_FILLING = new WeakMap();
 /** What `settledMarker` says of a part that is not a token's marker at all. */
 const NOT_A_MARKER = Symbol('not a marker');
 /** A colour, length or calc marker settled from the tokens, or undefined when one cannot be. */
-function settledMarker(value, tokens) {
+function settledMarker(value, tokens, current) {
     const colour = colourMarker(value);
     if (colour)
-        return resolveColour(colour, tokens);
+        return resolveColour(colour, tokens, current);
     // Whether a shadow is inset, from a token that is the word or nothing: `ring-inset`.
     const inset = value.__inset;
     if (inset)
@@ -1557,7 +2302,7 @@ const UNSETTLED = Symbol('unsettled');
 function channelsColour(expression, tokens) {
     const { space } = expression.channels;
     const kind = space === 'hsl' ? 'hslChannels' : 'channels';
-    const value = formOf(tokens[expression.channels.reference], kind) ?? expression.channels.fallback;
+    const value = substitute(expression.channels, tokens, (token) => formOf(token, kind));
     const { alpha } = expression;
     if (typeof alpha !== 'number')
         return fromChannels(value, alpha, tokens, space);
@@ -1566,13 +2311,23 @@ function channelsColour(expression, tokens) {
 }
 /** A token's colour, or the first of its alternatives that is defined, or its fallback. */
 function tokenColour(expression, tokens) {
-    let value = formOf(tokens[expression.reference], 'color');
-    for (const alternative of expression.alternatives ?? []) {
-        if (value !== undefined)
-            break;
-        value = formOf(tokens[alternative], 'color');
-    }
-    return value ?? expression.fallback;
+    // The first token set is substituted, whatever it holds, as `referenced` reads one.
+    const set = firstSet([expression.reference, ...(expression.alternatives ?? [])], tokens);
+    if (expression.orInset)
+        return insetOrColour(set);
+    if (set)
+        return formOf(set, 'color');
+    const token = expression.fallbackToken;
+    return expression.fallback ?? (token && formOf(derived(token, tokens), 'color'));
+}
+/**
+ * A shadow's colour from a token that is the colour or the word `inset`: currentcolor, which the
+ * node fills in, when it is `inset` or unset, and nothing, so no shadow, when it is anything else.
+ */
+function insetOrColour(token) {
+    if (!token || token.keyword === 'inset')
+        return 'currentcolor';
+    return formOf(token, 'color');
 }
 /** A marker the compiler leaves in a structured value for a colour only the device can settle. */
 function colourMarker(value) {