Repository navigation
fix(core): css var() fallbacks, order-independent custom properties, and no crash on unresolvable ones - #11527
Merged
Merged
Conversation
… properties - var() finds its matching closing parenthesis, so fallbacks such as rgb(...) are no longer truncated. - The fallback is everything after the first comma, so comma lists (e.g. gradient stops) survive. var(--missing, a, b) now resolves to "a, b" as the spec requires, instead of "a". - A custom property set to `initial` uses the var() fallback. - Custom properties are settled before the properties that use them, and re-evaluated when one refers to another declared after it.
…styling A custom property whose var() could not be resolved was stored as the unsetValue sentinel. When another variable read it, evaluation called .trim() on it and threw, which aborted styling of the view: a stylesheet with a chain of forward references (--a: var(--b) before --b, as Bootstrap writes them) rendered blank. Such a property now holds null, CSS's guaranteed-invalid value: var() takes its fallback, and the parent's value does not show through. Custom properties in a cycle resolve the same way.
A value that throws when applied (e.g. var() resolving to an invalid color) left the previously applied value in place. Per CSS Values 5, a declaration invalid at computed-value time computes as unset. https://drafts.csswg.org/css-values-5/#invalid-substitution
This was referenced Oct 15, 2026
Merged
|
View your CI Pipeline Execution ↗ for commit ac100b2
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗ ☁️ Nx Cloud last updated this comment at |
This was referenced Oct 15, 2026
commit: |
Contributor
Contributor
|
@CatchABus thanks for pointing to #10776, it was useful prior art. Between this PR and #11593, most of what it aimed for is covered:
Two places we went a different way:
Your idea of resolving each variable when something first asks for it is nicer than our repeated passes. If you want to bring it over later, it would replace |
NathanWalker
approved these changes
Oct 29, 2026
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
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.
PR Checklist
What is the current behavior?
var()cannot be resolved is stored as core'sunsetValuesentinel. When another variable reads it, evaluation calls.trim()on the sentinel and throws, which aborts styling of the view. A stylesheet with a chain of forward references (--a: var(--b)before--b, as Bootstrap writes its variables) renders the app blank.var()fallbacks are cut at the first)and the first,, sovar(--x, rgb(0, 0, 255))and comma lists such as gradient stops are truncated.var()resolving to an invalid color) leaves the previously applied value in place.What is the new behavior?
var()finds its matching closing parenthesis, and the fallback is everything after the first comma, as the spec requires.initialuses thevar()fallback.null, CSS's guaranteed-invalid value:var()takes its fallback and the parent's value does not show through. Properties in a cycle resolve the same way. This is the crash fix.unsetinstead of keeping the previous value (css-values-5).Tests:
css-variable-expression.spec.tsandstyle-scope.spec.ts(forward-reference chains, cycles, an unresolvable variable not inheriting the parent's value, invalid values unsetting). The chain and cycle tests reproduce theTypeErrorwithout the fix. Theapps/automatedexpectation forvar(--undefined-var, var(--my-fallback-var), yellow)changes from lime to unset, which is what browsers do (lime, yellowis not a color). The automated suite passes on an Android emulator (API 36) with this branch merged with the other CSS PRs.Verified with all of these core PRs merged together (#11527–#11537):
apps/automatedpasses on the iOS 26.4 simulator (1830 OK, 0 failed) and on an Android API 36 emulator (1692 OK; the one failure is the network-dependentIMAGE-CACHE.test_ImageCache_ValidUrltimeout, which also passes on reruns).