From d3675ebd23da778f67f6149eb1d453acc4557ece Mon Sep 17 00:00:00 2001 From: Ari Seyhun Date: Thu, 1 Aug 2019 13:32:10 +0930 Subject: [PATCH] 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]}`, }),