Simplify negate value (#5389)

* simplify `negateValue`

Co-authored-by: Brad Cornes <[email protected]>

* ensure we have the exact same behaviour

* Simplify/loosen regex to be more future-proof

Co-authored-by: Brad Cornes <[email protected]>
Co-authored-by: Adam Wathan <[email protected]>

Author: 3 people

package-lock.json

@@ -86,7 +86,6 @@
     "postcss-selector-parser": "^6.0.6",
     "postcss-value-parser": "^4.1.0",
     "quick-lru": "^5.1.1",
-    "reduce-css-calc": "^2.1.8",
     "resolve": "^1.20.0",
     "tmp": "^0.2.1"
   },

package.json

@@ -1,9 +1,14 @@
-import reduceCalc from 'reduce-css-calc'
-
 export default function (value) {
-  try {
-    return reduceCalc(`calc(${value} * -1)`)
-  } catch (e) {
-    return value
+  value = `${value}`
+
+  // Flip sign of numbers
+  if (/^[+-]?(\d+|\d*\.\d+)(e[+-]?\d+)?(%|\w+)?$/.test(value)) {
+    return value.replace(/^[+-]?/, (sign) => (sign === '-' ? '' : '-'))
   }
+
+  if (value.includes('var(') || value.includes('calc(')) {
+    return `calc(${value} * -1)`
+  }
+
+  return value
 }

src/util/negateValue.js

@@ -1320,13 +1320,16 @@ test('custom properties are multiplied by -1 for negative values', () => {
   const userConfig = {
     theme: {
       spacing: {
+        0: 0,
         1: '1px',
         2: '2px',
         3: '3px',
         4: '4px',
+        auto: 'auto',
         foo: 'var(--foo)',
         bar: 'var(--bar, 500px)',
         baz: 'calc(50% - 10px)',
+        qux: '10poops',
       },
       margin: (theme, { negative }) => ({
         ...theme('spacing'),
@@ -1345,38 +1348,39 @@ test('custom properties are multiplied by -1 for negative values', () => {
 
   const result = resolveConfig([userConfig, defaultConfig])
 
-  expect(result).toMatchObject({
-    prefix: '-',
-    important: false,
-    separator: ':',
-    theme: {
-      spacing: {
-        1: '1px',
-        2: '2px',
-        3: '3px',
-        4: '4px',
-        foo: 'var(--foo)',
-        bar: 'var(--bar, 500px)',
-        baz: 'calc(50% - 10px)',
-      },
-      margin: {
-        1: '1px',
-        2: '2px',
-        3: '3px',
-        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(-50% - -10px)',
-      },
-    },
-    variants: {},
+  expect(result.theme.spacing).toEqual({
+    0: 0,
+    1: '1px',
+    2: '2px',
+    3: '3px',
+    4: '4px',
+    auto: 'auto',
+    foo: 'var(--foo)',
+    bar: 'var(--bar, 500px)',
+    baz: 'calc(50% - 10px)',
+    qux: '10poops',
+  })
+  expect(result.theme.margin).toEqual({
+    0: 0,
+    1: '1px',
+    2: '2px',
+    3: '3px',
+    4: '4px',
+    auto: 'auto',
+    foo: 'var(--foo)',
+    bar: 'var(--bar, 500px)',
+    baz: 'calc(50% - 10px)',
+    qux: '10poops',
+    '-0': '-0',
+    '-1': '-1px',
+    '-2': '-2px',
+    '-3': '-3px',
+    '-4': '-4px',
+    '-auto': 'auto',
+    '-foo': 'calc(var(--foo) * -1)',
+    '-bar': 'calc(var(--bar, 500px) * -1)',
+    '-baz': 'calc(calc(50% - 10px) * -1)',
+    '-qux': '-10poops',
   })
 })