Uh oh!
There was an error while loading. Please reload this page.
fix: coerce NaN Lab/OKLab channels to 0 in parseColor - #351
Conversation
1e98225 to
3148e17Comparedanstepanov
commented
Jun 20, 2026
@sarathfrancis90 thanks for opening a PR, can you rebase with the main branch? |
3148e17 to
08dfca1Comparesarathfrancis90
commented
Jun 26, 2026
Rebased onto main — should be clean now. Thanks! |
danstepanov
commented
Jul 8, 2026
Preemptive review to help triage for the 5.0 release, @marklawlor makes the final call. Verified against current main and it holds up. Tailwind compiles bg-black/50 to a color-mix that lightningcss resolves to NaN oklab channels, and parseColor passed them through so RN got #NaNNaNNaN80 and dropped the style. Coercing NaN to 0 matches CSS Color 4 missing component semantics, the regression test fails on main without the fix, and the diff applies cleanly. Works on v4, silently broken on v5, so I'd call it a blocker for latest. |
08dfca1 to
907e153Comparesarathfrancis90
commented
Jul 13, 2026
Thanks for the detailed review @danstepanov, really appreciate it. I've rebased onto the latest main and everything's still green, so it should be good to go for the 5.0 triage — happy to adjust anything if @marklawlor wants changes. |
danstepanov
commented
Jul 13, 2026
On my merge list for today! |
color-mix() resolved at compile time by lightningcss can yield NaN chromaticity channels for degenerate mixes (e.g. mixing black with transparent in oklab). Passing NaN to colorjs.io produced an invalid color string like "#NaNNaNNaN80" that React Native silently discards, so utilities such as Tailwind's bg-black/50 rendered with no background. Treat NaN channels as 0 (a missing component per CSS Color 4) for the lab/lch/oklab/oklch cases, so the example resolves to nativewind#80. Fixesnativewind#317
907e153 to
e479756CompareUh oh!
There was an error while loading. Please reload this page.
Summary
Fixes#317.
color-mix()is resolved at compile time by lightningcss. For a degeneratemix the result can have
NaNchromaticity channels — mixing#000withtransparentin oklab givesoklab(0 NaN NaN / 0.5), because black has nochromaticity to interpolate.
parseColorpassed thoseNaNcoords straightto colorjs.io, which serialized them to
"#NaNNaNNaN80". React Nativesilently discards an invalid color string, so utilities like Tailwind's
bg-black/50rendered with no background.Fix
The
lab/lch/oklab/oklchcases inparseColor(src/compiler/declarations.ts)now coerce each channel through a small
nanToZerohelper. A missing colorcomponent is
0per CSS Color 4, sooklab(0 NaN NaN / 0.5)becomesoklab(0 0 0 / 0.5)= black at 50% alpha, serializing to#00000080.Testing
Added a regression test in
src/__tests__/native/color-mix.test.tsxforcolor-mix(in oklab, #000 50%, transparent). It fails onmain(
Received "#NaNNaNNaN80") and passes with the fix ("#00000080").yarn test,yarn typecheckandyarn lintall pass.