From 5b609d151ef182119fca6bd116e0bc09a9d2ec26 Mon Sep 17 00:00:00 2001
From: abdalkaderdev <abdalkaderdealhamoud@gmail.com>
Date: Thu, 8 Oct 2026 03:58:21 +0300
Subject: [PATCH] test: cover rtl:/ltr: variants in both directions

#453 reports that the rtl: and ltr: variants are dropped, because
lightningcss downcompiles :dir() to :lang() and the selector builder
had no lang handler. It does not reproduce on main any more.

There was no coverage to keep it that way: the existing ltr: test only
asserts the default direction and never sets I18nManager.isRTL, so it
passes whether or not the condition is honoured. These set isRTL both
ways and assert the negative case too.
---
 src/__tests__/vendor/tailwind/states.test.tsx | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/__tests__/vendor/tailwind/states.test.tsx b/src/__tests__/vendor/tailwind/states.test.tsx
index c4abd1e0..e008dace 100644
--- a/src/__tests__/vendor/tailwind/states.test.tsx
+++ b/src/__tests__/vendor/tailwind/states.test.tsx
@@ -1,3 +1,5 @@
+import { I18nManager } from "react-native";
+
 import { fireEvent, screen } from "@testing-library/react-native";
 import { Switch, TextInput, View } from "react-native-css/components";
 
@@ -5,6 +7,20 @@ import { render } from "./_tailwind";
 
 const testID = "component";
 
+const originalIsRTL = Object.getOwnPropertyDescriptor(I18nManager, "isRTL");
+afterEach(() => {
+  if (originalIsRTL) {
+    Object.defineProperty(I18nManager, "isRTL", originalIsRTL);
+  }
+});
+
+function setIsRTL(isRTL: boolean) {
+  Object.defineProperty(I18nManager, "isRTL", {
+    configurable: true,
+    value: isRTL,
+  });
+}
+
 test("hover", async () => {
   await render(<TextInput testID={testID} className="hover:text-white" />);
 
@@ -144,3 +160,26 @@ test("disabled", async () => {
     }),
   );
 });
+
+// Tailwind compiles these to :dir(), which lightningcss downcompiles to
+// :lang() for a fixed list of RTL languages. Both paths have to survive the
+// compiler and end up as a dir condition. See #453.
+test.each([true, false])("rtl: with isRTL=%s", async (isRTL) => {
+  setIsRTL(isRTL);
+
+  await render(<View testID={testID} className="rtl:text-white" />);
+
+  expect(screen.getByTestId(testID)).toHaveStyle(
+    isRTL ? { color: "#fff" } : undefined,
+  );
+});
+
+test.each([true, false])("ltr: with isRTL=%s", async (isRTL) => {
+  setIsRTL(isRTL);
+
+  await render(<View testID={testID} className="ltr:text-white" />);
+
+  expect(screen.getByTestId(testID)).toHaveStyle(
+    isRTL ? undefined : { color: "#fff" },
+  );
+});