fix: [#2344] Resolve every var() in a value, not only the first one - #2395
Open
klaesra wants to merge 1 commit into
Open
fix: [#2344] Resolve every var() in a value, not only the first one#2395klaesra wants to merge 1 commit into
klaesra wants to merge 1 commit into
Conversation
…first one Since v20.12.1 resolveVariables() substituted the first var() and returned, leaving later occurrences in the value unresolved. The remainder of the value is now resolved as well. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
klaesra
force-pushed
the
fix/2344-resolve-all-css-variables
branch
from
September 8, 2026 09:47
291d34c to
8ef97cf
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Since v20.12.1
CSSVariableFormatter.resolveVariables()substitutes the firstvar()it finds and returns, leaving the rest of the value untouched.calc(5 * var(--box) + 6 * var(--gap))computes tocalc(5 * 20px + 6 * var(--gap)), and a shorthand such aspadding: calc(0.375 * var(--x)) calc(0.75 * var(--x))fails validation and is dropped fromgetComputedStyle()together with its longhands.The remainder of the value is now passed through
resolveVariables()as well, so everyvar()is substituted; nested fallbacks are unchanged. Browsers substitute all occurrences at computed-value time (Chromium returns the resolved length, as noted in #2351).Resolves #2344
Resolves #2351
Before submitting the PR, please make sure you do the following:
Tests
CSSComputedStyle.test.ts: acalc()with two variables (and the same variable twice), and a shorthand withvar()fallbacks after an earliervar(). Both fail on master and pass with the fix.npm testrun locally; the only failures are pre-existing Windows-environment tests (virtual server, module loader, timers, file cache) that fail identically on master.AI tools