extend progressive-custom-properties to the var() function (#979)

* extend progressive-custom-properties to the var function

* Update plugin-packs/postcss-preset-env/.tape.mjs

* change the plugin order

Author: romainmenke

package-lock.json

@@ -110,6 +110,7 @@
 		"postcss": "^8.4"
 	},
 	"devDependencies": {
+		"@csstools/postcss-debug-logger": "1.0.0",
 		"@csstools/postcss-tape": "*",
 		"@webref/css": "^6.5.1",
 		"postcss-simple-vars": "^7.0.1"

plugin-packs/postcss-preset-env/dist/index.cjs

@@ -1,7 +1,6 @@
 // ids ordered by required execution, then alphabetically
 export default [
 	'custom-media-queries',
-	'custom-properties',
 	'environment-variables', // run environment-variables here to access transpiled custom media params and properties
 	'image-set-function', // run images-set-function before nesting-rules so that it may fix nested media
 	'media-query-ranges', // run media-query-range
@@ -56,5 +55,8 @@ export default [
 	'nested-calc',
 	// Math functions.
 
+	// must be after all value related rules
+	'custom-properties',
+
 	'cascade-layers',
 ];

plugin-packs/postcss-preset-env/dist/index.mjs

@@ -457,7 +457,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -593,7 +593,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -610,3 +610,9 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}

plugin-packs/postcss-preset-env/package.json

@@ -457,7 +457,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -593,7 +593,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -610,3 +610,9 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}

plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs

@@ -368,7 +368,7 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: var(--non-existing, 2ic);
+	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;
 	margin: 0.5em 1em .2em;
@@ -503,7 +503,7 @@
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -520,3 +520,9 @@
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, 1);
+	color: rgba(87, 107, 149, var(--opacity));
+}

plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css

@@ -501,7 +501,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 
 @supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
 .gradients-interpolation-method {
-	--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
+	--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
 }
 }
 
@@ -518,3 +518,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87, 107, 149, var(--opacity));
+}

plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css

@@ -512,3 +512,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
 	color-9: rgb(130, 31, 0);
 	color-9: color(display-p3 0.48896 0.1211 0);
 }
+
+.test-property-with-var {
+	--opacity: 1;
+	color: rgba(87 107 149 / var(--opacity));
+}