Fix resolution of chained CSS variables

.changeset/soft-chairs-reflect.md

@@ -0,0 +1,7 @@
+---
+"@siteimprove/alfa-style": patch
+---
+
+**Fixed:** Resolution of chained CSS variables has been improved.
+
+In some cases of chained CSS variables, substitutions did not happen all the way through, resulting in partially resolved variables; this has been fixed.

packages/alfa-style/src/style.ts

@@ -3,8 +3,13 @@ import { Cache } from "@siteimprove/alfa-cache";
 import { Cascade, Origin } from "@siteimprove/alfa-cascade";
 import { Keyword, Lexer, Token } from "@siteimprove/alfa-css";
 import { Device } from "@siteimprove/alfa-device";
-import type { Declaration } from "@siteimprove/alfa-dom";
-import { Document, Element, Node, Shadow } from "@siteimprove/alfa-dom";
+import {
+  type Declaration,
+  Document,
+  Element,
+  Node,
+  Shadow,
+} from "@siteimprove/alfa-dom";
 import { Iterable } from "@siteimprove/alfa-iterable";
 import type * as json from "@siteimprove/alfa-json";
 import type { Serializable } from "@siteimprove/alfa-json";
@@ -16,11 +21,11 @@ import { Set } from "@siteimprove/alfa-set";
 import type { Slice } from "@siteimprove/alfa-slice";
 
 import * as element from "./element/element.js";
-import * as predicates from "./predicate/index.js";
 
 import type { Longhand } from "./longhand.js";
 import { Longhands } from "./longhands.js";
 import * as node from "./node/node.js";
+import * as predicates from "./predicate/index.js";
 import type { Shorthand } from "./shorthand.js";
 import { Shorthands } from "./shorthands.js";
 

packages/alfa-style/src/variable.ts

@@ -20,8 +20,10 @@ const { delimited, left, map, option, pair, right, takeUntil } = Parser;
 export namespace Variable {
   /**
    * mapping each variable name to its declared value.
+   *
+   * @internal
    */
-  type DefinitionMap = Map<string, Value<Slice<Token>>>;
+  export type DefinitionMap = Map<string, Value<Slice<Token>>>;
 
   /**
    * Gather variables that are declared on the declarations.
@@ -60,7 +62,7 @@ export namespace Variable {
    */
   export function flatten(variables: DefinitionMap) {
     for (const [name, variable] of variables) {
-      const substitution = substitute(variable.value, variables);
+      const substitution = substitute(variable.value, variables, undefined);
 
       // If the replaced value is valid, use the replaced value as the new value of the variable.
       if (substitution.isSome()) {
@@ -115,16 +117,12 @@ export namespace Variable {
         // If the value of the variable is invalid, as indicated by it being
         // `None`, we instead use the fallback value, if available.
         // https://drafts.csswg.org/css-variables/#invalid-variables
-        .orElse(() =>
-          fallback
-            // Substitute any additional cascading variables within the fallback
-            // value. This substitution happens in the current style's context.
-            .flatMap((tokens) =>
-              substitute(tokens, variables, visited.add(name)).map(
-                ([tokens]) => tokens,
-              ),
-            ),
-        )
+        .or(fallback)
+        // Substitute any additional cascading variables within the
+        // result. This substitution happens in the current
+        // style's context.
+        .flatMap((tokens) => substitute(tokens, variables, visited.add(name)))
+        .map(([tokens]) => tokens)
     );
   }
 

packages/alfa-style/test/variable.spec.ts

@@ -171,7 +171,7 @@ test("flatten() expands variables recursively in fallbacks", (t) => {
     ["baz", "bar", "foo"],
   ]) {
     const map = Variable.gather([
-      Declaration.of(`--${intitial}`, `var--invalid, var(--${intermediate}))`),
+      Declaration.of(`--${intitial}`, `var(--invalid, var(--${intermediate}))`),
       Declaration.of(`--${intermediate}`, `var(--${final})`),
       Declaration.of(`--${final}`, "Actual value!"),
     ]);