@colimuca123/nativewind 4.2.2-rc.1

package/src/__tests__/sizing.tsx

@@ -0,0 +1,241 @@
+import { Dimensions } from "react-native";
+
+import { renderCurrentTest } from "../test";
+
+describe("Sizing - Width", () => {
+  test("w-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { width: 0 } },
+    });
+  });
+  test("w-px", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { width: 1 } },
+    });
+  });
+  test("w-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { width: 3.5 } },
+    });
+  });
+  test("w-1/2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { width: "50%" } },
+    });
+  });
+  test("w-full", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { width: "100%" } },
+    });
+  });
+  test("w-auto", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { width: "auto" } },
+    });
+  });
+  test("w-min", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { width: "min-content" } },
+    });
+  });
+  test("w-max", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { width: "max-content" } },
+    });
+  });
+  test("w-fit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { width: "fit-content" } },
+    });
+  });
+  test("w-screen", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { width: Dimensions.get("window").width } },
+    });
+  });
+});
+
+describe("Sizing - Min Width", () => {
+  test("min-w-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { minWidth: 0 } },
+    });
+  });
+  test("min-w-full", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { minWidth: "100%" } },
+    });
+  });
+  test("min-w-min", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "min-width": "min-content" } },
+    });
+  });
+  test("min-w-max", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "min-width": "max-content" } },
+    });
+  });
+  test("min-w-fit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "min-width": "fit-content" } },
+    });
+  });
+});
+
+describe("Sizing - Max Width", () => {
+  test("max-w-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { maxWidth: 0 } },
+    });
+  });
+  test("max-w-full", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { maxWidth: "100%" } },
+    });
+  });
+  test("max-w-min", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "max-width": "min-content" } },
+    });
+  });
+  test("max-w-max", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "max-width": "max-content" } },
+    });
+  });
+  test("max-w-fit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "max-width": "fit-content" } },
+    });
+  });
+});
+
+describe("Sizing - Height", () => {
+  test("h-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { height: 0 } },
+    });
+  });
+  test("h-px", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { height: 1 } },
+    });
+  });
+  test("h-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { height: 3.5 } },
+    });
+  });
+  test("h-1/2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { height: "50%" } },
+    });
+  });
+  test("h-full", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { height: "100%" } },
+    });
+  });
+  test("h-auto", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { height: "auto" } },
+    });
+  });
+  test("h-min", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { height: "min-content" } },
+    });
+  });
+  test("h-max", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { height: "max-content" } },
+    });
+  });
+  test("h-fit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { height: "fit-content" } },
+    });
+  });
+  test("h-screen", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { height: Dimensions.get("window").height } },
+    });
+  });
+});
+
+describe("Sizing - Min Height", () => {
+  test("min-h-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { minHeight: 0 } },
+    });
+  });
+  test("min-h-full", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { minHeight: "100%" } },
+    });
+  });
+  test("min-h-min", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "min-height": "min-content" } },
+    });
+  });
+  test("min-h-max", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "min-height": "max-content" } },
+    });
+  });
+  test("min-h-fit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "min-height": "fit-content" } },
+    });
+  });
+});
+
+describe("Sizing - Max Height", () => {
+  test("max-h-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { maxHeight: 0 } },
+    });
+  });
+  test("max-h-full", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { maxHeight: "100%" } },
+    });
+  });
+  test("max-h-min", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "max-height": "min-content" } },
+    });
+  });
+  test("max-h-max", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "max-height": "max-content" } },
+    });
+  });
+  test("max-h-fit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "max-height": "fit-content" } },
+    });
+  });
+});

package/src/__tests__/spacing.tsx

@@ -0,0 +1,106 @@
+import { renderCurrentTest } from "../test";
+
+describe("Spacing - Padding", () => {
+  test("p-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { padding: 0 } },
+    });
+  });
+  test("px-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { paddingLeft: 0, paddingRight: 0 } },
+    });
+  });
+  test("py-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { paddingTop: 0, paddingBottom: 0 } },
+    });
+  });
+  test("pt-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { paddingTop: 0 } },
+    });
+  });
+  test("pr-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { paddingRight: 0 } },
+    });
+  });
+  test("pb-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { paddingBottom: 0 } },
+    });
+  });
+  test("pl-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { paddingLeft: 0 } },
+    });
+  });
+  test("ps-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { paddingStart: 0 } },
+    });
+  });
+  test("pe-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { paddingEnd: 0 } },
+    });
+  });
+});
+
+describe("Spacing - Margin", () => {
+  test("m-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { margin: 0 } },
+    });
+  });
+  test("mx-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { marginLeft: 0, marginRight: 0 } },
+    });
+  });
+  test("my-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { marginTop: 0, marginBottom: 0 } },
+    });
+  });
+  test("mt-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { marginTop: 0 } },
+    });
+  });
+  test("mr-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { marginRight: 0 } },
+    });
+  });
+  test("mb-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { marginBottom: 0 } },
+    });
+  });
+  test("ml-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { marginLeft: 0 } },
+    });
+  });
+  test("ms-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { marginStart: 0 } },
+    });
+  });
+  test("me-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { marginEnd: 0 } },
+    });
+  });
+  test("m-auto", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { margin: "auto" } },
+    });
+  });
+});
+
+describe.skip("Spacing - Space Between", () => {
+  // TODO
+});

package/src/__tests__/states.tsx

@@ -0,0 +1,145 @@
+/** @jsxImportSource nativewind */
+import { Switch, TextInput, View } from "react-native";
+
+import { fireEvent, render, screen } from "../test";
+
+const testID = "component";
+
+test("hover", async () => {
+  await render(<TextInput testID={testID} className="hover:text-white" />);
+
+  const component = screen.getByTestId(testID);
+
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "hoverIn");
+  expect(component).toHaveStyle({ color: "#ffffff" });
+
+  fireEvent(component, "hoverOut");
+  expect(component).toHaveStyle(undefined);
+});
+
+test("focus", async () => {
+  await render(<TextInput testID={testID} className="focus:text-white" />);
+
+  const component = screen.getByTestId(testID);
+
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "focus");
+  expect(component).toHaveStyle({ color: "#ffffff" });
+
+  fireEvent(component, "blur");
+  expect(component).toHaveStyle(undefined);
+});
+
+test("active", async () => {
+  await render(<TextInput testID={testID} className="active:text-white" />);
+
+  const component = screen.getByTestId(testID);
+
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "pressIn");
+  expect(component).toHaveStyle({ color: "#ffffff" });
+
+  fireEvent(component, "pressOut");
+  expect(component).toHaveStyle(undefined);
+});
+
+test("mixed", async () => {
+  await render(
+    <TextInput testID={testID} className="active:hover:focus:text-white" />,
+  );
+
+  const component = screen.getByTestId(testID);
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "pressIn");
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "hoverIn");
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "focus");
+  expect(component).toHaveStyle({ color: "#ffffff" });
+});
+
+test("selection", async () => {
+  await render(<TextInput testID={testID} className="selection:text-black" />);
+
+  const component = screen.getByTestId(testID);
+  expect(component.props).toEqual({
+    testID,
+    selectionColor: "#000000",
+  });
+});
+
+test("ltr:", async () => {
+  await render(<View testID={testID} className="ltr:text-black" />);
+
+  const component = screen.getByTestId(testID);
+  expect(component).toHaveStyle({
+    color: "#000000",
+  });
+});
+
+test("placeholder", async () => {
+  await render(
+    <TextInput testID={testID} className="placeholder:text-black" />,
+  );
+
+  const component = screen.getByTestId(testID);
+  expect(component.props).toEqual({
+    testID,
+    placeholderTextColor: "#000000",
+  });
+});
+
+test("disabled", async () => {
+  const { rerender } = await render(
+    <Switch testID={testID} className="disabled:bg-black" />,
+  );
+
+  const component = screen.getByTestId(testID);
+  expect(component.props).toEqual(
+    expect.objectContaining({
+      testID,
+      style: {
+        height: 31,
+        width: 51,
+      },
+    }),
+  );
+
+  rerender(<Switch testID={testID} disabled className="disabled:bg-black" />);
+
+  expect(component.props).toEqual(
+    expect.objectContaining({
+      testID,
+      style: [
+        {
+          height: 31,
+          width: 51,
+        },
+        {
+          backgroundColor: "#000000",
+        },
+      ],
+    }),
+  );
+
+  rerender(
+    <Switch testID={testID} disabled={false} className="disabled:bg-black" />,
+  );
+
+  expect(component.props).toEqual(
+    expect.objectContaining({
+      testID,
+      style: {
+        height: 31,
+        width: 51,
+      },
+    }),
+  );
+});

package/src/__tests__/svg.tsx

@@ -0,0 +1,25 @@
+import { renderCurrentTest } from "../test";
+
+describe("SVG - Fill", () => {
+  test("fill-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { fill: "#000000" },
+    });
+  });
+});
+
+describe("SVG - Stroke", () => {
+  test("stroke-black", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { stroke: "#000000" },
+    });
+  });
+});
+
+describe("SVG - Stroke Width", () => {
+  test("stroke-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { strokeWidth: 1 },
+    });
+  });
+});

package/src/__tests__/tables.tsx

@@ -0,0 +1,103 @@
+import { renderCurrentTest } from "../test";
+
+describe("Tables - Border Collapse", () => {
+  test("border-collapse", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-collapse"] },
+    });
+  });
+  test("border-separate", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-collapse"] },
+    });
+  });
+});
+
+describe("Tables - Border Spacing", () => {
+  test("border-spacing-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-spacing"] },
+    });
+  });
+  test("border-spacing-x-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-spacing"] },
+    });
+  });
+  test("border-spacing-y-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-spacing"] },
+    });
+  });
+  test("border-spacing-px", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-spacing"] },
+    });
+  });
+  test("border-spacing-x-px", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-spacing"] },
+    });
+  });
+  test("border-spacing-y-px", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-spacing"] },
+    });
+  });
+  test("border-spacing-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-spacing"] },
+    });
+  });
+  test("border-spacing-x-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-spacing"] },
+    });
+  });
+  test("border-spacing-y-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["border-spacing"] },
+    });
+  });
+});
+
+describe("Tables - Table Layout", () => {
+  test("table-auto", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["table-layout"] },
+    });
+  });
+  test("table-fixed", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["table-layout"] },
+    });
+  });
+});
+
+describe("Tables - Caption Side", () => {
+  test("caption-top", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["caption-side"] },
+    });
+  });
+  test("caption-bottom", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["caption-side"] },
+    });
+  });
+});