Indirect variables defined in Tailwind's CSS file aren't updated by VariableContextProvider when underlying variable changes

Abierto
  • ¿Algo no está bien?
#213 2 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 5 días

@danstepanov ya está trabajando en esto.

Desde el 15/7/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

bug deferred (post-5.0)
Before submitting a new issue
  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.
Bug summary

When defined in TailwindCSS's @theme directive, if a variable depends on another's value, (for example, --color-primary: hsl(var(--primary))), updating the source variable (--primary in this example) in VariableContextProvider doesn't propagate to the derived variable (--color-primary in this example).

Library version

^3.0.0 (+ Nativewind 5.0.0-preview.1)

Environment info
System:
  OS: macOS 26.0.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 607.86 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.18.0
    path: /Users/h/.nvm/versions/node/v22.18.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.3
    path: /Users/h/.nvm/versions/node/v22.18.0/bin/npm
  Watchman:
    version: 2025.09.01.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.8
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.2
    wanted: ^20.0.2
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: true
  newArchEnabled: true
Steps to reproduce
  1. In your global.css add:
@theme {
	--color-primary: hsl(var(--primary));
}
@layer base {
	:root {
    	--primary: 0 0% 9%;
     }
}
  1. Then anywhere in your React Native tree:
<VariableContextProvider
	value={{
		'--primary': '80 76% 61%', // green
	}}
>
	{/* Doesn't work, renders the static `--primary` defined in global.css (`hsl(0 0% 9%)`) */}
	<View className="size-10 bg-[var(--color-primary)]" />
	{/* Renders green - variable is working */}
	<View className="size-10 bg-[hsl(var(--primary))]" />
</VariableContextProvider>

I've tried reproducing without any values in .css, but the following won't work. That seems to be a different bug?

<VariableContextProvider
	value={{
		'--custom': '0 0% 9%',
		'--custom-color': 'hsl(var(--custom))',
	}}
>
	<VariableContextProvider
		value={{
			'--custom': '80 76% 61%',
		}}
	>
		{/* Doesn't work - apparently var(--color-custom) never got defined with a valid --custom value */}
		<View className="size-10 bg-[var(--color-custom)]" />
		{/* Works */}
		<View className="size-10 bg-[hsl(var(--custom))]" />
	</VariableContextProvider>
</VariableContextProvider>

Thank you for your work in this amazing library! Huge unlock being able to port a good chunk of my web skills into RN UI 😄

Reproducible example repository

https://github.com/nativewind/react-native-css/issues?q=Indirect%20variables

Lenguaje dominante
TypeScript
Estrellas
166
Forks
45
Merge medio
10 d 1 h
PR fusionados (30 d)
4

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.