kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-14 01:45:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: simplied sibling plugins

Browse Source
This commit is contained in:
Mark Lawlor
2022-05-10 19:24:59 +10:00
parent 02ce202d3d
commit d8a038313f
11 changed files with 179 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
__tests__/tailwindcss/divide-color.ts
View File

@@ -1,33 +1,43 @@
import { expectError, tailwindRunner } from "./runner";
import { ViewStyle } from "react-native";
import { createTests, tailwindRunner } from "./runner";
const scenarios = [
"transparent",
"black",
"white",
"slate-50",
"gray-50",
"zinc-50",
"neutral-50",
"stone-50",
"red-50",
"orange-50",
"amber-50",
"yellow-50",
"lime-50",
"green-50",
"emerald-50",
"teal-50",
"cyan-50",
"sky-50",
"blue-50",
"indigo-50",
"violet-50",
"purple-50",
"fuchsia-50",
"pink-50",
"rose-50",
];
const scenarios: Record<string, ViewStyle["borderColor"]> = {
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("Border - Divide Color", [
...expectError(scenarios.map((n) => `divide-${n}`)),
]);
tailwindRunner(
"Border - Divide Color",
createTests("divide", scenarios, (n) => ({
media: ["--general-sibling-combinator"],
style: {
borderBottomColor: n,
borderLeftColor: n,
borderRightColor: n,
borderTopColor: n,
},
}))
);

17
__tests__/tailwindcss/divide-style.ts
View File

@@ -1,7 +1,18 @@
import { expectError, tailwindRunner } from "./runner";
import { ViewStyle } from "react-native";
import { createTests, expectError, tailwindRunner } from "./runner";
const scenarios = ["solid", "dashed", "dotted", "double", "none"];
const scenarios: Record<string, ViewStyle["borderStyle"]> = {
solid: "solid",
dashed: "dashed",
dotted: "dotted",
};
tailwindRunner("Border - Divide Style", [
...expectError(scenarios.map((n) => `divide-${n}`)),
...createTests("divide", scenarios, (n) => ({
media: ["--general-sibling-combinator"],
style: {
borderStyle: n,
},
})),
...expectError(["divide-double", "divide-none"]),
]);

28
__tests__/tailwindcss/divide-width.ts
View File

@@ -1,10 +1,26 @@
import { tailwindRunner } from "./runner";
import { ViewStyle } from "react-native";
import { createTests, tailwindRunner } from "./runner";
// const scenarios = [0, 2, 4, 8];
const scenarios: Record<string, ViewStyle["borderWidth"]> = {
0: 0,
2: 2,
4: 4,
8: 8,
};
tailwindRunner("Border - Divide Width", [
["divide-x-2", { styles: {} }],
// ...expectError(scenarios.map((n) => `divide-x-${n}`)),
// ...expectError(scenarios.map((n) => `divide-y-${n}`)),
// ...expectError(["divide-x-reverse", "divide-y-reverse"]),
...createTests("divide-x", scenarios, (n) => ({
media: ["--general-sibling-combinator"],
style: {
borderLeftWidth: n,
borderRightWidth: n,
},
})),
...createTests("divide-y", scenarios, (n) => ({
media: ["--general-sibling-combinator"],
style: {
borderTopWidth: n,
borderBottomWidth: n,
},
})),
]);

53
__tests__/tailwindcss/gap.ts
View File

@@ -1,19 +1,36 @@
import { tailwindRunner, expectError } from "./runner";
import { ViewStyle } from "react-native";
import { createTests, tailwindRunner } from "./runner";
tailwindRunner(
"Layout - Gap",
expectError([
"gap-0",
"gap-x-0",
"gap-y-0",
"gap-px",
"gap-x-px",
"gap-y-px",
"gap-0.5",
"gap-x-0.5",
"gap-y-0.5",
"gap-1",
"gap-x-1",
"gap-y-1",
])
);
// These are half the TailwindCSS gap values due the use of margins
const scenarios: Record<string, ViewStyle["borderWidth"]> = {
0: 0,
px: 0.5,
"0.5": 1,
1: 2,
};
tailwindRunner("Flexbox & Grid - Gap", [
...createTests("gap", scenarios, (n) => ({
media: ["--general-sibling-combinator"],
style: {
marginTop: n,
marginLeft: n,
marginRight: n,
marginBottom: n,
},
})),
...createTests("gap-x", scenarios, (n) => ({
media: ["--general-sibling-combinator"],
style: {
marginLeft: n,
marginRight: n,
},
})),
...createTests("gap-y", scenarios, (n) => ({
media: ["--general-sibling-combinator"],
style: {
marginTop: n,
marginBottom: n,
},
})),
]);

36
__tests__/tailwindcss/runner/tests.ts
View File

@@ -1,6 +1,7 @@
import { ColorValue } from "react-native";
import { Test } from ".";
import { normaliseSelector } from "../../../src/shared/selector";
import { Style, StyleRecord } from "../../../src/types/common";
import { MediaRecord, Style, StyleRecord } from "../../../src/types/common";
export function expectError(names: string[]): Test[] {
return names.map((name) => [
@@ -9,13 +10,17 @@ export function expectError(names: string[]): Test[] {
]);
}
export function createTests<T extends string | number | undefined>(
export function createTests<T extends string | number | ColorValue | undefined>(
prefix: string,
suffixes: Record<string, T>,
valueFunction: (n: T, suffix: string) => Style
valueFunction: (
n: T,
suffix: string
) => Style | { style: Style; media?: string[] }
): Test[] {
return Object.entries(suffixes).map(([suffix, value]) => {
const styles: StyleRecord = {};
const media: MediaRecord = {};
// If the suffix is a decimal 0.5, the tailwind compiler will generate styles for
// both 0.5 and 0
@@ -25,16 +30,35 @@ export function createTests<T extends string | number | undefined>(
const flooredNumber = Math.floor(scaleParsed);
if (Number.isFinite(flooredNumber) && flooredNumber !== scaleParsed) {
styles[normaliseSelector(`${prefix}-${flooredNumber}`)] = valueFunction(
const result = valueFunction(
suffixes[flooredNumber],
flooredNumber.toString()
);
const key = normaliseSelector(`${prefix}-${flooredNumber}`);
if ("style" in result) {
styles[`${key}.0`] = result.style;
media[key] = result.media ?? [];
} else {
styles[key] = result;
}
}
const key = suffix ? `${prefix}-${suffix}` : prefix;
styles[normaliseSelector(key)] = valueFunction(value, suffix);
const result = valueFunction(value, suffix);
return [key, { styles }];
if ("style" in result && "media" in result) {
styles[`${normaliseSelector(key)}.0`] = result.style;
media[normaliseSelector(key)] = result.media ?? [];
return [key, { styles, media }];
} else if ("style" in result) {
styles[normaliseSelector(key)] = result.style;
return [key, { styles }];
} else {
styles[normaliseSelector(key)] = result;
return [key, { styles }];
}
});
}

26
__tests__/tailwindcss/space-between.ts
View File

@@ -1,11 +1,17 @@
import { expectError, tailwindRunner, spacing } from "./runner";
import { expectError, tailwindRunner, spacing, createTests } from "./runner";
tailwindRunner(
"Layout - Space between",
expectError([
...Object.keys(spacing).map((space) => `space-x-${space}`),
...Object.keys(spacing).map((space) => `space-y-${space}`),
"space-x-reverse",
"space-y-reverse",
])
);
tailwindRunner("Layout - Space between", [
...createTests("space-x", spacing, (n) => ({
media: ["--general-sibling-combinator"],
style: {
marginLeft: n,
},
})),
...createTests("space-y", spacing, (n) => ({
media: ["--general-sibling-combinator"],
style: {
marginTop: n,
},
})),
...expectError(["space-x-reverse", "space-y-reverse"]),
]);

29
__tests__/tailwindcss/text-decoration-color.ts
View File

@@ -5,56 +5,27 @@ const scenarios: Record<string, string> = {
black: "#000",
white: "#fff",
"slate-50": "#f8fafc",
"slate-100": "#f1f5f9",
"slate-200": "#e2e8f0",
"gray-50": "#f9fafb",
"gray-100": "#f3f4f6",
"gray-200": "#e5e7eb",
"zinc-50": "#fafafa",
"zinc-100": "#f4f4f5",
"neutral-50": "#fafafa",
"neutral-100": "#f5f5f5",
"stone-50": "#fafaf9",
"stone-100": "#f5f5f4",
"red-50": "#fef2f2",
"red-100": "#fee2e2",
"orange-50": "#fff7ed",
"orange-100": "#ffedd5",
"amber-50": "#fffbeb",
"amber-100": "#fef3c7",
"yellow-50": "#fefce8",
"yellow-100": "#fef9c3",
"lime-50": "#f7fee7",
"lime-100": "#ecfccb",
"green-50": "#f0fdf4",
"green-100": "#dcfce7",
"emerald-50": "#ecfdf5",
"emerald-100": "#d1fae5",
"teal-50": "#f0fdfa",
"teal-100": "#ccfbf1",
"cyan-50": "#ecfeff",
"cyan-100": "#cffafe",
"sky-50": "#f0f9ff",
"sky-100": "#e0f2fe",
"blue-50": "#eff6ff",
"blue-100": "#dbeafe",
"indigo-50": "#eef2ff",
"indigo-100": "#e0e7ff",
"violet-50": "#f5f3ff",
"violet-100": "#ede9fe",
"violet-200": "#ddd6fe",
"purple-50": "#faf5ff",
"purple-100": "#f3e8ff",
"purple-200": "#e9d5ff",
"fuchsia-50": "#fdf4ff",
"fuchsia-100": "#fae8ff",
"fuchsia-200": "#f5d0fe",
"pink-50": "#fdf2f8",
"pink-100": "#fce7f3",
"pink-200": "#fbcfe8",
"rose-50": "#fff1f2",
"rose-100": "#ffe4e6",
"rose-200": "#fecdd3",
};
tailwindRunner("Typography - Text Decoration Color", [

12
src/plugin/native/divide.ts
View File

@@ -20,10 +20,8 @@ export const divide: CustomPluginFunction = ({
return {
"&": {
"@media --general-sibling-combinator": {
// "@defaults border-width": {},
"--tw-divide-x-reverse": "0",
"border-right-width": `calc(${value} * var(--tw-divide-x-reverse))`,
"border-left-width": `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
"border-right-width": value,
"border-left-width": value,
},
},
};
@@ -34,10 +32,8 @@ export const divide: CustomPluginFunction = ({
return {
"&": {
"@media --general-sibling-combinator": {
// "@defaults border-width": {},
"--tw-divide-y-reverse": "0",
"border-top-width": `calc(${value} * var(--tw-divide-y-reverse))`,
"border-bottom-width": `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
"border-top-width": value,
"border-bottom-width": value,
},
},
};

5
src/plugin/native/gap.ts
View File

@@ -9,7 +9,6 @@ export const gap: CustomPluginFunction = ({ matchUtilities, theme }) => {
return {
"&": {
margin: `calc(${value} / -2)`,
"@media --general-sibling-combinator": {
margin: `calc(${value} / 2)`,
},
@@ -22,8 +21,6 @@ export const gap: CustomPluginFunction = ({ matchUtilities, theme }) => {
return {
"&": {
"margin-left": `calc(${value} / -2)`,
"margin-rigth": `calc(${value} / -2)`,
"@media --general-sibling-combinator": {
"margin-left": `calc(${value} / 2)`,
"margin-right": `calc(${value} / 2)`,
@@ -37,8 +34,6 @@ export const gap: CustomPluginFunction = ({ matchUtilities, theme }) => {
return {
"&": {
"margin-top": `calc(${value} / -2)`,
"margin-bottom": `calc(${value} / -2)`,
"@media --general-sibling-combinator": {
"margin-top": `calc(${value} / 2)`,
"margin-bottom": `calc(${value} / 2)`,

2
src/plugin/native/index.ts
View File

@@ -8,6 +8,7 @@ import { boxShadow } from "./box-shadow";
import { divide } from "./divide";
import { elevation } from "./elevation";
import { fontSize } from "./font-size";
import { gap } from "./gap";
import { lineHeight } from "./line-height";
import { rotate } from "./rotate";
import { scale } from "./scale";
@@ -36,6 +37,7 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions | undefined>(
return (helpers) => {
space(helpers, notSupported);
divide(helpers, notSupported);
gap(helpers, notSupported);
fontSize(helpers);
lineHeight(helpers, notSupported);
elevation(helpers, notSupported);

40
src/plugin/native/space.ts
View File

@@ -1,52 +1,42 @@
import { CustomPluginFunction } from "./types";
export const space: CustomPluginFunction = ({
matchUtilities,
theme,
addUtilities,
}) => {
export const space: CustomPluginFunction = (
{ matchUtilities, theme },
notSupported
) => {
matchUtilities(
{
"space-x": (value: string) => {
if (value === "reverse") {
return notSupported("space-x-reverse")();
}
value = value === "0" ? "0px" : value;
return {
"&": {
"@media --general-sibling-combinator": {
"--tw-space-x-reverse": "0",
"margin-right": `calc(${value} * var(--tw-space-x-reverse))`,
"margin-left": `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
"margin-left": value,
},
},
};
},
"space-y": (value: string) => {
if (value === "reverse") {
return notSupported("space-y-reverse")();
}
value = value === "0" ? "0px" : value;
return {
"&": {
"@media --general-sibling-combinator": {
"--tw-space-y-reverse": "0",
"margin-top": `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
"margin-bottom": `calc(${value} * var(--tw-space-y-reverse))`,
"margin-top": value,
},
},
};
},
},
{ values: theme("space"), supportsNegativeValues: true }
{ values: { ...theme("space"), reverse: "reverse" } }
);
addUtilities({
".space-y-reverse": {
"@media --general-sibling-combinator": {
"--tw-space-y-reverse": "1",
},
},
".space-x-reverse": {
"@media --general-sibling-combinator": {
"--tw-space-x-reverse": "1",
},
},
});
};