From b6d97c98df96fbb72101e9e6a6218770666ae5c7 Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Tue, 19 Aug 2025 11:51:42 +1000
Subject: [PATCH] fix: more fixes for unparsed transform values

---
 .../native/__tests__/transform.test.tsx       | 17 +++++++++++++
 src/runtime/utils/objects.ts                  | 25 ++++++-------------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/runtime/native/__tests__/transform.test.tsx b/src/runtime/native/__tests__/transform.test.tsx
index d3fd7cb..6ec3c08 100644
--- a/src/runtime/native/__tests__/transform.test.tsx
+++ b/src/runtime/native/__tests__/transform.test.tsx
@@ -44,6 +44,23 @@ describe("scale", () => {
   });
 
   test("unparsed", () => {
+    registerCSS(`
+      .my-class { 
+        --scale-x: 2%;
+        --scale-y: 2%;
+        scale: var(--scale-x) var(--scale-y); 
+      }
+    `);
+    const component = render(
+      <View testID={testID} className="my-class" />,
+    ).getByTestId(testID);
+
+    expect(component.props.style).toStrictEqual({
+      transform: [{ scale: "2%" }],
+    });
+  });
+
+  test("unparsed - different values", () => {
     registerCSS(`
       :root {
         --scale-x: 2;
diff --git a/src/runtime/utils/objects.ts b/src/runtime/utils/objects.ts
index 6abe711..d7c5d21 100644
--- a/src/runtime/utils/objects.ts
+++ b/src/runtime/utils/objects.ts
@@ -66,25 +66,14 @@ export function applyValue(
     }
 
     const transformArray: Record<string, unknown>[] = target.transform;
-    const transform = transformArray.find((t: any) => t[prop] !== undefined);
-
-    /**
-     * If our value is an array, this means a shorthand was split into multiple values
-     * e.g scale -> scaleX, scaleY
-     */
-    if (transform) {
-      if (Array.isArray(value)) {
-        target.transform = transformArray.filter((t) => !(prop in t));
-        target.transform.push(...value);
-      } else {
-        transform[prop] = value;
-      }
+
+    // Remove any existing values
+    target.transform = transformArray.filter((t) => !(prop in t));
+
+    if (Array.isArray(value)) {
+      target.transform.push(...value);
     } else {
-      if (Array.isArray(value)) {
-        transformArray.push(...value);
-      } else {
-        transformArray.push(value);
-      }
+      target.transform.push(value);
     }
     return;
   } else if (typeof value === "object" && value && ShortHandSymbol in value) {