@colimuca123/nativewind 4.2.2-rc.1

package/src/__tests__/modifier-{}.tsx

@@ -0,0 +1,71 @@
+import { renderCurrentTest } from "../test";
+
+describe("{}/<props>:", () => {
+  test("{}/test:color-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { test: "#000000" },
+    });
+  });
+  test("{}/test.nested:color-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { test: { nested: "#000000" } },
+    });
+  });
+  test("{}/&test:color-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { test: "#000000" } },
+    });
+  });
+  test("{}/&test.nested:color-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { test: { nested: "#000000" } } },
+    });
+  });
+});
+
+// {}-[prop] is an alias for {}/<prop>:
+describe("{}-[prop]:", () => {
+  test("{}-[test]:color-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { test: "#000000" },
+    });
+  });
+  test("{}-[test.nested]:color-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { test: { nested: "#000000" } },
+    });
+  });
+  test("{}-[&test]:color-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { test: "#000000" } },
+    });
+  });
+  test("{}-[&test.nested]:color-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { test: { nested: "#000000" } } },
+    });
+  });
+});
+
+describe("{}-[props]/<attributes>:", () => {
+  test("{}-[test]/fontSize:text-base", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { test: 14, style: { lineHeight: 21 } },
+    });
+  });
+  test("{}-[test.nested]/fontSize:text-base", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { test: { nested: 14 }, style: { lineHeight: 21 } },
+    });
+  });
+  test("{}-[&test]/fontSize:text-base", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { lineHeight: 21, test: 14 } },
+    });
+  });
+  test("{}-[&test.nested]/fontSize:text-base", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { lineHeight: 21, test: { nested: 14 } } },
+    });
+  });
+});

package/src/__tests__/platform-modifiers-test.ios.tsx

@@ -0,0 +1,34 @@
+/** @jsxImportSource nativewind */
+import { View } from "react-native";
+
+import { screen } from "@testing-library/react-native";
+
+import { render } from "../test";
+
+const testID = "react-native-css-interop";
+
+test("platformModifiers: ios", async () => {
+  await render(
+    <View
+      testID={testID}
+      className="ios:text-white android:text-black web:text-red-500"
+    />,
+  );
+
+  const component = screen.getByTestId(testID);
+
+  expect(component).toHaveStyle({ color: "#ffffff" });
+});
+
+test("platformModifiers: ios native", async () => {
+  await render(
+    <View
+      testID={testID}
+      className="ios:text-white native:text-black web:text-red-500"
+    />,
+  );
+
+  const component = screen.getByTestId(testID);
+
+  expect(component).toHaveStyle({ color: "#000000" });
+});

package/src/__tests__/preset.tsx

@@ -0,0 +1,9 @@
+import { renderCurrentTest } from "../test";
+
+describe("Preset - color-*", () => {
+  test("color-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { color: "#000000" } },
+    });
+  });
+});

package/src/__tests__/reusing-styles.tsx

@@ -0,0 +1,44 @@
+/** @jsxImportSource nativewind */
+import { View } from "react-native";
+
+import { screen } from "@testing-library/react-native";
+
+import { render } from "../test";
+
+const testID = "react-native-css-interop";
+
+test("@apply", async () => {
+  await render(<View testID={testID} className="btn-primary" />, {
+    css: `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400;
+  }
+}
+    `,
+  });
+
+  const component = screen.getByTestId(testID);
+
+  expect(component).toHaveStyle({
+    backgroundColor: "#3b82f6",
+    borderRadius: 7,
+    color: "#ffffff",
+    fontWeight: "600",
+    paddingBottom: 7,
+    paddingLeft: 14,
+    paddingRight: 14,
+    paddingTop: 7,
+    shadowColor: "#00000059",
+    shadowOpacity: 1,
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+    shadowRadius: 10,
+  });
+});

package/src/__tests__/safe-area.test.ios.tsx

@@ -0,0 +1,427 @@
+/** @jsxImportSource nativewind */
+import { ViewProps } from "react-native";
+
+import { Metrics, SafeAreaProvider } from "react-native-safe-area-context";
+
+import { INTERNAL_SET, native, renderCurrentTest } from "../test";
+
+const { vh } = native;
+
+const initialMetrics: Metrics = {
+  insets: {
+    top: 10,
+    bottom: 10,
+    left: 10,
+    right: 10,
+  },
+  frame: {
+    x: 0,
+    y: 0,
+    height: 100,
+    width: 100,
+  },
+};
+
+const cssOptions = {
+  inlineRem: 14,
+};
+
+function Wrapper({ children }: ViewProps) {
+  return (
+    <SafeAreaProvider initialMetrics={initialMetrics}>
+      {children}
+    </SafeAreaProvider>
+  );
+}
+
+test("works without the wrapper", async () => {
+  expect(await renderCurrentTest({ cssOptions })).toStrictEqual({
+    props: {},
+  });
+});
+
+test("m-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        marginBottom: 10,
+        marginLeft: 10,
+        marginRight: 10,
+        marginTop: 10,
+      },
+    },
+  });
+});
+
+test("mx-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        marginLeft: 10,
+        marginRight: 10,
+      },
+    },
+  });
+});
+test("my-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        marginBottom: 10,
+        marginTop: 10,
+      },
+    },
+  });
+});
+test("ms-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        marginStart: 10,
+      },
+    },
+  });
+});
+test("me-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        marginEnd: 10,
+      },
+    },
+  });
+});
+test("mt-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        marginTop: 10,
+      },
+    },
+  });
+});
+test("mr-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        marginRight: 10,
+      },
+    },
+  });
+});
+test("mb-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        marginBottom: 10,
+      },
+    },
+  });
+});
+
+test("ml-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        marginLeft: 10,
+      },
+    },
+  });
+});
+
+test("p-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingBottom: 10,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 10,
+      },
+    },
+  });
+});
+
+test("px-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingLeft: 10,
+        paddingRight: 10,
+      },
+    },
+  });
+});
+test("py-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingBottom: 10,
+        paddingTop: 10,
+      },
+    },
+  });
+});
+test("ps-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingStart: 10,
+      },
+    },
+  });
+});
+test("pe-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingEnd: 10,
+      },
+    },
+  });
+});
+test("pt-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingTop: 10,
+      },
+    },
+  });
+});
+test("pr-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingRight: 10,
+      },
+    },
+  });
+});
+test("pb-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingBottom: 10,
+      },
+    },
+  });
+});
+test("pl-safe", async () => {
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingLeft: 10,
+      },
+    },
+  });
+});
+
+test("min-h-screen-safe", async () => {
+  vh[INTERNAL_SET](100);
+
+  // calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        minHeight: 80,
+      },
+    },
+  });
+});
+
+test("max-h-screen-safe", async () => {
+  vh[INTERNAL_SET](100);
+
+  // calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        maxHeight: 80,
+      },
+    },
+  });
+});
+
+test("h-screen-safe", async () => {
+  vh[INTERNAL_SET](100);
+
+  // calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        height: 80,
+      },
+    },
+  });
+});
+
+test("inset-safe", async () =>
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        bottom: 10,
+        left: 10,
+        right: 10,
+        top: 10,
+      },
+    },
+  }));
+test("inset-x-safe", async () =>
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        left: 10,
+        right: 10,
+      },
+    },
+  }));
+test("inset-y-safe", async () =>
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        bottom: 10,
+        top: 10,
+      },
+    },
+  }));
+test("start-safe", async () =>
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        insetInlineStart: 10,
+      },
+    },
+  }));
+test("end-safe", async () =>
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        insetInlineEnd: 10,
+      },
+    },
+  }));
+test("top-safe", async () =>
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        top: 10,
+      },
+    },
+  }));
+test("right-safe", async () =>
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        right: 10,
+      },
+    },
+  }));
+test("bottom-safe", async () =>
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        bottom: 10,
+      },
+    },
+  }));
+test("left-safe", async () =>
+  expect(
+    await renderCurrentTest({ wrapper: Wrapper, cssOptions }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        left: 10,
+      },
+    },
+  }));
+
+test("pb-safe-offset-4", async () => {
+  // calc(env(safe-area-inset-right) + 2rem);
+  expect(
+    await renderCurrentTest({
+      wrapper: Wrapper,
+      cssOptions,
+    }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingBottom: 24, // 10 + 14
+      },
+    },
+  });
+});
+
+test("pb-safe-or-20", async () => {
+  // max(env(safe-area-inset-right), 5rem);
+  expect(
+    await renderCurrentTest({
+      wrapper: Wrapper,
+      cssOptions,
+    }),
+  ).toStrictEqual({
+    props: {
+      style: {
+        paddingBottom: cssOptions.inlineRem * 5,
+      },
+    },
+  });
+});