Ignore values not parseable by reduce-css-calc

Author: adamwathan

__tests__/negateValue.test.js

@@ -0,0 +1,14 @@
+import negateValue from '../src/util/negateValue'
+
+test('it negates numeric CSS values', () => {
+  expect(negateValue('5')).toEqual('-5')
+  expect(negateValue('10px')).toEqual('-10px')
+  expect(negateValue('18rem')).toEqual('-18rem')
+  expect(negateValue('-10')).toEqual('10')
+  expect(negateValue('-7ch')).toEqual('7ch')
+})
+
+test('it leaves keywords untouched', () => {
+  expect(negateValue('auto')).toEqual('auto')
+  expect(negateValue('cover')).toEqual('cover')
+})

src/util/negateValue.js

@@ -0,0 +1,9 @@
+import reduceCalc from 'reduce-css-calc'
+
+export default function(value) {
+  try {
+    return reduceCalc(`calc(${value} * -1)`)
+  } catch (e) {
+    return value
+  }
+}

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