Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#213 2 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 3 ngày

@danstepanov đang làm issue này rồi.

Từ ngày 15/7/2026.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
166
Fork
45
Merge trung bình
13 ngày 14 giờ
Pull request đã merge (30 ngày)
1

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của nativewind/react-native-css

Tất cả issue của nativewind/react-native-css

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.