From e30522db5a6623ddea7371ec371ec866770676d2 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Tue, 13 Sep 2022 10:20:50 +0200 Subject: [PATCH 1/3] add test case for current behaviour --- .../test/basic.autoprefixer.expect.css | 18 +++++++ .../test/basic.autoprefixer.false.expect.css | 18 +++++++ .../test/basic.ch38.expect.css | 18 +++++++ .../test/basic.ch88-ff78-saf10.expect.css | 8 +++ .../test/basic.ch88-ff78.expect.css | 8 +++ .../basic.ch88-ff78.no-is-pseudo.expect.css | 8 +++ .../postcss-preset-env/test/basic.css | 4 ++ .../postcss-preset-env/test/basic.expect.css | 18 +++++++ .../test/basic.ff49.expect.css | 8 +++ .../test/basic.ff66.expect.css | 4 ++ .../test/basic.ie10.expect.css | 18 +++++++ .../test/basic.nesting.false.expect.css | 18 +++++++ .../test/basic.nesting.true.expect.css | 4 ++ .../test/basic.op_mini.expect.css | 18 +++++++ .../test/basic.preserve.true.expect.css | 53 +++++++++++++++++++ .../test/basic.safari15.expect.css | 4 ++ .../test/basic.stage0-ff49.expect.css | 8 +++ .../test/basic.stage0-ff66.expect.css | 4 ++ .../test/basic.stage0.expect.css | 18 +++++++ .../test/basic.vendors-1.expect.css | 18 +++++++ .../test/basic.vendors-2.expect.css | 18 +++++++ .../test/basic.vendors-3.expect.css | 18 +++++++ .../src/lib/transform-properties.ts | 28 ++++++++++ .../postcss-custom-properties/test/basic.css | 5 ++ .../test/basic.expect.css | 6 +++ .../test/basic.import-is-empty.expect.css | 6 +++ .../test/basic.import-override.expect.css | 5 ++ .../basic.import-override.inverse.expect.css | 5 ++ .../test/basic.import.expect.css | 6 +++ .../test/basic.preserve.expect.css | 5 ++ 30 files changed, 377 insertions(+) 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 9eec82e57..1995ca4f6 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -611,3 +611,21 @@ text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +[dir="ltr"] .stage__container { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; +} + +[dir="rtl"] .stage__container { + right: 1rem; +} 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 9eec82e57..1995ca4f6 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 @@ -611,3 +611,21 @@ text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +[dir="ltr"] .stage__container { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; +} + +[dir="rtl"] .stage__container { + right: 1rem; +} 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 014f3e4e4..33defb847 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -523,3 +523,21 @@ text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +[dir="ltr"] .stage__container { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; +} + +[dir="rtl"] .stage__container { + right: 1rem; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css index 2238511ea..924a548d0 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css @@ -525,3 +525,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +[dir="ltr"] .stage__container { + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: var(--size, 1rem); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css index 21442ccca..86f44efcc 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css @@ -507,3 +507,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te .text-decoration-shorthand { text-decoration: 3px wavy pink overline; } + +[dir="ltr"] .stage__container { + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: var(--size, 1rem); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css index 21442ccca..86f44efcc 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css @@ -507,3 +507,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te .text-decoration-shorthand { text-decoration: 3px wavy pink overline; } + +[dir="ltr"] .stage__container { + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: var(--size, 1rem); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index 260b431ce..5aed08f5d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -405,3 +405,7 @@ .text-decoration-shorthand { text-decoration: 3px wavy pink overline; } + +.stage__container { + inset-inline-start: var(--size, 1rem); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 1dd2ea5c1..5f2af0aff 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -635,3 +635,21 @@ text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +[dir="ltr"] .stage__container { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; +} + +[dir="rtl"] .stage__container { + right: 1rem; +} 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 aa7003b4a..baa693851 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -524,3 +524,11 @@ text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +.stage__container:dir(ltr) { + left: var(--size, 1rem); +} + +.stage__container:dir(rtl) { + right: var(--size, 1rem); +} 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 466208c71..3182e8270 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -505,3 +505,7 @@ text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +.stage__container { + inset-inline-start: var(--size, 1rem); +} 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 202d5ba73..1285c6f63 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -652,3 +652,21 @@ text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +[dir="ltr"] .stage__container { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; +} + +[dir="rtl"] .stage__container { + right: 1rem; +} 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 2d2d97020..7a23e5c22 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 @@ -631,3 +631,21 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +[dir="ltr"] .stage__container { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; +} + +[dir="rtl"] .stage__container { + right: 1rem; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css index 51505321b..9148b8bcf 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css @@ -420,3 +420,7 @@ -webkit-text-decoration: 3px wavy pink overline; text-decoration: 3px wavy pink overline; } + +.stage__container { + inset-inline-start: var(--size, 1rem); +} 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 d91758c5c..b3e88b698 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 @@ -614,3 +614,21 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +[dir="ltr"] .stage__container { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; +} + +[dir="rtl"] .stage__container { + right: 1rem; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css index fb597973e..8bd67bf3f 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -1070,3 +1070,56 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te -moz-text-decoration: 3px wavy pink overline; text-decoration: 3px wavy pink overline; } + +[dir="ltr"] .stage__container { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; + left: 1rem; + left: var(--size, 1rem); +} + +.stage__container:dir(ltr) { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: 1rem; + right: var(--size, 1rem); +} + +.stage__container:dir(rtl) { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; +} + +.stage__container:dir(ltr) { + left: 1rem; +} + +[dir="rtl"] .stage__container { + right: 1rem; +} + +.stage__container:dir(rtl) { + right: 1rem; +} + +.stage__container { + inset-inline-start: 1rem; + inset-inline-start: var(--size, 1rem); +} 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 552f859d5..ec5ff10a5 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -452,3 +452,7 @@ text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +.stage__container { + inset-inline-start: var(--size, 1rem); +} 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 a9734c513..d1c2ac2f6 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 @@ -525,3 +525,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +.stage__container:dir(ltr) { + left: var(--size, 1rem); +} + +.stage__container:dir(rtl) { + right: var(--size, 1rem); +} 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 ce9d5f172..942a43c2e 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 @@ -506,3 +506,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +.stage__container { + inset-inline-start: var(--size, 1rem); +} 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 6479f5f6a..caadcfd77 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -636,3 +636,21 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +[dir="ltr"] .stage__container { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; +} + +[dir="rtl"] .stage__container { + right: 1rem; +} 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 c154a8c66..621cfcb2d 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 @@ -613,3 +613,21 @@ text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +[dir="ltr"] .stage__container { + left: 1rem; + left: var(--size, 1rem); +} + +[dir="rtl"] .stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +[dir="ltr"] .stage__container { + left: 1rem; +} + +[dir="rtl"] .stage__container { + right: 1rem; +} 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 70bd47030..b81e2f17d 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 @@ -576,3 +576,21 @@ text-decoration: overline wavy pink; text-decoration-thickness: 3px; } + +.stage__container:dir(ltr) { + left: 1rem; + left: var(--size, 1rem); +} + +.stage__container:dir(rtl) { + right: 1rem; + right: var(--size, 1rem); +} + +.stage__container:dir(ltr) { + left: 1rem; +} + +.stage__container:dir(rtl) { + right: 1rem; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css index 223d5fead..e13550bf7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css @@ -547,3 +547,21 @@ -webkit-text-decoration: 3px wavy pink overline; text-decoration: 3px wavy pink overline; } + +.stage__container:dir(ltr) { + left: 1rem; + left: var(--size, 1rem); +} + +.stage__container:dir(rtl) { + right: 1rem; + right: var(--size, 1rem); +} + +.stage__container:dir(ltr) { + left: 1rem; +} + +.stage__container:dir(rtl) { + right: 1rem; +} diff --git a/plugins/postcss-custom-properties/src/lib/transform-properties.ts b/plugins/postcss-custom-properties/src/lib/transform-properties.ts index fe09c4e36..7ff5c76b9 100644 --- a/plugins/postcss-custom-properties/src/lib/transform-properties.ts +++ b/plugins/postcss-custom-properties/src/lib/transform-properties.ts @@ -1,6 +1,7 @@ import valuesParser from 'postcss-value-parser'; import transformValueAST from './transform-value-ast'; import { isRuleIgnored } from './is-ignored'; +import { Container, Declaration, Node } from 'postcss'; // transform custom pseudo selectors with custom selectors export default (decl, customProperties, opts) => { @@ -20,6 +21,10 @@ export default (decl, customProperties, opts) => { // conditionally transform values that have changed if (value !== originalValue) { + // if (parentHasExactFallback(decl, value)) { + // return; + // } + if (opts.preserve) { const beforeDecl = decl.cloneBefore({ value }); @@ -47,3 +52,26 @@ const isTransformableDecl = decl => !decl.variable && decl.value.includes('--') // whether the declaration has a trailing comment const hasTrailingComment = decl => 'value' in Object(Object(decl.raws).value) && 'raw' in decl.raws.value && trailingCommentRegExp.test(decl.raws.value.raw); const trailingCommentRegExp = /^([\W\w]+)(\s*\/\*[\W\w]+?\*\/)$/; + +function parentHasExactFallback(decl: Declaration, value: string): boolean { + if (!decl || !decl.parent) { + return false; + } + + let hasFallback = false; + decl.parent.each((sibling) => { + if (sibling === decl) { + return; + } + + if (sibling.type !== 'decl') { + return; + } + + if (sibling.prop.toLowerCase() === decl.prop.toLowerCase() && sibling.value === value) { + hasFallback = true; + } + }); + + return hasFallback; +} diff --git a/plugins/postcss-custom-properties/test/basic.css b/plugins/postcss-custom-properties/test/basic.css index 92d7a27be..f187e9ea9 100644 --- a/plugins/postcss-custom-properties/test/basic.css +++ b/plugins/postcss-custom-properties/test/basic.css @@ -138,3 +138,8 @@ html { .test { font-family: var(--font, "Helvetica Neue", Arial, sans-serif); } + +.ignores-declarations-that-have-an-exact-fallback { + left: 1rem; + left: var(--size, 1rem); +} diff --git a/plugins/postcss-custom-properties/test/basic.expect.css b/plugins/postcss-custom-properties/test/basic.expect.css index adbdb21f5..f91a6d715 100644 --- a/plugins/postcss-custom-properties/test/basic.expect.css +++ b/plugins/postcss-custom-properties/test/basic.expect.css @@ -159,3 +159,9 @@ html { font-family: "Helvetica Neue", Arial, sans-serif; font-family: var(--font, "Helvetica Neue", Arial, sans-serif); } + +.ignores-declarations-that-have-an-exact-fallback { + left: 1rem; + left: 1rem; + left: var(--size, 1rem); +} diff --git a/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css b/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css index adbdb21f5..f91a6d715 100644 --- a/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css @@ -159,3 +159,9 @@ html { font-family: "Helvetica Neue", Arial, sans-serif; font-family: var(--font, "Helvetica Neue", Arial, sans-serif); } + +.ignores-declarations-that-have-an-exact-fallback { + left: 1rem; + left: 1rem; + left: var(--size, 1rem); +} diff --git a/plugins/postcss-custom-properties/test/basic.import-override.expect.css b/plugins/postcss-custom-properties/test/basic.import-override.expect.css index cd0423d57..1caa1dfba 100644 --- a/plugins/postcss-custom-properties/test/basic.import-override.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import-override.expect.css @@ -109,3 +109,8 @@ .test { font-family: "Helvetica Neue", Arial, sans-serif; } + +.ignores-declarations-that-have-an-exact-fallback { + left: 1rem; + left: 1rem; +} diff --git a/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css b/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css index 8f9292457..a9681a4a7 100644 --- a/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css @@ -109,3 +109,8 @@ .test { font-family: "Helvetica Neue", Arial, sans-serif; } + +.ignores-declarations-that-have-an-exact-fallback { + left: 1rem; + left: 1rem; +} diff --git a/plugins/postcss-custom-properties/test/basic.import.expect.css b/plugins/postcss-custom-properties/test/basic.import.expect.css index cbb490f97..1dadffe12 100644 --- a/plugins/postcss-custom-properties/test/basic.import.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import.expect.css @@ -160,3 +160,9 @@ html { font-family: "Helvetica Neue", Arial, sans-serif; font-family: var(--font, "Helvetica Neue", Arial, sans-serif); } + +.ignores-declarations-that-have-an-exact-fallback { + left: 1rem; + left: 1rem; + left: var(--size, 1rem); +} diff --git a/plugins/postcss-custom-properties/test/basic.preserve.expect.css b/plugins/postcss-custom-properties/test/basic.preserve.expect.css index 01b766559..4dd57c978 100644 --- a/plugins/postcss-custom-properties/test/basic.preserve.expect.css +++ b/plugins/postcss-custom-properties/test/basic.preserve.expect.css @@ -109,3 +109,8 @@ .test { font-family: "Helvetica Neue", Arial, sans-serif; } + +.ignores-declarations-that-have-an-exact-fallback { + left: 1rem; + left: 1rem; +} From d02e70a5e7ef6712fa7c887753b7e72519b51e22 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Tue, 13 Sep 2022 10:26:09 +0200 Subject: [PATCH 2/3] prevent duplicate code generation --- .../test/basic.preserve.true.expect.css | 2 -- .../postcss-custom-properties/CHANGELOG.md | 19 +++++++++++++++++++ .../src/lib/transform-properties.ts | 6 +++--- .../test/basic.expect.css | 1 - .../test/basic.import-is-empty.expect.css | 1 - .../test/basic.import-override.expect.css | 2 +- .../basic.import-override.inverse.expect.css | 2 +- .../test/basic.import.expect.css | 1 - .../test/basic.preserve.expect.css | 2 +- 9 files changed, 25 insertions(+), 11 deletions(-) diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css index 8bd67bf3f..cde0faaee 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -1077,7 +1077,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } [dir="ltr"] .stage__container { - left: 1rem; left: 1rem; left: var(--size, 1rem); } @@ -1093,7 +1092,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } [dir="rtl"] .stage__container { - right: 1rem; right: 1rem; right: var(--size, 1rem); } diff --git a/plugins/postcss-custom-properties/CHANGELOG.md b/plugins/postcss-custom-properties/CHANGELOG.md index ac8027742..80338ad50 100644 --- a/plugins/postcss-custom-properties/CHANGELOG.md +++ b/plugins/postcss-custom-properties/CHANGELOG.md @@ -1,5 +1,24 @@ # Changes to PostCSS Custom Properties +### Unreleased + +- Prevent duplicate code generation. + +```diff +.foo { + order: 1; + order: var(--my-order, 1); +} + +/* becomes */ + +.foo { + order: 1; +- order: 1; + order: var(--my-order, 1); +} +``` + ### 12.1.8 (June 10, 2022) - Remove some unneeded regular expressions. diff --git a/plugins/postcss-custom-properties/src/lib/transform-properties.ts b/plugins/postcss-custom-properties/src/lib/transform-properties.ts index 7ff5c76b9..7c445931e 100644 --- a/plugins/postcss-custom-properties/src/lib/transform-properties.ts +++ b/plugins/postcss-custom-properties/src/lib/transform-properties.ts @@ -21,9 +21,9 @@ export default (decl, customProperties, opts) => { // conditionally transform values that have changed if (value !== originalValue) { - // if (parentHasExactFallback(decl, value)) { - // return; - // } + if (parentHasExactFallback(decl, value)) { + return; + } if (opts.preserve) { const beforeDecl = decl.cloneBefore({ value }); diff --git a/plugins/postcss-custom-properties/test/basic.expect.css b/plugins/postcss-custom-properties/test/basic.expect.css index f91a6d715..7bd2178a1 100644 --- a/plugins/postcss-custom-properties/test/basic.expect.css +++ b/plugins/postcss-custom-properties/test/basic.expect.css @@ -161,7 +161,6 @@ html { } .ignores-declarations-that-have-an-exact-fallback { - left: 1rem; left: 1rem; left: var(--size, 1rem); } diff --git a/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css b/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css index f91a6d715..7bd2178a1 100644 --- a/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css @@ -161,7 +161,6 @@ html { } .ignores-declarations-that-have-an-exact-fallback { - left: 1rem; left: 1rem; left: var(--size, 1rem); } diff --git a/plugins/postcss-custom-properties/test/basic.import-override.expect.css b/plugins/postcss-custom-properties/test/basic.import-override.expect.css index 1caa1dfba..01d2a7ad5 100644 --- a/plugins/postcss-custom-properties/test/basic.import-override.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import-override.expect.css @@ -112,5 +112,5 @@ .ignores-declarations-that-have-an-exact-fallback { left: 1rem; - left: 1rem; + left: var(--size, 1rem); } diff --git a/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css b/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css index a9681a4a7..73c670cb1 100644 --- a/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css @@ -112,5 +112,5 @@ .ignores-declarations-that-have-an-exact-fallback { left: 1rem; - left: 1rem; + left: var(--size, 1rem); } diff --git a/plugins/postcss-custom-properties/test/basic.import.expect.css b/plugins/postcss-custom-properties/test/basic.import.expect.css index 1dadffe12..f0b5ba074 100644 --- a/plugins/postcss-custom-properties/test/basic.import.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import.expect.css @@ -162,7 +162,6 @@ html { } .ignores-declarations-that-have-an-exact-fallback { - left: 1rem; left: 1rem; left: var(--size, 1rem); } diff --git a/plugins/postcss-custom-properties/test/basic.preserve.expect.css b/plugins/postcss-custom-properties/test/basic.preserve.expect.css index 4dd57c978..3e33fdf3c 100644 --- a/plugins/postcss-custom-properties/test/basic.preserve.expect.css +++ b/plugins/postcss-custom-properties/test/basic.preserve.expect.css @@ -112,5 +112,5 @@ .ignores-declarations-that-have-an-exact-fallback { left: 1rem; - left: 1rem; + left: var(--size, 1rem); } From 8d6296cd4bff21a4fc6fa7eaa43fadeec5020eae Mon Sep 17 00:00:00 2001 From: romainmenke Date: Tue, 13 Sep 2022 12:35:20 +0200 Subject: [PATCH 3/3] fix --- .../src/lib/transform-properties.ts | 11 ++++++++--- plugins/postcss-custom-properties/test/basic.css | 5 +++++ .../postcss-custom-properties/test/basic.expect.css | 6 ++++++ .../test/basic.import-is-empty.expect.css | 6 ++++++ .../test/basic.import-override.expect.css | 5 +++++ .../test/basic.import-override.inverse.expect.css | 5 +++++ .../test/basic.import.expect.css | 6 ++++++ .../test/basic.preserve.expect.css | 5 +++++ 8 files changed, 46 insertions(+), 3 deletions(-) diff --git a/plugins/postcss-custom-properties/src/lib/transform-properties.ts b/plugins/postcss-custom-properties/src/lib/transform-properties.ts index 7c445931e..e78296b04 100644 --- a/plugins/postcss-custom-properties/src/lib/transform-properties.ts +++ b/plugins/postcss-custom-properties/src/lib/transform-properties.ts @@ -1,7 +1,7 @@ import valuesParser from 'postcss-value-parser'; import transformValueAST from './transform-value-ast'; import { isRuleIgnored } from './is-ignored'; -import { Container, Declaration, Node } from 'postcss'; +import { Declaration } from 'postcss'; // transform custom pseudo selectors with custom selectors export default (decl, customProperties, opts) => { @@ -59,9 +59,14 @@ function parentHasExactFallback(decl: Declaration, value: string): boolean { } let hasFallback = false; - decl.parent.each((sibling) => { + const declIndex = decl.parent.index(decl); + decl.parent.each((sibling, index) => { if (sibling === decl) { - return; + return false; + } + + if (index >= declIndex) { + return false; } if (sibling.type !== 'decl') { diff --git a/plugins/postcss-custom-properties/test/basic.css b/plugins/postcss-custom-properties/test/basic.css index f187e9ea9..99f3ec38c 100644 --- a/plugins/postcss-custom-properties/test/basic.css +++ b/plugins/postcss-custom-properties/test/basic.css @@ -143,3 +143,8 @@ html { left: 1rem; left: var(--size, 1rem); } + +.does-not-ignore-declarations-that-have-an-exact-override { + left: var(--size, 1rem); + left: 1rem; +} diff --git a/plugins/postcss-custom-properties/test/basic.expect.css b/plugins/postcss-custom-properties/test/basic.expect.css index 7bd2178a1..169d4d2a9 100644 --- a/plugins/postcss-custom-properties/test/basic.expect.css +++ b/plugins/postcss-custom-properties/test/basic.expect.css @@ -164,3 +164,9 @@ html { left: 1rem; left: var(--size, 1rem); } + +.does-not-ignore-declarations-that-have-an-exact-override { + left: 1rem; + left: var(--size, 1rem); + left: 1rem; +} diff --git a/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css b/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css index 7bd2178a1..169d4d2a9 100644 --- a/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css @@ -164,3 +164,9 @@ html { left: 1rem; left: var(--size, 1rem); } + +.does-not-ignore-declarations-that-have-an-exact-override { + left: 1rem; + left: var(--size, 1rem); + left: 1rem; +} diff --git a/plugins/postcss-custom-properties/test/basic.import-override.expect.css b/plugins/postcss-custom-properties/test/basic.import-override.expect.css index 01d2a7ad5..3cbb7fd22 100644 --- a/plugins/postcss-custom-properties/test/basic.import-override.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import-override.expect.css @@ -114,3 +114,8 @@ left: 1rem; left: var(--size, 1rem); } + +.does-not-ignore-declarations-that-have-an-exact-override { + left: 1rem; + left: 1rem; +} diff --git a/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css b/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css index 73c670cb1..fc55c93ac 100644 --- a/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css @@ -114,3 +114,8 @@ left: 1rem; left: var(--size, 1rem); } + +.does-not-ignore-declarations-that-have-an-exact-override { + left: 1rem; + left: 1rem; +} diff --git a/plugins/postcss-custom-properties/test/basic.import.expect.css b/plugins/postcss-custom-properties/test/basic.import.expect.css index f0b5ba074..b003abd32 100644 --- a/plugins/postcss-custom-properties/test/basic.import.expect.css +++ b/plugins/postcss-custom-properties/test/basic.import.expect.css @@ -165,3 +165,9 @@ html { left: 1rem; left: var(--size, 1rem); } + +.does-not-ignore-declarations-that-have-an-exact-override { + left: 1rem; + left: var(--size, 1rem); + left: 1rem; +} diff --git a/plugins/postcss-custom-properties/test/basic.preserve.expect.css b/plugins/postcss-custom-properties/test/basic.preserve.expect.css index 3e33fdf3c..b8bfc6a85 100644 --- a/plugins/postcss-custom-properties/test/basic.preserve.expect.css +++ b/plugins/postcss-custom-properties/test/basic.preserve.expect.css @@ -114,3 +114,8 @@ left: 1rem; left: var(--size, 1rem); } + +.does-not-ignore-declarations-that-have-an-exact-override { + left: 1rem; + left: 1rem; +}