@ng-native/fabric 0.7.0 → 0.9.0

package/dist/css.js

@@ -6,6 +6,7 @@
  * framework-agnostic and knows nothing about Angular.
  */
 import { mixChannels, mixColours, } from "./color-mix.js";
+import { backgroundLayers } from "./background-layers.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. */
@@ -221,30 +222,41 @@ const attributeText = (actual, test) => test.insensitive ? String(actual).toLowe
  *
  * A prop set to `false` or `null` counts as absent, matching the web, where an attribute is either
  * present or not and a `disabled` binding that evaluates false removes it. Everything else is
- * compared as a string, so `[tabIndex="0"]` works against a numeric prop.
+ * compared as a string, so `[tabIndex="0"]` works against a numeric prop. `class` is no prop: it
+ * is the element's class list, as the attribute would spell it.
  */
 function matchesAttribute(node, test) {
-    const actual = node.props[test.name];
+    const actual = test.name === 'class' ? classAttribute(node) : node.props[test.name];
     if (actual === undefined || actual === null || actual === false)
         return false;
     if (test.operator === undefined)
         return true;
-    const value = attributeText(actual, test);
-    switch (test.operator) {
+    // `^=`, `$=`, `*=` and `~=` with an empty value match nothing, as Selectors 4 says.
+    if (test.value === '' && !EMPTY_MATCHES.has(test.operator))
+        return false;
+    return matchesValue(attributeText(actual, test), test.operator, test.value);
+}
+/** The classes of a node in the order they were set, one space between each; none is absent. */
+const classAttribute = (node) => node.classes?.size ? [...node.classes].join(' ') : undefined;
+/** The operators an empty value can still match by: `=` and `|=`. */
+const EMPTY_MATCHES = new Set(['equal', 'dash-match']);
+/** Whether an attribute's value, as `attributeText` gives it, passes an operator's test. */
+function matchesValue(value, operator, expected) {
+    switch (operator) {
         case 'equal':
-            return value === test.value;
+            return value === expected;
         case 'prefix':
-            return value.startsWith(test.value);
+            return value.startsWith(expected);
         case 'suffix':
-            return value.endsWith(test.value);
+            return value.endsWith(expected);
         case 'substring':
-            return value.includes(test.value);
+            return value.includes(expected);
         case 'includes':
             // `~=` matches one whole word of a space-separated list.
-            return value.split(/\s+/).includes(test.value);
+            return value.split(/\s+/).includes(expected);
         case 'dash-match':
             // `|=` matches the value itself or the value followed by a hyphen, as `lang` uses.
-            return value === test.value || value.startsWith(`${test.value}-`);
+            return value === expected || value.startsWith(`${expected}-`);
     }
 }
 /*
@@ -327,13 +339,15 @@ function matchesCompound(node, compound, sheet) {
         }
     }
     if (compound.hostContext) {
-        // The host itself counts, as it does on the web.
-        let found = false;
-        for (let n = node; n && !found; n = n.parent) {
-            found = compound.hostContext.some((option) => matchesCompound(n, option, sheet));
+        for (const context of compound.hostContext) {
+            // The host itself counts, as it does on the web.
+            let found = false;
+            for (let n = node; n && !found; n = n.parent) {
+                found = matchesCompound(n, context, sheet);
+            }
+            if (!found)
+                return false;
         }
-        if (!found)
-            return false;
     }
     return true;
 }
@@ -905,7 +919,34 @@ export function ruleKeys(rule) {
     const held = parentClass(rule, key);
     if (held !== undefined)
         return [`in:${held}`];
-    return alternativeKeys(key) ?? EVERY_NODE;
+    return alternativeKeys(key) ?? attributeKey(key) ?? ancestorKeys(rule, key) ?? EVERY_NODE;
+}
+/**
+ * The buckets of a rule for anything inside an element with a class, `.item:focus *`: under the
+ * class, or each class the element may have instead. Offered to what has such an element
+ * somewhere over it, where the universal bucket has every element walk to the root to find none.
+ */
+function ancestorKeys(rule, key) {
+    const joined = rule.combinators[rule.combinators.length - 1];
+    const above = key.ancestors?.[0] ??
+        (joined === 'descendant' ? rule.compounds[rule.compounds.length - 2] : undefined);
+    if (!above)
+        return undefined;
+    if (above.classes.length)
+        return [`under:${above.classes[0]}`];
+    const any = above.is?.[0];
+    if (!any?.length || any.some((one) => !one.classes.length))
+        return undefined;
+    return any.map((one) => `under:${one.classes[0]}`);
+}
+/**
+ * The bucket of a rule that names its element by an attribute and nothing else, `[ngpButton]`:
+ * a prop the element has to have, which is how a headless library names every element it
+ * styles. Not `class`, which is no prop of the element's to find the bucket by.
+ */
+function attributeKey(key) {
+    const named = key.attributes?.find((test) => test.name !== 'class');
+    return named ? [`attr:${named.name}`] : undefined;
 }
 /** A class the node's parent has to have for the rule to match, where its selector says one. */
 function parentClass(rule, key) {
@@ -958,6 +999,10 @@ export function indexRules(entries, into = { buckets: new Map(), universal: [] }
                 into.universal.push(indexed);
                 continue;
             }
+            if (key.startsWith('attr:'))
+                into.attributes = true;
+            else if (key.startsWith('under:'))
+                into.under = true;
             const bucket = into.buckets.get(key);
             if (bucket)
                 bucket.push(indexed);
@@ -990,6 +1035,27 @@ function reach(node, index, found) {
     if (around)
         for (const name of around)
             take(`in:${name}`);
+    if (index.attributes)
+        reachByAttribute(node, take);
+    if (index.under)
+        reachUnder(node, take);
+}
+/** The buckets of the classes of every element over a node. */
+function reachUnder(node, take) {
+    for (let above = node.parent; above; above = above.parent) {
+        if (above.classes)
+            for (const name of above.classes)
+                take(`under:${name}`);
+    }
+}
+/** The buckets of the attributes a node has: a prop of its own that is set. */
+function reachByAttribute(node, take) {
+    for (const name in node.props) {
+        const value = node.props[name];
+        // As `matchesAttribute` has it: a prop that is false is an attribute that is not there.
+        if (value !== undefined && value !== null && value !== false)
+            take(`attr:${name}`);
+    }
 }
 /**
  * The rules worth trying against a node, in cascade order: `order` says which of two comes
@@ -1033,6 +1099,13 @@ const DEFAULT_FONT_SIZE = 16;
 const EMPTY = {};
 /** Stands in for the parent of a root node, so the comparison needs no null case. */
 const ROOT_CONTEXT = {};
+/** The `scope` over a node with no parent. */
+const ROOT_SCOPE = {};
+/**
+ * The `scope` of the one cache every node with nothing to style shares. It is no one node's, so
+ * nothing styled under it, or holding it, is taken to match what it did.
+ */
+const SHARED_SCOPE = {};
 /** Shared empty token map, for the overwhelmingly common case of a subtree defining none. */
 const NO_TOKENS = {};
 /**
@@ -1082,20 +1155,33 @@ function classReach(sheet) {
         return found;
     const classes = new Map();
     const reads = [];
+    const named = new Set();
     for (const rule of sheet.rules) {
         const every = new Set();
-        collectClasses(rule, every, reads);
-        const inside = classesInside(rule);
+        collectClasses(rule, every, reads, named);
+        const { own, inside } = classPlaces(rule);
         for (const name of every) {
-            if (!inside.has(name))
+            if (!own.has(name) && !inside.has(name))
                 classes.set(name, true);
-            else
+            if (own.has(name))
+                noteOwn(classes, name);
+            if (inside.has(name))
                 noteInside(classes, name, rule);
         }
     }
-    reaches.set(sheet, (found = { classes, reads }));
+    reaches.set(sheet, (found = { classes, reads, named }));
     return found;
 }
+/** Note a rule as one for the element that has a class. */
+function noteOwn(found, name) {
+    const subjects = found.get(name);
+    if (subjects === true)
+        return;
+    if (subjects)
+        subjects.own = true;
+    else
+        found.set(name, { ...noSubjects(), own: true });
+}
 /** Note a rule as one that names a class as what its element is inside. */
 function noteInside(found, name, rule) {
     let subjects = found.get(name);
@@ -1119,6 +1205,8 @@ const noSubjects = () => ({
     inside: new Set(),
     any: false,
 });
+/** The reach of classes that rules are for the element of, and for nothing under it. */
+const OWN_ALONE = { ...noSubjects(), own: true };
 /** Add to `into` what `from` is for. */
 function addSubjects(into, from) {
     for (const name of from.classes)
@@ -1128,51 +1216,94 @@ function addSubjects(into, from) {
     for (const name of from.inside)
         into.inside.add(name);
     into.any ||= from.any;
+    if (from.own)
+        into.own = true;
 }
 /**
- * The classes a rule names only as what its element is inside: on a compound before the last,
- * with nothing but `>` and a space between there and the element, and nowhere else in the rule.
+ * Where a rule names each class it names, for the classes it names in no other place than these:
+ *
+ * - `own`, on the element the rule is for: its own classes, and those in `:is()` and `:not()` of
+ *   it, which are asked of that element;
+ * - `inside`, as what that element is inside: the classes of a compound before the last, with
+ *   nothing but `>` and a space between there and the element, and those of what `:is(.box *)`
+ *   and `:is(.box > *)` put over it.
+ *
+ * A class named anywhere else in the rule is in neither, whatever else names it: beside the
+ * element, inside `:has()` or `:host-context()`, or in `:not()` of a box the element is in.
  */
-function classesInside(rule) {
+function classPlaces(rule) {
+    const own = new Set();
     const inside = new Set();
     const elsewhere = new Set();
     const last = rule.compounds.length - 1;
     let under = true;
     for (let index = last; index >= 0; index--) {
         const compound = rule.compounds[index];
-        if (index < last) {
-            const joined = rule.combinators[index];
-            under &&= joined === 'child' || joined === 'descendant';
+        if (index === last) {
+            placeClasses(compound, own, inside, elsewhere);
+            continue;
         }
+        const joined = rule.combinators[index];
+        under &&= joined === 'child' || joined === 'descendant';
         const { classes, ...rest } = compound;
         collectClasses(rest, elsewhere, []);
         for (const name of classes)
-            (index < last && under ? inside : elsewhere).add(name);
+            (under ? inside : elsewhere).add(name);
     }
-    for (const name of elsewhere)
+    for (const name of elsewhere) {
+        own.delete(name);
         inside.delete(name);
-    return inside;
+    }
+    return { own, inside };
+}
+/**
+ * The classes of a compound asked of the element a rule is for, into `at`, and of the compounds
+ * it puts over that element, into `inside`. What any other part of it names goes `elsewhere`:
+ * a part read here by name is one this knows the reach of, and one added later is not.
+ */
+function placeClasses(compound, at, inside, elsewhere) {
+    const { classes, is, not, ancestors, parents, type: _t, id: _i, root: _r, pseudo: _p, ...rest } = compound;
+    for (const name of classes)
+        at.add(name);
+    for (const alternatives of is ?? []) {
+        for (const option of alternatives)
+            placeClasses(option, at, inside, elsewhere);
+    }
+    for (const excluded of not ?? [])
+        placeClasses(excluded, at, inside, elsewhere);
+    // What is over the element is over it whichever of these said so, and what is over that is too.
+    for (const above of [...(ancestors ?? []), ...(parents ?? [])]) {
+        placeClasses(above, inside, inside, elsewhere);
+    }
+    // `attributes` among them: a test of the `class` attribute is answered through `classTests`.
+    collectClasses(rest, elsewhere, []);
 }
 /** What a rule declares, which names no element. */
 const DECLARED = new Set(['declarations', 'important', 'tokens']);
-/** Add each class under `value` to `into`, and each test of the `class` attribute to `reads`. */
-function collectClasses(value, into, reads) {
+/**
+ * Add each class under `value` to `into`, each test of the `class` attribute to `reads`, and the
+ * name of every attribute asked about to `named`.
+ */
+function collectClasses(value, into, reads, named) {
     if (value === null || typeof value !== 'object')
         return;
-    if (Array.isArray(value))
-        return value.forEach((inner) => collectClasses(inner, into, reads));
+    if (Array.isArray(value)) {
+        return value.forEach((inner) => collectClasses(inner, into, reads, named));
+    }
     const part = value;
     if (Array.isArray(part.classes))
         for (const name of part.classes)
             into.add(String(name));
     if (Array.isArray(part.attributes)) {
-        for (const test of part.attributes)
+        for (const test of part.attributes) {
+            named?.add(test.name);
             if (test.name === 'class')
                 reads.push(test);
+        }
     }
     for (const [key, inner] of Object.entries(value)) {
         if (!DECLARED.has(key))
-            collectClasses(inner, into, reads);
+            collectClasses(inner, into, reads, named);
     }
 }
 /**
@@ -1215,12 +1346,22 @@ function writtenFor(of, node) {
     }
     return false;
 }
+/**
+ * Whether a node has its answer for this commit already. Not one marked since it was given the
+ * one cache every box with nothing to style shares, see `unstyled`: another of them resolved in
+ * this commit has set that cache's epoch, and it is not this node's answer.
+ */
+function resolvedIn(epoch, cache, node) {
+    return (cache !== null && cache.epoch === epoch && (!node.styleDirty || cache.context !== ROOT_CONTEXT));
+}
 function emptyCacheFor(epoch, generation) {
     return {
         epoch,
         generation,
         context: ROOT_CONTEXT,
         parentContext: ROOT_CONTEXT,
+        scope: SHARED_SCOPE,
+        parentScope: SHARED_SCOPE,
         style: EMPTY,
         inherited: EMPTY,
         tokens: NO_TOKENS,
@@ -1491,10 +1632,21 @@ export class StyleResolver {
         if (!sheet || this.noted.has(sheet))
             return;
         this.noted.add(sheet);
-        const { classes, reads } = classReach(sheet);
+        const { classes, reads, named } = classReach(sheet);
         for (const [name, how] of classes)
             this.noteReach(name, how);
         this.classTests.push(...reads);
+        for (const name of named)
+            this.named.add(name);
+    }
+    /** The props a selector of some sheet asks about: an id, and each attribute by its name. */
+    named = new Set(['nativeID']);
+    /**
+     * Whether a prop changing can change what any element matches: only where a selector of a
+     * sheet that was ever loaded names it. A sheet loaded later has every element matched again.
+     */
+    reads(prop) {
+        return this.named.has(prop);
     }
     noteReach(name, how) {
         const had = this.reach.get(name);
@@ -1505,20 +1657,38 @@ export class StyleResolver {
         else
             addSubjects(had ?? this.reach.set(name, noSubjects()).get(name), how);
     }
+    /** Whether a class's reach names any element under the one that has it. */
+    reachesUnder(subjects) {
+        return (subjects.any ||
+            subjects.classes.size > 0 ||
+            subjects.types.size > 0 ||
+            subjects.inside.size > 0);
+    }
     /**
      * What classes coming to an element or going from it can restyle: `true` for it and all
-     * under it and after it, as any change to it does; the elements under it to restyle, by what
-     * rules are for; or null, where no rule names any of them and nothing is styled again.
+     * under it and after it, as any change to it does; the element itself, where `own`, and the
+     * elements under it to match again, by what rules are for; or null, where no rule names any
+     * of them and nothing is styled again.
      */
     reachOf(classes) {
         let under = null;
+        let own = false;
         for (const name of classes) {
             const how = this.reach.get(name);
             if (how === true || this.classTests.some((test) => answers(test, name)))
                 return true;
-            if (how)
+            if (!how)
+                continue;
+            own ||= how.own === true;
+            // Made only for a class that reaches under: most are a rule's own, and this is asked for
+            // every element as it is given its classes.
+            if (this.reachesUnder(how))
                 addSubjects((under ??= noSubjects()), how);
         }
+        if (!under)
+            return own ? OWN_ALONE : null;
+        if (own)
+            under.own = true;
         return under;
     }
     /** Whether one of the rules `subjects` stands for could be for a node. */
@@ -1579,7 +1749,7 @@ export class StyleResolver {
         const cached = node.styleCache;
         // Within one commit a node is asked for its inherited map once per descendant, so this is the
         // hot path and it must not walk anywhere.
-        if (cached !== null && cached.epoch === epoch)
+        if (resolvedIn(epoch, cached, node))
             return cached;
         const parent = node.parent ? this.resolve(node.parent, epoch) : null;
         const parentContext = parent ? parent.context : ROOT_CONTEXT;
@@ -1597,33 +1767,66 @@ export class StyleResolver {
         this.justMatched = null;
         if (kept)
             return kept;
+        return this.styledAgain(node, epoch, parent, found);
+    }
+    /** A node styled now, from the rules found for it or from those it kept: see `matchesStand`. */
+    styledAgain(node, epoch, parent, found) {
+        const cached = node.styleCache;
+        const parentContext = parent ? parent.context : ROOT_CONTEXT;
         const parentInherited = parent ? parent.inherited : EMPTY;
+        const parentScope = parent ? parent.scope : ROOT_SCOPE;
+        const stands = this.matchesStand(cached, node, parentScope);
+        // The scope it keeps, or none: it then has a new one, which its new `context` serves as.
+        const scope = stands ? cached.scope : null;
         // 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);
+            return this.unstyled(node, epoch, parent, parentInherited, scope, parentScope);
         }
         styleStats.nodesResolved++;
-        const matched = found ?? this.matchedBy(node);
+        // Its own rules are found again for a change of its own, and not for one above it.
+        const rules = stands && !node.ownDirty ? cached.rules : undefined;
+        const matched = found ?? rules ?? this.matchedBy(node);
         const parentTokens = parent ? parent.tokens : this.tokensOnRoot;
         this.heir(node, parent, matched);
         const styled = this.styled(node, matched, parentTokens, parentInherited);
-        const cache = this.cached(epoch, parentContext, styled, matched);
+        const cache = this.cached(epoch, parentContext, styled, matched, scope, parentScope);
         node.styleCache = cache;
         node.styleDirty = false;
+        node.ownDirty = false;
         node.hasDirty = false;
         node.stateDirty = false;
         return cache;
     }
+    /**
+     * Whether what an element could match is as it was when it was last styled: nothing that can
+     * change it was marked on the element, its parent's `scope` is the one it was styled under,
+     * and no sheet that could match it has come since. It is being styled again all the same, for
+     * a change of its own that alters nothing under it, or for what it inherits.
+     */
+    matchesStand(cached, node, parentScope) {
+        return (cached !== null &&
+            !node.styleDirty &&
+            !node.hasDirty &&
+            !node.stateDirty &&
+            cached.scope !== SHARED_SCOPE &&
+            parentScope !== SHARED_SCOPE &&
+            cached.parentScope === parentScope &&
+            this.current(cached, node));
+    }
     /**
      * A cache of a node just styled, with a context of its own. It keeps the rules the node
      * matched, for the node to be compared with, once a sheet has a use for them: see `tracksHas`.
      */
-    cached(epoch, parentContext, styled, matched) {
+    cached(epoch, parentContext, styled, matched, scope, parentScope) {
+        const context = {};
         const cache = {
             epoch,
             generation: this.generation,
-            context: {},
+            context,
             parentContext,
+            scope: scope ?? context,
+            parentScope,
+            rules: matched,
             ...styled,
         };
         if (this.tracksHas)
@@ -1646,6 +1849,7 @@ export class StyleResolver {
         const stands = (node.hasDirty === true || node.stateDirty === true) &&
             cached?.matched !== undefined &&
             !node.styleDirty &&
+            !node.ownDirty &&
             cached.parentContext === parentContext &&
             this.current(cached, node);
         if (!stands)
@@ -1685,6 +1889,7 @@ export class StyleResolver {
         const stands = node.stateDirty === true &&
             cached !== null &&
             !node.styleDirty &&
+            !node.ownDirty &&
             !node.hasDirty &&
             cached.parentContext === parentContext &&
             this.current(cached, node) &&
@@ -1702,6 +1907,14 @@ export class StyleResolver {
     holds(node, parentContext) {
         return this.reusable(node.styleCache, node, parentContext);
     }
+    /**
+     * Whether a node was last styled under a box holding the one cache shared by every box with
+     * nothing to style. Such boxes hand the same `context` down, so the node cannot tell one from
+     * another by it: moved under another box, it has to be told.
+     */
+    styledUnderShared(node) {
+        return node.styleCache !== null && node.styleCache.parentContext === ROOT_CONTEXT;
+    }
     /**
      * Whether a previous result still stands: nothing about the node changed, nothing above it
      * moved, and the conditions have not.
@@ -1709,6 +1922,7 @@ export class StyleResolver {
     reusable(cached, node, parentContext) {
         return (cached !== null &&
             !node.styleDirty &&
+            !node.ownDirty &&
             !node.hasDirty &&
             !node.stateDirty &&
             cached.parentContext === parentContext &&
@@ -1736,35 +1950,43 @@ export class StyleResolver {
      * 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) {
+    unstyled(node, epoch, parent, parentInherited, scope, parentScope) {
         const tokens = parent ? parent.tokens : this.tokensOnRoot;
+        const parentContext = parent ? parent.context : ROOT_CONTEXT;
         // 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 &&
+        const nothing = !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);
-            }
-            node.styleCache = this.emptyCache;
-            return this.emptyCache;
-        }
+            tokens === NO_TOKENS;
+        if (nothing && !node.styleDirty && !node.ownDirty)
+            return this.sharedEmpty(node, epoch);
+        const context = {};
         const passthrough = {
             epoch,
             generation: this.generation,
-            context: {},
+            context,
             parentContext,
+            scope: scope ?? context,
+            parentScope,
             style: unstyledStyle(parentInherited, inline),
             inherited: inline ? inheritFrom(parentInherited, inline) : parentInherited,
             tokens,
         };
         node.styleCache = passthrough;
         node.styleDirty = false;
+        node.ownDirty = false;
         node.stateDirty = false;
         return passthrough;
     }
+    /** The one cache of every node with nothing to style and nothing to hand down, given to one more. */
+    sharedEmpty(node, epoch) {
+        if (this.emptyCache.epoch !== epoch || this.emptyCache.generation !== this.generation) {
+            this.emptyCache = emptyCacheFor(epoch, this.generation);
+        }
+        node.styleCache = this.emptyCache;
+        return this.emptyCache;
+    }
     /**
      * The rules worth trying against a node, in cascade order.
      *
@@ -2071,6 +2293,17 @@ export class StyleResolver {
      * A declaration with no token and no usable fallback is dropped rather than written as
      * undefined, which is what a browser does with a value it cannot resolve.
      */
+    /**
+     * What declarations that wait for a node's tokens come to on it, where no rule of the node's
+     * carries them: a keyframe's, which is settled against the element that plays it.
+     */
+    settleFor(node, deferred, epoch) {
+        const { tokens } = this.resolve(node, epoch);
+        const above = node.parent ? this.resolve(node.parent, epoch).inherited : EMPTY;
+        const own = {};
+        this.applyDeferred(deferred, own, tokens, above, null);
+        return own;
+    }
     applyDeferred(deferred, own, tokens, parentInherited, important) {
         for (const declaration of settlingOrder(deferred)) {
             if (declaration.inherit) {
@@ -2087,11 +2320,10 @@ export class StyleResolver {
             if (unread && this.onUnreadDisplay && !outranked('display')) {
                 this.reportDisplay(declaration, tokens);
             }
-            const value = settled ?? declaration.unset;
+            const layers = settled === undefined ? layersOf(declaration, tokens) : undefined;
             for (const prop of declaration.props) {
-                if (outranked(prop))
-                    continue;
-                write(own, prop, value, declaration.line !== undefined);
+                if (!outranked(prop))
+                    writeSettled(own, prop, declaration, settled, layers);
             }
         }
     }
@@ -2759,6 +2991,41 @@ function tokenForm(token, kind) {
     const value = formOf(token, kind);
     return value === undefined && kind === 'color' && isCurrentColour(token) ? CURRENT_COLOUR : value;
 }
+/** What a deferred declaration settled to, written to one of its props. */
+function writeSettled(own, prop, declaration, settled, layers) {
+    const value = settled ?? declaration.unset;
+    if (declaration.layers)
+        writeLayer(own, prop, value, layers);
+    else
+        write(own, prop, value, declaration.line !== undefined);
+}
+/**
+ * One prop of a `background: var()`, whose token may hold the images as well as the colour. The
+ * image is written only where the token holds one: a token that is a colour leaves an image
+ * another rule declared as it is. Each prop is ranked in the cascade by itself, so an image a
+ * later rule declares, or an important one, is not written over by the token's.
+ */
+function writeLayer(own, prop, value, layers) {
+    if (prop !== BACKGROUND_IMAGE)
+        write(own, prop, layers?.color ?? value, false);
+    else if (layers)
+        own[prop] = layers.images;
+}
+const BACKGROUND_IMAGE = 'experimental_backgroundImage';
+/**
+ * The gradients a `background: var()` reads where its token is no colour: see `backgroundLayers`.
+ * Only the shorthand, which the compiler marks: `background-color: var()` is a colour or nothing.
+ * And only where the token is set as text on an element, which is where a library sets one as the
+ * app runs; a stylesheet's is refused where it is written. The token is the one the declaration
+ * settles on, the first that is set.
+ */
+function layersOf(declaration, tokens) {
+    if (!declaration.layers)
+        return undefined;
+    const names = [declaration.reference, ...(declaration.alternatives ?? [])];
+    const text = firstSet(names, tokens)?.keyword;
+    return text && /gradient\(/i.test(text) ? backgroundLayers(text) : undefined;
+}
 const BOUND_NUMBERS = new Set([
     'opacity',
     'flex',