wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Simplify negate value (#5389)

Browse source 
* simplify `negateValue`

Co-authored-by: Brad Cornes <bradlc41@gmail.com>

* ensure we have the exact same behaviour

* Simplify/loosen regex to be more future-proof

Co-authored-by: Brad Cornes <bradlc41@gmail.com>
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Robin Malfait 2021-09-06 20:26:32 +02:00 • committed by GitHub
parent f86c16b1ed
commit 920f21264c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

41
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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"
},

17
src/util/negateValue.js
View file

@ -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
}

68
tests/resolveConfig.test.js
View file

@ -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',
})
})