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

Aberta
  • Algo errado?
#481 0 comentários 1 reação 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 12 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
62/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
react-native, tailwindcss, typescript
Domínio
mobile

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
166
Forks
45
Merge médio
17d 22h
PRs com merge (30d)
3

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de nativewind/react-native-css

Todas as issues de nativewind/react-native-css

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.