From 5444612530c182ec223b79c7db0b5ffb8db6592d Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 17 Nov 2024 16:02:26 +0100 Subject: [PATCH] postcss-sign-functions: improve abs support --- packages/css-calc/test/additional/index.mjs | 1 + .../test/additional/sign-abs-equivalent.mjs | 741 ++++++++++++++++++ .../test/basic.autoprefixer.expect.css | 4 - .../test/basic.autoprefixer.false.expect.css | 4 - ...basic.autoprefixer.remove.false.expect.css | 4 - .../test/basic.ch38.expect.css | 4 - .../test/basic.edge16.expect.css | 4 - .../postcss-preset-env/test/basic.expect.css | 4 - .../test/basic.ff49.expect.css | 4 - .../test/basic.ff66.expect.css | 4 - ...ebrew.all-browsers-have-support.expect.css | 4 - .../test/basic.hebrew.expect.css | 4 - .../test/basic.ie10.expect.css | 6 - .../test/basic.nesting.false.expect.css | 4 - .../test/basic.op_mini.expect.css | 4 - .../test/basic.safari15.expect.css | 4 - .../test/basic.stage0-ff49.expect.css | 4 - .../test/basic.stage0-ff66.expect.css | 4 - .../test/basic.stage0.expect.css | 4 - .../test/basic.supports-query.expect.css | 4 - .../test/basic.vendors-1.expect.css | 4 - .../test/basic.vendors-2.expect.css | 4 - plugins/postcss-sign-functions/CHANGELOG.md | 5 + plugins/postcss-sign-functions/README.md | 33 +- plugins/postcss-sign-functions/dist/index.cjs | 2 +- .../postcss-sign-functions/dist/index.d.ts | 2 +- plugins/postcss-sign-functions/dist/index.mjs | 2 +- plugins/postcss-sign-functions/docs/README.md | 6 +- plugins/postcss-sign-functions/src/index.ts | 74 +- plugins/postcss-sign-functions/test/_tape.mjs | 10 +- plugins/postcss-sign-functions/test/basic.css | 22 +- .../test/basic.expect.css | 35 +- .../test/basic.preserve-false.expect.css | 61 -- .../test/basic.preserve-true.expect.css | 87 ++ .../test/examples/example.css | 4 + .../test/examples/example.expect.css | 10 +- .../example.preserve-false.expect.css | 23 - .../examples/example.preserve-true.expect.css | 34 + 38 files changed, 1014 insertions(+), 220 deletions(-) create mode 100644 packages/css-calc/test/additional/sign-abs-equivalent.mjs delete mode 100644 plugins/postcss-sign-functions/test/basic.preserve-false.expect.css create mode 100644 plugins/postcss-sign-functions/test/basic.preserve-true.expect.css delete mode 100644 plugins/postcss-sign-functions/test/examples/example.preserve-false.expect.css create mode 100644 plugins/postcss-sign-functions/test/examples/example.preserve-true.expect.css diff --git a/packages/css-calc/test/additional/index.mjs b/packages/css-calc/test/additional/index.mjs index 8dbcc23de..3a2a0f033 100644 --- a/packages/css-calc/test/additional/index.mjs +++ b/packages/css-calc/test/additional/index.mjs @@ -1,3 +1,4 @@ import './mod-rem-infinity.mjs'; import './random.mjs'; +import './sign-abs-equivalent.mjs'; import './tan-asymptotes.mjs'; diff --git a/packages/css-calc/test/additional/sign-abs-equivalent.mjs b/packages/css-calc/test/additional/sign-abs-equivalent.mjs new file mode 100644 index 000000000..fa85ef8f7 --- /dev/null +++ b/packages/css-calc/test/additional/sign-abs-equivalent.mjs @@ -0,0 +1,741 @@ +import { calc } from '@csstools/css-calc'; +import { isFunctionNode, isTokenNode, parseCommaSeparatedListOfComponentValues, parseComponentValue, parseListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; +import { isTokenNumber, tokenize } from '@csstools/css-tokenizer'; +import assert from 'node:assert'; + +function absEquivalent(input) { + const componentValues = replaceComponentValues( + parseCommaSeparatedListOfComponentValues(tokenize({ css: input })), + (componentValue) => { + if (!isFunctionNode(componentValue)) { + return; + } + + if (componentValue.getName().toLowerCase() === 'abs') { + return replaceComponentValues( + [[parseComponentValue(tokenize({ css: 'max((0), -1 * (0))' }))]], + (other) => { + if (isTokenNode(other) && isTokenNumber(other.value) && other.value[4].value === 0) { + return parseListOfComponentValues(componentValue.value.flatMap((x) => x.tokens())); + } + }, + )[0]; + } + + // if (componentValue.getName().toLowerCase() === 'sign') { + // const unit = '( ( (0) * 3.35544e07 ) / 3.35544e07 )'; + + // return replaceComponentValues( + // [[parseComponentValue(tokenize({ css: `round(to-zero, clamp(-1, tan(atan2((0), ${unit})) * 3.35544e06, 1))` }))]], + // (other) => { + // if (isTokenNode(other) && isTokenNumber(other.value) && other.value[4].value === 0) { + // return parseListOfComponentValues(componentValue.value.flatMap((x) => x.tokens())); + // } + // }, + // )[0]; + // } + }, + ); + + return stringify(componentValues); +} + +assert.strictEqual( + calc(absEquivalent('abs(1)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('abs(sign(1))')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('abs(sign(sign(1)))')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(sign(sign(1) + sign(1)))')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('calc(abs(0.1 + 0.2) + 0.05)')), + '0.35', +); + +assert.strictEqual( + calc(absEquivalent('calc(sign(0.1 + 0.2) - 0.05)')), + '0.95', +); + +assert.strictEqual( + calc(absEquivalent('calc(abs(0.1 + 0.2) * 2)')), + '0.6', +); + +assert.strictEqual( + calc(absEquivalent('calc(abs(sign(0.1) + 0.2) / 2)')), + '0.6', +); + +assert.strictEqual( + calc(absEquivalent('calc(abs(0.1 + 0.2) * -2)')), + '-0.6', +); + +assert.strictEqual( + calc(absEquivalent('calc(sign(0.1 - 0.2) - 0.05)')), + '-1.05', +); + +assert.strictEqual( + calc(absEquivalent('calc(sign(1) + sign(1) - 0.05)')), + '1.95', +); + +assert.strictEqual( + calc(absEquivalent('calc(sign(-0))')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('calc(sign(0))')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(1px)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1cm)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1mm)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1Q)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1in)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1pc)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1pt)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1em)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1ex)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1ch)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1rem)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1vh)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1vw)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1vmin)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1vmax)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1px)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1cm)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1mm)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1Q)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1in)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1pc)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1pt)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1em)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1ex)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1ch)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1rem)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1vh)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1vw)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1vmin)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1vmax)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1s)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1ms)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1s)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1ms)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1deg)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1grad)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1rad)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(1turn)')), + '1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1deg)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1grad)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1rad)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(-1turn)')), + '-1', +); + +assert.strictEqual( + calc(absEquivalent('sign(0px)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0cm)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0mm)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0Q)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0in)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0pc)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0pt)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0em)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0ex)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0ch)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0rem)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0vh)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0vw)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0vmin)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0vmax)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0px)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0cm)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0mm)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0Q)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0in)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0pc)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0pt)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0em)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0ex)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0ch)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0rem)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0vh)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0vw)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0vmin)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0vmax)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0s)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0ms)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0deg)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0grad)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0rad)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(0turn)')), + '0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0deg)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0grad)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0rad)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('sign(-0turn)')), + '-0', +); + +assert.strictEqual( + calc(absEquivalent('abs(1px)')), + '1px', +); + +assert.strictEqual( + calc(absEquivalent('abs(1cm)')), + '1cm', +); + +assert.strictEqual( + calc(absEquivalent('abs(1mm)')), + '1mm', +); + +assert.strictEqual( + calc(absEquivalent('abs(1Q)')), + '1Q', +); + +assert.strictEqual( + calc(absEquivalent('abs(1in)')), + '1in', +); + +assert.strictEqual( + calc(absEquivalent('abs(1pc)')), + '1pc', +); + +assert.strictEqual( + calc(absEquivalent('abs(1pt)')), + '1pt', +); + +assert.strictEqual( + calc(absEquivalent('abs(1em)')), + '1em', +); + +assert.strictEqual( + calc(absEquivalent('abs(1ex)')), + '1ex', +); + +assert.strictEqual( + calc(absEquivalent('abs(1ch)')), + '1ch', +); + +assert.strictEqual( + calc(absEquivalent('abs(1rem)')), + '1rem', +); + +assert.strictEqual( + calc(absEquivalent('abs(1vh)')), + '1vh', +); + +assert.strictEqual( + calc(absEquivalent('abs(1vw)')), + '1vw', +); + +assert.strictEqual( + calc(absEquivalent('abs(1vmin)')), + '1vmin', +); + +assert.strictEqual( + calc(absEquivalent('abs(1vmax)')), + '1vmax', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1px)')), + '1px', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1cm)')), + '1cm', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1mm)')), + '1mm', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1Q)')), + '1Q', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1in)')), + '1in', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1pc)')), + '1pc', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1pt)')), + '1pt', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1em)')), + '1em', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1ex)')), + '1ex', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1ch)')), + '1ch', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1rem)')), + '1rem', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1vh)')), + '1vh', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1vw)')), + '1vw', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1vmin)')), + '1vmin', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1vmax)')), + '1vmax', +); + +assert.strictEqual( + calc(absEquivalent('abs(1s)')), + '1s', +); + +assert.strictEqual( + calc(absEquivalent('abs(1ms)')), + '1ms', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1s)')), + '1s', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1ms)')), + '1ms', +); + +assert.strictEqual( + calc(absEquivalent('abs(1deg)')), + '1deg', +); + +assert.strictEqual( + calc(absEquivalent('abs(1grad)')), + '1grad', +); + +assert.strictEqual( + calc(absEquivalent('abs(1rad)')), + '1rad', +); + +assert.strictEqual( + calc(absEquivalent('abs(1turn)')), + '1turn', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1deg)')), + '1deg', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1grad)')), + '1grad', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1rad)')), + '1rad', +); + +assert.strictEqual( + calc(absEquivalent('abs(-1turn)')), + '1turn', +); diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css index 96f665912..71ef4b51c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -727,16 +727,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css index ca0e8f174..a5ab31da3 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css @@ -732,16 +732,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css index 5dd729fa3..dd9bf8aff 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css @@ -751,16 +751,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css index b2c55b2cf..23f8ffb04 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -639,16 +639,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css b/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css index be35f367b..4cf10d7a0 100644 --- a/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css @@ -721,16 +721,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 55b8ad292..eb22f18e4 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -746,16 +746,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css index 18a3bcaf8..27515e5c7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -638,16 +638,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css index d37c4cf57..d47aa34eb 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -633,16 +633,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css index 7256499ac..6362b6d34 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css @@ -595,16 +595,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css index 5d0c551ec..858a32588 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css @@ -742,16 +742,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css index a61a6444a..ba5277095 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -764,19 +764,13 @@ .sign { -ms-flex-order: 1; order: 1; - -ms-flex-order: sign(10px); - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { -ms-flex-order: 10px; order: 10px; - -ms-flex-order: abs(10px); - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css index d611edb3a..2795ba5dc 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css @@ -736,16 +736,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css index 1bd362efc..226e06d64 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -724,16 +724,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css index ebd69dd64..d68684bc9 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -620,16 +620,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css index 347b7d3eb..505f3edbe 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css @@ -634,16 +634,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css index eeb4c8939..9753c6953 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css @@ -629,16 +629,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css index 260078839..e00fddc0c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -742,16 +742,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css index 1cd369423..b5f30f27e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css @@ -631,16 +631,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css index 46ac2e9f2..6a89506e3 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css @@ -719,16 +719,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css index a8a2d0e3b..e80b48d5c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css @@ -724,16 +724,12 @@ .sign { order: 1; - order: sign(10px); z-index: -1; - z-index: sign(-10px); } .abs { order: 10px; - order: abs(10px); z-index: 10px; - z-index: abs(-10px); } .random { diff --git a/plugins/postcss-sign-functions/CHANGELOG.md b/plugins/postcss-sign-functions/CHANGELOG.md index a127226a2..9a40b1463 100644 --- a/plugins/postcss-sign-functions/CHANGELOG.md +++ b/plugins/postcss-sign-functions/CHANGELOG.md @@ -1,5 +1,10 @@ # Changes to PostCSS Sign Functions +### Unreleased (minor) + +- Add support for unresolvable values (e.g. `%` and `var()` in `abs()`) +- Change `preserve` option to default to `false` + ### 1.0.0 _November 11, 2024_ diff --git a/plugins/postcss-sign-functions/README.md b/plugins/postcss-sign-functions/README.md index 444ebd941..7520cac12 100644 --- a/plugins/postcss-sign-functions/README.md +++ b/plugins/postcss-sign-functions/README.md @@ -33,36 +33,38 @@ npm install @csstools/postcss-sign-functions --save-dev z-index: abs(10px); } +.abs { + z-index: abs(10%); +} + /* becomes */ .sign { z-index: -1; - z-index: sign(-10px); } .sign { z-index: 0; - z-index: sign(0); } .sign { z-index: 1; - z-index: sign(10px); } .abs { z-index: 10px; - z-index: abs(-10px); } .abs { z-index: 0; - z-index: abs(0); } .abs { z-index: 10px; - z-index: abs(10px); +} + +.abs { + z-index: max((10%), -1 * (10%)); } ``` @@ -112,10 +114,10 @@ Because of that, any usage that contains a `var` is skipped. ### preserve The `preserve` option determines whether the original notation -is preserved. By default, it is preserved. +is preserved. By default, it is not preserved. ```js -postcssSignFunctions({ preserve: false }) +postcssSignFunctions({ preserve: true }) ``` ```css @@ -143,30 +145,45 @@ postcssSignFunctions({ preserve: false }) z-index: abs(10px); } +.abs { + z-index: abs(10%); +} + /* becomes */ .sign { z-index: -1; + z-index: sign(-10px); } .sign { z-index: 0; + z-index: sign(0); } .sign { z-index: 1; + z-index: sign(10px); } .abs { z-index: 10px; + z-index: abs(-10px); } .abs { z-index: 0; + z-index: abs(0); } .abs { z-index: 10px; + z-index: abs(10px); +} + +.abs { + z-index: max((10%), -1 * (10%)); + z-index: abs(10%); } ``` diff --git a/plugins/postcss-sign-functions/dist/index.cjs b/plugins/postcss-sign-functions/dist/index.cjs index ab0feb4f7..21d2c65b1 100644 --- a/plugins/postcss-sign-functions/dist/index.cjs +++ b/plugins/postcss-sign-functions/dist/index.cjs @@ -1 +1 @@ -"use strict";var s=require("@csstools/css-calc");const e=/(?{const t=Object.assign({preserve:!0},c);return{postcssPlugin:"postcss-sign-functions",Declaration(c){if(!e.test(c.value))return;const o=s.calc(c.value,{precision:5,toCanonicalUnits:!0});o!==c.value&&(c.cloneBefore({value:o}),t.preserve||c.remove())}}};creator.postcss=!0,module.exports=creator; +"use strict";var e=require("@csstools/css-calc"),o=require("@csstools/css-tokenizer"),n=require("@csstools/css-parser-algorithms");const s=/(?{const r=Object.assign({preserve:!1},t);return{postcssPlugin:"postcss-sign-functions",Declaration(t){if(!s.test(t.value))return;let i;i=a.test(t.value)?n.replaceComponentValues(n.parseCommaSeparatedListOfComponentValues(o.tokenize({css:t.value})),replacer):n.parseCommaSeparatedListOfComponentValues(o.tokenize({css:t.value}));const p=n.stringify(e.calcFromComponentValues(i,{precision:5,toCanonicalUnits:!0}));p!==t.value&&(t.cloneBefore({value:p}),r.preserve||t.remove())}}};function replacer(e){if(!n.isFunctionNode(e))return;if("abs"!==e.getName().toLowerCase())return;const[s]=n.replaceComponentValues([e.value],replacer);return[new n.FunctionNode([o.TokenType.Function,"max(",-1,-1,{value:"max"}],[o.TokenType.CloseParen,")",-1,-1,void 0],[new n.SimpleBlockNode([o.TokenType.OpenParen,"(",-1,-1,void 0],[o.TokenType.CloseParen,")",-1,-1,void 0],n.parseListOfComponentValues(s.flatMap((e=>e.tokens())))),new n.TokenNode([o.TokenType.Comma,",",-1,-1,void 0]),new n.WhitespaceNode([[o.TokenType.Whitespace," ",-1,-1,void 0]]),new n.TokenNode([o.TokenType.Number,"-1",-1,-1,{value:-1,type:o.NumberType.Integer,signCharacter:"-"}]),new n.WhitespaceNode([[o.TokenType.Whitespace," ",-1,-1,void 0]]),new n.TokenNode([o.TokenType.Delim,"*",-1,-1,{value:"*"}]),new n.WhitespaceNode([[o.TokenType.Whitespace," ",-1,-1,void 0]]),new n.SimpleBlockNode([o.TokenType.OpenParen,"(",-1,-1,void 0],[o.TokenType.CloseParen,")",-1,-1,void 0],n.parseListOfComponentValues(s.flatMap((e=>e.tokens()))))])]}creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-sign-functions/dist/index.d.ts b/plugins/postcss-sign-functions/dist/index.d.ts index 79981d076..220781fa2 100644 --- a/plugins/postcss-sign-functions/dist/index.d.ts +++ b/plugins/postcss-sign-functions/dist/index.d.ts @@ -5,7 +5,7 @@ export default creator; /** postcss-sign-functions plugin options */ export declare type pluginOptions = { - /** Preserve the original notation. default: true */ + /** Preserve the original notation. default: false */ preserve?: boolean; }; diff --git a/plugins/postcss-sign-functions/dist/index.mjs b/plugins/postcss-sign-functions/dist/index.mjs index 53c8ce002..ae2baed0a 100644 --- a/plugins/postcss-sign-functions/dist/index.mjs +++ b/plugins/postcss-sign-functions/dist/index.mjs @@ -1 +1 @@ -import{calc as s}from"@csstools/css-calc";const e=/(?{const t=Object.assign({preserve:!0},o);return{postcssPlugin:"postcss-sign-functions",Declaration(o){if(!e.test(o.value))return;const n=s(o.value,{precision:5,toCanonicalUnits:!0});n!==o.value&&(o.cloneBefore({value:n}),t.preserve||o.remove())}}};creator.postcss=!0;export{creator as default}; +import{calcFromComponentValues as e}from"@csstools/css-calc";import{tokenize as s,TokenType as o,NumberType as n}from"@csstools/css-tokenizer";import{replaceComponentValues as t,parseCommaSeparatedListOfComponentValues as a,stringify as r,isFunctionNode as i,FunctionNode as c,SimpleBlockNode as l,parseListOfComponentValues as p,TokenNode as v,WhitespaceNode as u}from"@csstools/css-parser-algorithms";const m=/(?{const n=Object.assign({preserve:!1},o);return{postcssPlugin:"postcss-sign-functions",Declaration(o){if(!m.test(o.value))return;let i;i=f.test(o.value)?t(a(s({css:o.value})),replacer):a(s({css:o.value}));const c=r(e(i,{precision:5,toCanonicalUnits:!0}));c!==o.value&&(o.cloneBefore({value:c}),n.preserve||o.remove())}}};function replacer(e){if(!i(e))return;if("abs"!==e.getName().toLowerCase())return;const[s]=t([e.value],replacer);return[new c([o.Function,"max(",-1,-1,{value:"max"}],[o.CloseParen,")",-1,-1,void 0],[new l([o.OpenParen,"(",-1,-1,void 0],[o.CloseParen,")",-1,-1,void 0],p(s.flatMap((e=>e.tokens())))),new v([o.Comma,",",-1,-1,void 0]),new u([[o.Whitespace," ",-1,-1,void 0]]),new v([o.Number,"-1",-1,-1,{value:-1,type:n.Integer,signCharacter:"-"}]),new u([[o.Whitespace," ",-1,-1,void 0]]),new v([o.Delim,"*",-1,-1,{value:"*"}]),new u([[o.Whitespace," ",-1,-1,void 0]]),new l([o.OpenParen,"(",-1,-1,void 0],[o.CloseParen,")",-1,-1,void 0],p(s.flatMap((e=>e.tokens()))))])]}creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-sign-functions/docs/README.md b/plugins/postcss-sign-functions/docs/README.md index 4915f20d5..38b4f075a 100644 --- a/plugins/postcss-sign-functions/docs/README.md +++ b/plugins/postcss-sign-functions/docs/README.md @@ -47,10 +47,10 @@ Because of that, any usage that contains a `var` is skipped. ### preserve The `preserve` option determines whether the original notation -is preserved. By default, it is preserved. +is preserved. By default, it is not preserved. ```js -({ preserve: false }) +({ preserve: true }) ``` ```css @@ -58,7 +58,7 @@ is preserved. By default, it is preserved. /* becomes */ - + ``` diff --git a/plugins/postcss-sign-functions/src/index.ts b/plugins/postcss-sign-functions/src/index.ts index c8bb579cf..8ab47607e 100644 --- a/plugins/postcss-sign-functions/src/index.ts +++ b/plugins/postcss-sign-functions/src/index.ts @@ -1,19 +1,23 @@ import type { PluginCreator } from 'postcss'; -import { calc } from '@csstools/css-calc'; +import { calcFromComponentValues } from '@csstools/css-calc'; +import { NumberType, tokenize, TokenType } from '@csstools/css-tokenizer'; +import type { ComponentValue} from '@csstools/css-parser-algorithms'; +import { FunctionNode, isFunctionNode, parseCommaSeparatedListOfComponentValues, parseListOfComponentValues, replaceComponentValues, SimpleBlockNode, stringify, TokenNode, WhitespaceNode } from '@csstools/css-parser-algorithms'; /** postcss-sign-functions plugin options */ export type pluginOptions = { - /** Preserve the original notation. default: true */ + /** Preserve the original notation. default: false */ preserve?: boolean, }; const FUNCTION_CALL_REGEX = /(? = (opts?: pluginOptions) => { const options: pluginOptions = Object.assign( // Default options { - preserve: true, + preserve: false, }, // Provided options opts, @@ -26,10 +30,20 @@ const creator: PluginCreator = (opts?: pluginOptions) => { return; } - const modifiedValue = calc(decl.value, { + let componentValues: Array>; + if (ABS_CALL_REGEX.test(decl.value)) { + componentValues = replaceComponentValues( + parseCommaSeparatedListOfComponentValues(tokenize({ css: decl.value })), + replacer, + ) + } else { + componentValues = parseCommaSeparatedListOfComponentValues(tokenize({ css: decl.value })); + } + + const modifiedValue = stringify(calcFromComponentValues(componentValues, { precision: 5, toCanonicalUnits: true, - }); + })); if (modifiedValue === decl.value) { return; } @@ -43,6 +57,56 @@ const creator: PluginCreator = (opts?: pluginOptions) => { }; }; +function replacer(componentValue: ComponentValue): Array | void { + if (!isFunctionNode(componentValue)) { + return; + } + + if (componentValue.getName().toLowerCase() !== 'abs') { + return; + } + + const [value] = replaceComponentValues( + [componentValue.value], + replacer + ); + + return [new FunctionNode( + [TokenType.Function, 'max(', -1, -1, { value: 'max' }], + [TokenType.CloseParen, ')', -1, -1, undefined], + [ + new SimpleBlockNode( + [TokenType.OpenParen, '(', -1, -1, undefined], + [TokenType.CloseParen, ')', -1, -1, undefined], + parseListOfComponentValues(value.flatMap(x => x.tokens())) + ), + new TokenNode( + [TokenType.Comma, ',', -1, -1, undefined], + ), + new WhitespaceNode( + [[TokenType.Whitespace, ' ', -1, -1, undefined]], + ), + new TokenNode( + [TokenType.Number, '-1', -1, -1, { value: -1, type: NumberType.Integer, signCharacter: '-' }], + ), + new WhitespaceNode( + [[TokenType.Whitespace, ' ', -1, -1, undefined]], + ), + new TokenNode( + [TokenType.Delim, '*', -1, -1, { value: '*' }], + ), + new WhitespaceNode( + [[TokenType.Whitespace, ' ', -1, -1, undefined]], + ), + new SimpleBlockNode( + [TokenType.OpenParen, '(', -1, -1, undefined], + [TokenType.CloseParen, ')', -1, -1, undefined], + parseListOfComponentValues(value.flatMap(x => x.tokens())) + ) + ] + )]; +} + creator.postcss = true; export default creator; diff --git a/plugins/postcss-sign-functions/test/_tape.mjs b/plugins/postcss-sign-functions/test/_tape.mjs index c5f8fb8ee..1380f408b 100644 --- a/plugins/postcss-sign-functions/test/_tape.mjs +++ b/plugins/postcss-sign-functions/test/_tape.mjs @@ -5,19 +5,19 @@ postcssTape(plugin)({ basic: { message: 'supports basic usage', }, - 'basic:preserve-false': { - message: 'supports { preserve: false } usage', + 'basic:preserve-true': { + message: 'supports { preserve: true } usage', options: { - preserve: false, + preserve: true, }, }, 'examples/example': { message: 'minimal example', }, - 'examples/example:preserve-false': { + 'examples/example:preserve-true': { message: 'minimal example', options: { - preserve: false, + preserve: true, }, }, }); diff --git a/plugins/postcss-sign-functions/test/basic.css b/plugins/postcss-sign-functions/test/basic.css index 482874782..e0d626d33 100644 --- a/plugins/postcss-sign-functions/test/basic.css +++ b/plugins/postcss-sign-functions/test/basic.css @@ -22,7 +22,7 @@ z-index: sign(-0px); } -.abs-ignore { +.abs-a { z-index: abs(10%); } @@ -46,16 +46,26 @@ z-index: abs(-0px); } +.abs-g { + --foo: 10px; + z-index: abs(var(--foo)); +} + +.abs-h { + --foo: 10px; + z-index: abs(var(--foo, abs(-1%))); +} + +.abs-i { + z-index: abs(10% + abs(-1%)); +} + :root { --foo: sign(10px); + --bar: abs(10px); } .var-ignore-a { --foo: 10px; z-index: sign(var(--foo)); } - -.var-ignore-b { - --foo: 10px; - z-index: abs(var(--foo)); -} diff --git a/plugins/postcss-sign-functions/test/basic.expect.css b/plugins/postcss-sign-functions/test/basic.expect.css index 341650b36..2582d0403 100644 --- a/plugins/postcss-sign-functions/test/basic.expect.css +++ b/plugins/postcss-sign-functions/test/basic.expect.css @@ -4,69 +4,68 @@ .sign-b { z-index: 1; - z-index: sign(10px); } .sign-c { z-index: 0; - z-index: sign(0); } .sign-d { z-index: 0; - z-index: sign(0px); } .sign-e { z-index: -1; - z-index: sign(-10px); } .sign-f { z-index: -0; - z-index: sign(-0px); } -.abs-ignore { - z-index: abs(10%); +.abs-a { + z-index: max((10%), -1 * (10%)); } .abs-b { z-index: 10px; - z-index: abs(10px); } .abs-c { z-index: 0; - z-index: abs(0); } .abs-d { z-index: 0px; - z-index: abs(0px); } .abs-e { z-index: 10px; - z-index: abs(-10px); } .abs-f { z-index: 0px; - z-index: abs(-0px); +} + +.abs-g { + --foo: 10px; + z-index: max((var(--foo)), -1 * (var(--foo))); +} + +.abs-h { + --foo: 10px; + z-index: max((var(--foo, max((-1%), -1 * (-1%)))), -1 * (var(--foo, max((-1%), -1 * (-1%))))); +} + +.abs-i { + z-index: max((10% + max((-1%), -1 * (-1%))), -1 * (10% + max((-1%), -1 * (-1%)))); } :root { --foo: 1; - --foo: sign(10px); + --bar: 10px; } .var-ignore-a { --foo: 10px; z-index: sign(var(--foo)); } - -.var-ignore-b { - --foo: 10px; - z-index: abs(var(--foo)); -} diff --git a/plugins/postcss-sign-functions/test/basic.preserve-false.expect.css b/plugins/postcss-sign-functions/test/basic.preserve-false.expect.css deleted file mode 100644 index b819c3a09..000000000 --- a/plugins/postcss-sign-functions/test/basic.preserve-false.expect.css +++ /dev/null @@ -1,61 +0,0 @@ -.sign-ignore { - z-index: sign(10%); -} - -.sign-b { - z-index: 1; -} - -.sign-c { - z-index: 0; -} - -.sign-d { - z-index: 0; -} - -.sign-e { - z-index: -1; -} - -.sign-f { - z-index: -0; -} - -.abs-ignore { - z-index: abs(10%); -} - -.abs-b { - z-index: 10px; -} - -.abs-c { - z-index: 0; -} - -.abs-d { - z-index: 0px; -} - -.abs-e { - z-index: 10px; -} - -.abs-f { - z-index: 0px; -} - -:root { - --foo: 1; -} - -.var-ignore-a { - --foo: 10px; - z-index: sign(var(--foo)); -} - -.var-ignore-b { - --foo: 10px; - z-index: abs(var(--foo)); -} diff --git a/plugins/postcss-sign-functions/test/basic.preserve-true.expect.css b/plugins/postcss-sign-functions/test/basic.preserve-true.expect.css new file mode 100644 index 000000000..c9e05ecc8 --- /dev/null +++ b/plugins/postcss-sign-functions/test/basic.preserve-true.expect.css @@ -0,0 +1,87 @@ +.sign-ignore { + z-index: sign(10%); +} + +.sign-b { + z-index: 1; + z-index: sign(10px); +} + +.sign-c { + z-index: 0; + z-index: sign(0); +} + +.sign-d { + z-index: 0; + z-index: sign(0px); +} + +.sign-e { + z-index: -1; + z-index: sign(-10px); +} + +.sign-f { + z-index: -0; + z-index: sign(-0px); +} + +.abs-a { + z-index: max((10%), -1 * (10%)); + z-index: abs(10%); +} + +.abs-b { + z-index: 10px; + z-index: abs(10px); +} + +.abs-c { + z-index: 0; + z-index: abs(0); +} + +.abs-d { + z-index: 0px; + z-index: abs(0px); +} + +.abs-e { + z-index: 10px; + z-index: abs(-10px); +} + +.abs-f { + z-index: 0px; + z-index: abs(-0px); +} + +.abs-g { + --foo: 10px; + z-index: max((var(--foo)), -1 * (var(--foo))); + z-index: abs(var(--foo)); +} + +.abs-h { + --foo: 10px; + z-index: max((var(--foo, max((-1%), -1 * (-1%)))), -1 * (var(--foo, max((-1%), -1 * (-1%))))); + z-index: abs(var(--foo, abs(-1%))); +} + +.abs-i { + z-index: max((10% + max((-1%), -1 * (-1%))), -1 * (10% + max((-1%), -1 * (-1%)))); + z-index: abs(10% + abs(-1%)); +} + +:root { + --foo: 1; + --foo: sign(10px); + --bar: 10px; + --bar: abs(10px); +} + +.var-ignore-a { + --foo: 10px; + z-index: sign(var(--foo)); +} diff --git a/plugins/postcss-sign-functions/test/examples/example.css b/plugins/postcss-sign-functions/test/examples/example.css index 24fb32287..a6778c48e 100644 --- a/plugins/postcss-sign-functions/test/examples/example.css +++ b/plugins/postcss-sign-functions/test/examples/example.css @@ -21,3 +21,7 @@ .abs { z-index: abs(10px); } + +.abs { + z-index: abs(10%); +} diff --git a/plugins/postcss-sign-functions/test/examples/example.expect.css b/plugins/postcss-sign-functions/test/examples/example.expect.css index 29c7340a1..790aca27d 100644 --- a/plugins/postcss-sign-functions/test/examples/example.expect.css +++ b/plugins/postcss-sign-functions/test/examples/example.expect.css @@ -1,29 +1,27 @@ .sign { z-index: -1; - z-index: sign(-10px); } .sign { z-index: 0; - z-index: sign(0); } .sign { z-index: 1; - z-index: sign(10px); } .abs { z-index: 10px; - z-index: abs(-10px); } .abs { z-index: 0; - z-index: abs(0); } .abs { z-index: 10px; - z-index: abs(10px); +} + +.abs { + z-index: max((10%), -1 * (10%)); } diff --git a/plugins/postcss-sign-functions/test/examples/example.preserve-false.expect.css b/plugins/postcss-sign-functions/test/examples/example.preserve-false.expect.css deleted file mode 100644 index bc6cbe8f2..000000000 --- a/plugins/postcss-sign-functions/test/examples/example.preserve-false.expect.css +++ /dev/null @@ -1,23 +0,0 @@ -.sign { - z-index: -1; -} - -.sign { - z-index: 0; -} - -.sign { - z-index: 1; -} - -.abs { - z-index: 10px; -} - -.abs { - z-index: 0; -} - -.abs { - z-index: 10px; -} diff --git a/plugins/postcss-sign-functions/test/examples/example.preserve-true.expect.css b/plugins/postcss-sign-functions/test/examples/example.preserve-true.expect.css new file mode 100644 index 000000000..74f6e32d0 --- /dev/null +++ b/plugins/postcss-sign-functions/test/examples/example.preserve-true.expect.css @@ -0,0 +1,34 @@ +.sign { + z-index: -1; + z-index: sign(-10px); +} + +.sign { + z-index: 0; + z-index: sign(0); +} + +.sign { + z-index: 1; + z-index: sign(10px); +} + +.abs { + z-index: 10px; + z-index: abs(-10px); +} + +.abs { + z-index: 0; + z-index: abs(0); +} + +.abs { + z-index: 10px; + z-index: abs(10px); +} + +.abs { + z-index: max((10%), -1 * (10%)); + z-index: abs(10%); +}