css: add support for negative margins

Author: jxnblk

packages/css/index.js

@@ -18,17 +18,20 @@ const aliases = {
   mr: 'marginRight',
   mb: 'marginBottom',
   ml: 'marginLeft',
-  mx: [ 'marginLeft', 'marginRight' ],
-  my: [ 'marginTop', 'marginBottom' ],
-  marginX: [ 'marginLeft', 'marginRight' ],
-  marginY: [ 'marginTop', 'marginBottom' ],
+  mx: 'marginX',
+  my: 'marginY',
   p: 'padding',
   pt: 'paddingTop',
   pr: 'paddingRight',
   pb: 'paddingBottom',
   pl: 'paddingLeft',
-  px: [ 'paddingLeft', 'paddingRight' ],
-  py: [ 'paddingTop', 'paddingBottom' ],
+  px: 'paddingX',
+  py: 'paddingY',
+}
+
+const directions = {
+  marginX: [ 'marginLeft', 'marginRight' ],
+  marginY: [ 'marginTop', 'marginBottom' ],
   paddingX: [ 'paddingLeft', 'paddingRight' ],
   paddingY: [ 'paddingTop', 'paddingBottom' ],
 }
@@ -42,11 +45,15 @@ const scales = {
   marginRight: 'space',
   marginBottom: 'space',
   marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
   padding: 'space',
   paddingTop: 'space',
   paddingRight: 'space',
   paddingBottom: 'space',
   paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
   fontFamily: 'fonts',
   fontSize: 'fontSizes',
   fontWeight: 'fontWeights',
@@ -74,6 +81,26 @@ const scales = {
   maxHeight: 'sizes',
 }
 
+const getMargin = (scale, value) => {
+  if (typeof value !== 'number' || value >= 0) {
+    return get(scale, value, value)
+  }
+  const absolute = Math.abs(value)
+  const n = get(scale, absolute, absolute)
+  if (typeof n === 'string') return '-' + n
+  return n * -1
+}
+
+const transforms = {
+  margin: getMargin,
+  marginTop: getMargin,
+  marginRight: getMargin,
+  marginBottom: getMargin,
+  marginLeft: getMargin,
+  marginX: getMargin,
+  marginY: getMargin,
+}
+
 export const responsive = styles => theme => {
   const next = {}
   const breakpoints = get(theme, 'breakpoints', [ '40em', '52em', '64em' ])
@@ -106,8 +133,8 @@ export const css = args => (props = {}) => {
   const styles = responsive(obj)(theme)
 
   for (const key in styles) {
-    const prop = aliases[key] || key
-    const scaleName = scales[prop] || scales[prop[0]]
+    const prop = get(aliases, key, key)
+    const scaleName = get(scales, prop)
     const scale = get(theme, scaleName, get(theme, prop, {}))
     const x = styles[key]
     const val = typeof x === 'function' ? x(theme) : x
@@ -120,10 +147,13 @@ export const css = args => (props = {}) => {
       result[prop] = css(val)(theme)
       continue
     }
-    const value = get(scale, val, val)
-    if (Array.isArray(prop)) {
-      for (let i = 0; i < prop.length; i++) {
-        result[prop[i]] = value
+    const transform = get(transforms, prop, get)
+    const value = transform(scale, val, val)
+    if (directions[prop]) {
+      // if (Array.isArray(prop)) {
+      const dirs = directions[prop]
+      for (let i = 0; i < dirs.length; i++) {
+        result[dirs[i]] = value
       }
     } else {
       result[prop] = value

packages/css/test.js

@@ -217,3 +217,15 @@ test('handles responsive variants', t => {
     }
   })
 })
+
+test('handles negative margins from scale', t => {
+  const result = css({
+    mt: -3,
+    mx: -4,
+  })(theme)
+  t.deepEqual(result, {
+    marginTop: -16,
+    marginLeft: -32,
+    marginRight: -32,
+  })
+})