@colimuca123/nativewind 4.2.2-rc.1

package/src/__tests__/theme.tsx

@@ -0,0 +1,245 @@
+/** @jsxImportSource nativewind */
+import {
+  PixelRatio,
+  Platform,
+  PlatformColor,
+  StyleSheet,
+  View,
+} from "react-native";
+
+import { screen } from "@testing-library/react-native";
+
+import { render } from "../test";
+import {
+  fontScaleSelect,
+  getPixelSizeForLayoutSize,
+  hairlineWidth,
+  pixelScaleSelect,
+  platformColor,
+  platformSelect,
+  roundToNearestPixel,
+} from "../theme";
+
+const testA = "a";
+const testB = "b";
+
+test("hairlineWidth()", async () => {
+  await render(<View testID={testA} className="border-custom" />, {
+    config: {
+      theme: {
+        extend: {
+          borderWidth: {
+            custom: hairlineWidth(),
+          },
+        },
+      },
+    },
+  });
+
+  const component = screen.getByTestId(testA);
+
+  expect(component).toHaveStyle({ borderWidth: StyleSheet.hairlineWidth });
+});
+
+test("platformSelect()", async () => {
+  await render(
+    <>
+      <View testID={testA} className="text-match" />
+      <View testID={testB} className="text-default" />
+    </>,
+    {
+      config: {
+        theme: {
+          extend: {
+            colors: {
+              match: platformSelect({
+                [Platform.OS]: "black",
+                default: "white",
+              }),
+              default: platformSelect({
+                [Platform.OS === "ios" ? "android" : "ios"]: "black",
+                default: "white",
+              }),
+            },
+          },
+        },
+      },
+    },
+  );
+
+  expect(screen.getByTestId(testA)).toHaveStyle({ color: "black" });
+  expect(screen.getByTestId(testB)).toHaveStyle({ color: "white" });
+});
+
+test("pixelScaleSelect()", async () => {
+  const currentPixelRatio = PixelRatio.get();
+
+  await render(
+    <>
+      <View testID={testA} className="text-match" />
+      <View testID={testB} className="text-default" />
+    </>,
+    {
+      config: {
+        theme: {
+          extend: {
+            colors: {
+              match: pixelScaleSelect({
+                [currentPixelRatio]: "black",
+                default: "white",
+              }),
+              default: pixelScaleSelect({
+                [currentPixelRatio + 1]: "black",
+                default: "white",
+              }),
+            },
+          },
+        },
+      },
+    },
+  );
+
+  expect(screen.getByTestId(testA)).toHaveStyle({ color: "black" });
+  expect(screen.getByTestId(testB)).toHaveStyle({ color: "white" });
+});
+
+test("fontScaleSelect()", async () => {
+  const fontScale = PixelRatio.getFontScale();
+
+  await render(
+    <>
+      <View testID={testA} className="text-match" />
+      <View testID={testB} className="text-default" />
+    </>,
+    {
+      config: {
+        theme: {
+          extend: {
+            colors: {
+              match: fontScaleSelect({
+                [fontScale]: "black",
+                default: "white",
+              }),
+              default: fontScaleSelect({
+                [fontScale + 1]: "black",
+                default: "white",
+              }),
+            },
+          },
+        },
+      },
+    },
+  );
+
+  expect(screen.getByTestId(testA)).toHaveStyle({ color: "black" });
+  expect(screen.getByTestId(testB)).toHaveStyle({ color: "white" });
+});
+
+test("roundToNearestPixel()", async () => {
+  await render(<View testID={testA} className="border-custom" />, {
+    config: {
+      theme: {
+        extend: {
+          borderWidth: {
+            custom: roundToNearestPixel(2.5),
+          },
+        },
+      },
+    },
+  });
+
+  expect(screen.getByTestId(testA)).toHaveStyle({
+    borderWidth: PixelRatio.roundToNearestPixel(2.5),
+  });
+});
+
+test("getPixelSizeForLayoutSize()", async () => {
+  await render(<View testID={testA} className="border-custom" />, {
+    config: {
+      theme: {
+        extend: {
+          borderWidth: {
+            custom: getPixelSizeForLayoutSize(2),
+          },
+        },
+      },
+    },
+  });
+
+  expect(screen.getByTestId(testA)).toHaveStyle({
+    borderWidth: PixelRatio.getPixelSizeForLayoutSize(2),
+  });
+});
+
+test("platformColor()", async () => {
+  await render(<View testID={testA} className="text-custom" />, {
+    config: {
+      theme: {
+        extend: {
+          colors: {
+            custom: platformColor(
+              "systemTealColor",
+              "?android:attr/textColor",
+              "blue",
+            ),
+          },
+        },
+      },
+    },
+  });
+
+  expect(screen.getByTestId(testA)).toHaveStyle({
+    color: PlatformColor("systemTealColor", "?android:attr/textColor", "blue"),
+  });
+});
+
+test("nested functions", async () => {
+  await render(
+    <View testID={testA} className="border-custom [--test:123px]" />,
+    {
+      config: {
+        theme: {
+          extend: {
+            borderWidth: {
+              custom: platformSelect({
+                [Platform.OS]: pixelScaleSelect({
+                  [PixelRatio.get()]: "var(--test)",
+                }),
+              }),
+            },
+          },
+        },
+      },
+    },
+  );
+
+  expect(screen.getByTestId(testA)).toHaveStyle({
+    borderWidth: 123,
+  });
+});
+
+test("custom color w/ css variable", async () => {
+  await render(
+    <View
+      testID={testA}
+      className="text-primary-50 [--color-primary-50:240,253,250]"
+    />,
+    {
+      config: {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                50: "rgb(var(--color-primary-50) / <alpha-value>)",
+              },
+            },
+          },
+        },
+      },
+    },
+  );
+
+  expect(screen.getByTestId(testA)).toHaveStyle({
+    color: "rgba(240, 253, 250, 1)",
+  });
+});