fix: support negative values from theme objects

Fixes #27

Author: gregberge

packages/emotion/src/styled.test.js

@@ -52,6 +52,23 @@ describe('#styled', () => {
     expect(container.firstChild).toHaveStyle('color: pink;')
   })
 
+  it('handles negative values', () => {
+    const theme = {
+      space: {
+        md: 10,
+      },
+    }
+    const Dummy = styled.div`
+      margin: -md;
+    `
+    const { container } = render(
+      <ThemeProvider theme={theme}>
+        <Dummy />
+      </ThemeProvider>,
+    )
+    expect(container.firstChild).toHaveStyle('margin: -10px;')
+  })
+
   it('works with css as object', () => {
     const Dummy = styled.div({
       margin: '2',

packages/styled-components/src/styled.test.js

@@ -52,6 +52,23 @@ describe('#styled', () => {
     expect(container.firstChild).toHaveStyle('color: pink;')
   })
 
+  it('handles negative values', () => {
+    const theme = {
+      space: {
+        md: 10,
+      },
+    }
+    const Dummy = styled.div`
+      margin: -md;
+    `
+    const { container } = render(
+      <ThemeProvider theme={theme}>
+        <Dummy />
+      </ThemeProvider>,
+    )
+    expect(container.firstChild).toHaveStyle('margin: -10px;')
+  })
+
   it('works with css as object', () => {
     const Dummy = styled.div({
       margin: '2',

packages/system/src/styles/space.js

@@ -1,21 +1,27 @@
 import { style, themeGetter, compose } from '../style'
-import { num, negative } from '../util'
+import { is, string, negative } from '../util'
 import { px as pxUnit } from '../unit'
 
+function toNegative(value) {
+  if (string(value)) return `-${value}`
+  return value * -1
+}
+
 export const getSpace = themeGetter({
   key: 'space',
   defaultVariants: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240],
   transform: (_, { rawValue, variants }) => {
-    if (!num(rawValue)) {
-      return variants[rawValue] || rawValue
+    if (string(rawValue)) {
+      const neg = rawValue.startsWith('-')
+      const variantKey = neg ? rawValue.substr(1) : rawValue
+      const variantValue = variants[variantKey]
+      const value = is(variantValue) ? variantValue : rawValue
+      return pxUnit(neg ? toNegative(value) : value)
     }
     const abs = Math.abs(rawValue)
     const neg = negative(rawValue)
-    const value = variants[abs] || abs
-    if (!num(value)) {
-      return pxUnit(neg ? `-${value}` : value)
-    }
-    return pxUnit(value * (neg ? -1 : 1))
+    const value = is(variants[abs]) ? variants[abs] : abs
+    return pxUnit(neg ? toNegative(value) : value)
   },
 })
 

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

@@ -20,6 +20,12 @@ describe('#getSpace', () => {
     expect(getSpace(-10)(props)).toEqual('-10px')
     expect(getSpace('50%')(props)).toEqual('50%')
   })
+
+  it('gets objects value from the theme', () => {
+    const props = { theme: { space: { md: 10 } } }
+    expect(getSpace('md')(props)).toEqual('10px')
+    expect(getSpace('-md')(props)).toEqual('-10px')
+  })
 })
 
 describe('#space', () => {