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

Author: BobbieGoede

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}) `
 

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

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)')
+  })
 })