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(
+ ,
+ ).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[] = 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) {