fix(system): fix issue with space utilities (#97)

Author: gregberge

packages/system/src/style.js

@@ -1,5 +1,5 @@
 import { minBreakpoint, minWidth, DEFAULT_BREAKPOINTS } from './media'
-import { is, num, string, obj, identity, merge, get, func } from './util'
+import { is, num, string, obj, merge, get, func } from './util'
 
 function callOrReturn(fn, arg) {
   if (!func(fn)) return fn
@@ -28,7 +28,12 @@ function styleFromValue(cssProperties, value, theme, themeKey, transform) {
   if (string(computedValue) || num(computedValue)) {
     const style = {}
     for (let i = 0; i < cssProperties.length; i++) {
-      style[cssProperties[i]] = transform(computedValue, variants)
+      style[cssProperties[i]] = transform
+        ? transform(computedValue, {
+            rawValue: value,
+            variants,
+          })
+        : computedValue
     }
     return style
   }
@@ -112,7 +117,7 @@ export function style({
   prop,
   cssProperties,
   themeKey = null,
-  transform = identity,
+  transform = null,
 }) {
   function getStyle(attrs, theme) {
     const value = attrs[prop]

packages/system/src/styles/space.js

@@ -3,12 +3,12 @@ import { num, negative } from '../util'
 
 const DEFAULT_SPACING = [0, 8, 16, 24, 32, 40, 48, 56, 64, 72]
 
-function transform(n, variants = DEFAULT_SPACING) {
-  if (!num(n)) {
-    return variants[n] || n
+function transform(transformedValue, { rawValue, variants = DEFAULT_SPACING }) {
+  if (!num(rawValue)) {
+    return variants[rawValue] || rawValue
   }
-  const abs = Math.abs(n)
-  const neg = negative(n)
+  const abs = Math.abs(rawValue)
+  const neg = negative(rawValue)
   const value = variants[abs] || abs
   if (!num(value)) {
     return neg ? `-${value}` : value

packages/system/src/styles/space.test.js

@@ -2,6 +2,7 @@ import { space } from './space'
 
 describe('space', () => {
   it('should support m', () => {
+    expect(space.props({ m: 1 })).toEqual({ margin: 8 })
     expect(space.props({ m: 2 })).toEqual({ margin: 16 })
     expect(space.props({ m: -2 })).toEqual({ margin: -16 })
     expect(space.props({ m: 10 })).toEqual({ margin: 10 })

packages/system/src/util.js

@@ -5,7 +5,6 @@ export const num = n => typeof n === 'number' && !Number.isNaN(n)
 export const string = n => typeof n === 'string' && n !== ''
 export const obj = n => typeof n === 'object' && n !== null
 export const func = n => typeof n === 'function'
-export const identity = n => n
 export const negative = n => n < 0
 
 export const get = (obj, path) =>