diff --git a/package-lock.json b/package-lock.json index 678a8e84f..9bd32c176 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,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" }, @@ -3667,11 +3666,6 @@ "node": ">=0.10.0" } }, - "node_modules/css-unit-converter": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz", - "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==" - }, "node_modules/css-what": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz", @@ -8731,20 +8725,6 @@ "node": ">=0.10" } }, - "node_modules/reduce-css-calc": { - "version": "2.1.8", - "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz", - "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==", - "dependencies": { - "css-unit-converter": "^1.1.1", - "postcss-value-parser": "^3.3.0" - } - }, - "node_modules/reduce-css-calc/node_modules/postcss-value-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" - }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -13077,11 +13057,6 @@ } } }, - "css-unit-converter": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz", - "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==" - }, "css-what": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz", @@ -16841,22 +16816,6 @@ "readable-stream": "^2.0.2" } }, - "reduce-css-calc": { - "version": "2.1.8", - "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz", - "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==", - "requires": { - "css-unit-converter": "^1.1.1", - "postcss-value-parser": "^3.3.0" - }, - "dependencies": { - "postcss-value-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" - } - } - }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", diff --git a/package.json b/package.json index 5392c7b0f..c5f127bea 100644 --- a/package.json +++ b/package.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" }, diff --git a/src/util/negateValue.js b/src/util/negateValue.js index ad0ac8db1..da7a5cf2c 100644 --- a/src/util/negateValue.js +++ b/src/util/negateValue.js @@ -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 } diff --git a/tests/resolveConfig.test.js b/tests/resolveConfig.test.js index bcba03bde..b5b6147ef 100644 --- a/tests/resolveConfig.test.js +++ b/tests/resolveConfig.test.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', }) })