Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#481 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 3 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
62/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react-native, tailwindcss, typescript
Bereich
mobile

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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

Vorherrschende Sprache
TypeScript
Sterne
166
Forks
45
Ø Merge
13 T. 14 Std.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus nativewind/react-native-css

Alle Issues in nativewind/react-native-css

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.