Use reduce-css-calc to avoid inspecting value to negate

Author: adamwathan

__tests__/resolveConfig.test.js

@@ -1188,7 +1188,7 @@ test('custom properties are multiplied by -1 for negative values', () => {
         '-4': '-4px',
         '-foo': 'calc(var(--foo) * -1)',
         '-bar': 'calc(var(--bar, 500px) * -1)',
-        '-baz': 'calc(calc(50% - 10px) * -1)',
+        '-baz': 'calc(-50% - -10px)',
       },
     },
     variants: {},

package.json

@@ -51,7 +51,8 @@
     "postcss-js": "^2.0.0",
     "postcss-nested": "^4.1.1",
     "postcss-selector-parser": "^6.0.0",
-    "pretty-hrtime": "^1.0.3"
+    "pretty-hrtime": "^1.0.3",
+    "reduce-css-calc": "^2.1.6"
   },
   "browserslist": [
     "> 1%"

src/util/resolveConfig.js

@@ -3,7 +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'
+import reduceCalc from 'reduce-css-calc'
 
 const configUtils = {
   negative(scale) {
@@ -12,9 +12,7 @@ const configUtils = {
       .reduce(
         (negativeScale, key) => ({
           ...negativeScale,
-          [`-${key}`]: ['var(', 'calc('].some(prefix => startsWith(scale[key], prefix))
-            ? `calc(${scale[key]} * -1)`
-            : `-${scale[key]}`,
+          [`-${key}`]: reduceCalc(`calc(${scale[key]} * -1)`),
         }),
         {}
       )

yarn.lock

@@ -1475,6 +1475,11 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+css-unit-converter@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
+  integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
+
 cssesc@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
@@ -4006,6 +4011,14 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
+reduce-css-calc@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.6.tgz#050fe6ee7d98a1d70775d2e93ce0b713cee394d2"
+  integrity sha512-+l5/qlQmdsbM9h6JerJ/y5vR5Ci0k93aszLNpCmbadC3nBcbRGmIBm0s9Nj59i22LvCjTGftWzdQRwdknayxhw==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 regenerate-unicode-properties@^8.0.2:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"