Add support for negative calc values

DaniDror · Aug 1, 2019 · d3675eb · d3675eb
1 parent 03b73b1
commit d3675eb
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git 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
@@ -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]}`,
         }),