@ng-native/fabric 0.1.3 → 0.3.0

package/dist/css.js

@@ -5,17 +5,26 @@
  * 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 { 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);
 }
@@ -538,6 +547,12 @@ export class StyleResolver {
      * 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 +571,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;
@@ -633,6 +684,7 @@ export class StyleResolver {
         return (node.sheet === null &&
             node.hostSheet === null &&
             this.globalSheet === null &&
+            this.addedSheets.length === 0 &&
             !node.customProperties);
     }
     /**
@@ -640,10 +692,16 @@ export class StyleResolver {
      *
      * 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;
+        if (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);
             }
@@ -657,7 +715,7 @@ export class StyleResolver {
             parentContext,
             style: parentInherited,
             inherited: parentInherited,
-            tokens: parent ? parent.tokens : this.tokensOnRoot,
+            tokens,
         };
         node.styleCache = passthrough;
         node.styleDirty = false;
@@ -688,6 +746,10 @@ 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 = [];
@@ -701,6 +763,8 @@ export class StyleResolver {
         add(this.globalSheet, 0);
         add(hostSheet, COMPONENT_SPECIFICITY_BUMP);
         add(sheet, COMPONENT_SPECIFICITY_BUMP);
+        for (const added of this.addedSheets)
+            add(added, 0);
         return entries.sort((a, b) => a.weight - b.weight);
     }
     /**
@@ -862,13 +926,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 +947,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,15 +963,45 @@ 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;
+        // `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;
-        if (name === undefined || declaration.fallback !== undefined || name in tokens)
+        if (name === undefined || name in tokens)
+            return;
+        if (declaration.fallback !== undefined || declaration.fallbackToken)
             return;
         if (declaration.alternatives?.some((alternative) => alternative in tokens))
             return;
         this.onUndefinedToken(name, declaration.props);
     }
+    /** 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
      * a colour in it cannot be: a shadow with no colour is not a shadow, as CSS reads it.
@@ -924,8 +1024,11 @@ export class StyleResolver {
             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.
-        if (marked === 'currentcolor')
-            return own['color'] ?? parentInherited['color'] ?? 'black';
+        // On `color` itself that is the inherited colour, as CSS reads it.
+        if (marked === 'currentcolor') {
+            const ownColour = declaration.props.includes('color') ? undefined : own['color'];
+            return ownColour ?? parentInherited['color'] ?? 'black';
+        }
         if (marked !== NOT_A_MARKER)
             return marked ?? UNSETTLED;
         const pending = value.__defer;
@@ -955,7 +1058,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);
@@ -1011,38 +1114,189 @@ 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);
-    // Until a pass settles nothing more: one made of another defined after it, or of one not yet
-    // settled, cannot be worked out until that one is. What is left then is a cycle, or reads a
-    // token that is not there, and is unset.
-    const derivedNames = names.filter((name) => isDerived(own[name]));
-    let pending = derivedNames;
-    for (let settled = true; settled && pending.length;) {
-        settled = false;
-        pending = pending.filter((name) => {
-            const value = derived(own[name], merged);
-            if (!value)
-                return true;
-            merged[name] = value;
+    // Left to work out: each token made of others and each alias that came to one, by a link or a
+    // fallback, `var(--missing, calc(var(--gap) * 2))`, which is worked out here as well.
+    const pending = new Set(names.filter((name) => isDerived(merged[name])));
+    if (pending.size)
+        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({});
+/**
+ * The tokens left to work out, each settled once none it reads is still to be, whatever order they
+ * are defined in. One that reads another still to be waits, rather than taking a fallback: a
+ * fallback is for a token that is unset or invalid. When every one left waits for another, those
+ * in a cycle, counting only the references read, are invalid, and the rest go on without them,
+ * taking their fallbacks, as CSS has it.
+ */
+function settleDerived(own, merged, pending) {
+    const waitingOn = new Map();
+    let read = new Set();
+    const view = new Proxy(merged, {
+        get: (tokens, name) => {
+            if (!pending.has(name))
+                return tokens[name];
+            read.add(name);
+            return PENDING;
+        },
+    });
+    while (pending.size) {
+        let settled = false;
+        for (const name of pending) {
+            read = new Set();
+            const token = own[name];
+            const value = token.alias ? substitutedIn(token, view) : workedOut(token, view);
+            if (read.size) {
+                waitingOn.set(name, read);
+                continue;
+            }
+            pending.delete(name);
+            settle(merged, name, value);
             settled = true;
-            return false;
-        });
+        }
+        if (settled)
+            continue;
+        for (const name of inCycles(pending, waitingOn)) {
+            pending.delete(name);
+            delete merged[name];
+        }
     }
-    for (const name of pending)
-        delete merged[name];
-    // A chain that ends at one of those, by a link or a fallback, copied it unsettled above into
-    // every alias on the way: follow them all again, from what they were defined as, now it is.
-    if (derivedNames.length && aliases.length) {
-        for (const name of aliases)
-            merged[name] = own[name];
-        followAliases(aliases, merged);
+}
+/** An alias's target, or the first of its fallbacks that is set, with one made of others worked out. */
+function substitutedIn(token, tokens) {
+    let link = token;
+    while (link?.alias) {
+        const target = tokens[link.alias];
+        if (target !== undefined)
+            return target;
+        link = link.fallback;
     }
-    return merged;
+    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) {
+    const reaches = (from, to, seen) => {
+        for (const next of waitingOn.get(from) ?? []) {
+            if (next === to)
+                return true;
+            if (names.has(next) && !seen.has(next) && seen.add(next) && reaches(next, to, seen)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    return [...names].filter((name) => reaches(name, name, new Set()));
 }
 /** Whether a token is made of others, and so worked out where it is defined. */
 function isDerived(token) {
@@ -1085,24 +1339,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);
-    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);
 }
-function hslChannel(channel, tokens) {
-    return typeof channel === 'number'
-        ? channel
-        : (tokens[channel.reference]?.number ?? channel.fallback);
+/**
+ * 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, slot) {
+    if (typeof channel === 'number')
+        return channel;
+    const token = tokens[channel.reference];
+    if (!token)
+        return channel.fallback;
+    const percentage = typeof token.length === 'string' && token.length.endsWith('%');
+    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
@@ -1111,7 +1419,11 @@ function hslChannel(channel, tokens) {
  * `h` is degrees; `s` and `l` are fractions, which is what a percentage token already reads as
  * (see `formOf`), so nothing here rescales them.
  */
-function hslToRgb(h, s, l, alpha) {
+function hslToRgb(h, saturation, l, opacity) {
+    // Out of range as CSS Color 4 takes it: a saturation below 0 is 0, an alpha is clamped, and
+    // anything else is converted as it is, each channel it makes then clamped into sRGB.
+    const s = Math.max(0, saturation);
+    const alpha = Math.min(1, Math.max(0, opacity));
     const hue = ((h % 360) + 360) % 360;
     const chroma = (1 - Math.abs(2 * l - 1)) * s;
     const x = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
@@ -1127,9 +1439,7 @@ function hslToRgb(h, s, l, alpha) {
                     : hue < 300
                         ? [x, 0, chroma]
                         : [chroma, 0, x];
-    const r = Math.round((r1 + m) * 255);
-    const g = Math.round((g1 + m) * 255);
-    const b = Math.round((b1 + m) * 255);
+    const [r, g, b] = [r1, g1, b1].map((c) => Math.round(Math.min(1, Math.max(0, c + m)) * 255));
     return alpha >= 1
         ? `rgb(${r}, ${g}, ${b})`
         : `rgba(${r}, ${g}, ${b}, ${Math.round(alpha * 1000) / 1000})`;
@@ -1169,23 +1479,167 @@ 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 ??= declaration.fallback;
+    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;
+}
+/** 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
@@ -1195,8 +1649,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);
@@ -1227,29 +1681,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.
@@ -1261,8 +1733,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;
@@ -1287,12 +1759,24 @@ function resolveColour(expression, tokens) {
         const origin = resolveColour(from, tokens);
         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);
+    return sides && mixColours(expression.mix.space, ...sides, expression.mix.hue);
+}
+/** 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);
+    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) {
+    const sides = mixSides(mix, tokens);
+    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) {
@@ -1301,6 +1785,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;
@@ -1354,10 +1841,8 @@ function wholePercentage(marker, tokens) {
 function calculated(expression, kind, tokens) {
     if (typeof expression === 'number')
         return expression;
-    if (!Array.isArray(expression)) {
-        const leaf = expression;
-        return tokenNumber(tokens[leaf.reference], kind) ?? leaf.fallback;
-    }
+    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);
@@ -1375,6 +1860,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,
@@ -1399,6 +1893,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',
@@ -1419,7 +1917,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;
@@ -1488,7 +1988,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);
@@ -1497,13 +1997,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) {