From 1fcbf122b00a46c4d0dd44bed96e4d1057d2af36 Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Tue, 18 Oct 2022 13:04:20 +1000 Subject: [PATCH] ci: tests for transform --- .../archive/tailwindcss/font-weight.ts | 19 ---- .../__tests__/archive/tailwindcss/rotate.ts | 18 ---- .../__tests__/archive/tailwindcss/scale.ts | 32 ------- .../__tests__/archive/tailwindcss/skew.ts | 32 ------- .../archive/tailwindcss/translate.ts | 91 ------------------- .../tailwind-serialization/kitchen-sink.ts | 56 ++++++++++++ packages/nativewind/src/tailwind/index.ts | 26 +++--- .../src/transform-css/transforms/transform.ts | 1 + 8 files changed, 71 insertions(+), 204 deletions(-) delete mode 100644 packages/nativewind/__tests__/archive/tailwindcss/font-weight.ts delete mode 100644 packages/nativewind/__tests__/archive/tailwindcss/rotate.ts delete mode 100644 packages/nativewind/__tests__/archive/tailwindcss/scale.ts delete mode 100644 packages/nativewind/__tests__/archive/tailwindcss/skew.ts delete mode 100644 packages/nativewind/__tests__/archive/tailwindcss/translate.ts diff --git a/packages/nativewind/__tests__/archive/tailwindcss/font-weight.ts b/packages/nativewind/__tests__/archive/tailwindcss/font-weight.ts deleted file mode 100644 index 2a77275..0000000 --- a/packages/nativewind/__tests__/archive/tailwindcss/font-weight.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { TextStyle } from "react-native"; -import { createTests, tailwindRunner } from "./runner"; - -const scenarios: Record = { - thin: "100", - extralight: "200", - light: "300", - normal: "400", - medium: "500", - semibold: "600", - bold: "700", - extrabold: "800", - black: "900", -}; - -tailwindRunner( - "Typography - Font Weight", - createTests("font", scenarios, (n) => ({ fontWeight: n })) -); diff --git a/packages/nativewind/__tests__/archive/tailwindcss/rotate.ts b/packages/nativewind/__tests__/archive/tailwindcss/rotate.ts deleted file mode 100644 index 202e53d..0000000 --- a/packages/nativewind/__tests__/archive/tailwindcss/rotate.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { tailwindRunner } from "./runner"; - -tailwindRunner("Layout - Scale", [ - [ - "rotate-0", - { - styles: { "rotate-0": { transform: [{ rotate: "0deg" }] } }, - transforms: { "rotate-0": true }, - }, - ], - [ - "rotate-45", - { - styles: { "rotate-45": { transform: [{ rotate: "45deg" }] } }, - transforms: { "rotate-45": true }, - }, - ], -]); diff --git a/packages/nativewind/__tests__/archive/tailwindcss/scale.ts b/packages/nativewind/__tests__/archive/tailwindcss/scale.ts deleted file mode 100644 index 7d2216e..0000000 --- a/packages/nativewind/__tests__/archive/tailwindcss/scale.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { tailwindRunner } from "./runner"; - -tailwindRunner("Layout - Scale", [ - [ - "scale-0", - { - styles: { "scale-0": { transform: [{ scaleY: 0 }, { scaleX: 0 }] } }, - transforms: { "scale-0": true }, - }, - ], - [ - "scale-50", - { - styles: { "scale-50": { transform: [{ scaleY: 0.5 }, { scaleX: 0.5 }] } }, - transforms: { "scale-50": true }, - }, - ], - [ - "scale-x-50", - { - styles: { "scale-x-50": { transform: [{ scaleX: 0.5 }] } }, - transforms: { "scale-x-50": true }, - }, - ], - [ - "scale-y-50", - { - styles: { "scale-y-50": { transform: [{ scaleY: 0.5 }] } }, - transforms: { "scale-y-50": true }, - }, - ], -]); diff --git a/packages/nativewind/__tests__/archive/tailwindcss/skew.ts b/packages/nativewind/__tests__/archive/tailwindcss/skew.ts deleted file mode 100644 index 388d81e..0000000 --- a/packages/nativewind/__tests__/archive/tailwindcss/skew.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { tailwindRunner } from "./runner"; - -tailwindRunner("Layout - Skew", [ - [ - "skew-x-0", - { - styles: { "skew-x-0": { transform: [{ skewX: "0deg" }] } }, - transforms: { "skew-x-0": true }, - }, - ], - [ - "skew-y-0", - { - styles: { "skew-y-0": { transform: [{ skewY: "0deg" }] } }, - transforms: { "skew-y-0": true }, - }, - ], - [ - "skew-x-1", - { - styles: { "skew-x-1": { transform: [{ skewX: "1deg" }] } }, - transforms: { "skew-x-1": true }, - }, - ], - [ - "skew-y-1", - { - styles: { "skew-y-1": { transform: [{ skewY: "1deg" }] } }, - transforms: { "skew-y-1": true }, - }, - ], -]); diff --git a/packages/nativewind/__tests__/archive/tailwindcss/translate.ts b/packages/nativewind/__tests__/archive/tailwindcss/translate.ts deleted file mode 100644 index f9ce25a..0000000 --- a/packages/nativewind/__tests__/archive/tailwindcss/translate.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { tailwindRunner, expectError } from "./runner"; - -tailwindRunner( - "Layout - Translate", - [ - [ - "translate-x-0", - { - styles: { - "translate-x-0": { - transform: [{ translateY: 0 }, { translateX: 0 }], - }, - }, - transforms: { - "translate-x-0": true, - }, - }, - ], - [ - "translate-y-0", - { - styles: { - "translate-y-0": { - transform: [{ translateY: 0 }, { translateX: 0 }], - }, - }, - transforms: { - "translate-y-0": true, - }, - }, - ], - [ - "translate-x-px", - { - styles: { - "translate-x-px": { - transform: [{ translateY: 0 }, { translateX: 1 }], - }, - }, - transforms: { - "translate-x-px": true, - }, - }, - ], - [ - "translate-y-px", - { - styles: { - "translate-y-px": { - transform: [{ translateY: 1 }, { translateX: 0 }], - }, - }, - transforms: { - "translate-y-px": true, - }, - }, - ], - [ - "translate-x-1", - { - styles: { - "translate-x-1": { - transform: [{ translateY: 0 }, { translateX: 4 }], - }, - }, - transforms: { - "translate-x-1": true, - }, - }, - ], - [ - "translate-y-1", - { - styles: { - "translate-y-1": { - transform: [{ translateY: 4 }, { translateX: 0 }], - }, - }, - transforms: { - "translate-y-1": true, - }, - }, - ], - ], - expectError([ - "translate-x-1/3", - "translate-y-1/3", - "translate-x-full", - "translate-y-full", - ]) -); diff --git a/packages/nativewind/__tests__/tailwind-serialization/kitchen-sink.ts b/packages/nativewind/__tests__/tailwind-serialization/kitchen-sink.ts index ae269fa..1fe7a18 100644 --- a/packages/nativewind/__tests__/tailwind-serialization/kitchen-sink.ts +++ b/packages/nativewind/__tests__/tailwind-serialization/kitchen-sink.ts @@ -232,6 +232,14 @@ testCompile( border-collapse // Tables - Table Layout table-fixed + // Transforms - Rotate + rotate-45 + // Transforms - Scale + scale-50 + // Transforms - Skew + skew-x-1 + // Transforms - Translate + translate-x-px // Transforms - Transform Origin origin-top // Transitions & Animation - Transition Delay @@ -814,6 +822,54 @@ testCompile( }, ], }, + + "rotate-45": { + styles: [ + { + transform: [ + { + rotate: 45, + }, + ], + }, + ], + }, + + "scale-50": { + styles: [ + { + transform: [ + { + scale: 0.5, + }, + ], + }, + ], + }, + + "skew-x-1": { + styles: [ + { + transform: [ + { + skewX: 1, + }, + ], + }, + ], + }, + + "translate-x-px": { + styles: [ + { + transform: [ + { + translate: 1, + }, + ], + }, + ], + }, "z-10": { styles: [ { diff --git a/packages/nativewind/src/tailwind/index.ts b/packages/nativewind/src/tailwind/index.ts index 14e9e74..0ed2e6e 100644 --- a/packages/nativewind/src/tailwind/index.ts +++ b/packages/nativewind/src/tailwind/index.ts @@ -69,24 +69,26 @@ const preset: Config = { scale, skew, rotate, - translate + translate, ], corePlugins: { - // We do not support scoped variables - divideOpacity: false, + backgroundOpacity: false, borderOpacity: false, + boxShadow: false, + boxShadowColor: false, + divideColor: false, + divideOpacity: false, + divideStyle: false, + divideWidth: false, + gap: false, placeholderOpacity: false, ringOpacity: false, - backgroundOpacity: false, - textOpacity: false, - boxShadowColor: false, - boxShadow: false, - // These libraries are replaced with custom logic - gap: false, space: false, - divideWidth: false, - divideColor: false, - divideStyle: false, + textOpacity: false, + scale: false, + skew: false, + rotate: false, + translate: false, }, }; diff --git a/packages/nativewind/src/transform-css/transforms/transform.ts b/packages/nativewind/src/transform-css/transforms/transform.ts index db0541f..5612539 100644 --- a/packages/nativewind/src/transform-css/transforms/transform.ts +++ b/packages/nativewind/src/transform-css/transforms/transform.ts @@ -28,6 +28,7 @@ export function transform(node: Declaration, meta: SelectorMeta) { case "scale": case "scaleX": case "scaleY": + case "translate": case "translateX": case "translateY": case "matrix": {