color functional notation : percentage values (#386)

romainmenke · web-flow · commit 2e6d070d2eca · 2022-05-19T18:59:45.000+02:00
* color functional notation : percentage values

* fix
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css
@@ -440,11 +440,11 @@
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
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
@@ -440,11 +440,11 @@
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css
@@ -360,11 +360,11 @@
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
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
@@ -359,11 +359,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css
@@ -464,11 +464,11 @@
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css
@@ -356,11 +356,11 @@
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css
@@ -479,11 +479,11 @@
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
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
@@ -462,11 +462,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
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
@@ -773,7 +773,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
 	prop-1: rgb(0,132,94);
 	prop-1: color(display-p3 0.00000 0.51872 0.36985);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
@@ -785,7 +784,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	prop-4: color(display-p3 0.02472 0.01150 0.00574 / -webkit-calc(33 / 22));
 	prop-4: color(display-p3 0.02472 0.01150 0.00574 / -moz-calc(33 / 22));
 	prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
 	prop-5: rgb(255,255,255);
 	prop-5: color(display-p3 1 1 1 1);
 }
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
@@ -361,11 +361,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
@@ -469,11 +469,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
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
@@ -434,11 +434,11 @@
 }
 
 .color-function {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab {
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css
@@ -679,13 +679,13 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo
 }
 
 .color-function:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
-	prop-1: rgb(0, 132, 94);
+	prop-1: rgb(0,132,94);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
 	prop-3: rgba(7,3,1,1);
 	prop-4: rgba(7,3,1,-webkit-calc(33 / 22));
 	prop-4: rgba(7,3,1,-moz-calc(33 / 22));
 	prop-4: rgba(7,3,1,calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
+	prop-5: rgb(255,255,255);
 }
 
 .oklab:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css
@@ -784,7 +784,6 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo
 }
 
 .color-function:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
-	prop-1: rgb(0, 132, 94);
 	prop-1: rgb(0,132,94);
 	prop-1: color(display-p3 0.00000 0.51872 0.36985);
 	prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
@@ -796,7 +795,6 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo
 	prop-4: color(display-p3 0.02472 0.01150 0.00574 / -webkit-calc(33 / 22));
 	prop-4: color(display-p3 0.02472 0.01150 0.00574 / -moz-calc(33 / 22));
 	prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22));
-	prop-5: rgb(255, 255, 255);
 	prop-5: rgb(255,255,255);
 	prop-5: color(display-p3 1 1 1 1);
 }
diff --git a/plugins/postcss-color-functional-notation/CHANGELOG.md b/plugins/postcss-color-functional-notation/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changes to PostCSS Color Functional Notation
 
+### Unreleased
+
+- Handle modern channel values in legacy notation (comma separated)
+
+```css
+.color {
+  color: rgba(0, 255, 0, 50%);
+}
+
+/* becomes */
+
+.color {
+  color: rgba(0, 255, 0, 0.5);
+}
+```
+
 ### 4.2.2 (February 5, 2022)
 
 - Improved `es module` and `commonjs` compatibility
diff --git a/plugins/postcss-color-functional-notation/src/on-css-function.ts b/plugins/postcss-color-functional-notation/src/on-css-function.ts
@@ -3,11 +3,12 @@ import type { FunctionNode, Dimension, Node, DivNode, WordNode, SpaceNode } from
 
 function onCSSFunction(node: FunctionNode) {
 	const value = node.value;
-	let rawNodes = node.nodes;
-	if (value === 'rgb' || value === 'hsl') {
-		rawNodes = convertOldSyntaxToNewSyntaxBeforeTransform(rawNodes);
+	if (!needsConversion(value === 'rgb' || value === 'rgba', node.nodes)) {
+		return;
 	}
 
+	const rawNodes = convertOldSyntaxToNewSyntaxBeforeTransform(node.nodes);
+
 	const relevantNodes = rawNodes.slice().filter((x) => {
 		return x.type !== 'comment' && x.type !== 'space';
 	});
@@ -349,3 +350,46 @@ function convertOldSyntaxToNewSyntaxBeforeTransform(nodes: Array<Node>): Array<N
 
 	return nodes;
 }
+
+function needsConversion(isRGB: boolean, nodes: Array<Node>) {
+	let hasCommas = false;
+	let hasPercentageAlpha = false;
+	let isRGB_AndHasAnyPercentageValue = false;
+
+	const relevantNodes = nodes.slice().filter((x) => {
+		return x.type !== 'comment' && x.type !== 'space';
+	});
+
+	for (let i = 0; i < relevantNodes.length; i++) {
+		const node = relevantNodes[i];
+		if (node.type === 'word' && node.value === 'from') {
+			// Too modern, not handled by this plugin
+			return false;
+		}
+
+		if (node.type === 'div' && node.value === ',') {
+			hasCommas = true;
+			continue;
+		}
+
+		if (isRGB && node.type === 'word' && node.value.endsWith('%')) {
+			isRGB_AndHasAnyPercentageValue = true;
+			continue;
+		}
+
+		if (i === (nodes.length - 1) && node.type === 'word' && node.value.endsWith('%')) {
+			hasPercentageAlpha = true;
+			continue;
+		}
+	}
+
+	if (hasCommas && (hasPercentageAlpha || isRGB_AndHasAnyPercentageValue)) {
+		return true;
+	}
+
+	if (hasCommas) {
+		return false;
+	}
+
+	return true;
+}
diff --git a/plugins/postcss-color-functional-notation/test/basic.css b/plugins/postcss-color-functional-notation/test/basic.css
@@ -71,3 +71,26 @@
 	color: hsl(120 100% 50% / 50%);
 	color: hsl(120, 100%, 50%, 0);
 }
+
+.test-legacy-notation-with-modern-components--rgb {
+	color: rgb(50%, 34, 34);
+	color: rgb(178, 10%, 34);
+	color: rgb(178, 34, 10%);
+}
+
+.test-legacy-notation-with-modern-components--rgba {
+	color: rgba(50%, 34, 34, 1);
+	color: rgba(178, 10%, 34, 1);
+	color: rgba(178, 34, 10%, 1);
+	color: rgba(178, 34, 34, 100%);
+}
+
+.test-legacy-notation-with-modern-components--hsla {
+	color: hsla(120, 100%, 50%, 100%);
+}
+
+.test-ignore {
+	/* this plugin shouldn't format */
+	color: rgba(0,0,0,0.1); /* spaceless */
+	color: rgba(0, 0, 0, 0.2); /* with spaces */
+}
diff --git a/plugins/postcss-color-functional-notation/test/basic.expect.css b/plugins/postcss-color-functional-notation/test/basic.expect.css
@@ -64,10 +64,33 @@
 
 .rgb-with-alpha {
 	color: rgba(178, 34, 34, 0.5);
-	color: rgba(0, 0, 0, 0);
+	color: rgb(0, 0, 0, 0);
 }
 
 .hsl-with-alpha {
 	color: hsla(120, 100%, 50%, 0.5);
-	color: hsla(120, 100%, 50%, 0);
+	color: hsl(120, 100%, 50%, 0);
+}
+
+.test-legacy-notation-with-modern-components--rgb {
+	color: rgb(127, 34, 34);
+	color: rgb(178, 25, 34);
+	color: rgb(178, 34, 25);
+}
+
+.test-legacy-notation-with-modern-components--rgba {
+	color: rgba(127, 34, 34, 1);
+	color: rgba(178, 25, 34, 1);
+	color: rgba(178, 34, 25, 1);
+	color: rgba(178, 34, 34, 1);
+}
+
+.test-legacy-notation-with-modern-components--hsla {
+	color: hsla(120, 100%, 50%, 1);
+}
+
+.test-ignore {
+	/* this plugin shouldn't format */
+	color: rgba(0,0,0,0.1); /* spaceless */
+	color: rgba(0, 0, 0, 0.2); /* with spaces */
 }
diff --git a/plugins/postcss-color-functional-notation/test/basic.preserve-true.expect.css b/plugins/postcss-color-functional-notation/test/basic.preserve-true.expect.css
@@ -101,13 +101,42 @@
 .rgb-with-alpha {
 	color: rgba(178, 34, 34, 0.5);
 	color: rgb(70% 13.5% 13.5% / 50%);
-	color: rgba(0, 0, 0, 0);
 	color: rgb(0, 0, 0, 0);
 }
 
 .hsl-with-alpha {
 	color: hsla(120, 100%, 50%, 0.5);
 	color: hsl(120 100% 50% / 50%);
-	color: hsla(120, 100%, 50%, 0);
 	color: hsl(120, 100%, 50%, 0);
 }
+
+.test-legacy-notation-with-modern-components--rgb {
+	color: rgb(127, 34, 34);
+	color: rgb(50%, 34, 34);
+	color: rgb(178, 25, 34);
+	color: rgb(178, 10%, 34);
+	color: rgb(178, 34, 25);
+	color: rgb(178, 34, 10%);
+}
+
+.test-legacy-notation-with-modern-components--rgba {
+	color: rgba(127, 34, 34, 1);
+	color: rgba(50%, 34, 34, 1);
+	color: rgba(178, 25, 34, 1);
+	color: rgba(178, 10%, 34, 1);
+	color: rgba(178, 34, 25, 1);
+	color: rgba(178, 34, 10%, 1);
+	color: rgba(178, 34, 34, 1);
+	color: rgba(178, 34, 34, 100%);
+}
+
+.test-legacy-notation-with-modern-components--hsla {
+	color: hsla(120, 100%, 50%, 1);
+	color: hsla(120, 100%, 50%, 100%);
+}
+
+.test-ignore {
+	/* this plugin shouldn't format */
+	color: rgba(0,0,0,0.1); /* spaceless */
+	color: rgba(0, 0, 0, 0.2); /* with spaces */
+}
diff --git a/plugins/postcss-color-functional-notation/test/variables.css b/plugins/postcss-color-functional-notation/test/variables.css
diff --git a/plugins/postcss-color-functional-notation/test/variables.expect.css b/plugins/postcss-color-functional-notation/test/variables.expect.css
diff --git a/plugins/postcss-color-functional-notation/test/variables.preserve-true.expect.css b/plugins/postcss-color-functional-notation/test/variables.preserve-true.expect.css
diff --git a/plugins/postcss-progressive-custom-properties/test/basic.css b/plugins/postcss-progressive-custom-properties/test/basic.css
diff --git a/plugins/postcss-progressive-custom-properties/test/basic.expect.css b/plugins/postcss-progressive-custom-properties/test/basic.expect.css

Original file line number	Diff line number	Diff line change
`@@ -440,11 +440,11 @@`
`440`	`440`	`}`
`441`	`441`
`442`	`442`	`.color-function {`
`443`		`- prop-1: rgb(0, 132, 94);`
	`443`	`+ prop-1: rgb(0,132,94);`
`444`	`444`	`prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';`
`445`	`445`	`prop-3: rgba(7,3,1,1);`
`446`	`446`	`prop-4: rgba(7,3,1,calc(33 / 22));`
`447`		`- prop-5: rgb(255, 255, 255);`
	`447`	`+ prop-5: rgb(255,255,255);`
`448`	`448`	`}`
`449`	`449`
`450`	`450`	`.oklab {`
Original file line number	Diff line number	Diff line change
`@@ -360,11 +360,11 @@`
`360`	`360`	`}`
`361`	`361`
`362`	`362`	`.color-function {`
`363`		`- prop-1: rgb(0, 132, 94);`
	`363`	`+ prop-1: rgb(0,132,94);`
`364`	`364`	`prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';`
`365`	`365`	`prop-3: rgba(7,3,1,1);`
`366`	`366`	`prop-4: rgba(7,3,1,calc(33 / 22));`
`367`		`- prop-5: rgb(255, 255, 255);`
	`367`	`+ prop-5: rgb(255,255,255);`
`368`	`368`	`}`
`369`	`369`
`370`	`370`	`.oklab {`
Original file line number	Diff line number	Diff line change
`@@ -359,11 +359,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te`
`359`	`359`	`}`
`360`	`360`
`361`	`361`	`.color-function {`
`362`		`- prop-1: rgb(0, 132, 94);`
	`362`	`+ prop-1: rgb(0,132,94);`
`363`	`363`	`prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';`
`364`	`364`	`prop-3: rgba(7,3,1,1);`
`365`	`365`	`prop-4: rgba(7,3,1,calc(33 / 22));`
`366`		`- prop-5: rgb(255, 255, 255);`
	`366`	`+ prop-5: rgb(255,255,255);`
`367`	`367`	`}`
`368`	`368`
`369`	`369`	`.oklab {`
Original file line number	Diff line number	Diff line change
`@@ -464,11 +464,11 @@`
`464`	`464`	`}`
`465`	`465`
`466`	`466`	`.color-function {`
`467`		`- prop-1: rgb(0, 132, 94);`
	`467`	`+ prop-1: rgb(0,132,94);`
`468`	`468`	`prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';`
`469`	`469`	`prop-3: rgba(7,3,1,1);`
`470`	`470`	`prop-4: rgba(7,3,1,calc(33 / 22));`
`471`		`- prop-5: rgb(255, 255, 255);`
	`471`	`+ prop-5: rgb(255,255,255);`
`472`	`472`	`}`
`473`	`473`
`474`	`474`	`.oklab {`
Original file line number	Diff line number	Diff line change
`@@ -356,11 +356,11 @@`
`356`	`356`	`}`
`357`	`357`
`358`	`358`	`.color-function {`
`359`		`- prop-1: rgb(0, 132, 94);`
	`359`	`+ prop-1: rgb(0,132,94);`
`360`	`360`	`prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';`
`361`	`361`	`prop-3: rgba(7,3,1,1);`
`362`	`362`	`prop-4: rgba(7,3,1,calc(33 / 22));`
`363`		`- prop-5: rgb(255, 255, 255);`
	`363`	`+ prop-5: rgb(255,255,255);`
`364`	`364`	`}`
`365`	`365`
`366`	`366`	`.oklab {`
Original file line number	Diff line number	Diff line change
`@@ -479,11 +479,11 @@`
`479`	`479`	`}`
`480`	`480`
`481`	`481`	`.color-function {`
`482`		`- prop-1: rgb(0, 132, 94);`
	`482`	`+ prop-1: rgb(0,132,94);`
`483`	`483`	`prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';`
`484`	`484`	`prop-3: rgba(7,3,1,1);`
`485`	`485`	`prop-4: rgba(7,3,1,calc(33 / 22));`
`486`		`- prop-5: rgb(255, 255, 255);`
	`486`	`+ prop-5: rgb(255,255,255);`
`487`	`487`	`}`
`488`	`488`
`489`	`489`	`.oklab {`
Original file line number	Diff line number	Diff line change
`@@ -462,11 +462,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te`
`462`	`462`	`}`
`463`	`463`
`464`	`464`	`.color-function {`
`465`		`- prop-1: rgb(0, 132, 94);`
	`465`	`+ prop-1: rgb(0,132,94);`
`466`	`466`	`prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';`
`467`	`467`	`prop-3: rgba(7,3,1,1);`
`468`	`468`	`prop-4: rgba(7,3,1,calc(33 / 22));`
`469`		`- prop-5: rgb(255, 255, 255);`
	`469`	`+ prop-5: rgb(255,255,255);`
`470`	`470`	`}`
`471`	`471`
`472`	`472`	`.oklab {`
Original file line number	Diff line number	Diff line change
`@@ -773,7 +773,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te`
`773`	`773`	`}`
`774`	`774`
`775`	`775`	`.color-function {`
`776`		`- prop-1: rgb(0, 132, 94);`
`777`	`776`	`prop-1: rgb(0,132,94);`
`778`	`777`	`prop-1: color(display-p3 0.00000 0.51872 0.36985);`
`779`	`778`	`prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';`
`@@ -785,7 +784,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te`
`785`	`784`	`prop-4: color(display-p3 0.02472 0.01150 0.00574 / -webkit-calc(33 / 22));`
`786`	`785`	`prop-4: color(display-p3 0.02472 0.01150 0.00574 / -moz-calc(33 / 22));`
`787`	`786`	`prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22));`
`788`		`- prop-5: rgb(255, 255, 255);`
`789`	`787`	`prop-5: rgb(255,255,255);`
`790`	`788`	`prop-5: color(display-p3 1 1 1 1);`
`791`	`789`	`}`
Original file line number	Diff line number	Diff line change
`@@ -361,11 +361,11 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te`
`361`	`361`	`}`
`362`	`362`
`363`	`363`	`.color-function {`
`364`		`- prop-1: rgb(0, 132, 94);`
	`364`	`+ prop-1: rgb(0,132,94);`
`365`	`365`	`prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';`
`366`	`366`	`prop-3: rgba(7,3,1,1);`
`367`	`367`	`prop-4: rgba(7,3,1,calc(33 / 22));`
`368`		`- prop-5: rgb(255, 255, 255);`
	`368`	`+ prop-5: rgb(255,255,255);`
`369`	`369`	`}`
`370`	`370`
`371`	`371`	`.oklab {`