diff --git a/example/global.css b/example/global.css index 0ceee97..ebb44e6 100644 --- a/example/global.css +++ b/example/global.css @@ -11,6 +11,11 @@ --text-2xl--line-height: calc(2em / 1.5); --text-3xl--line-height: calc(2.25em / 1.875); --text-4xl--line-height: calc(2.5em / 2.25); + --text-5xl--line-height: 1em; + --text-6xl--line-height: 1em; + --text-7xl--line-height: 1em; + --text-8xl--line-height: 1em; + --text-9xl--line-height: 1em; --leading-tight: 1.25em; --leading-snug: 1.375em; diff --git a/src/__tests__/vendor/tailwind.test.tsx b/src/__tests__/vendor/tailwind.test.tsx index c3360df..93787eb 100644 --- a/src/__tests__/vendor/tailwind.test.tsx +++ b/src/__tests__/vendor/tailwind.test.tsx @@ -8,6 +8,90 @@ import { registerCSS, render, screen, testID } from "react-native-css/jest"; * For the full Tailwind CSS test suite, see the Nativewind repository. */ +test("transition", () => { + const compiled = registerCSS(` +:root, :host { + --default-transition-duration: 150ms; + --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.transition { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); +} + `); + + expect(compiled).toStrictEqual({ + s: [ + [ + "transition", + [ + { + a: true, + d: [ + { + transitionProperty: [ + "color", + "backgroundColor", + "borderColor", + "textDecorationColor", + "fill", + "stroke", + "opacity", + "boxShadow", + "transform", + "translate", + "scale", + "rotate", + "filter", + "display", + "pointerEvents", + ], + }, + [ + [ + {}, + "var", + [ + "tw-ease", + [{}, "var", "default-transition-timing-function", 1], + ], + 1, + ], + "transitionTimingFunction", + 1, + ], + [ + [ + {}, + "var", + [ + "tw-duration", + [{}, "var", "default-transition-duration", 1], + ], + 1, + ], + "transitionDuration", + 1, + ], + ], + dv: 1, + s: [2, 1], + }, + ], + ], + ], + vr: [ + ["default-transition-duration", [150]], + [ + "default-transition-timing-function", + [[{}, "cubic-bezier", [0.4, 0, 0.2, 1]]], + ], + ], + }); +}); + test("box-shadow", () => { const compiled = registerCSS(` .shadow-xl { diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index 3c514f2..0317b58 100644 --- a/src/compiler/declarations.ts +++ b/src/compiler/declarations.ts @@ -2580,7 +2580,10 @@ export function addTransitionValue( case "transition-property": { builder.addDescriptor( declaration.property, - declaration.value.map((v) => v.property), + declaration.value + .map((v) => v.property) + .filter((v) => v in parsers || v === "all" || v === "none") + .map((v) => toRNProperty(v)), ); return; } diff --git a/src/compiler/stylesheet.ts b/src/compiler/stylesheet.ts index 42c3e91..d4516ac 100644 --- a/src/compiler/stylesheet.ts +++ b/src/compiler/stylesheet.ts @@ -260,7 +260,11 @@ export class StylesheetBuilder { delayed || usesVariables, ); } else { - if (property.startsWith("animation-")) { + if ( + property.startsWith("animation-") || + property.startsWith("transition-") || + property === "transition" + ) { rule.a ??= true; }