3.1.0-rc.0 regression: bg-x/N on a CSS-variable colour resolves to no colour on native after Metro's JSON injection
維護者通常 3 天內回覆
還沒有人認領這個 Issue。
評估
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 新手友好度
- 62/100
- Issue 類型
- 缺陷
- 描述清晰度
- 描述清楚
- 活躍度
- 活躍
- 技術堆疊
- react-native, tailwindcss, typescript
- 領域
- mobile
研究方向
Start with the colorMix function in src/native/styles/functions/color-mix.ts and the resolveValue filtering it relies on. Run the linked repro.js, which compiles bg-ink/10, round-trips the sheet through JSON, and calls calculateProps. Done means the JSON-injected path resolves to the same rgba(...) value as the in-memory sheet, with a regression test covering the trailing null weight slot. Check first whether the fix belongs in the resolver or the compiler, since the issue offers both.
由索引模型根據 Issue 內容生成。
描述
Before submitting a new issue
- I tested using the latest version of the library, as the bug might be already fixed. (3.1.0-rc.0, the
rctag. Nightly0.0.0-nightly.a5002c5has the same code.latest3.0.7 does not have the bug.) - I tested using a supported version of react native. (0.85.3)
- I checked for possible duplicate issues, with possible answers. (Closest is #317, which is a different bug and is already fixed.)
Bug summary
This is a regression from 3.0.7. On native, Metro injects the stylesheet. Once it does, a theme colour defined as a CSS variable resolves to no value when it carries an opacity modifier. Tailwind compiles bg-x/N on such a colour to color-mix(in oklab, var(--x) N%, transparent). The element then renders with no fill in either colour scheme, and nothing errors. The same rule resolves correctly from the in-memory sheet, so only the JSON-injected path breaks.
Cause, as far as we can trace it:
- The compiler's colorMix descriptor now ends in a trailing
undefinedweight slot whenever the right-hand weight is omitted, which Tailwind always does:["oklab",[{},"var","color-ink",1],"10%","transparent",undefined]. In 3.0.7 the descriptor was["oklab",[{},"var","color-ink",1],"10%"]. - Metro's native injection is
StyleCollection.inject(${JSON.stringify(value)}), so the slot arrives asnull. resolveValuefilters onlyundefined, socolorMix(src/native/styles/functions/color-mix.ts) keeps thenullinargsand returns early atif (args.length) return;.- The declaration is delayed (
dv: 1). Its placeholder has already replaced the static fallback, so nothing is applied at all.
One-line fix we are carrying locally via patch-package, in colorMix:
const args = resolved.filter((arg) => arg !== null && arg !== undefined);
Alternatively, the compiler could stop emitting the trailing slot. A test that round-trips the compiled sheet through JSON.parse(JSON.stringify(...)) before resolving would catch this whole class of bug.
Library version
3.1.0-rc.0 (with nativewind 5.0.0-rc.0, lightningcss 1.30.1)
Environment info
react-native: 0.85.3 (New Architecture)
expo: 56.0.x
nativewind: 5.0.0-rc.0
react-native-css: 3.1.0-rc.0
lightningcss: 1.30.1
node: 24.16.0
OS: macOS 26 (iOS simulator + Android emulator); also reproduces in plain Node against dist/commonjs
Steps to reproduce
- Clone the gist below and run
npm install --legacy-peer-deps && node repro.js. - The script compiles the CSS Tailwind v4 emits for
bg-ink/10(a--color-inktheme variable with a light-scheme override). It injects the result into the realStyleCollectiontwice, once as compiled and once afterJSON.parse(JSON.stringify(sheet)), then resolves the class withcalculateProps. - On 3.1.0-rc.0 the in-memory sheet resolves to
{"backgroundColor":"rgba(238, 238, 238, 0.1)"}, but the JSON round trip resolves to{}. - Install
[email protected]and run it again: both resolve torgba(238, 238, 238, 0.1).
Reproducible example repository
https://gist.github.com/nicklamont/9f9c2fc98ca8332e6b4b4c85d09b3778
- 主要語言
- TypeScript
- 星號
- 166
- 分支
- 45
- 平均合併
- 13 天 14 小時
- 30 天內合併 PR
- 1
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 沒有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
nativewind/react-native-css 的其他 Issue
-
難度 2/5 1-3 小時 新手友好度 78/100
nativewind/react-native-css#545 ·
維護者通常 3 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
nativewind/react-native-css#544 ·
維護者通常 3 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
nativewind/react-native-css#543 ·
維護者通常 3 天內回覆
-
難度 2/5 1-3 小時 新手友好度 84/100
nativewind/react-native-css#540 ·
維護者通常 3 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
nativewind/react-native-css#538 ·
維護者通常 3 天內回覆
查看 nativewind/react-native-css 的全部 Issue
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 65/100
lichess-org/lila#22324 · 1 則留言 ·
維護者通常 1 天內回覆
-
ep:WebGPU platform:web quantization
難度 2/5 1-3 小時 新手友好度 66/100
microsoft/onnxruntime#33752 ·
維護者通常 2 天內回覆
-
[Skill Bug]: entra-agent-id: inaccurate blueprint permission inheritance and parent token sub claim未關閉bug entra-agent-id
難度 2/5 1-3 小時 新手友好度 78/100
microsoft/GitHub-Copilot-for-Azure#3467 · 1 則留言 ·
維護者通常 1 天內回覆
-
fix(worker): keep normal prepare waiting states failure-free可能已有人在做 @LichKing-2234 今天認領。 未關閉agent:codex priority:P1
難度 2/5 1-3 小時 新手友好度 72/100
AgoraIO-Extensions/agent-infra#3745 ·
維護者通常 1 天內回覆
-
The five-line work window can drop its oldest line: the per-line byte share ignores the JSON framing可能已有人在做 @Eapp1e 今天認領。 未關閉
難度 2/5 1-3 小時 新手友好度 84/100
makecindy/cindy#7973 · 1 則留言 ·
維護者通常 1 天內回覆