finishing up

romainmenke · romainmenke · commit 4802b42ce1fa · 2025-08-22T09:53:45.000+02:00
diff --git a/plugins/postcss-color-mix-function/test/basic.css b/plugins/postcss-color-mix-function/test/basic.css
@@ -178,3 +178,7 @@
 	color-3: color-mix(in display-p3-linear, pink, green);
 	color-4: color-mix(in display-p3-linear, lime, green);
 }
+
+.default-interpolation-space {
+	color: color-mix(#09232c, white 50%);
+}
diff --git a/plugins/postcss-color-mix-function/test/basic.expect.css b/plugins/postcss-color-mix-function/test/basic.expect.css
@@ -184,3 +184,7 @@
 	color-3: rgb(188, 164, 149);
 	color-4: rgb(0, 205, 0);
 }
+
+.default-interpolation-space {
+	color: rgb(123, 137, 142);
+}
diff --git a/plugins/postcss-color-mix-function/test/basic.preserve-true.expect.css b/plugins/postcss-color-mix-function/test/basic.preserve-true.expect.css
@@ -263,3 +263,8 @@
 	color-4: rgb(0, 205, 0);
 	color-4: color-mix(in display-p3-linear, lime, green);
 }
+
+.default-interpolation-space {
+	color: rgb(123, 137, 142);
+	color: color-mix(#09232c, white 50%);
+}
diff --git a/plugins/postcss-color-mix-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-color-mix-function/test/basic.with-cloned-rules.expect.css
@@ -263,3 +263,8 @@
 	color-4: rgb(0, 205, 0);
 	color-4: color-mix(in display-p3-linear, lime, green);
 }
+
+.default-interpolation-space {
+	color: rgb(123, 137, 142);
+	color: color-mix(#09232c, white 50%);
+}
diff --git a/plugins/postcss-progressive-custom-properties/CHANGELOG.md b/plugins/postcss-progressive-custom-properties/CHANGELOG.md
@@ -3,6 +3,9 @@
 ### Unreleased (minor)
 
 - Add support for `color(display-p3-linear 0.3081 0.014 0.0567)`
+- Add support for `color-mix(in display-p3-linear, red, blue)`
+- Add support for `color-mix(red, blue)`
+- Add support for `alpha(from red / 0.5)`
 
 ### 4.1.0
 
diff --git a/plugins/postcss-progressive-custom-properties/dist/index.cjs b/plugins/postcss-progressive-custom-properties/dist/index.cjs
diff --git a/plugins/postcss-progressive-custom-properties/dist/index.mjs b/plugins/postcss-progressive-custom-properties/dist/index.mjs
diff --git a/plugins/postcss-progressive-custom-properties/scripts/color-mix.mjs b/plugins/postcss-progressive-custom-properties/scripts/color-mix.mjs
@@ -47,4 +47,12 @@ export const colorMixMatchers = [
 			matcherForValue('color-mix(in $a $b hue,$1 $2,$3 $4, _z)'),
 		],
 	},
+	{
+		'supports': 'color-mix(red, blue)',
+		'property': 'color',
+		'sniff': 'color-mix(',
+		'matchers': [
+			matcherForValue('color-mix(_z)'),
+		],
+	},
 ];
diff --git a/plugins/postcss-progressive-custom-properties/scripts/relative-color-syntax.mjs b/plugins/postcss-progressive-custom-properties/scripts/relative-color-syntax.mjs
@@ -1,6 +1,14 @@
 import { matcherForValue } from './matcher-for-value.mjs';
 
 export const relativeColorSyntaxMatches = [
+	{
+		'supports': 'color(from red display-p3-linear r g b)',
+		'property': 'color',
+		'sniff': 'display-p3-linear',
+		'matchers': [
+			matcherForValue('color(from $a display-p3-linear _z)'),
+		],
+	},
 	{
 		'supports': 'lab(from red l 1 1% / calc(alpha + 0.1))',
 		'property': 'color',
diff --git a/plugins/postcss-progressive-custom-properties/src/matchers.ts b/plugins/postcss-progressive-custom-properties/src/matchers.ts
@@ -1004,6 +1004,61 @@ export const matchers = [
 			}
 		]
 	},
+	{
+		"supports": "color-mix(red, blue)",
+		"property": "color",
+		"sniff": "color-mix(",
+		"matchers": [
+			{
+				"type": "function",
+				"value": "color-mix",
+				"nodes": [
+					{
+						"type": "word",
+						"anyRemainingArguments": true
+					}
+				]
+			}
+		]
+	},
+	{
+		"supports": "color(from red display-p3-linear r g b)",
+		"property": "color",
+		"sniff": "display-p3-linear",
+		"matchers": [
+			{
+				"type": "function",
+				"value": "color",
+				"nodes": [
+					{
+						"type": "word",
+						"value": "from"
+					},
+					{
+						"type": "space"
+					},
+					{
+						"type": "word",
+						"isVariable": true
+					},
+					{
+						"type": "space"
+					},
+					{
+						"type": "word",
+						"value": "display-p3-linear"
+					},
+					{
+						"type": "space"
+					},
+					{
+						"type": "word",
+						"anyRemainingArguments": true
+					}
+				]
+			}
+		]
+	},
 	{
 		"supports": "lab(from red l 1 1% / calc(alpha + 0.1))",
 		"property": "color",
diff --git a/plugins/postcss-progressive-custom-properties/test/basic.css b/plugins/postcss-progressive-custom-properties/test/basic.css
@@ -157,6 +157,10 @@
 	--color-mix-4: color-mix(in srgb, red);
 	--color-mix-5: purple;
 	--color-mix-5: color-mix(in display-p3-linear, purple, pink);
+	--color-mix-6: purple;
+	--color-mix-6: color-mix(purple, pink);
+	--color-mix-7: purple;
+	--color-mix-7: color-mix(red 10%, purple 20%, pink 30%);
 }
 
 :root {
@@ -184,6 +188,8 @@
 	--color-rcs-11: rgb(from blue r g b / alpha);
 	--color-rcs-12: green;
 	--color-rcs-12: hsl(from blue h s l / alpha);
+	--color-rcs-13: green;
+	--color-rcs-13: color(from red display-p3-linear r g b);
 }
 
 :root {
diff --git a/plugins/postcss-progressive-custom-properties/test/basic.expect.css b/plugins/postcss-progressive-custom-properties/test/basic.expect.css
@@ -260,6 +260,8 @@
 	--color-mix-3: rgb(85, 85, 85);
 	--color-mix-4: red;
 	--color-mix-5: purple;
+	--color-mix-6: purple;
+	--color-mix-7: purple;
 }
 
 @supports (color: color(display-p3 0 0 0%)) {
@@ -294,6 +296,13 @@
 }
 }
 
+@supports (color: color-mix(red, blue)) {
+:root {
+	--color-mix-6: color-mix(purple, pink);
+	--color-mix-7: color-mix(red 10%, purple 20%, pink 30%);
+}
+}
+
 :root {
 	--color-rcs-1: green;
 	--color-rcs-2: green;
@@ -307,6 +316,7 @@
 	--color-rcs-10: green;
 	--color-rcs-11: green;
 	--color-rcs-12: green;
+	--color-rcs-13: green;
 }
 
 @supports (color: color(xyz 0 0 0%)) and (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
@@ -346,6 +356,12 @@
 }
 }
 
+@supports (color: color(from red display-p3-linear r g b)) {
+:root {
+	--color-rcs-13: color(from red display-p3-linear r g b);
+}
+}
+
 :root {
 	--color-rcs-invalid-1: green;
 	--color-rcs-invalid-2: green;

Original file line number	Diff line number	Diff line change
`@@ -178,3 +178,7 @@`
`178`	`178`	`color-3: color-mix(in display-p3-linear, pink, green);`
`179`	`179`	`color-4: color-mix(in display-p3-linear, lime, green);`
`180`	`180`	`}`
	`181`	`+`
	`182`	`+.default-interpolation-space {`
	`183`	`+ color: color-mix(#09232c, white 50%);`
	`184`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -184,3 +184,7 @@`
`184`	`184`	`color-3: rgb(188, 164, 149);`
`185`	`185`	`color-4: rgb(0, 205, 0);`
`186`	`186`	`}`
	`187`	`+`
	`188`	`+.default-interpolation-space {`
	`189`	`+ color: rgb(123, 137, 142);`
	`190`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -263,3 +263,8 @@`
`263`	`263`	`color-4: rgb(0, 205, 0);`
`264`	`264`	`color-4: color-mix(in display-p3-linear, lime, green);`
`265`	`265`	`}`
	`266`	`+`
	`267`	`+.default-interpolation-space {`
	`268`	`+ color: rgb(123, 137, 142);`
	`269`	`+ color: color-mix(#09232c, white 50%);`
	`270`	`+}`