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

Abierto
  • ¿Algo no está bien?
#481 0 comentarios 1 reacción 0 asignados Ver en GitHub

Los mantenedores suelen responder en 12 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
62/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react-native, tailwindcss, typescript
Área
mobile

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
166
Forks
45
Merge medio
17 d 22 h
PR fusionados (30 d)
3

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de nativewind/react-native-css

Todos los issues de nativewind/react-native-css

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.