Use reduce-css-calc to avoid inspecting value to negate

This commit is contained in:
Adam Wathan 2019-08-06 07:42:38 -04:00
parent 4695f536c7
commit 25b3aba7d7
4 changed files with 18 additions and 6 deletions

View File

@ -1188,7 +1188,7 @@ test('custom properties are multiplied by -1 for negative values', () => {
'-4': '-4px',
'-foo': 'calc(var(--foo) * -1)',
'-bar': 'calc(var(--bar, 500px) * -1)',
'-baz': 'calc(calc(50% - 10px) * -1)',
'-baz': 'calc(-50% - -10px)',
},
},
variants: {},

View File

@ -51,7 +51,8 @@
"postcss-js": "^2.0.0",
"postcss-nested": "^4.1.1",
"postcss-selector-parser": "^6.0.0",
"pretty-hrtime": "^1.0.3"
"pretty-hrtime": "^1.0.3",
"reduce-css-calc": "^2.1.6"
},
"browserslist": [
"> 1%"

View File

@ -3,7 +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'
import reduceCalc from 'reduce-css-calc'
const configUtils = {
negative(scale) {
@ -12,9 +12,7 @@ const configUtils = {
.reduce(
(negativeScale, key) => ({
...negativeScale,
[`-${key}`]: ['var(', 'calc('].some(prefix => startsWith(scale[key], prefix))
? `calc(${scale[key]} * -1)`
: `-${scale[key]}`,
[`-${key}`]: reduceCalc(`calc(${scale[key]} * -1)`),
}),
{}
)

View File

@ -1475,6 +1475,11 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
shebang-command "^1.2.0"
which "^1.2.9"
css-unit-converter@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
cssesc@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
@ -4006,6 +4011,14 @@ realpath-native@^1.1.0:
dependencies:
util.promisify "^1.0.0"
reduce-css-calc@^2.1.6:
version "2.1.6"
resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.6.tgz#050fe6ee7d98a1d70775d2e93ce0b713cee394d2"
integrity sha512-+l5/qlQmdsbM9h6JerJ/y5vR5Ci0k93aszLNpCmbadC3nBcbRGmIBm0s9Nj59i22LvCjTGftWzdQRwdknayxhw==
dependencies:
css-unit-converter "^1.1.1"
postcss-value-parser "^3.3.0"
regenerate-unicode-properties@^8.0.2:
version "8.1.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"