From 0abe4d0b56aaae4024fcdf0b942acf6bf471cb5e Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Thu, 30 May 2024 16:18:00 +0200
Subject: [PATCH] fix: `x`, `y`, `z` not accepting relative units (#195)

* fix: `x`, `y`, `z` not accepting relative units

* chore: fix lint errors

* refactor: use `getValueAsType` function

* test: add relative unit test
---
 src/reactiveTransform.ts        |  4 +++-
 src/utils/style.ts              |  2 +-
 tests/reactiveTransform.spec.ts | 11 +++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/reactiveTransform.ts b/src/reactiveTransform.ts
index 35bc10e9..1323caa2 100644
--- a/src/reactiveTransform.ts
+++ b/src/reactiveTransform.ts
@@ -34,7 +34,9 @@ export function reactiveTransform(props: TransformProperties = {}, enableHardwar
       // Use translate3d by default has a better GPU optimization
       // And corrects scaling discrete behaviors
       if (enableHardwareAcceleration && (newVal.x || newVal.y || newVal.z)) {
-        const str = [newVal.x || 0, newVal.y || 0, newVal.z || 0].map(px.transform as any).join(',')
+        const str = [newVal.x || 0, newVal.y || 0, newVal.z || 0]
+          .map(val => getValueAsType(val, px))
+          .join(',')
 
         result += `translate3d(${str}) `
 
diff --git a/src/utils/style.ts b/src/utils/style.ts
index 645f4cc4..db036b44 100644
--- a/src/utils/style.ts
+++ b/src/utils/style.ts
@@ -113,7 +113,7 @@ export const valueTypes: ValueTypeMap = {
 export const getValueType = (key: string) => valueTypes[key]
 
 /**
- * Transform the value using its value type, or return the value.
+ * Transform the value using its value type if value is a `number`, otherwise return the value.
  *
  * @param value
  * @param type
diff --git a/tests/reactiveTransform.spec.ts b/tests/reactiveTransform.spec.ts
index 4e33e56f..a51cad13 100644
--- a/tests/reactiveTransform.spec.ts
+++ b/tests/reactiveTransform.spec.ts
@@ -51,4 +51,15 @@ describe('reactiveTransform', () => {
 
     expect(transform.value).toBe('rotateX(90deg) translateZ(0px)')
   })
+
+  it('accepts relative units when hardware acceleration is enabled', () => {
+    const { transform } = reactiveTransform(
+      {
+        y: '100%',
+      },
+      true,
+    )
+
+    expect(transform.value).toBe('translate3d(0px,100%,0px)')
+  })
 })