fix: transitions (#39)

Author: marklawlor

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;

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 {

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;
     }

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;
       }