custom-properties : fix how preserve false interacts with duplicate code (#662)

* custom-properties : add failing test for #661

* fix

* closing tags

* clarify changelog

Author: romainmenke

plugins/postcss-custom-properties/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changes to PostCSS Custom Properties
 
+### Unreleased
+
+- Fix how `preserve: false` interacts with logic around duplicate code (see `12.1.9`).
+
+```diff
+:root {
+	--my-order: 1;
+}
+
+.foo {
+	order: 1;
+	order: var(--my-order);
+}
+
+/* With `preserve: false` : */
+
+.foo {
+	order: 1;
+}
+```
+
 ### 12.1.9 (September 14, 2022)
 
 - Prevent duplicate code generation.

plugins/postcss-custom-properties/src/lib/transform-properties.ts

@@ -22,6 +22,10 @@ export default (decl, customProperties, opts) => {
 		// conditionally transform values that have changed
 		if (value !== originalValue) {
 			if (parentHasExactFallback(decl, value)) {
+				if (!opts.preserve) {
+					decl.remove();
+				}
+
 				return;
 			}
 

plugins/postcss-custom-properties/test/basic.css

@@ -139,12 +139,22 @@ html {
 	font-family: var(--font, "Helvetica Neue", Arial, sans-serif);
 }
 
-.ignores-declarations-that-have-an-exact-fallback {
+.ignores-declarations-that-have-an-exact-fallback-a {
 	left: 1rem;
-	left: var(--size, 1rem);
+	left: var(--does-not-exist, 1rem);
 }
 
-.does-not-ignore-declarations-that-have-an-exact-override {
-	left: var(--size, 1rem);
+.ignores-declarations-that-have-an-exact-fallback-b {
+	right: 2em;
+	right: var(--✅-size);
+}
+
+.does-not-ignore-declarations-that-have-an-exact-override-a {
+	left: var(--does-not-exist, 1rem);
 	left: 1rem;
 }
+
+.does-not-ignore-declarations-that-have-an-exact-override-b {
+	right: var(--✅-size);
+	right: 2em;
+}

plugins/postcss-custom-properties/test/basic.expect.css

@@ -160,13 +160,24 @@ html {
 	font-family: var(--font, "Helvetica Neue", Arial, sans-serif);
 }
 
-.ignores-declarations-that-have-an-exact-fallback {
+.ignores-declarations-that-have-an-exact-fallback-a {
 	left: 1rem;
-	left: var(--size, 1rem);
+	left: var(--does-not-exist, 1rem);
 }
 
-.does-not-ignore-declarations-that-have-an-exact-override {
+.ignores-declarations-that-have-an-exact-fallback-b {
+	right: 2em;
+	right: var(--✅-size);
+}
+
+.does-not-ignore-declarations-that-have-an-exact-override-a {
 	left: 1rem;
-	left: var(--size, 1rem);
+	left: var(--does-not-exist, 1rem);
 	left: 1rem;
 }
+
+.does-not-ignore-declarations-that-have-an-exact-override-b {
+	right: 2em;
+	right: var(--✅-size);
+	right: 2em;
+}

plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css

@@ -160,13 +160,24 @@ html {
 	font-family: var(--font, "Helvetica Neue", Arial, sans-serif);
 }
 
-.ignores-declarations-that-have-an-exact-fallback {
+.ignores-declarations-that-have-an-exact-fallback-a {
 	left: 1rem;
-	left: var(--size, 1rem);
+	left: var(--does-not-exist, 1rem);
 }
 
-.does-not-ignore-declarations-that-have-an-exact-override {
+.ignores-declarations-that-have-an-exact-fallback-b {
+	right: 2em;
+	right: var(--✅-size);
+}
+
+.does-not-ignore-declarations-that-have-an-exact-override-a {
 	left: 1rem;
-	left: var(--size, 1rem);
+	left: var(--does-not-exist, 1rem);
 	left: 1rem;
 }
+
+.does-not-ignore-declarations-that-have-an-exact-override-b {
+	right: 2em;
+	right: var(--✅-size);
+	right: 2em;
+}

plugins/postcss-custom-properties/test/basic.import-override.expect.css

@@ -110,12 +110,20 @@
 	font-family: "Helvetica Neue", Arial, sans-serif;
 }
 
-.ignores-declarations-that-have-an-exact-fallback {
+.ignores-declarations-that-have-an-exact-fallback-a {
 	left: 1rem;
-	left: var(--size, 1rem);
 }
 
-.does-not-ignore-declarations-that-have-an-exact-override {
+.ignores-declarations-that-have-an-exact-fallback-b {
+	right: 2em;
+}
+
+.does-not-ignore-declarations-that-have-an-exact-override-a {
 	left: 1rem;
 	left: 1rem;
 }
+
+.does-not-ignore-declarations-that-have-an-exact-override-b {
+	right: 2em;
+	right: 2em;
+}

plugins/postcss-custom-properties/test/basic.import-override.inverse.expect.css

@@ -110,12 +110,20 @@
 	font-family: "Helvetica Neue", Arial, sans-serif;
 }
 
-.ignores-declarations-that-have-an-exact-fallback {
+.ignores-declarations-that-have-an-exact-fallback-a {
 	left: 1rem;
-	left: var(--size, 1rem);
 }
 
-.does-not-ignore-declarations-that-have-an-exact-override {
+.ignores-declarations-that-have-an-exact-fallback-b {
+	right: 2em;
+}
+
+.does-not-ignore-declarations-that-have-an-exact-override-a {
 	left: 1rem;
 	left: 1rem;
 }
+
+.does-not-ignore-declarations-that-have-an-exact-override-b {
+	right: 2em;
+	right: 2em;
+}

plugins/postcss-custom-properties/test/basic.import.expect.css

@@ -161,13 +161,24 @@ html {
 	font-family: var(--font, "Helvetica Neue", Arial, sans-serif);
 }
 
-.ignores-declarations-that-have-an-exact-fallback {
+.ignores-declarations-that-have-an-exact-fallback-a {
 	left: 1rem;
-	left: var(--size, 1rem);
+	left: var(--does-not-exist, 1rem);
 }
 
-.does-not-ignore-declarations-that-have-an-exact-override {
+.ignores-declarations-that-have-an-exact-fallback-b {
+	right: 2em;
+	right: var(--✅-size);
+}
+
+.does-not-ignore-declarations-that-have-an-exact-override-a {
 	left: 1rem;
-	left: var(--size, 1rem);
+	left: var(--does-not-exist, 1rem);
 	left: 1rem;
 }
+
+.does-not-ignore-declarations-that-have-an-exact-override-b {
+	right: 2em;
+	right: var(--✅-size);
+	right: 2em;
+}

plugins/postcss-custom-properties/test/basic.preserve.expect.css

@@ -110,12 +110,20 @@
 	font-family: "Helvetica Neue", Arial, sans-serif;
 }
 
-.ignores-declarations-that-have-an-exact-fallback {
+.ignores-declarations-that-have-an-exact-fallback-a {
 	left: 1rem;
-	left: var(--size, 1rem);
 }
 
-.does-not-ignore-declarations-that-have-an-exact-override {
+.ignores-declarations-that-have-an-exact-fallback-b {
+	right: 2em;
+}
+
+.does-not-ignore-declarations-that-have-an-exact-override-a {
 	left: 1rem;
 	left: 1rem;
 }
+
+.does-not-ignore-declarations-that-have-an-exact-override-b {
+	right: 2em;
+	right: 2em;
+}