kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-15 18:27:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

ci: refactor tests

Browse Source
This commit is contained in:
Mark Lawlor
2022-10-18 08:03:39 +10:00
parent 90d80c1b22
commit 063093680c
37 changed files with 230 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/nativewind/__tests__/archive/tailwindcss/fill.tsx
View File

@@ -1,48 +0,0 @@
import { Svg, Circle } from "react-native-svg";
import { render } from "@testing-library/react-native";
import { TestProvider } from "./runner";
import { styled } from "../../src";
const cases: Array<[string, string]> = [
["transparent", "transparent"],
["black", "#000"],
["white", "#fff"],
["slate-50", "#f8fafc"],
["gray-50", "#f9fafb"],
["zinc-50", "#fafafa"],
["neutral-50", "#fafafa"],
["stone-50", "#fafaf9"],
["red-50", "#fef2f2"],
["orange-50", "#fff7ed"],
["amber-50", "#fffbeb"],
["yellow-50", "#fefce8"],
["lime-50", "#f7fee7"],
["green-50", "#f0fdf4"],
["emerald-50", "#ecfdf5"],
["teal-50", "#f0fdfa"],
["cyan-50", "#ecfeff"],
["sky-50", "#f0f9ff"],
["blue-50", "#eff6ff"],
["indigo-50", "#eef2ff"],
["violet-50", "#f5f3ff"],
["purple-50", "#faf5ff"],
["fuchsia-50", "#fdf4ff"],
["pink-50", "#fdf2f8"],
["rose-50", "#fff1f2"],
];
const StyledCircle = styled(Circle, { classProps: ["fill", "stroke"] });
describe("Svg - Fill", () => {
test.each(cases)("fill-%s", (unit) => {
const tree = render(
<TestProvider>
<Svg>
<StyledCircle fill={`fill-${unit}`} />
</Svg>
</TestProvider>
).toJSON();
expect(tree).toMatchSnapshot();
});
});

16
packages/nativewind/__tests__/archive/tailwindcss/justify-content.ts
View File

@@ -1,16 +0,0 @@
import { TextStyle } from "react-native";
import { createTests, tailwindRunner } from "./runner";
const options: Record<string, TextStyle["justifyContent"]> = {
start: "flex-start",
end: "flex-end",
center: "center",
between: "space-between",
around: "space-around",
evenly: "space-evenly",
};
tailwindRunner(
"Layout - Justify Content",
createTests("justify", options, (n) => ({ justifyContent: n }))
);

11
packages/nativewind/__tests__/archive/tailwindcss/justify-items.ts
View File

@@ -1,11 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Layout - Justify Items",
expectError([
"justify-items-start",
"justify-items-end",
"justify-items-center",
"justify-items-stretch",
])
);

12
packages/nativewind/__tests__/archive/tailwindcss/justify-self.ts
View File

@@ -1,12 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Layout - Justify Items",
expectError([
"justify-self-auto",
"justify-self-start",
"justify-self-end",
"justify-self-center",
"justify-self-stretch",
])
);

20
packages/nativewind/__tests__/archive/tailwindcss/line-height.ts
View File

@@ -1,20 +0,0 @@
import { TextStyle } from "react-native";
import { createTests, expectError, tailwindRunner } from "./runner";
const scenarios: Record<string, TextStyle["letterSpacing"]> = {
3: 12,
4: 16,
};
tailwindRunner(
"Typography - Line Height",
createTests("leading", scenarios, (n) => ({ lineHeight: n })),
expectError([
"leading-none",
"leading-tight",
"leading-snug",
"leading-normal",
"leading-relaxed",
"leading-loose",
])
);

6
packages/nativewind/__tests__/archive/tailwindcss/list-style-position.ts
View File

@@ -1,6 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Typography - List Style Position",
expectError(["list-inside", "list-outside"])
);

6
packages/nativewind/__tests__/archive/tailwindcss/list-style-type.ts
View File

@@ -1,6 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Typography - List Style Type",
expectError(["list-none", "list-disc", "list-decimal"])
);

114
packages/nativewind/__tests__/archive/tailwindcss/margin.ts
View File

@@ -1,114 +0,0 @@
import { createTests, tailwindRunner, spacing } from "./runner";
tailwindRunner(
"Layout - Margin",
createTests("m", spacing, (n) => ({
marginBottom: n,
marginLeft: n,
marginRight: n,
marginTop: n,
})),
createTests("mx", spacing, (n) => ({
marginLeft: n,
marginRight: n,
})),
createTests("my", spacing, (n) => ({
marginTop: n,
marginBottom: n,
})),
createTests("mt", spacing, (n) => ({
marginTop: n,
})),
createTests("mr", spacing, (n) => ({
marginRight: n,
})),
createTests("mb", spacing, (n) => ({
marginBottom: n,
})),
createTests("ml", spacing, (n) => ({
marginLeft: n,
})),
[
[
"m-auto",
{
styles: {
"m-auto": {
marginBottom: "auto",
marginLeft: "auto",
marginRight: "auto",
marginTop: "auto",
},
},
},
],
[
"mx-auto",
{
styles: {
"mx-auto": {
marginLeft: "auto",
marginRight: "auto",
},
},
},
],
[
"my-auto",
{
styles: {
"my-auto": {
marginBottom: "auto",
marginTop: "auto",
},
},
},
],
[
"mt-auto",
{
styles: {
"mt-auto": {
marginTop: "auto",
},
},
},
],
[
"mr-auto",
{
styles: {
"mr-auto": {
marginRight: "auto",
},
},
},
],
[
"mb-auto",
{
styles: {
"mb-auto": {
marginBottom: "auto",
},
},
},
],
[
"ml-auto",
{
styles: {
"ml-auto": {
marginLeft: "auto",
},
},
},
],
]
);

14
packages/nativewind/__tests__/archive/tailwindcss/max-width.ts
View File

@@ -1,14 +0,0 @@
import { ViewStyle } from "react-native";
import { createTests, expectError, tailwindRunner } from "./runner";
const scenarios: Record<string, ViewStyle["maxWidth"]> = {
0: 0,
full: "100%",
"[18px]": 18,
};
tailwindRunner(
"Sizing - Max-Width",
createTests("max-w", scenarios, (n) => ({ maxWidth: n })),
expectError(["max-w-max", "max-w-max", "max-w-fit"])
);

14
packages/nativewind/__tests__/archive/tailwindcss/min-width.ts
View File

@@ -1,14 +0,0 @@
import { ViewStyle } from "react-native";
import { createTests, expectError, tailwindRunner } from "./runner";
const scenarios: Record<string, ViewStyle["minWidth"]> = {
0: 0,
full: "100%",
"[18px]": 18,
};
tailwindRunner(
"Sizing - Min-Width",
createTests("min-w", scenarios, (n) => ({ minWidth: n })),
expectError(["min-w-min", "min-w-max", "min-w-fit"])
);

25
packages/nativewind/__tests__/archive/tailwindcss/opacity.ts
View File

@@ -1,25 +0,0 @@
import { TextStyle } from "react-native";
import { createTests, tailwindRunner } from "./runner";
const scenarios: Record<string, TextStyle["opacity"]> = {
0: 0,
5: 0.05,
10: 0.1,
20: 0.2,
25: 0.25,
30: 0.3,
40: 0.4,
50: 0.5,
60: 0.6,
70: 0.7,
75: 0.75,
80: 0.8,
90: 0.9,
95: 0.95,
100: 1,
};
tailwindRunner(
"Effects - Opacity",
createTests("opacity", scenarios, (n) => ({ opacity: n }))
);

33
packages/nativewind/__tests__/archive/tailwindcss/overflow.ts
View File

@@ -1,33 +0,0 @@
import { tailwindRunner, expectError } from "./runner";
tailwindRunner(
"Layout - Overflow",
expectError([
"overflow-auto",
"overflow-clip",
"overflow-x-auto",
"overflow-y-auto",
"overflow-x-hidden",
"overflow-y-hidden",
"overflow-x-clip",
"overflow-y-clip",
"overflow-x-visible",
"overflow-y-visible",
"overflow-x-scroll",
"overflow-y-scroll",
]),
[
[
"overflow-hidden",
{ styles: { "overflow-hidden": { overflow: "hidden" } } },
],
[
"overflow-visible",
{ styles: { "overflow-visible": { overflow: "visible" } } },
],
[
"overflow-scroll",
{ styles: { "overflow-scroll": { overflow: "scroll" } } },
],
]
);

37
packages/nativewind/__tests__/archive/tailwindcss/padding.ts
View File

@@ -1,37 +0,0 @@
import { createTests, tailwindRunner, spacing } from "./runner";
tailwindRunner(
"Layout - Top Right Bottom Left",
createTests("p", spacing, (n) => ({
paddingBottom: n,
paddingLeft: n,
paddingRight: n,
paddingTop: n,
})),
createTests("px", spacing, (n) => ({
paddingLeft: n,
paddingRight: n,
})),
createTests("py", spacing, (n) => ({
paddingTop: n,
paddingBottom: n,
})),
createTests("pt", spacing, (n) => ({
paddingTop: n,
})),
createTests("pr", spacing, (n) => ({
paddingRight: n,
})),
createTests("pb", spacing, (n) => ({
paddingBottom: n,
})),
createTests("pl", spacing, (n) => ({
paddingLeft: n,
}))
);

11
packages/nativewind/__tests__/archive/tailwindcss/place-items.ts
View File

@@ -1,11 +0,0 @@
import { tailwindRunner, expectError } from "./runner";
tailwindRunner(
"Layout - Place Items",
expectError([
"place-items-start",
"place-items-end",
"place-items-center",
"place-items-stretch",
])
);

12
packages/nativewind/__tests__/archive/tailwindcss/place-self.ts
View File

@@ -1,12 +0,0 @@
import { tailwindRunner, expectError } from "./runner";
tailwindRunner(
"Layout - Place Self",
expectError([
"place-self-auto",
"place-self-start",
"place-self-end",
"place-self-center",
"place-self-stretch",
])
);

12
packages/nativewind/__tests__/archive/tailwindcss/position.ts
View File

@@ -1,12 +0,0 @@
import { tailwindRunner, expectError } from "./runner";
tailwindRunner(
"Layout - Position",
expectError(["fixed", "sticky"]),
// static is a special scenario see to-react-native/properties/position.ts
[
["static", { styles: {} }],
["absolute", { styles: { absolute: { position: "absolute" } } }],
["relative", { styles: { relative: { position: "relative" } } }],
]
);

57
packages/nativewind/__tests__/archive/tailwindcss/pseudo-classes.ts
View File

@@ -1,57 +0,0 @@
import { ACTIVE, FOCUS, HOVER } from "../../src/utils/selector";
import { tailwindRunner } from "./runner";
tailwindRunner("Pseudo-classes", [
[
"hover:text-green-500",
{
masks: {
"hover:text-green-500": HOVER,
},
styles: {
"hover:text-green-500": {
color: "#22c55e",
},
},
},
],
[
"active:text-green-500",
{
masks: {
"active:text-green-500": ACTIVE,
},
styles: {
"active:text-green-500": {
color: "#22c55e",
},
},
},
],
[
"focus:text-green-500",
{
masks: {
"focus:text-green-500": FOCUS,
},
styles: {
"focus:text-green-500": {
color: "#22c55e",
},
},
},
],
[
"active:focus:text-green-500",
{
masks: {
"active:focus:text-green-500": ACTIVE | FOCUS,
},
styles: {
"active:focus:text-green-500": {
color: "#22c55e",
},
},
},
],
]);

28
packages/nativewind/__tests__/archive/tailwindcss/rtl.tsx
View File

@@ -1,28 +0,0 @@
import { View } from "react-native";
import { render } from "@testing-library/react-native";
import { TestProvider } from "./runner";
import { StyledComponent } from "../../src";
describe("RTL", () => {
test("left", () => {
const tree = render(
<TestProvider>
<StyledComponent component={View} className="ltr:p-4" />
<StyledComponent component={View} className="rtl:p-4" />
</TestProvider>
).toJSON();
expect(tree).toMatchSnapshot();
});
test.only("right", () => {
const tree = render(
<TestProvider>
<StyledComponent component={View} className="ltr:p-4" />
<StyledComponent component={View} className="rtl:p-4" />
</TestProvider>
).toJSON();
expect(tree).toMatchSnapshot();
});
});

12
packages/nativewind/__tests__/archive/tailwindcss/saturate.ts
View File

@@ -1,12 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Filters - Saturate",
expectError([
"saturate-0",
"saturate-50",
"saturate-100",
"saturate-150",
"saturate-200",
])
);

56
packages/nativewind/__tests__/archive/tailwindcss/space-between.tsx
View File

@@ -1,56 +0,0 @@
import { expectError, tailwindRunner, spacingCases } from "./runner";
import { Text, View } from "react-native";
import { render } from "@testing-library/react-native";
import { TestProvider } from "./runner";
import { StyledComponent } from "../../src";
tailwindRunner(
"Layout - Space between",
expectError(["space-x-reverse", "space-y-reverse"]),
[
[
"space-x-2",
{
atRules: {
"space-x-2.children": [[["selector", "(> *:not(:first-child))"]]],
},
childClasses: {
"space-x-2": ["space-x-2.children"],
},
styles: {
"space-x-2.children@0": {
marginLeft: 8,
},
},
},
],
]
);
describe("Layout - Space between", () => {
test.each(spacingCases)("space-x-%s", (unit) => {
const tree = render(
<TestProvider>
<StyledComponent component={View} className={`space-x-${unit}`}>
<Text>A</Text>
<Text>B</Text>
</StyledComponent>
</TestProvider>
).toJSON();
expect(tree).toMatchSnapshot();
});
test.each(spacingCases)("space-y-%s", (unit) => {
const tree = render(
<TestProvider>
<StyledComponent component={View} className={`space-y-${unit}`}>
<Text>A</Text>
<Text>B</Text>
</StyledComponent>
</TestProvider>
).toJSON();
expect(tree).toMatchSnapshot();
});
});

26
packages/nativewind/__tests__/archive/tailwindcss/stroke-width.tsx
View File

@@ -1,26 +0,0 @@
import { Svg, Circle } from "react-native-svg";
import { render } from "@testing-library/react-native";
import { TestProvider } from "./runner";
import { styled } from "../../src";
const cases: Array<[string, string]> = [
["0", "0"],
["1", "1"],
["2", "2"],
];
const StyledCircle = styled(Circle, { classProps: ["fill", "stroke"] });
describe("Svg - Stroke Width", () => {
test.each(cases)("stroke-%s", (unit) => {
const tree = render(
<TestProvider>
<Svg>
<StyledCircle stroke={`stroke-${unit}`} />
</Svg>
</TestProvider>
).toJSON();
expect(tree).toMatchSnapshot();
});
});

60
packages/nativewind/__tests__/archive/tailwindcss/stroke.tsx
View File

@@ -1,60 +0,0 @@
import { Svg, Circle } from "react-native-svg";
import { render } from "@testing-library/react-native";
import { TestProvider } from "./runner";
import { styled } from "../../src";
const cases: Array<[string, string]> = [
["transparent", "transparent"],
["black", "#000"],
["white", "#fff"],
["slate-50", "#f8fafc"],
["gray-50", "#f9fafb"],
["zinc-50", "#fafafa"],
["neutral-50", "#fafafa"],
["stone-50", "#fafaf9"],
["red-50", "#fef2f2"],
["orange-50", "#fff7ed"],
["amber-50", "#fffbeb"],
["yellow-50", "#fefce8"],
["lime-50", "#f7fee7"],
["green-50", "#f0fdf4"],
["emerald-50", "#ecfdf5"],
["teal-50", "#f0fdfa"],
["cyan-50", "#ecfeff"],
["sky-50", "#f0f9ff"],
["blue-50", "#eff6ff"],
["indigo-50", "#eef2ff"],
["violet-50", "#f5f3ff"],
["purple-50", "#faf5ff"],
["fuchsia-50", "#fdf4ff"],
["pink-50", "#fdf2f8"],
["rose-50", "#fff1f2"],
];
const StyledCircle = styled(Circle, { classProps: ["fill", "stroke"] });
describe("Svg - Stroke", () => {
test.each(cases)("stroke-%s", (unit) => {
const tree = render(
<TestProvider>
<Svg>
<StyledCircle stroke={`stroke-${unit}`} />
</Svg>
</TestProvider>
).toJSON();
expect(tree).toMatchSnapshot();
});
test("works with stroke width", () => {
const tree = render(
<TestProvider>
<Svg>
<StyledCircle stroke="stroke-white stroke-1" />
</Svg>
</TestProvider>
).toJSON();
expect(tree).toMatchSnapshot();
});
});

14
packages/nativewind/__tests__/archive/tailwindcss/text-align.ts
View File

@@ -1,14 +0,0 @@
import { TextStyle } from "react-native";
import { createTests, tailwindRunner } from "./runner";
const scenarios: Record<string, TextStyle["textAlign"]> = {
left: "left",
center: "center",
right: "right",
justify: "justify",
};
tailwindRunner(
"Typography - Text Align",
createTests("text", scenarios, (n) => ({ textAlign: n }))
);

35
packages/nativewind/__tests__/archive/tailwindcss/text-color.ts
View File

@@ -1,35 +0,0 @@
import { createTests, expectError, tailwindRunner } from "./runner";
const scenarios: Record<string, string> = {
transparent: "transparent",
black: "#000",
white: "#fff",
"slate-50": "#f8fafc",
"gray-50": "#f9fafb",
"zinc-50": "#fafafa",
"neutral-50": "#fafafa",
"stone-50": "#fafaf9",
"red-50": "#fef2f2",
"orange-50": "#fff7ed",
"amber-50": "#fffbeb",
"yellow-50": "#fefce8",
"lime-50": "#f7fee7",
"green-50": "#f0fdf4",
"emerald-50": "#ecfdf5",
"teal-50": "#f0fdfa",
"cyan-50": "#ecfeff",
"sky-50": "#f0f9ff",
"blue-50": "#eff6ff",
"indigo-50": "#eef2ff",
"violet-50": "#f5f3ff",
"purple-50": "#faf5ff",
"fuchsia-50": "#fdf4ff",
"pink-50": "#fdf2f8",
"rose-50": "#fff1f2",
};
tailwindRunner(
"Typography - Text Color",
createTests("text", scenarios, (n) => ({ color: n })),
expectError(["text-current", "text-inherit"])
);

35
packages/nativewind/__tests__/archive/tailwindcss/text-decoration-color.ts
View File

@@ -1,35 +0,0 @@
import { createTests, expectError, tailwindRunner } from "./runner";
const scenarios: Record<string, string> = {
transparent: "transparent",
black: "#000",
white: "#fff",
"slate-50": "#f8fafc",
"gray-50": "#f9fafb",
"zinc-50": "#fafafa",
"neutral-50": "#fafafa",
"stone-50": "#fafaf9",
"red-50": "#fef2f2",
"orange-50": "#fff7ed",
"amber-50": "#fffbeb",
"yellow-50": "#fefce8",
"lime-50": "#f7fee7",
"green-50": "#f0fdf4",
"emerald-50": "#ecfdf5",
"teal-50": "#f0fdfa",
"cyan-50": "#ecfeff",
"sky-50": "#f0f9ff",
"blue-50": "#eff6ff",
"indigo-50": "#eef2ff",
"violet-50": "#f5f3ff",
"purple-50": "#faf5ff",
"fuchsia-50": "#fdf4ff",
"pink-50": "#fdf2f8",
"rose-50": "#fff1f2",
};
tailwindRunner(
"Typography - Text Decoration Color",
createTests("decoration", scenarios, (n) => ({ textDecorationColor: n })),
expectError(["decoration-current", "decoration-inherit"])
);

15
packages/nativewind/__tests__/archive/tailwindcss/text-decoration-style.ts
View File

@@ -1,15 +0,0 @@
import { TextStyle } from "react-native";
import { createTests, expectError, tailwindRunner } from "./runner";
const scenarios: Record<string, TextStyle["textDecorationStyle"]> = {
solid: "solid",
double: "double",
dotted: "dotted",
dashed: "dashed",
};
tailwindRunner(
"Typography - Text Decoration Style",
createTests("decoration", scenarios, (n) => ({ textDecorationStyle: n })),
expectError(["decoration-wavy"])
);

14
packages/nativewind/__tests__/archive/tailwindcss/text-decoration-thickness.ts
View File

@@ -1,14 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Typography - Text Decoration Thickness",
expectError([
"decoration-auto",
"decoration-from-font",
"decoration-0",
"decoration-1",
"decoration-2",
"decoration-4",
"decoration-8",
])
);

8
packages/nativewind/__tests__/archive/tailwindcss/text-transform.ts
View File

@@ -1,8 +0,0 @@
import { tailwindRunner } from "./runner";
tailwindRunner("Typography - Text Transform", [
["uppercase", { styles: { uppercase: { textTransform: "uppercase" } } }],
["lowercase", { styles: { lowercase: { textTransform: "lowercase" } } }],
["capitalize", { styles: { capitalize: { textTransform: "capitalize" } } }],
["normal-case", { styles: { "normal-case": { textTransform: "none" } } }],
]);

44
packages/nativewind/__tests__/archive/tailwindcss/top-right-bottom-left.ts
View File

@@ -1,44 +0,0 @@
import { expectError, createTests, tailwindRunner } from "./runner";
const expectedValues: Record<string, number | string> = {
0: 0,
px: 1,
0.5: 2,
1: 4,
1.5: 6,
96: 384,
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
full: "100%",
"[18px]": 18,
};
tailwindRunner(
"Layout - Top Right Bottom Left",
createTests("inset-x", expectedValues, (n) => ({ right: n, left: n })),
createTests("inset-y", expectedValues, (n) => ({ top: n, bottom: n })),
createTests("top", expectedValues, (n) => ({ top: n })),
createTests("right", expectedValues, (n) => ({ right: n })),
createTests("bottom", expectedValues, (n) => ({ bottom: n })),
createTests("left", expectedValues, (n) => ({ left: n })),
createTests("inset", expectedValues, (n) => ({
top: n,
right: n,
bottom: n,
left: n,
})),
expectError([
"inset-auto",
"inset-x-auto",
"inset-y-auto",
"top-auto",
"right-auto",
"bottom-auto",
"left-auto",
])
);

15
packages/nativewind/__tests__/archive/tailwindcss/vertical-alignment.ts
View File

@@ -1,15 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Typography - Vertical Alignment",
expectError([
"align-baseline",
"align-top",
"align-middle",
"align-bottom",
"align-text-top",
"align-text-bottom",
"align-sub",
"align-super",
])
);

3
packages/nativewind/__tests__/archive/tailwindcss/visibility.ts
View File

@@ -1,3 +0,0 @@
import { tailwindRunner, expectError } from "./runner";
tailwindRunner("Layout - Visibility", expectError(["visible", "invisible"]));

12
packages/nativewind/__tests__/archive/tailwindcss/white-space.ts
View File

@@ -1,12 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Typography - Whitespace",
expectError([
"whitespace-normal",
"whitespace-nowrap",
"whitespace-pre",
"whitespace-pre-line",
"whitespace-pre-wrap",
])
);

39
packages/nativewind/__tests__/archive/tailwindcss/width.ts
View File

@@ -1,39 +0,0 @@
import { ViewStyle } from "react-native";
import { createTests, expectError, tailwindRunner } from "./runner";
const scenarios: Record<string, ViewStyle["width"]> = {
0: 0,
px: 1,
0.5: 2,
1: 4,
1.5: 6,
96: 384,
"1/2": "50%",
"1/3": "33.333333%",
full: "100%",
"[18px]": 18,
};
tailwindRunner(
"Sizing - Width",
createTests("w", scenarios, (n) => ({ width: n })),
expectError(["w-auto", "w-min", "w-max", "w-fit"]),
[
[
"w-screen",
{
styles: {
"w-screen": {
width: 100,
},
},
topics: {
"w-screen": ["width"],
},
units: {
"w-screen": { width: "vw" },
},
},
],
]
);

11
packages/nativewind/__tests__/archive/tailwindcss/will-change.ts
View File

@@ -1,11 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Interactivity - Will Change",
expectError([
"will-change-auto",
"will-change-scroll",
"will-change-contents",
"will-change-transform",
])
);

6
packages/nativewind/__tests__/archive/tailwindcss/word-break.ts
View File

@@ -1,6 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Typography - Work Break",
expectError(["break-normal", "break-words", "break-all"])
);

14
packages/nativewind/__tests__/archive/tailwindcss/z-index.ts
View File

@@ -1,14 +0,0 @@
import { ViewStyle } from "react-native";
import { tailwindRunner, expectError, createTests } from "./runner";
const scenarios: Record<string, ViewStyle["zIndex"]> = {
0: 0,
10: 10,
"[100]": 100,
};
tailwindRunner(
"Layout - Z-Index",
expectError(["z-auto"]),
createTests("z", scenarios, (n) => ({ zIndex: n }))
);

234
packages/nativewind/__tests__/tailwind-serialization/kitchen-sink.ts
View File

@@ -73,6 +73,8 @@ testCompile(
shadow-red-500
// Effects - Mix Blend Mode
mix-blend-normal
// Effects - Opacity
opacity-5
// Filters - Backdrop Blur
backdrop-blur
// Filters - Backdrop Brightness
@@ -103,6 +105,8 @@ testCompile(
hue-rotate-15
// Filters - Invert
invert
// Layout - Position
absolute
// Filters - Saturate
saturate-50
// Filters - Sepia
@@ -128,6 +132,8 @@ testCompile(
// Layout - Display
flex
hidden
// Layout - Fit
object-contain
// Layout - Flex Basis
basis-1
// Layout - Flex Direction
@@ -159,14 +165,34 @@ testCompile(
grid-cols-1
// Layout - Grid Template Row
grid-rows-1
// Layout - Object Fit
object-contain
// Layout - Object Position
// Layout - Justify Content
Justify-center
// Layout - Justify Items
justify-items-start
// Layout - Justify Items
justify-self-start
// Layout - Margin
m-1
// Layout - Padding
p-1
// Layout - Place Items
place-items-start
// Layout - Place Self
place-self-start
// Layout - Position
object-bottom
// Layout - Order
order-1
// Layout - Overflow
overflow-hidden
// Layout - Overscroll Behavior
overscroll-contain
// Layout - Top Right Bottom Left
inset-1
// Layout - Visibility
invisible
// Layout - Z-Index
z-10
// Interactivity - Caret Color
caret-black
// Interactivity - Cursor
@@ -185,15 +211,23 @@ testCompile(
snap-start
// Interactivity - Scroll Snap Stop
snap-normal
// Interactivity - Scroll Snap Type
// Interactivity - Scroll Snap TTypography - Whitespaceype
snap-x
snap-mandatory
// Interactivity - Touch Action
touch-pan-x
// Interactivity - Touch Action
select-text
// Interactivity - Will Change
will-change-scroll
// Sizing - Height
h-1
// Sizing - Max-Width
max-w-full
// Sizing - Min-Width
min-w-full
// Sizing - Width
w-screen
// Tables - Border Collapse
border-collapse
// Tables - Table Layout
@@ -219,12 +253,37 @@ testCompile(
// Typography - Font Style
italic
not-italic
// Typography - Line Height
leading-3
leading-tight
// Typography - List Style Position
list-inside
// Typography - List Style Type
list-disc
// Typography - Text Align
text-center
// Typography - Text Color
text-black
// Typography - Text Decoration Color
decoration-black
// Typography - Text Decoration Style
decoration-solid
// Typography - Text Decoration Thickness
decoration-0
// Typography - Text Indent
indent-px
// Typography - Text Overflow
text-ellipsis
// Typography - Text Transform
uppercase
// Typography - Text Underline Offset
underline-offset-1
// Typography - Vertical Alignment
align-baseline
// Typography - Whitespace
whitespace-normal
// Typography - Word Break
break-normal
`,
{
name: "Kitchen sink",
@@ -578,6 +637,14 @@ testCompile(
},
],
},
"overflow-hidden": {
styles: [
{
overflow: "hidden",
},
],
},
"h-1": {
styles: [
{
@@ -589,6 +656,165 @@ testCompile(
],
topics: ["--rem"],
},
"z-10": {
styles: [
{
zIndex: 10,
},
],
},
"opacity-5": {
styles: [
{
opacity: 0.05,
},
],
},
"text-center": {
styles: [
{
textAlign: "center",
},
],
},
"leading-3": {
styles: [
{
lineHeight: {
function: "rem",
values: [0.75],
},
},
],
topics: ["--rem"],
},
"leading-tight": {
styles: [
{
lineHeight: 1.25,
},
],
},
"m-1": {
styles: [
{
margin: {
function: "rem",
values: [0.25],
},
},
],
topics: ["--rem"],
},
"max-w-full": {
styles: [
{
maxWidth: "100%",
},
],
},
"min-w-full": {
styles: [
{
minWidth: "100%",
},
],
},
"p-1": {
styles: [
{
padding: {
function: "rem",
values: [0.25],
},
},
],
topics: ["--rem"],
},
"text-black": {
styles: [
{
color: "#000",
},
],
},
"decoration-black": {
styles: [
{
textDecorationColor: "#000",
},
],
},
"decoration-solid": {
styles: [
{
textDecorationStyle: "solid",
},
],
},
uppercase: {
styles: [
{
textTransform: "uppercase",
},
],
},
"inset-1": {
styles: [
{
bottom: {
function: "rem",
values: [0.25],
},
left: {
function: "rem",
values: [0.25],
},
right: {
function: "rem",
values: [0.25],
},
top: {
function: "rem",
values: [0.25],
},
},
],
topics: ["--rem"],
},
"w-screen": {
styles: [
{
width: {
function: "vw",
values: [100],
},
},
],
topics: ["--window-width"],
},
absolute: {
styles: [
{
position: "absolute",
},
],
},
});
}
);