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 小时 新手友好度 78/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 66/100
CopilotKit/openmuse#215 ·
维护者通常 3 天内回复
-
b:minor bug
难度 2/5 1-3 小时 新手友好度 76/100
software-mansion/argent#1698 ·
维护者通常 1 天内回复
-
e2e-failure ready-to-code
难度 2/5 1-3 小时 新手友好度 72/100
redhat-developer/rhdh-plugin-export-overlays#4624 · 1 条评论 ·
维护者通常 1 天内回复