diff --git a/package.json b/package.json index f51381ad..f6fc0c99 100644 --- a/package.json +++ b/package.json @@ -169,7 +169,7 @@ "@eslint/js": "^9.30.1", "@ianvs/prettier-plugin-sort-imports": "^4.4.2", "@tailwindcss/postcss": "^4.1.12", - "@testing-library/react-native": "^13.2.0", + "@testing-library/react-native": "^13.3.3", "@tsconfig/react-native": "^3.0.6", "@types/babel__core": "^7", "@types/connect": "^3.4.38", diff --git a/src/__tests__/vendor/tailwind/@apply.test.tsx b/src/__tests__/vendor/tailwind/@apply.test.tsx new file mode 100644 index 00000000..41b01f50 --- /dev/null +++ b/src/__tests__/vendor/tailwind/@apply.test.tsx @@ -0,0 +1,42 @@ +import { screen } from "@testing-library/react-native"; +import { View } from "react-native-css/components"; + +import { render } from "./_tailwind"; + +const testID = "react-native-css-interop"; + +test("@apply", async () => { + await render(, { + extraCss: ` + .btn-primary { + @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md; + }`, + }); + + const component = screen.getByTestId(testID); + + expect(component).toHaveStyle({ + backgroundColor: "#2b7fff", + borderRadius: 7, + color: "#fff", + fontWeight: 600, + paddingBlock: 7, + paddingInline: 14, + boxShadow: [ + { + offsetX: 0, + offsetY: 4, + blurRadius: 6, + spreadDistance: -1, + color: "#0000001a", + }, + { + offsetX: 0, + offsetY: 2, + blurRadius: 4, + spreadDistance: -2, + color: "#0000001a", + }, + ], + }); +}); diff --git a/src/__tests__/vendor/tailwind/accessibility.test.tsx b/src/__tests__/vendor/tailwind/accessibility.test.tsx new file mode 100644 index 00000000..a0ee999a --- /dev/null +++ b/src/__tests__/vendor/tailwind/accessibility.test.tsx @@ -0,0 +1,44 @@ +import { renderCurrentTest } from "./_tailwind"; + +describe("Accessibility - Screen Readers", () => { + test("sr-only", async () => { + const result = await renderCurrentTest(); + expect(result).toStrictEqual({ + props: { + style: { + borderWidth: 0, + height: 1, + margin: -1, + overflow: "hidden", + padding: 0, + position: "absolute", + width: 1, + }, + }, + warnings: { + properties: ["clip", "white-space"], + }, + }); + }); + + test("not-sr-only", async () => { + const result = await renderCurrentTest(); + expect(result).toStrictEqual({ + props: { + style: { + margin: 0, + overflow: "visible", + padding: 0, + }, + }, + warnings: { + properties: ["clip", "white-space"], + values: { + position: "static", + width: "auto", + height: "auto", + }, + }, + }); + }); +}); diff --git a/src/__tests__/vendor/tailwind/effects.test.tsx b/src/__tests__/vendor/tailwind/effects.test.tsx new file mode 100644 index 00000000..579d5425 --- /dev/null +++ b/src/__tests__/vendor/tailwind/effects.test.tsx @@ -0,0 +1,292 @@ +import { renderCurrentTest } from "./_tailwind"; + +describe("Effects - Box Shadow", () => { + test("shadow-sm", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + boxShadow: [ + { + blurRadius: 3, + color: "#0000001a", + offsetX: 0, + offsetY: 1, + spreadDistance: 0, + }, + { + blurRadius: 2, + color: "#0000001a", + offsetX: 0, + offsetY: 1, + spreadDistance: -1, + }, + ], + }, + }, + warnings: { + values: { + "box-shadow": ["initial", "initial", "initial", "initial", "initial"], + }, + }, + }); + }); + + test("shadow", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + boxShadow: [ + { + blurRadius: 3, + color: "#0000001a", + offsetX: 0, + offsetY: 1, + spreadDistance: 0, + }, + { + blurRadius: 2, + color: "#0000001a", + offsetX: 0, + offsetY: 1, + spreadDistance: -1, + }, + ], + }, + }, + warnings: { + values: { + "box-shadow": ["initial", "initial", "initial", "initial", "initial"], + }, + }, + }); + }); + test("shadow-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + boxShadow: [], + }, + }, + warnings: { + values: { + "box-shadow": ["initial", "initial", "initial", "initial", "initial"], + }, + }, + }); + }); +}); + +describe.skip("Effects - Box Shadow Color", () => { + // TODO +}); + +describe("Effects - Opacity", () => { + test("opacity-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { opacity: 0 } }, + }); + }); + test("opacity-100", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { opacity: 1 } }, + }); + }); +}); + +describe("Effects - Mix Blend Mode", () => { + test("mix-blend-normal", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-multiply", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-screen", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-overlay", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-darken", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-lighten", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-color-dodge", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-color-burn", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-hard-light", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-soft-light", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-difference", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-exclusion", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-hue", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-saturation", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-color", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); + test("mix-blend-luminosity", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["mix-blend-mode"] }, + }); + }); +}); + +describe("Effects - Background Blend Mode", () => { + test("bg-blend-normal", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-multiply", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-screen", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-overlay", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-darken", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-lighten", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-color-dodge", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-color-burn", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-hard-light", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-soft-light", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-difference", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-exclusion", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-hue", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-saturation", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-color", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); + test("bg-blend-luminosity", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["background-blend-mode"] }, + }); + }); +}); diff --git a/src/__tests__/vendor/tailwind/filters.test.tsx b/src/__tests__/vendor/tailwind/filters.test.tsx new file mode 100644 index 00000000..a651bc73 --- /dev/null +++ b/src/__tests__/vendor/tailwind/filters.test.tsx @@ -0,0 +1,537 @@ +import { renderCurrentTest } from "./_tailwind"; + +describe("Filters - Blur", () => { + test("blur-xs", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ blur: 4 }], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); +}); + +describe("Filters - Brightness", () => { + test("brightness-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ brightness: "0%" }], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); +}); + +describe("Filters - Contrast", () => { + test("contrast-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ contrast: "0%" }], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); + test("contrast-50", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ contrast: "50%" }], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); + test("contrast-200", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ contrast: "200%" }], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); +}); + +describe("Filters - Drop Shadow", () => { + test("drop-shadow", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [ + [ + { + dropShadow: { + blurRadius: 2, + color: "#0000001a", + offsetX: 0, + offsetY: 1, + }, + }, + { + dropShadow: { + blurRadius: 1, + color: "#0000000f", + offsetX: 0, + offsetY: 1, + }, + }, + ], + ], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); +}); + +describe("Filters - Grayscale", () => { + test("grayscale", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ grayscale: "100%" }], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); + test("grayscale-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ grayscale: "0%" }], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); +}); + +describe("Filters - Hue Rotate", () => { + test("hue-rotate-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ hueRotate: "0deg" }], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); + test("hue-rotate-180", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ hueRotate: "180deg" }], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); +}); + +describe("Filters - Invert", () => { + test("invert-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ invert: "0%" }], + }, + }, + + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); + test("invert", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ invert: "100%" }], + }, + }, + + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); +}); + +describe("Filters - Saturate", () => { + test("saturate-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ saturate: "0%" }], + }, + }, + + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); + test("saturate-100", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ saturate: "100%" }], + }, + }, + + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); +}); + +describe("Filters - Sepia", () => { + test("sepia", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { + style: { + filter: [{ sepia: "100%" }], + }, + }, + warnings: { + values: { + filter: [ + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + "initial", + ], + }, + }, + }); + }); +}); + +describe("Filters - Backdrop Blur", () => { + test("backdrop-blur-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + }); + }); +}); + +describe("Filters - Backdrop Brightness", () => { + test("backdrop-brightness-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + }); + }); +}); + +describe("Filters - Backdrop Contrast", () => { + test("backdrop-contrast-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + }); + }); +}); + +describe("Filters - Backdrop Grayscale", () => { + test("backdrop-grayscale-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + }); + }); +}); + +describe("Filters - Backdrop Hue Rotate", () => { + test("backdrop-hue-rotate-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + }); + }); +}); + +describe("Filters - Backdrop Invert", () => { + test("backdrop-invert-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + }); + }); +}); + +describe("Filters - Backdrop Opacity", () => { + test("backdrop-opacity-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + }); + }); +}); + +describe("Filters - Backdrop Saturate", () => { + test("backdrop-saturate-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + }); + }); +}); + +describe("Filters - Backdrop Sepia", () => { + test("backdrop-sepia-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + }); + }); +}); diff --git a/src/__tests__/vendor/tailwind/flexbox-grid.test.tsx b/src/__tests__/vendor/tailwind/flexbox-grid.test.tsx new file mode 100644 index 00000000..50df19af --- /dev/null +++ b/src/__tests__/vendor/tailwind/flexbox-grid.test.tsx @@ -0,0 +1,670 @@ +import { renderCurrentTest } from "./_tailwind"; + +describe("Flexbox & Grid - Flex Basis", () => { + test("basis-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "flex-basis": "auto" } }, + }); + }); + test("basis-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexBasis: 0 } }, + }); + }); + test("basis-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexBasis: 3.5 } }, + }); + }); + test("basis-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexBasis: 1 } }, + }); + }); + test("basis-full", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexBasis: "100%" } }, + }); + }); + test("basis-1/2", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexBasis: "50%" } }, + }); + }); +}); + +describe("Flexbox & Grid - Flex Direction", () => { + test("flex-row", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexDirection: "row" } }, + }); + }); + test("flex-col", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexDirection: "column" } }, + }); + }); + test("flex-row-reverse", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexDirection: "row-reverse" } }, + }); + }); + test("flex-col-reverse", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexDirection: "column-reverse" } }, + }); + }); +}); + +describe("Flexbox & Grid - Flex Wrap", () => { + test("flex-wrap", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexWrap: "wrap" } }, + }); + }); + test("flex-nowrap", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexWrap: "nowrap" } }, + }); + }); + test("flex-wrap-reverse", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexWrap: "wrap-reverse" } }, + }); + }); +}); + +describe("Flexbox & Grid - Flex", () => { + test("flex", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { display: "flex" } }, + }); + }); + test("flex-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexBasis: "0%", flexGrow: 1, flexShrink: 1 } }, + }); + }); + test("flex-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexGrow: 1, flexShrink: 1 } }, + warnings: { values: { flex: "auto" } }, + }); + }); + test("flex-initial", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexGrow: 0, flexShrink: 1 } }, + warnings: { values: { flex: "auto" } }, + }); + }); + test("flex-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexGrow: 0, flexShrink: 0 } }, + warnings: { values: { flex: "auto" } }, + }); + }); +}); + +describe("Flexbox & Grid - Flex Grow", () => { + test("grow", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexGrow: 1 } }, + }); + }); + test("grow-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexGrow: 0 } }, + }); + }); + test("grow-[2]", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexGrow: 2 } }, + }); + }); +}); + +describe("Flexbox & Grid - Flex Shrink", () => { + test("shrink", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexShrink: 1 } }, + }); + }); + test("shrink-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { flexShrink: 0 } }, + }); + }); +}); + +describe("Flexbox & Grid - Order", () => { + test("order-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["order"] }, + }); + }); + test("order-first", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["order"] }, + }); + }); + test("order-last", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["order"] }, + }); + }); + test("order-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["order"] }, + }); + }); +}); + +describe("Flexbox & Grid - Grid Template Columns", () => { + test("grid-cols-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-template-columns"] }, + }); + }); + test("grid-cols-2", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-template-columns"] }, + }); + }); + test("grid-cols-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-template-columns"] }, + }); + }); + test("grid-cols-[200px_minmax(900px,_1fr)_100px]", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-template-columns"] }, + }); + }); +}); + +describe("Flexbox & Grid - Grid Column Start / End", () => { + test("col-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-column"] }, + }); + }); + test("col-span-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-column"] }, + }); + }); + test("col-span-full", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-column"] }, + }); + }); + test("col-start-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-column-start"] }, + }); + }); + test("col-start-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-column-start"] }, + }); + }); + test("col-end-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-column-end"] }, + }); + }); + test("col-end-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-column-end"] }, + }); + }); +}); + +describe("Flexbox & Grid - Grid Template Rows", () => { + test("grid-rows-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-template-rows"] }, + }); + }); + test("grid-rows-2", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-template-rows"] }, + }); + }); + test("grid-rows-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-template-rows"] }, + }); + }); + test("grid-rows-[200px_minmax(900px,_1fr)_100px]", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-template-rows"] }, + }); + }); +}); + +describe("Flexbox & Grid - Grid Row Start / End", () => { + test("row-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-row"] }, + }); + }); + test("row-span-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-row"] }, + }); + }); + test("row-span-full", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-row"] }, + }); + }); + test("row-start-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-row-start"] }, + }); + }); + test("row-start-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-row-start"] }, + }); + }); + test("row-end-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-row-end"] }, + }); + }); + test("row-end-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-row-end"] }, + }); + }); +}); + +describe("Flexbox & Grid - Grid Auto Flow", () => { + test("grid-flow-row", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-flow"] }, + }); + }); + test("grid-flow-col", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-flow"] }, + }); + }); + test("grid-flow-row-dense", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-flow"] }, + }); + }); + test("grid-flow-col-dense", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-flow"] }, + }); + }); +}); + +describe("Flexbox & Grid - Grid Auto Columns", () => { + test("auto-cols-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-columns"] }, + }); + }); + test("auto-cols-min", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-columns"] }, + }); + }); + test("auto-cols-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-columns"] }, + }); + }); + test("auto-cols-fr", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-columns"] }, + }); + }); +}); + +describe("Flexbox & Grid - Grid Auto Rows", () => { + test("auto-rows-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-rows"] }, + }); + }); + test("auto-rows-min", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-rows"] }, + }); + }); + test("auto-rows-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-rows"] }, + }); + }); + test("auto-rows-fr", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["grid-auto-rows"] }, + }); + }); +}); + +describe("Flexbox & Grid - Gap", () => { + test("gap-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { gap: 0 } }, + }); + }); + test("gap-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { gap: 3.5 } }, + }); + }); + test("gap-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { columnGap: 1, rowGap: 1 } }, + }); + }); + test("gap-x-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { columnGap: 3.5 } }, + }); + }); + test("gap-y-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { rowGap: 3.5 } }, + }); + }); +}); + +describe("Flexbox & Grid - Justify Content", () => { + test("justify-start", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { justifyContent: "flex-start" } }, + }); + }); + test("justify-end", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { justifyContent: "flex-end" } }, + }); + }); + test("justify-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { justifyContent: "center" } }, + }); + }); + test("justify-between", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { justifyContent: "space-between" } }, + }); + }); + test("justify-around", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { justifyContent: "space-around" } }, + }); + }); + test("justify-evenly", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { justifyContent: "space-evenly" } }, + }); + }); +}); + +describe("Flexbox & Grid - Justify Items", () => { + test("justify-items-start", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["justify-items"] }, + }); + }); + test("justify-items-end", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["justify-items"] }, + }); + }); + test("justify-items-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["justify-items"] }, + }); + }); + test("justify-items-stretch", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["justify-items"] }, + }); + }); +}); + +describe("Flexbox & Grid - Justify Self", () => { + test("justify-self-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["justify-self"] }, + }); + }); + test("justify-self-start", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["justify-self"] }, + }); + }); + test("justify-self-end", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["justify-self"] }, + }); + }); + test("justify-self-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["justify-self"] }, + }); + }); + test("justify-self-stretch", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["justify-self"] }, + }); + }); +}); + +describe("Flexbox & Grid - Align Items", () => { + test("items-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignItems: "center" } }, + }); + }); + test("items-start", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignItems: "flex-start" } }, + }); + }); + test("items-end", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignItems: "flex-end" } }, + }); + }); + test("items-baseline", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignItems: "baseline" } }, + }); + }); + test("items-stretch", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignItems: "stretch" } }, + }); + }); +}); + +describe("Flexbox & Grid - Align Self", () => { + test("self-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignSelf: "auto" } }, + }); + }); + test("self-start", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignSelf: "flex-start" } }, + }); + }); + test("self-end", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignSelf: "flex-end" } }, + }); + }); + test("self-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignSelf: "center" } }, + }); + }); + test("self-stretch", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignSelf: "stretch" } }, + }); + }); + test("self-baseline", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignSelf: "baseline" } }, + }); + }); +}); + +describe("Flexbox & Grid - Align Content", () => { + test("content-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignContent: "center" } }, + }); + }); + test("content-start", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignContent: "flex-start" } }, + }); + }); + test("content-end", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignContent: "flex-end" } }, + }); + }); + test("content-between", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignContent: "space-between" } }, + }); + }); + test("content-around", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { alignContent: "space-around" } }, + }); + }); + test("content-evenly", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { + values: { + "align-content": "space-evenly", + }, + }, + }); + }); +}); + +describe("Flexbox & Grid - Place Items", () => { + test("place-items-start", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["place-items"] }, + }); + }); + test("place-items-end", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["place-items"] }, + }); + }); + test("place-items-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["place-items"] }, + }); + }); + test("place-items-stretch", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["place-items"] }, + }); + }); +}); + +describe("Flexbox & Grid - Place Self", () => { + test("place-self-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["place-self"] }, + }); + }); + test("place-self-start", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["place-self"] }, + }); + }); + test("place-self-end", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["place-self"] }, + }); + }); + test("place-self-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["place-self"] }, + }); + }); + test("place-self-stretch", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["place-self"] }, + }); + }); +}); diff --git a/src/__tests__/vendor/tailwind/functionts.test.tsx b/src/__tests__/vendor/tailwind/functionts.test.tsx new file mode 100644 index 00000000..4b42bb75 --- /dev/null +++ b/src/__tests__/vendor/tailwind/functionts.test.tsx @@ -0,0 +1,62 @@ +import { PixelRatio, PlatformColor, StyleSheet } from "react-native"; + +import { screen } from "@testing-library/react-native"; +import { View } from "react-native-css/components"; + +import { render } from "./_tailwind"; + +const testA = "a"; + +test("hairlineWidth()", async () => { + await render( + , + ); + + const component = screen.getByTestId(testA); + + expect(component).toHaveStyle({ borderWidth: StyleSheet.hairlineWidth }); +}); + +test("roundToNearestPixel()", async () => { + await render( + , + ); + + expect(screen.getByTestId(testA)).toHaveStyle({ + borderWidth: PixelRatio.roundToNearestPixel(2.5), + }); +}); + +test("getPixelSizeForLayoutSize()", async () => { + await render( + , + ); + + expect(screen.getByTestId(testA)).toHaveStyle({ + borderWidth: PixelRatio.getPixelSizeForLayoutSize(2), + }); +}); + +test("platformColor()", async () => { + await render(, { + extraCss: ` + @theme { + --color-custom: platformColor( + "systemTealColor", + "?android:attr/textColor", + "blue" + ); + } + `, + }); + + expect(screen.getByTestId(testA)).toHaveStyle({ + color: PlatformColor("systemTealColor", "?android:attr/textColor", "blue"), + }); +}); diff --git a/src/__tests__/vendor/tailwind/interactivity.test.tsx b/src/__tests__/vendor/tailwind/interactivity.test.tsx new file mode 100644 index 00000000..e4a99fe3 --- /dev/null +++ b/src/__tests__/vendor/tailwind/interactivity.test.tsx @@ -0,0 +1,536 @@ +import { renderCurrentTest } from "./_tailwind"; + +describe("Interactivity - Accent Color", () => { + test("accent-inherit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["accent-color"] }, + }); + }); + test("accent-current", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["accent-color"] }, + }); + }); + test("accent-white", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["accent-color"] }, + }); + }); +}); + +describe("Interactivity - Appearance", () => { + test("appearance-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["appearance"] }, + }); + }); +}); + +describe("Interactivity - Cursor", () => { + test("cursor-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["cursor"] }, + }); + }); + test("cursor-default", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["cursor"] }, + }); + }); + test("cursor-default", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["cursor"] }, + }); + }); +}); + +describe("Interactivity - Caret Color", () => { + test("caret-inherit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "caret-color": "inherit" } }, + }); + }); + test("caret-current", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: {} }, + }); + }); + test("caret-white", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { cursorColor: "#fff", style: {} }, + }); + }); +}); + +describe("Interactivity - Pointer Events", () => { + test("pointer-events-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { pointerEvents: "none" } }, + }); + }); + test("pointer-events-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { pointerEvents: "auto" } }, + }); + }); +}); + +describe("Interactivity - Resize", () => { + test("resize-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["resize"] }, + }); + }); + test("resize-y", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["resize"] }, + }); + }); + test("resize-x", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["resize"] }, + }); + }); + test("resize", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["resize"] }, + }); + }); +}); + +describe("Interactivity - Scroll Behavior", () => { + test("scroll-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-behavior"] }, + }); + }); + test("scroll-smooth", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-behavior"] }, + }); + }); +}); + +describe("Interactivity - Scroll Margin", () => { + test("scroll-m-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin"] }, + }); + }); + test("scroll-mx-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-inline"] }, + }); + }); + test("scroll-my-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-block"] }, + }); + }); + test("scroll-mt-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-top"] }, + }); + }); + test("scroll-mr-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-right"] }, + }); + }); + test("scroll-mb-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-bottom"] }, + }); + }); + test("scroll-ml-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-left"] }, + }); + }); + test("scroll-ms-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-inline-start"] }, + }); + }); + test("scroll-me-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-inline-end"] }, + }); + }); + test("scroll-m-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin"] }, + }); + }); + test("scroll-mx-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-inline"] }, + }); + }); + test("scroll-my-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-block"] }, + }); + }); + test("scroll-mt-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-top"] }, + }); + }); + test("scroll-mr-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-right"] }, + }); + }); + test("scroll-mb-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-bottom"] }, + }); + }); + test("scroll-ml-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-left"] }, + }); + }); + test("scroll-ms-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-inline-start"] }, + }); + }); + test("scroll-me-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-margin-inline-end"] }, + }); + }); +}); + +describe("Interactivity - Scroll Padding", () => { + test("scroll-p-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding"] }, + }); + }); + test("scroll-px-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-inline"] }, + }); + }); + test("scroll-py-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-block"] }, + }); + }); + test("scroll-pt-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-top"] }, + }); + }); + test("scroll-pr-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-right"] }, + }); + }); + test("scroll-pb-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-bottom"] }, + }); + }); + test("scroll-pl-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-left"] }, + }); + }); + test("scroll-ps-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-inline-start"] }, + }); + }); + test("scroll-pe-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-inline-end"] }, + }); + }); + test("scroll-p-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding"] }, + }); + }); + test("scroll-px-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-inline"] }, + }); + }); + test("scroll-py-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-block"] }, + }); + }); + test("scroll-pt-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-top"] }, + }); + }); + test("scroll-pr-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-right"] }, + }); + }); + test("scroll-pb-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-bottom"] }, + }); + }); + test("scroll-pl-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-left"] }, + }); + }); + test("scroll-ps-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-inline-start"] }, + }); + }); + test("scroll-pe-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-padding-inline-end"] }, + }); + }); +}); + +describe("Interactivity - Scroll Snap Align", () => { + test("snap-start", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-snap-align"] }, + }); + }); + test("snap-end", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-snap-align"] }, + }); + }); + test("snap-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-snap-align"] }, + }); + }); + test("snap-align-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-snap-align"] }, + }); + }); +}); + +describe("Interactivity - Scroll Snap Stop", () => { + test("snap-normal", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-snap-stop"] }, + }); + }); + test("snap-always", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-snap-stop"] }, + }); + }); +}); + +describe("Interactivity - Scroll Snap Type", () => { + test("snap-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-snap-type"] }, + }); + }); + test("snap-x", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-snap-type"] }, + }); + }); + test("snap-y", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-snap-type"] }, + }); + }); + test("snap-both", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["scroll-snap-type"] }, + }); + }); + test("snap-mandatory", async () => { + expect(await renderCurrentTest()).toStrictEqual({ props: {} }); + }); + test("snap-proximity", async () => { + expect(await renderCurrentTest()).toStrictEqual({ props: {} }); + }); +}); + +describe("Interactivity - Touch Action", () => { + test("touch-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["touch-action"] }, + }); + }); + test("touch-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["touch-action"] }, + }); + }); + test("touch-pan-x", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["touch-action"] }, + }); + }); + test("touch-pan-left", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["touch-action"] }, + }); + }); + test("touch-pan-right", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["touch-action"] }, + }); + }); + test("touch-pan-y", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["touch-action"] }, + }); + }); + test("touch-pan-up", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["touch-action"] }, + }); + }); + test("touch-pan-down", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["touch-action"] }, + }); + }); + test("touch-pinch-zoom", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["touch-action"] }, + }); + }); + test("touch-manipulation", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["touch-action"] }, + }); + }); +}); + +describe("Interactivity - User Select", () => { + test("select-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { userSelect: "none" } }, + }); + }); + test("select-text", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { userSelect: "text" } }, + }); + }); + test("select-all", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { userSelect: "all" } }, + }); + }); + test("select-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { userSelect: "auto" } }, + }); + }); +}); + +describe("Interactivity - Will Change", () => { + test("will-change-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["will-change"] }, + }); + }); + test("will-change-scroll", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["will-change"] }, + }); + }); + test("will-change-contents", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["will-change"] }, + }); + }); + test("will-change-transform", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["will-change"] }, + }); + }); +}); diff --git a/src/__tests__/vendor/tailwind/layout.test.tsx b/src/__tests__/vendor/tailwind/layout.test.tsx new file mode 100644 index 00000000..5bbd4b2f --- /dev/null +++ b/src/__tests__/vendor/tailwind/layout.test.tsx @@ -0,0 +1,854 @@ +import { renderCurrentTest } from "./_tailwind"; + +describe("Layout - Aspect Ratio", () => { + test("aspect-square", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { aspectRatio: 1 } }, + }); + }); + test("aspect-video", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { aspectRatio: "16 / 9" } }, + }); + }); + test("aspect-[4/3]", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { aspectRatio: "4/3" } }, + }); + }); +}); + +describe("Layout - Container", () => { + test("container", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { maxWidth: 672, width: "100%" } }, + }); + }); +}); + +describe("Layout - Columns", () => { + test("columns-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["columns"] }, + }); + }); + test("columns-2", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["columns"] }, + }); + }); +}); + +describe("Layout - Break After", () => { + test("break-after-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-after"] }, + }); + }); + test("break-after-avoid", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-after"] }, + }); + }); + test("break-after-all", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-after"] }, + }); + }); + test("break-after-avoid-page", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-after"] }, + }); + }); + test("break-after-page", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-after"] }, + }); + }); + test("break-after-left", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-after"] }, + }); + }); + test("break-after-right", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-after"] }, + }); + }); + test("break-after-column", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-after"] }, + }); + }); +}); + +describe("Layout - Break Before", () => { + test("break-before-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-before"] }, + }); + }); + test("break-before-avoid", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-before"] }, + }); + }); + test("break-before-all", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-before"] }, + }); + }); + test("break-before-avoid-page", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-before"] }, + }); + }); + test("break-before-page", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-before"] }, + }); + }); + test("break-before-left", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-before"] }, + }); + }); + test("break-before-right", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-before"] }, + }); + }); + test("break-before-column", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-before"] }, + }); + }); +}); + +describe("Layout - Break Inside", () => { + test("break-inside-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-inside"] }, + }); + }); + test("break-inside-avoid", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-inside"] }, + }); + }); + test("break-inside-avoid-page", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-inside"] }, + }); + }); + test("break-inside-avoid-column", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["break-inside"] }, + }); + }); +}); + +describe("Layout - Box Decoration Break", () => { + test("box-decoration-clone", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["box-decoration-break"] }, + }); + }); + test("box-decoration-slice", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["box-decoration-break"] }, + }); + }); +}); + +describe("Layout - Box Sizing", () => { + test("box-border", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["box-sizing"] }, + }); + }); + test("box-content", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["box-sizing"] }, + }); + }); +}); + +describe("Layout - Display", () => { + test("flex", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { display: "flex" } }, + }); + }); + test("hidden", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { display: "none" } }, + }); + }); + test("block", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "block" } }, + }); + }); + test("inline-block", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "inline-block" } }, + }); + }); + test("inline", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "inline" } }, + }); + }); + test("inline-flex", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "inline-flex" } }, + }); + }); + test("table", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "table" } }, + }); + }); + test("inline-table", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "inline-table" } }, + }); + }); + test("table-caption", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "table-caption" } }, + }); + }); + test("table-cell", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "table-cell" } }, + }); + }); + test("table-column", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "table-column" } }, + }); + }); + test("table-column-group", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "table-column-group" } }, + }); + }); + test("table-footer-group", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "table-footer-group" } }, + }); + }); + test("table-header-group", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "table-header-group" } }, + }); + }); + test("table-row-group", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "table-row-group" } }, + }); + }); + test("table-row", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "table-row" } }, + }); + }); + test("flow-root", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "flow-root" } }, + }); + }); + test("grid", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "grid" } }, + }); + }); + test("inline-grid", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "inline-grid" } }, + }); + }); + test("contents", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "contents" } }, + }); + }); + test("list-item", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { display: "list-item" } }, + }); + }); +}); + +describe("Layout - Floats", () => { + test("float-right", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["float"] }, + }); + }); + test("float-left", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["float"] }, + }); + }); + test("float-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["float"] }, + }); + }); +}); + +describe("Layout - Clear", () => { + test("clear-right", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["clear"] }, + }); + }); + test("clear-left", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["clear"] }, + }); + }); + test("clear-both", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["clear"] }, + }); + }); + test("clear-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["clear"] }, + }); + }); +}); + +describe("Layout - Isolation", () => { + test("isolate", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["isolation"] }, + }); + }); + test("isolation-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["isolation"] }, + }); + }); +}); + +describe("Layout - Object Fit", () => { + test("object-contain", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-fit"] }, + }); + }); + test("object-cover", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-fit"] }, + }); + }); + test("object-fill", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-fit"] }, + }); + }); + test("object-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-fit"] }, + }); + }); + test("object-scale-down", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-fit"] }, + }); + }); +}); + +describe("Layout - Object Position", () => { + test("object-bottom", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-position"] }, + }); + }); + test("object-center", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-position"] }, + }); + }); + test("object-left", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-position"] }, + }); + }); + test("object-left-bottom", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-position"] }, + }); + }); + test("object-left-top", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-position"] }, + }); + }); + test("object-right", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-position"] }, + }); + }); + test("object-right-bottom", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-position"] }, + }); + }); + test("object-right-top", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-position"] }, + }); + }); + test("object-top", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["object-position"] }, + }); + }); +}); + +describe("Layout - Overflow", () => { + test("overflow-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { overflow: "auto" } }, + }); + }); + test("overflow-clip", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { overflow: "clip" } }, + }); + }); + test("overflow-scroll", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { overflow: "scroll" } }, + }); + }); + test("overflow-x-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overflow-x"] }, + }); + }); + test("overflow-y-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overflow-y"] }, + }); + }); + test("overflow-x-hidden", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overflow-x"] }, + }); + }); + test("overflow-y-hidden", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overflow-y"] }, + }); + }); + test("overflow-x-clip", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overflow-x"] }, + }); + }); + test("overflow-y-clip", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overflow-y"] }, + }); + }); + test("overflow-x-visible", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overflow-x"] }, + }); + }); + test("overflow-y-visible", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overflow-y"] }, + }); + }); + test("overflow-x-scroll", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overflow-x"] }, + }); + }); + test("overflow-y-scroll", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overflow-y"] }, + }); + }); + test("overflow-hidden", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { overflow: "hidden" } }, + }); + }); + test("overflow-visible", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { overflow: "visible" } }, + }); + }); +}); + +describe("Layout - Overscroll Behavior", () => { + test("overscroll-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overscroll-behavior"] }, + }); + }); + test("overscroll-contain", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overscroll-behavior"] }, + }); + }); + test("overscroll-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overscroll-behavior"] }, + }); + }); + test("overscroll-y-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overscroll-behavior-y"] }, + }); + }); + test("overscroll-y-contain", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overscroll-behavior-y"] }, + }); + }); + test("overscroll-y-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overscroll-behavior-y"] }, + }); + }); + test("overscroll-x-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overscroll-behavior-x"] }, + }); + }); + test("overscroll-x-contain", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overscroll-behavior-x"] }, + }); + }); + test("overscroll-x-none", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["overscroll-behavior-x"] }, + }); + }); +}); + +describe("Layout - Position", () => { + test("absolute", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { position: "absolute" } }, + }); + }); + test("relative", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { position: "relative" } }, + }); + }); + test("static", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { position: "static" } }, + }); + }); + test("fixed", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { position: "fixed" } }, + }); + }); + test("sticky", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { position: "sticky" } }, + }); + }); +}); + +describe("Layout - Top Right Bottom Left", () => { + test("top-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { top: 0 } }, + }); + }); + test("top-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { top: 1 } }, + }); + }); + test("top-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { top: 3.5 } }, + }); + }); + test("top-1/2", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { top: "50%" } }, + }); + }); + test("top-full", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { top: "100%" } }, + }); + }); + test("top-[10px]", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { top: 10 } }, + }); + }); + test("bottom-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { bottom: 0 } }, + }); + }); + test("bottom-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { bottom: 1 } }, + }); + }); + test("bottom-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { bottom: 3.5 } }, + }); + }); + test("bottom-1/2", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { bottom: "50%" } }, + }); + }); + test("bottom-full", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { bottom: "100%" } }, + }); + }); + test("bottom-[10px]", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { bottom: 10 } }, + }); + }); + test("left-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { left: 0 } }, + }); + }); + test("left-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { left: 1 } }, + }); + }); + test("left-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { left: 3.5 } }, + }); + }); + test("left-1/2", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { left: "50%" } }, + }); + }); + test("left-full", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { left: "100%" } }, + }); + }); + test("left-[10px]", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { left: 10 } }, + }); + }); + test("right-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { right: 0 } }, + }); + }); + test("right-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { right: 1 } }, + }); + }); + test("right-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { right: 3.5 } }, + }); + }); + test("right-1/2", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { right: "50%" } }, + }); + }); + test("right-full", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { right: "100%" } }, + }); + }); + test("right-[10px]", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { right: 10 } }, + }); + }); + test("inset-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { + values: { inset: ["auto", "auto", "auto", "auto"] }, + }, + }); + }); + test("inset-x-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "inset-inline": ["auto", "auto"] } }, + }); + }); + test("inset-y-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "inset-block": ["auto", "auto"] } }, + }); + }); + test("top-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { top: "auto" } }, + }); + }); + test("right-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { right: "auto" } }, + }); + }); + test("bottom-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { bottom: "auto" } }, + }); + }); + test("left-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { left: "auto" } }, + }); + }); +}); + +describe("Layout - Visibility", () => { + test("visible", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { opacity: 1 } }, + }); + }); + test("invisible", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { opacity: 0 } }, + }); + }); +}); + +describe("Layout - Z-Index", () => { + test("z-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "z-index": "auto" } }, + }); + }); + test("z-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { zIndex: 0 } }, + }); + }); +}); diff --git a/src/__tests__/vendor/tailwind/sizing.test.tsx b/src/__tests__/vendor/tailwind/sizing.test.tsx new file mode 100644 index 00000000..719470a6 --- /dev/null +++ b/src/__tests__/vendor/tailwind/sizing.test.tsx @@ -0,0 +1,241 @@ +import { Dimensions } from "react-native"; + +import { renderCurrentTest } from "./_tailwind"; + +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: {}, + warnings: { values: { width: "auto" } }, + }); + }); + test("w-min", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { width: "min-content" } }, + }); + }); + test("w-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { width: "max-content" } }, + }); + }); + test("w-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { 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: {}, + warnings: { values: { "min-width": "min-content" } }, + }); + }); + test("min-w-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "min-width": "max-content" } }, + }); + }); + test("min-w-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "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: {}, + warnings: { values: { "max-width": "min-content" } }, + }); + }); + test("max-w-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "max-width": "max-content" } }, + }); + }); + test("max-w-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "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: {}, + warnings: { values: { height: "auto" } }, + }); + }); + test("h-min", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { height: "min-content" } }, + }); + }); + test("h-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { height: "max-content" } }, + }); + }); + test("h-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { 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: {}, + warnings: { values: { "min-height": "min-content" } }, + }); + }); + test("min-h-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "min-height": "max-content" } }, + }); + }); + test("min-h-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "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: {}, + warnings: { values: { "max-height": "min-content" } }, + }); + }); + test("max-h-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "max-height": "max-content" } }, + }); + }); + test("max-h-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "max-height": "fit-content" } }, + }); + }); +}); diff --git a/src/__tests__/vendor/tailwind/sizing.tsx b/src/__tests__/vendor/tailwind/sizing.tsx new file mode 100644 index 00000000..719470a6 --- /dev/null +++ b/src/__tests__/vendor/tailwind/sizing.tsx @@ -0,0 +1,241 @@ +import { Dimensions } from "react-native"; + +import { renderCurrentTest } from "./_tailwind"; + +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: {}, + warnings: { values: { width: "auto" } }, + }); + }); + test("w-min", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { width: "min-content" } }, + }); + }); + test("w-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { width: "max-content" } }, + }); + }); + test("w-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { 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: {}, + warnings: { values: { "min-width": "min-content" } }, + }); + }); + test("min-w-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "min-width": "max-content" } }, + }); + }); + test("min-w-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "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: {}, + warnings: { values: { "max-width": "min-content" } }, + }); + }); + test("max-w-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "max-width": "max-content" } }, + }); + }); + test("max-w-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "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: {}, + warnings: { values: { height: "auto" } }, + }); + }); + test("h-min", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { height: "min-content" } }, + }); + }); + test("h-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { height: "max-content" } }, + }); + }); + test("h-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { 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: {}, + warnings: { values: { "min-height": "min-content" } }, + }); + }); + test("min-h-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "min-height": "max-content" } }, + }); + }); + test("min-h-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "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: {}, + warnings: { values: { "max-height": "min-content" } }, + }); + }); + test("max-h-max", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "max-height": "max-content" } }, + }); + }); + test("max-h-fit", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { values: { "max-height": "fit-content" } }, + }); + }); +}); diff --git a/src/__tests__/vendor/tailwind/spacing.tsx b/src/__tests__/vendor/tailwind/spacing.tsx new file mode 100644 index 00000000..82d36794 --- /dev/null +++ b/src/__tests__/vendor/tailwind/spacing.tsx @@ -0,0 +1,106 @@ +import { renderCurrentTest } from "./_tailwind"; + +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: { paddingInline: 0 } }, + }); + }); + test("py-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { paddingBlock: 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: { paddingInlineStart: 0 } }, + }); + }); + test("pe-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { paddingInlineEnd: 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: { marginInline: 0 } }, + }); + }); + test("my-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { marginBlock: 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: { marginInlineStart: 0 } }, + }); + }); + test("me-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { marginInlineEnd: 0 } }, + }); + }); + test("m-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { margin: "auto" } }, + }); + }); +}); + +describe.skip("Spacing - Space Between", () => { + // TODO +}); diff --git a/src/__tests__/vendor/tailwind/svg.tsx b/src/__tests__/vendor/tailwind/svg.tsx new file mode 100644 index 00000000..2fafe4f4 --- /dev/null +++ b/src/__tests__/vendor/tailwind/svg.tsx @@ -0,0 +1,25 @@ +import { renderCurrentTest } from "./_tailwind"; + +describe("SVG - Fill", () => { + test("fill-black", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { fill: "#000", style: {} }, + }); + }); +}); + +describe("SVG - Stroke", () => { + test("stroke-black", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { stroke: "#000", style: {} }, + }); + }); +}); + +describe("SVG - Stroke Width", () => { + test("stroke-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { strokeWidth: 1, style: {} }, + }); + }); +}); diff --git a/src/__tests__/vendor/tailwind/tables.tsx b/src/__tests__/vendor/tailwind/tables.tsx new file mode 100644 index 00000000..86b7f797 --- /dev/null +++ b/src/__tests__/vendor/tailwind/tables.tsx @@ -0,0 +1,103 @@ +import { renderCurrentTest } from "./_tailwind"; + +describe("Tables - Border Collapse", () => { + test("border-collapse", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-collapse"] }, + }); + }); + test("border-separate", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-collapse"] }, + }); + }); +}); + +describe("Tables - Border Spacing", () => { + test("border-spacing-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-spacing"] }, + }); + }); + test("border-spacing-x-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-spacing"] }, + }); + }); + test("border-spacing-y-0", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-spacing"] }, + }); + }); + test("border-spacing-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-spacing"] }, + }); + }); + test("border-spacing-x-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-spacing"] }, + }); + }); + test("border-spacing-y-px", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-spacing"] }, + }); + }); + test("border-spacing-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-spacing"] }, + }); + }); + test("border-spacing-x-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-spacing"] }, + }); + }); + test("border-spacing-y-1", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["border-spacing"] }, + }); + }); +}); + +describe("Tables - Table Layout", () => { + test("table-auto", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["table-layout"] }, + }); + }); + test("table-fixed", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["table-layout"] }, + }); + }); +}); + +describe("Tables - Caption Side", () => { + test("caption-top", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["caption-side"] }, + }); + }); + test("caption-bottom", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: {}, + warnings: { properties: ["caption-side"] }, + }); + }); +}); diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index 60d6cd86..ebbd9bb1 100644 --- a/src/compiler/declarations.ts +++ b/src/compiler/declarations.ts @@ -239,6 +239,7 @@ const parsers: { "translate": parseTranslate, "user-select": parseUserSelect, "vertical-align": parseVerticalAlign, + "visibility": parseVisibility, "width": parseSizeDeclaration, "z-index": parseZIndex, }; @@ -2792,7 +2793,12 @@ export function addTransitionValue( declaration.property, declaration.value .map((v) => v.property) - .filter((v) => v in parsers || v === "all" || v === "none") + .filter( + (v) => + (v in parsers && !["visibility"].includes(v)) || + v === "all" || + v === "none", + ) .map((v) => toRNProperty(v)), ); return; @@ -2991,6 +2997,19 @@ function parseGradientItem( } } +function parseVisibility( + declaration: DeclarationType<"visibility">, + builder: StylesheetBuilder, +) { + if (declaration.value === "visible") { + builder.addDescriptor("opacity", 1); + } else if (declaration.value === "hidden") { + builder.addDescriptor("opacity", 0); + } else { + builder.addWarning("value", declaration.value); + } +} + function parseFilter( declaration: DeclarationType<"filter">, builder: StylesheetBuilder, diff --git a/src/runtime/native/styles/shorthands/box-shadow.ts b/src/runtime/native/styles/shorthands/box-shadow.ts index 5d9f35e1..079889c4 100644 --- a/src/runtime/native/styles/shorthands/box-shadow.ts +++ b/src/runtime/native/styles/shorthands/box-shadow.ts @@ -33,22 +33,42 @@ export const boxShadow: StyleFunctionResolver = ( if (!isStyleDescriptorArray(args)) { return args; } else { - return args.flatMap((shadows) => { - if (shadows === undefined) { - return []; - } else if (isStyleDescriptorArray(shadows)) { - if (shadows.length === 0) { + return args + .flatMap((shadows) => { + if (shadows === undefined) { return []; - } else if (Array.isArray(shadows[0])) { - return shadows - .map((shadow) => handler(resolveValue, shadow, get, options)) - .filter((v) => v !== undefined); + } else if (isStyleDescriptorArray(shadows)) { + if (shadows.length === 0) { + return []; + } else if (Array.isArray(shadows[0])) { + return shadows + .map((shadow) => { + return omitTransparentShadows( + handler(resolveValue, shadow, get, options), + ); + }) + .filter((v) => v !== undefined); + } else { + return omitTransparentShadows( + handler(resolveValue, shadows, get, options), + ); + } } else { - return handler(resolveValue, shadows, get, options); + return omitTransparentShadows( + handler(resolveValue, shadows, get, options), + ); } - } else { - return handler(resolveValue, shadows, get, options); - } - }); + }) + .filter((v) => v !== undefined); } }; + +function omitTransparentShadows(style: unknown) { + if (typeof style === "object" && style && "color" in style) { + if (style.color === "#0000" || style.color === "transparent") { + return; + } + } + + return style; +} diff --git a/yarn.lock b/yarn.lock index 307d0369..2cd1af12 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2940,6 +2940,15 @@ __metadata: languageName: node linkType: hard +"@jest/schemas@npm:30.0.5": + version: 30.0.5 + resolution: "@jest/schemas@npm:30.0.5" + dependencies: + "@sinclair/typebox": "npm:^0.34.0" + checksum: 10c0/449dcd7ec5c6505e9ac3169d1143937e67044ae3e66a729ce4baf31812dfd30535f2b3b2934393c97cfdf5984ff581120e6b38f62b8560c8b5b7cc07f4175f65 + languageName: node + linkType: hard + "@jest/schemas@npm:^29.6.3": version: 29.6.3 resolution: "@jest/schemas@npm:29.6.3" @@ -3945,13 +3954,13 @@ __metadata: languageName: node linkType: hard -"@testing-library/react-native@npm:^13.2.0": - version: 13.2.0 - resolution: "@testing-library/react-native@npm:13.2.0" +"@testing-library/react-native@npm:^13.3.3": + version: 13.3.3 + resolution: "@testing-library/react-native@npm:13.3.3" dependencies: - chalk: "npm:^4.1.2" - jest-matcher-utils: "npm:^29.7.0" - pretty-format: "npm:^29.7.0" + jest-matcher-utils: "npm:^30.0.5" + picocolors: "npm:^1.1.1" + pretty-format: "npm:^30.0.5" redent: "npm:^3.0.0" peerDependencies: jest: ">=29.0.0" @@ -3961,7 +3970,7 @@ __metadata: peerDependenciesMeta: jest: optional: true - checksum: 10c0/5ed8e09f82f45c057f12a716008f31abf934e6a3d84955540e2ab96d7534c82b9afdb0af050e986d8b63ae9dd8272f8a752c45ecb847a11e7549f30de3d84427 + checksum: 10c0/ba13066536d5b2c0b625220d4320c6ad1e390c3df4f4b614d859ef467c4974ad52aa79269ae98efdba8f5a074644e3d11583a5485312df5a64387976ecf4225a languageName: node linkType: hard @@ -8298,6 +8307,18 @@ __metadata: languageName: node linkType: hard +"jest-diff@npm:30.0.5": + version: 30.0.5 + resolution: "jest-diff@npm:30.0.5" + dependencies: + "@jest/diff-sequences": "npm:30.0.1" + "@jest/get-type": "npm:30.0.1" + chalk: "npm:^4.1.2" + pretty-format: "npm:30.0.5" + checksum: 10c0/b218ced37b7676f578ea866762f04caa74901bdcf3f593872aa9a4991a586302651a1d16bb0386772adacc7580a452ec621359af75d733c0b50ea947fe1881d3 + languageName: node + linkType: hard + "jest-diff@npm:^29.7.0": version: 29.7.0 resolution: "jest-diff@npm:29.7.0" @@ -8460,6 +8481,18 @@ __metadata: languageName: node linkType: hard +"jest-matcher-utils@npm:^30.0.5": + version: 30.0.5 + resolution: "jest-matcher-utils@npm:30.0.5" + dependencies: + "@jest/get-type": "npm:30.0.1" + chalk: "npm:^4.1.2" + jest-diff: "npm:30.0.5" + pretty-format: "npm:30.0.5" + checksum: 10c0/231d891b29bfc218f2f5739c10873b6671426e31ad1c5538eed1531e62608fd3f60d32f41821332a6cf41f1614fd37361434c754fdd49c849b35ef2e5156c02e + languageName: node + linkType: hard + "jest-message-util@npm:30.0.2": version: 30.0.2 resolution: "jest-message-util@npm:30.0.2" @@ -10994,6 +11027,17 @@ __metadata: languageName: node linkType: hard +"pretty-format@npm:30.0.5, pretty-format@npm:^30.0.5": + version: 30.0.5 + resolution: "pretty-format@npm:30.0.5" + dependencies: + "@jest/schemas": "npm:30.0.5" + ansi-styles: "npm:^5.2.0" + react-is: "npm:^18.3.1" + checksum: 10c0/9f6cf1af5c3169093866c80adbfdad32f69c692b62f24ba3ca8cdec8519336123323f896396f9fa40346a41b197c5f6be15aec4d8620819f12496afaaca93f81 + languageName: node + linkType: hard + "pretty-format@npm:^29.7.0": version: 29.7.0 resolution: "pretty-format@npm:29.7.0" @@ -11288,7 +11332,7 @@ __metadata: "@eslint/js": "npm:^9.30.1" "@ianvs/prettier-plugin-sort-imports": "npm:^4.4.2" "@tailwindcss/postcss": "npm:^4.1.12" - "@testing-library/react-native": "npm:^13.2.0" + "@testing-library/react-native": "npm:^13.3.3" "@tsconfig/react-native": "npm:^3.0.6" "@types/babel__core": "npm:^7" "@types/connect": "npm:^3.4.38"