From d8a038313fb11af89f7090523dbd32a886de477e Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Tue, 10 May 2022 19:24:59 +1000 Subject: [PATCH] fix: simplied sibling plugins --- __tests__/tailwindcss/divide-color.ts | 72 +++++++++++-------- __tests__/tailwindcss/divide-style.ts | 17 ++++- __tests__/tailwindcss/divide-width.ts | 28 ++++++-- __tests__/tailwindcss/gap.ts | 53 +++++++++----- __tests__/tailwindcss/runner/tests.ts | 36 ++++++++-- __tests__/tailwindcss/space-between.ts | 26 ++++--- .../tailwindcss/text-decoration-color.ts | 29 -------- src/plugin/native/divide.ts | 12 ++-- src/plugin/native/gap.ts | 5 -- src/plugin/native/index.ts | 2 + src/plugin/native/space.ts | 40 ++++------- 11 files changed, 179 insertions(+), 141 deletions(-) diff --git a/__tests__/tailwindcss/divide-color.ts b/__tests__/tailwindcss/divide-color.ts index f06ecc1..7c6a6f3 100644 --- a/__tests__/tailwindcss/divide-color.ts +++ b/__tests__/tailwindcss/divide-color.ts @@ -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 = { + 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, + }, + })) +); diff --git a/__tests__/tailwindcss/divide-style.ts b/__tests__/tailwindcss/divide-style.ts index 400c251..58f71a2 100644 --- a/__tests__/tailwindcss/divide-style.ts +++ b/__tests__/tailwindcss/divide-style.ts @@ -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 = { + 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"]), ]); diff --git a/__tests__/tailwindcss/divide-width.ts b/__tests__/tailwindcss/divide-width.ts index fb5cfcb..d9091e9 100644 --- a/__tests__/tailwindcss/divide-width.ts +++ b/__tests__/tailwindcss/divide-width.ts @@ -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 = { + 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, + }, + })), ]); diff --git a/__tests__/tailwindcss/gap.ts b/__tests__/tailwindcss/gap.ts index a59dd27..5d7e638 100644 --- a/__tests__/tailwindcss/gap.ts +++ b/__tests__/tailwindcss/gap.ts @@ -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 = { + 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, + }, + })), +]); diff --git a/__tests__/tailwindcss/runner/tests.ts b/__tests__/tailwindcss/runner/tests.ts index 517f99b..748aa4d 100644 --- a/__tests__/tailwindcss/runner/tests.ts +++ b/__tests__/tailwindcss/runner/tests.ts @@ -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( +export function createTests( prefix: string, suffixes: Record, - 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( 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 }]; + } }); } diff --git a/__tests__/tailwindcss/space-between.ts b/__tests__/tailwindcss/space-between.ts index c7556a2..9366f24 100644 --- a/__tests__/tailwindcss/space-between.ts +++ b/__tests__/tailwindcss/space-between.ts @@ -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"]), +]); diff --git a/__tests__/tailwindcss/text-decoration-color.ts b/__tests__/tailwindcss/text-decoration-color.ts index 9b4970d..b7c69ef 100644 --- a/__tests__/tailwindcss/text-decoration-color.ts +++ b/__tests__/tailwindcss/text-decoration-color.ts @@ -5,56 +5,27 @@ const scenarios: Record = { 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", [ diff --git a/src/plugin/native/divide.ts b/src/plugin/native/divide.ts index 73c106a..cdd85f8 100644 --- a/src/plugin/native/divide.ts +++ b/src/plugin/native/divide.ts @@ -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, }, }, }; diff --git a/src/plugin/native/gap.ts b/src/plugin/native/gap.ts index aee75c7..19b9d4b 100644 --- a/src/plugin/native/gap.ts +++ b/src/plugin/native/gap.ts @@ -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)`, diff --git a/src/plugin/native/index.ts b/src/plugin/native/index.ts index 9df7324..af11680 100644 --- a/src/plugin/native/index.ts +++ b/src/plugin/native/index.ts @@ -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( return (helpers) => { space(helpers, notSupported); divide(helpers, notSupported); + gap(helpers, notSupported); fontSize(helpers); lineHeight(helpers, notSupported); elevation(helpers, notSupported); diff --git a/src/plugin/native/space.ts b/src/plugin/native/space.ts index 467d121..d09b925 100644 --- a/src/plugin/native/space.ts +++ b/src/plugin/native/space.ts @@ -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", - }, - }, - }); };