Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#481 コメント 0 件 リアクション 1 件 担当者 0 名 GitHub で見る

メンテナーはふだん 3 日以内に返信

まだ誰も着手していません。

評価

難易度
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 rc tag. Nightly 0.0.0-nightly.a5002c5 has the same code. latest 3.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 undefined weight 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 as null.
  • resolveValue filters only undefined, so colorMix (src/native/styles/functions/color-mix.ts) keeps the null in args and returns early at if (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
  1. Clone the gist below and run npm install --legacy-peer-deps && node repro.js.
  2. The script compiles the CSS Tailwind v4 emits for bg-ink/10 (a --color-ink theme variable with a light-scheme override). It injects the result into the real StyleCollection twice, once as compiled and once after JSON.parse(JSON.stringify(sheet)), then resolves the class with calculateProps.
  3. 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 {}.
  4. Install [email protected] and run it again: both resolve to rgba(238, 238, 238, 0.1).
Reproducible example repository

https://gist.github.com/nicklamont/9f9c2fc98ca8332e6b4b4c85d09b3778

主要言語
TypeScript
スター
166
フォーク
45
平均マージ
13日 14時間
マージ済み PR（30日）
1

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

nativewind/react-native-css のほかの issue

nativewind/react-native-css の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。