fix: transform shorthands

src/__tests__/vendor/tailwind.test.tsx

@@ -87,7 +87,7 @@ test("transition", () => {
       ["default-transition-duration", [[150]]],
       [
         "default-transition-timing-function",
-        [[[{}, "cubic-bezier", [0.4, 0, 0.2, 1]]]],
+        [[[{}, "cubicBezier", [0.4, 0, 0.2, 1]]]],
       ],
     ],
   });
@@ -117,7 +117,7 @@ test("box-shadow", () => {
               [
                 [
                   {},
-                  "@boxShadow",
+                  "boxShadow",
                   [
                     [{}, "var", "tw-inset-shadow", 1],
                     [{}, "var", "tw-inset-ring-shadow", 1],
@@ -268,7 +268,7 @@ test("filter", () => {
                 "tw-drop-shadow-size",
                 [
                   {},
-                  "drop-shadow",
+                  "dropShadow",
                   [
                     0,
                     3,
@@ -279,7 +279,7 @@ test("filter", () => {
               ],
               [
                 "tw-drop-shadow",
-                [{}, "drop-shadow", [{}, "var", "drop-shadow-md", 1]],
+                [{}, "dropShadow", [{}, "var", "drop-shadow-md", 1]],
               ],
             ],
           },

src/compiler/declarations.ts

@@ -62,12 +62,16 @@ const propertyRename: Record<string, string> = {
   "background-image": "experimental_backgroundImage",
 };
 
+// TODO: We need a better way to handle this
 const unparsedRuntimeParsing = new Set([
   "animation",
+  "border",
+  "box-shadow",
   "text-shadow",
   "transform",
-  "box-shadow",
-  "border",
+  "scale",
+  "rotate",
+  "translate",
 ]);
 
 const parsers: {
@@ -666,22 +670,22 @@ function parseTransform(
 ) {
   builder.addDescriptor("transform", [
     {},
-    "@transform",
+    "transform",
     value.flatMap((t): StyleDescriptor[] => {
       switch (t.type) {
         case "perspective":
-          return [[{}, "@perspective", parseLength(t.value, builder)]];
+          return [[{}, "perspective", parseLength(t.value, builder)]];
         case "translate":
           return [
             [
               {},
-              "@translateX",
+              "translateX",
               parseLengthOrCoercePercentageToRuntime(t.value[0], builder),
             ],
             [
               [
                 {},
-                "@translateY",
+                "translateY",
                 parseLengthOrCoercePercentageToRuntime(t.value[1], builder),
               ],
             ],
@@ -690,30 +694,30 @@ function parseTransform(
           return [
             [
               {},
-              "@translateX",
+              "translateX",
               parseLengthOrCoercePercentageToRuntime(t.value, builder),
             ],
           ];
         case "translateY":
           return [
             [
               {},
-              "@translateY",
+              "translateY",
               parseLengthOrCoercePercentageToRuntime(t.value, builder),
             ],
           ];
         case "rotate":
-          return [[{}, "@rotate", parseAngle(t.value, builder)]];
+          return [[{}, "rotate", parseAngle(t.value, builder)]];
         case "rotateX":
-          return [[{}, "@rotateX", parseAngle(t.value, builder)]];
+          return [[{}, "rotateX", parseAngle(t.value, builder)]];
         case "rotateY":
-          return [[{}, "@rotateY", parseAngle(t.value, builder)]];
+          return [[{}, "rotateY", parseAngle(t.value, builder)]];
         case "rotateZ":
-          return [[{}, "@rotateZ", parseAngle(t.value, builder)]];
+          return [[{}, "rotateZ", parseAngle(t.value, builder)]];
         case "scale":
           return [
-            [{}, "@scaleX", parseLength(t.value[0], builder)],
-            [{}, "@scaleY", parseLength(t.value[1], builder)],
+            [{}, "scaleX", parseLength(t.value[0], builder)],
+            [{}, "scaleY", parseLength(t.value[1], builder)],
           ];
         case "scaleX":
           return [[{}, "scaleX", parseLength(t.value, builder)]];
@@ -915,18 +919,9 @@ export function parseUnparsedDeclaration(
     const args = parseUnparsed(declaration.value.value, builder, property);
 
     if (property === "animation") {
-      builder.addDescriptor("animation", [
-        {},
-        `@${toRNProperty(property)}`,
-        args,
-      ]);
+      builder.addDescriptor("animation", [{}, property, args]);
     } else {
-      builder.addDescriptor(property, [
-        {},
-        `@${toRNProperty(property)}`,
-        args,
-        1,
-      ]);
+      builder.addDescriptor(property, [{}, toRNProperty(property), args, 1]);
     }
   } else {
     const value = parseUnparsed(declaration.value.value, builder, property);
@@ -1040,7 +1035,7 @@ export function unparsedFunction(
 ): StyleFunction {
   return [
     {},
-    token.value.name,
+    toRNProperty(token.value.name),
     reduceParseUnparsed(token.value.arguments, builder, property, allowAuto),
   ];
 }
@@ -1129,7 +1124,6 @@ export function parseUnparsed(
         case "scaleY":
         case "translateX":
         case "translateY":
-          tokenOrValue.value.name = `@${tokenOrValue.value.name}`;
           return unparsedFunction(tokenOrValue, builder, property, allowAuto);
         case "blur":
         case "brightness":
@@ -2959,7 +2953,7 @@ function parseGradient(
     case "linear": {
       return [
         {},
-        "@linear-gradient",
+        "linear-gradient",
         [
           parseLineDirection(gradient.direction, builder),
           ...gradient.items.map((item) => parseGradientItem(item, builder)),
@@ -3036,6 +3030,16 @@ function parseFilter(
             [value.type]: parseAngle(value.value, builder),
           } as unknown as StyleDescriptor;
         case "drop-shadow":
+          return [
+            {},
+            toRNProperty(value.type),
+            [
+              parseLength(value.value.xOffset, builder),
+              parseLength(value.value.yOffset, builder),
+              parseLength(value.value.blur, builder),
+              parseColor(value.value.color, builder),
+            ],
+          ] as unknown as StyleDescriptor;
         case "url":
           return;
       }

src/compiler/keyframes.ts

@@ -30,7 +30,7 @@ export function parseEasingFunction(
       case "cubic-bezier":
         return [
           {},
-          "cubic-bezier",
+          "cubicBezier",
           [value.x1, value.y1, value.x2, value.y2],
         ] as const;
       case "steps":

src/compiler/stylesheet.ts

@@ -342,7 +342,10 @@ export class StylesheetBuilder {
       const [delayed, usesVariables] = postProcessStyleFunction(value);
 
       rule.d ??= [];
-      if (value[1] === "@animation") {
+      if (
+        value[1].startsWith("animation") ||
+        value[1].startsWith("transition")
+      ) {
         rule.a ??= true;
       }
 

src/jest/index.ts

@@ -34,8 +34,9 @@ export function registerCSS(
   css: string,
   options: CompilerOptions & { debug?: boolean } = {},
 ) {
-  const { debug } = options;
+  const { debug = debugDefault } = options;
   const compiled = compileWithAutoDebug(css, options);
+
   if (debug) {
     console.log(
       `Compiled:\n---\n${inspect(

src/runtime/native/__tests__/transform.test.tsx

@@ -2,14 +2,61 @@ import { render } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
 
-test("translate", () => {
-  registerCSS(`.my-class { translate: 10%; }`);
-  const component = render(
-    <View testID={testID} className="my-class" />,
-  ).getByTestId(testID);
-
-  expect(component.props.style).toStrictEqual({
-    transform: [{ translateX: "10%" }, { translateY: 0 }],
+describe("translate", () => {
+  test("parsed", () => {
+    registerCSS(`.my-class { translate: 10%; }`);
+    const component = render(
+      <View testID={testID} className="my-class" />,
+    ).getByTestId(testID);
+
+    expect(component.props.style).toStrictEqual({
+      transform: [{ translateX: "10%" }, { translateY: 0 }],
+    });
+  });
+
+  test("unparsed", () => {
+    registerCSS(`
+      :root {
+        --translate-x: 2;
+        --translate-y: 3;
+      }
+      .my-class { translate: var(--translate-x) var(--translate-y); }`);
+    const component = render(
+      <View testID={testID} className="my-class" />,
+    ).getByTestId(testID);
+
+    expect(component.props.style).toStrictEqual({
+      transform: [{ translateX: 2 }, { translateY: 3 }],
+    });
+  });
+});
+
+describe("scale", () => {
+  test("parsed", () => {
+    registerCSS(`.my-class { scale: 2 3; }`);
+    const component = render(
+      <View testID={testID} className="my-class" />,
+    ).getByTestId(testID);
+
+    expect(component.props.style).toStrictEqual({
+      transform: [{ scaleX: 2 }, { scaleY: 3 }],
+    });
+  });
+
+  test("unparsed", () => {
+    registerCSS(`
+      :root {
+        --scale-x: 2;
+        --scale-y: 3;
+      }
+      .my-class { scale: var(--scale-x) var(--scale-y); }`);
+    const component = render(
+      <View testID={testID} className="my-class" />,
+    ).getByTestId(testID);
+
+    expect(component.props.style).toStrictEqual({
+      transform: [{ scaleX: 2 }, { scaleY: 3 }],
+    });
   });
 });
 
@@ -77,4 +124,16 @@ describe("transform", () => {
       transform: [{ translateX: "20%" }],
     });
   });
+
+  test("multiple", () => {
+    registerCSS(`.my-class { transform: translateX(10%) scaleX(2); }`);
+
+    const component = render(
+      <View testID={testID} className="my-class" />,
+    ).getByTestId(testID);
+
+    expect(component.props.style).toStrictEqual({
+      transform: [{ translateX: "10%" }, { scaleX: 2 }],
+    });
+  });
 });

src/runtime/native/react/useNativeCss.ts

@@ -20,8 +20,8 @@ import {
   type Getter,
   type VariableContextValue,
 } from "../reactivity";
+import { animatedComponentFamily } from "../reanimated";
 import { getStyledProps, stylesFamily } from "../styles";
-import { animatedComponentFamily } from "../styles/animation";
 import { updateRules } from "./rules";
 
 export type Config = {

src/runtime/native/reanimated.ts

@@ -0,0 +1,22 @@
+import type { ComponentType } from "react";
+
+import { weakFamily } from "./reactivity";
+
+export const animatedComponentFamily = weakFamily(
+  (component: ComponentType) => {
+    if (
+      "displayName" in component &&
+      component.displayName?.startsWith("Animated.")
+    ) {
+      return component;
+    }
+
+    const createAnimatedComponent =
+      // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-member-access
+      require("react-native-reanimated").createAnimatedComponent as (
+        component: ComponentType,
+      ) => ComponentType;
+
+    return createAnimatedComponent(component);
+  },
+);

src/runtime/native/styles/calculate-props.ts

@@ -4,7 +4,7 @@ import type {
   StyleDeclaration,
   StyleRule,
 } from "../../../compiler";
-import { applyValue, Specificity as S } from "../../utils";
+import { applyValue, getDeepPath, Specificity as S } from "../../utils";
 import type { RenderGuard } from "../conditions/guards";
 import {
   VAR_SYMBOL,
@@ -147,9 +147,10 @@ export function applyDeclarations(
          * mutate the props object and not create a new one
          */
         const originalValue = value;
-        value = {};
+        // This needs to be a object with the [prop] so we can discover in transform arrays
+        value = { [prop]: true };
         delayedStyles.push(() => {
-          if (target[prop] === value) {
+          if (getDeepPath(target, prop) === value) {
             delete target[prop];
             value = resolveValue(originalValue, get, {
               inlineVariables,

src/runtime/native/styles/defaults.ts

@@ -1,5 +1,6 @@
 /* eslint-disable */
 export const transformKeys = new Set([
+  "translate",
   "translateX",
   "translateY",
   "scale",