Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#213 2 commentaires 0 réactions 1 personne assignée Voir sur GitHub

Les mainteneurs répondent en général sous 3 jours

@danstepanov y travaille déjà.

Depuis le 15/7/2026.

Évaluation

Cette issue n'a pas encore été évaluée.

Description

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

Langage dominant
TypeScript
Étoiles
166
Forks
45
Merge moyen
13 j 14 h
PR mergées (30 j)
1

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de nativewind/react-native-css

Toutes les issues de nativewind/react-native-css

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.