diff --git a/packages/system/src/style.js b/packages/system/src/style.js index 7dc7b932b..a4888c19b 100644 --- a/packages/system/src/style.js +++ b/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] diff --git a/packages/system/src/styles/space.js b/packages/system/src/styles/space.js index 915d37c73..4e29eb59f 100644 --- a/packages/system/src/styles/space.js +++ b/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 diff --git a/packages/system/src/styles/space.test.js b/packages/system/src/styles/space.test.js index 2078705f4..a33acd137 100644 --- a/packages/system/src/styles/space.test.js +++ b/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 }) diff --git a/packages/system/src/util.js b/packages/system/src/util.js index edf29e035..2c2d90d59 100644 --- a/packages/system/src/util.js +++ b/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) =>