diff --git a/__tests__/resolveConfig.test.js b/__tests__/resolveConfig.test.js index b30151827..62dc914bc 100644 --- a/__tests__/resolveConfig.test.js +++ b/__tests__/resolveConfig.test.js @@ -1130,3 +1130,67 @@ test('the original theme is not mutated', () => { }, }) }) + +test('custom properties are multiplied by -1 for negative values', () => { + const userConfig = { + theme: { + spacing: { + '1': '1px', + '2': '2px', + '3': '3px', + '4': '4px', + foo: 'var(--foo)', + bar: 'var(--bar, 500px)', + baz: 'calc(50% - 10px)', + }, + margin: (theme, { negative }) => ({ + ...theme('spacing'), + ...negative(theme('spacing')), + }), + }, + } + + const defaultConfig = { + prefix: '-', + important: false, + separator: ':', + theme: {}, + variants: {}, + } + + const result = resolveConfig([userConfig, defaultConfig]) + + expect(result).toEqual({ + 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(calc(50% - 10px) * -1)', + }, + }, + variants: {}, + }) +}) diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js index 3667f35bd..0b9e1f046 100644 --- a/src/util/resolveConfig.js +++ b/src/util/resolveConfig.js @@ -3,6 +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' const configUtils = { negative(scale) { @@ -11,7 +12,9 @@ const configUtils = { .reduce( (negativeScale, key) => ({ ...negativeScale, - [`-${key}`]: `-${scale[key]}`, + [`-${key}`]: ['var(', 'calc('].some(prefix => startsWith(scale[key], prefix)) + ? `calc(${scale[key]} * -1)` + : `-${scale[key]}`, }), {} )