fix(system): fix rpx transformers

Fix #274

Author: gregberge

packages/system/src/transformers.test.ts

@@ -10,6 +10,7 @@ describe('#rpxTransformers', () => {
     const remProps = { theme: { transformers: { ...rpxTransformers } } }
     expect(th.space(1)(remProps)).toBe('0.0625rem')
     expect(th.space(2)(remProps)).toBe('0.125rem')
+    expect(th.space(200)(remProps)).toBe('12.5rem')
     expect(th.border(2)(remProps)).toBe('0.125rem solid')
   })
 })

packages/system/src/unit.test.ts

@@ -6,7 +6,6 @@ describe('unit', () => {
       const em = unit('em')
       expect(em(0)).toBe(0)
       expect(em(10)).toBe('10em')
-      expect(em(null)).toBe(null)
       expect(em(undefined)).toBe(undefined)
       expect(em('10px')).toBe('10px')
     })
@@ -16,7 +15,6 @@ describe('unit', () => {
     it('adds px if it is a number', () => {
       expect(px(0)).toBe(0)
       expect(px(10)).toBe('10px')
-      expect(px(null)).toBe(null)
       expect(px(undefined)).toBe(undefined)
       expect(px('10px')).toBe('10px')
     })

packages/system/src/unit.ts

@@ -21,8 +21,14 @@ const pxToRem = (
   { rootFontSize = 16 }: PxToRemOptions = {},
 ): number => round(value / rootFontSize)
 
-export const remPx = (value: CSSScalar, options?: PxToRemOptions): CSSScalar =>
-  num(value) && value !== 0 ? `${pxToRem(value, options)}rem` : value
+export const remPx = (
+  value: CSSScalar,
+  options?: PxToRemOptions,
+): CSSScalar => {
+  const num = Number(value)
+  if (Number.isNaN(num) || num === 0) return value
+  return `${pxToRem(num, options)}rem`
+}
 
 export const rpx = (value: CSSScalar, options?: PxToRemOptions): CSSScalar => {
   if (!string(value) || value.length < 4) return value