@ng-native/fabric 0.1.3 → 0.2.0

package/dist/css.d.ts

@@ -184,6 +184,11 @@ export interface DeferredDeclaration {
      */
     readonly alternatives?: readonly string[];
     readonly fallback?: unknown;
+    /**
+     * A fallback made of other tokens, `var(--missing, calc(var(--gap) * 2))`, worked out from the
+     * tokens in scope where it is used, as a browser substitutes it there.
+     */
+    readonly fallbackToken?: TokenValue;
     /**
      * What to write when the reference resolves, whatever it resolves to: `flex: var(--grow)` sets a
      * shrink of 1 and a basis of 0%, but only when there is a grow for them to go with.
@@ -646,7 +651,7 @@ type ChannelSpace = 'rgb' | 'hsl';
  */
 type CalcExpression = number | {
     readonly reference: string;
-    readonly fallback?: number;
+    readonly fallback?: CalcExpression;
 } | readonly ['+' | '-' | '*' | '/' | 'max' | 'min', CalcExpression, CalcExpression];
 interface CalcMarker {
     readonly expression: CalcExpression;

package/dist/css.js

@@ -896,7 +896,9 @@ export class StyleResolver {
     /** 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;
@@ -1017,32 +1019,79 @@ function resolveAliases(own, merged) {
     const names = Object.keys(own);
     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;
+}
+/** 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) : derived(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) ? derived(link, tokens) : link;
+}
+/** 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) {
@@ -1090,7 +1139,7 @@ function calcToken(markers, tokens) {
 }
 /** 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 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);
@@ -1099,10 +1148,22 @@ function resolveHsl(hsl, tokens) {
     }
     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: 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.
+ */
+function hslChannel(channel, tokens, hue = false) {
+    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);
 }
 /**
  * `hsl(h, s, l)` converted to sRGB, printed the same way `fromChannels` prints an rgba() built
@@ -1111,7 +1172,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 +1192,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})`;
@@ -1180,12 +1243,17 @@ function referenced(declaration, tokens) {
             break;
         value = formOf(tokens[alternative], declaration.kind);
     }
-    value ??= declaration.fallback;
+    value ??= fallbackOf(declaration, tokens);
     const base = CHANNEL_KINDS.has(declaration.kind)
         ? fromChannels(value, declaration.alpha, tokens, declaration.space)
         : value;
     return declaration.adjust ? adjusted(base, declaration.adjust) : base;
 }
+/** 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));
+}
 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
@@ -1356,7 +1424,8 @@ function calculated(expression, kind, tokens) {
         return expression;
     if (!Array.isArray(expression)) {
         const leaf = expression;
-        return tokenNumber(tokens[leaf.reference], kind) ?? leaf.fallback;
+        const own = tokenNumber(tokens[leaf.reference], kind);
+        return (own ?? (leaf.fallback === undefined ? undefined : calculated(leaf.fallback, kind, tokens)));
     }
     const [op, a, b] = expression;
     const left = calculated(a, kind, tokens);