← 输入框|github.com|刷新
Skip to content

fix(core): css var() fallbacks, order-independent custom properties, and no crash on unresolvable ones - #11527

Open
triniwiz wants to merge 4 commits into
mainfrom
fix/css-forward-var-refs
Open

triniwiz wants to merge 4 commits into
mainfrom
fix/css-forward-var-refs

Conversation

@triniwiz

@triniwiz triniwiz commented Oct 15, 2026 •

Copy link
Copy Markdown
Member

PR Checklist

What is the current behavior?

  • A custom property whose var() cannot be resolved is stored as core's unsetValue sentinel. 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 ,, so var(--x, rgb(0, 0, 255)) and comma lists such as gradient stops are truncated.
  • Custom properties are only resolved in declaration order.
  • A value that throws when applied (e.g. 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.
  • 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.
  • A custom property that cannot be resolved holds 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.
  • A declaration that is invalid at computed-value time computes as unset instead of keeping the previous value (css-values-5).

Tests: css-variable-expression.spec.ts and style-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 the TypeError without the fix. The apps/automated expectation for var(--undefined-var, var(--my-fallback-var), yellow) changes from lime to unset, which is what browsers do (lime, yellow is 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/automated passes 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-dependent IMAGE-CACHE.test_ImageCache_ValidUrl timeout, which also passes on reruns).

… 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
@nx-cloud

nx-cloud Bot commented Oct 15, 2026 •

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit ac100b2

Command Status Duration Result
nx test apps-automated -c=android ✅ Succeeded 5m 27s View ↗
nx run-many --target=test --configuration=ci --... ✅ Succeeded <1s View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗


☁️ Nx Cloud last updated this comment at 2026-10-15 20:38:25 UTC

@pkg-pr-new

pkg-pr-new Bot commented Oct 15, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@nativescript/core@11527
npm i https://pkg.pr.new/@nativescript/vite@11527
npm i https://pkg.pr.new/@nativescript/webpack@11527

commit: ac100b2

@CatchABus

CatchABus commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

@triniwiz You might also get ideas from my draft work:
#10776
I think I left it as draft because my parser is using csstools tokenizer and parser deps underneath and that makes it a bit slower.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants