Support subtree direction for the rtl: variant (currently resolved globally)

[istarkov]

Uniwind 1.3.0 Pro: subtree-scoped rtl: support

When in Arabic interfaces, it's not rare when you have an English UI but the data you are receiving on a request is in Arabic and vice versa.

We always need to support subtrees with a different direction.
That works perfectly in Tailwind on the web. React Native also supports this using a direction CSS style:

<View style={{ direction: "rtl" }}>

But seems like Uniwind is using a global value for the rtl: variant.

That’s really needed for Arabic interfaces instead of using:

cn(isRtl ? "" : "")

Repro

// App direction is LTR (I18nManager.isRTL === false)
<View style={{ direction: "rtl" }}>
  {/* Yoga: flips correctly — S/E markers swap, ps-* moves to the right edge */}
  <View className="flex-row ps-10">…</View>

  {/* Uniwind: stays blue — rtl: doesn't see the subtree direction */}
  <View className="bg-blue-500 rtl:bg-red-500" />
</View>

Seems like this is doable in uniwind, having group etc support.
And I think it's great pro feature for the library.

PS:

Tailwind v4 web:

rtl: variant compiles to &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)

That’s an ancestor selector — the nearest dir attribute wins, so a dir="rtl" subtree flips its rtl: classes while the rest of the page stays LTR. Subtree-scoped by design.

[istarkov]

Should be reopened
#576

[Brentlok]

After internal discussion we will be going in a different direction. We will introduce a new component called LayoutDirection and it would have an optional prop rtl

<LayoutDirection rtl>
    <View className="bg-blue-500 rtl:bg-red-500" />
</LayoutDirection>

We won't support <View style={{ direction: "rtl" }}> because it would require too much maintenance effort, because we would need to add logic in every component to check for direction style and wrap it's children with ContextProvider

[istarkov]

Thats perfectly ok, thank you!!!