From c3075d97fe044bb47246e68445187c4a7bed1d15 Mon Sep 17 00:00:00 2001
From: Ari Seyhun <ariseyhun@Aris-MBP.localdomain>
Date: Thu, 1 Aug 2019 12:57:46 +0930
Subject: [PATCH 1/3] Add support for negative css custom properties

---
 src/util/resolveConfig.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
index 3667f35bd..bda17223d 100644
--- a/src/util/resolveConfig.js
+++ b/src/util/resolveConfig.js
@@ -3,6 +3,7 @@ import isFunction from 'lodash/isFunction'
 import defaults from 'lodash/defaults'
 import map from 'lodash/map'
 import toPath from 'lodash/toPath'
+import startsWith from 'lodash/startsWith'
 
 const configUtils = {
   negative(scale) {
@@ -11,7 +12,9 @@ const configUtils = {
       .reduce(
         (negativeScale, key) => ({
           ...negativeScale,
-          [`-${key}`]: `-${scale[key]}`,
+          [`-${key}`]: startsWith(scale[key], 'var(')
+            ? `calc(${scale[key]} * -1)`
+            : `-${scale[key]}`,
         }),
         {}
       )

From 03b73b135d58d138e1982b8f3c82c9d3b8724b7d Mon Sep 17 00:00:00 2001
From: Ari Seyhun <ariseyhun@Aris-MBP.localdomain>
Date: Thu, 1 Aug 2019 13:16:11 +0930
Subject: [PATCH 2/3] Add test for negative custom properties

---
 __tests__/resolveConfig.test.js | 60 +++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/__tests__/resolveConfig.test.js b/__tests__/resolveConfig.test.js
index b30151827..2ca9ff9e3 100644
--- a/__tests__/resolveConfig.test.js
+++ b/__tests__/resolveConfig.test.js
@@ -1130,3 +1130,63 @@ test('the original theme is not mutated', () => {
     },
   })
 })
+
+test('custom properties are multiplied by -1 for negative values', () => {
+  const userConfig = {
+    theme: {
+      spacing: {
+        '1': '1px',
+        '2': '2px',
+        '3': '3px',
+        '4': '4px',
+        foo: 'var(--foo)',
+        bar: 'var(--bar, 500px)',
+      },
+      margin: (theme, { negative }) => ({
+        ...theme('spacing'),
+        ...negative(theme('spacing')),
+      }),
+    },
+  }
+
+  const defaultConfig = {
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {},
+    variants: {},
+  }
+
+  const result = resolveConfig([userConfig, defaultConfig])
+
+  expect(result).toEqual({
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      spacing: {
+        '1': '1px',
+        '2': '2px',
+        '3': '3px',
+        '4': '4px',
+        foo: 'var(--foo)',
+        bar: 'var(--bar, 500px)',
+      },
+      margin: {
+        '1': '1px',
+        '2': '2px',
+        '3': '3px',
+        '4': '4px',
+        foo: 'var(--foo)',
+        bar: 'var(--bar, 500px)',
+        '-1': '-1px',
+        '-2': '-2px',
+        '-3': '-3px',
+        '-4': '-4px',
+        '-foo': 'calc(var(--foo) * -1)',
+        '-bar': 'calc(var(--bar, 500px) * -1)',
+      },
+    },
+    variants: {},
+  })
+})

From d3675ebd23da778f67f6149eb1d453acc4557ece Mon Sep 17 00:00:00 2001
From: Ari Seyhun <ariseyhun@Aris-MBP.localdomain>
Date: Thu, 1 Aug 2019 13:32:10 +0930
Subject: [PATCH 3/3] Add support for negative calc values

---
 __tests__/resolveConfig.test.js | 4 ++++
 src/util/resolveConfig.js       | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/__tests__/resolveConfig.test.js b/__tests__/resolveConfig.test.js
index 2ca9ff9e3..62dc914bc 100644
--- a/__tests__/resolveConfig.test.js
+++ b/__tests__/resolveConfig.test.js
@@ -1141,6 +1141,7 @@ test('custom properties are multiplied by -1 for negative values', () => {
         '4': '4px',
         foo: 'var(--foo)',
         bar: 'var(--bar, 500px)',
+        baz: 'calc(50% - 10px)',
       },
       margin: (theme, { negative }) => ({
         ...theme('spacing'),
@@ -1171,6 +1172,7 @@ test('custom properties are multiplied by -1 for negative values', () => {
         '4': '4px',
         foo: 'var(--foo)',
         bar: 'var(--bar, 500px)',
+        baz: 'calc(50% - 10px)',
       },
       margin: {
         '1': '1px',
@@ -1179,12 +1181,14 @@ test('custom properties are multiplied by -1 for negative values', () => {
         '4': '4px',
         foo: 'var(--foo)',
         bar: 'var(--bar, 500px)',
+        baz: 'calc(50% - 10px)',
         '-1': '-1px',
         '-2': '-2px',
         '-3': '-3px',
         '-4': '-4px',
         '-foo': 'calc(var(--foo) * -1)',
         '-bar': 'calc(var(--bar, 500px) * -1)',
+        '-baz': 'calc(calc(50% - 10px) * -1)',
       },
     },
     variants: {},
diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
index bda17223d..0b9e1f046 100644
--- a/src/util/resolveConfig.js
+++ b/src/util/resolveConfig.js
@@ -12,7 +12,7 @@ const configUtils = {
       .reduce(
         (negativeScale, key) => ({
           ...negativeScale,
-          [`-${key}`]: startsWith(scale[key], 'var(')
+          [`-${key}`]: ['var(', 'calc('].some(prefix => startsWith(scale[key], prefix))
             ? `calc(${scale[key]} * -1)`
             : `-${scale[key]}`,
         }),