What happened?
After upgrading from Uniwind 1.10.1 + Tailwind CSS 4.3.2 to Uniwind 1.12.0 + Tailwind CSS 4.3.3, custom variables declared in rootless @variant blocks are silently dropped on native.
Given:
@layer theme {
@variant light {
--repro: #2563eb;
}
@variant dark {
--repro: #60a5fa;
}
}
@theme inline static {
--color-repro: var(--repro);
}
Tailwind CSS 4.3.3 emits a selector shaped like:
:scope:where(.light, .light *)
Uniwind 1.12.0 does not retain this variable in its native scoped theme variables. At runtime:
useCSSVariable("--repro") returns "unset".
useCSSVariable("--color-repro") returns "unset".
bg-repro does not render a background color.
An otherwise identical variable wrapped in :root works correctly and resolves to a concrete color. The reproduction displays both cases side by side.
This is silent: TypeScript, Expo Doctor and the native build all succeed.
We originally observed it through a downstream UI-library consumer of useCSSVariable, where the literal "unset" eventually caused a color transformation to throw. The linked reproduction does not include that UI library and reproduces the underlying issue using only Expo, React Native, Uniwind and Tailwind CSS.
This appears related to the Tailwind CSS 4.3.3 selector changes discussed in #661 and addressed generally by #662. Issue #623 also describes silently dropped theme utilities, although its import-order cause is different.
If rootless @variant blocks are intentionally unsupported, a compile-time error or warning would be preferable to silently registering the variable as "unset".
Steps to Reproduce
- Clone the reproduction repository.
- Run
pnpm install.
- Run
pnpm ios.
- Observe that the
Rootless blue circle is missing.
- Observe that
--repro and --color-repro display "unset".
- Observe that the green
With :root control renders correctly and --rooted-control resolves to #4ade80.
- Wrap the rootless variants in
:root, or downgrade to Uniwind 1.10.1 + Tailwind CSS 4.3.2, and observe that the missing color is restored.
Snack or Repository Link
https://github.com/DigitalAndSEO/uniwind-tailwind-433-scope-repro
Uniwind version
1.12.0
React Native Version
0.86.3
Platforms
iOS
Expo
Yes
Additional information 〰
What happened?
After upgrading from Uniwind 1.10.1 + Tailwind CSS 4.3.2 to Uniwind 1.12.0 + Tailwind CSS 4.3.3, custom variables declared in rootless
@variantblocks are silently dropped on native.Given:
Tailwind CSS 4.3.3 emits a selector shaped like:
Uniwind 1.12.0 does not retain this variable in its native scoped theme variables. At runtime:
useCSSVariable("--repro")returns"unset".useCSSVariable("--color-repro")returns"unset".bg-reprodoes not render a background color.An otherwise identical variable wrapped in
:rootworks correctly and resolves to a concrete color. The reproduction displays both cases side by side.This is silent: TypeScript, Expo Doctor and the native build all succeed.
We originally observed it through a downstream UI-library consumer of
useCSSVariable, where the literal"unset"eventually caused a color transformation to throw. The linked reproduction does not include that UI library and reproduces the underlying issue using only Expo, React Native, Uniwind and Tailwind CSS.This appears related to the Tailwind CSS 4.3.3 selector changes discussed in #661 and addressed generally by #662. Issue #623 also describes silently dropped theme utilities, although its import-order cause is different.
If rootless
@variantblocks are intentionally unsupported, a compile-time error or warning would be preferable to silently registering the variable as"unset".Steps to Reproduce
pnpm install.pnpm ios.Rootlessblue circle is missing.--reproand--color-reprodisplay"unset".With :rootcontrol renders correctly and--rooted-controlresolves to#4ade80.:root, or downgrade to Uniwind 1.10.1 + Tailwind CSS 4.3.2, and observe that the missing color is restored.Snack or Repository Link
https://github.com/DigitalAndSEO/uniwind-tailwind-433-scope-repro
Uniwind version
1.12.0
React Native Version
0.86.3
Platforms
iOS
Expo
Yes
Additional information 〰