Merge pull request #865 from kenny-f/space-object-negative-lookup

Allow negative theme lookup of space objects

Author: jxnblk

packages/css/src/index.ts

@@ -130,6 +130,11 @@ type Scales = typeof scales
 
 const positiveOrNegative = (scale: object, value: string | number) => {
   if (typeof value !== 'number' || value >= 0) {
+    if (typeof value === 'string' && value.startsWith('-')) {
+      const valueWithoutMinus = value.substring(1)
+      const n = get(scale, valueWithoutMinus, valueWithoutMinus)
+      return `-${n}`
+    }
     return get(scale, value, value)
   }
   const absolute = Math.abs(value)

packages/css/test/index.ts

@@ -262,6 +262,18 @@ test('handles negative top, left, bottom, and right from scale', () => {
   })
 })
 
+test('handles negative margins from scale that is an object', () => {
+  const result = css({
+    mt: '-s',
+    mx: '-m',
+  })({...theme, space: { s: '16px', m: '32px' }})
+  expect(result).toEqual({
+    marginTop: '-16px',
+    marginLeft: '-32px',
+    marginRight: '-32px',
+  })
+})
+
 test('skip breakpoints', () => {
   const result = css({
     width: ['100%', , '50%'],