Skip to content

fix: resolve single box-shadow from runtime CSS variables#295

Open
YevheniiKotyrlo wants to merge 1 commit intonativewind:mainfrom
YevheniiKotyrlo:fix/runtime-box-shadow-variable-resolution
Open

fix: resolve single box-shadow from runtime CSS variables#295
YevheniiKotyrlo wants to merge 1 commit intonativewind:mainfrom
YevheniiKotyrlo:fix/runtime-box-shadow-variable-resolution

Conversation

@YevheniiKotyrlo
Copy link
Contributor

Summary

Fix box-shadow shorthand resolution when CSS variables are resolved at runtime (not inlined at compile time). Currently, a single shadow from a runtime variable produces boxShadow: [] instead of the expected shadow object.

Problem

When a CSS variable holding a single box-shadow value is resolved at runtime, the shorthand handler receives a flat array of tokens like [0, 4, 6, -1, "#000"]. The handler incorrectly iterates each primitive individually — passing 0, 4, 6, etc. to the pattern matcher one at a time. No single primitive matches any shadow pattern, so all return undefined and get filtered out.

The runtime path is triggered when variables are:

  • Defined multiple times (e.g., :root + .dark for theme switching)
  • Not inlined (inlineVariables: false)

The compile-time path (single-definition variables that get inlined) is not affected — lightningcss parses the full shadow value correctly.

Reproduction

:root { --themed-shadow: 0 4px 6px -1px #000; }
.dark { --themed-shadow: 0 4px 6px -1px #fff; }
.test { box-shadow: var(--themed-shadow); }

Expected: boxShadow: [{ offsetX: 0, offsetY: 4, blurRadius: 6, spreadDistance: -1, color: "#000" }]
Actual: boxShadow: []

Solution

Detect whether the resolved args array is flat (single shadow) or nested (multiple shadows) before entering the multi-shadow handler:

  • Flat [0, 4, 6, -1, "#000"] → first element is a primitive → pass the entire array to the pattern handler as a single shadow
  • Nested [[0, 4, 6, -1, "#000"], [0, 1, 2, 0, "#333"]] → first element is an array → use existing flatMap logic for multiple shadows

The existing multi-shadow path (nested arrays from comma-separated box-shadow values) is unchanged.

Verification

  • yarn typecheck — pass
  • yarn lint — pass
  • yarn build — pass
  • yarn test — 971 passed, 3 failed (pre-existing babel plugin tests), 22 skipped (pre-existing)

Related

When a CSS variable holding a single box-shadow value is resolved at
runtime, the shorthand handler receives a flat array of tokens like
[0, 4, 6, -1, "#000"]. The handler incorrectly iterates each primitive
individually, none match any shadow pattern, and the result is an empty
array.

Detect flat vs nested arrays before entering the multi-shadow handler.
A flat array is a single shadow's tokens that should be passed directly
to the pattern handler. A nested array contains multiple shadows for
the existing flatMap logic.
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.

1 participant