css-color-4 : percentage & number unit color components (csstools#266)

* css-color-4 : percentage unit color components

* finish lab

* more unit support in color components

* cleanup

* update change log

* finish

* tabs

Author: romainmenke

plugins/postcss-color-function/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changes to PostCSS Color Function
 
+### Unreleased (minor)
+
+- Allow percentage units in XYZ color spaces.
+
+```css
+.percentages {
+	color-1: color(xyz-d50 64.331% 19.245% 16.771%);
+	color-2: color(xyz-d65 64.331% 19.245% 16.771%);
+	color-3: color(xyz 64.331% 19.245% 16.771%);
+
+	/* becomes */
+
+	color-1: rgb(245,0,135);
+	color-2: rgb(253,0,127);
+	color-3: rgb(253,0,127);
+}
+```
+
 ### 1.0.3 (March 8, 2022)
 
 - Fix gamut mapping giving overly unsaturated colors.

plugins/postcss-color-function/src/on-css-function.ts

@@ -236,8 +236,7 @@ function colorFunctionContents(nodes): Color|null {
 			}
 		}
 
-		if (!out.colorSpace.startsWith('xyz') && isNumericNodePercentageOrNumber(nodes[i])) {
-			// non-xyz DOES support percentages
+		if (isNumericNodePercentageOrNumber(nodes[i])) {
 			const unitAndValue = valueParser.unit(nodes[i].value) as Dimension;
 			if (unitAndValue.unit === '%') {
 				// transform the channel from a Percentage to (0-1) Number
@@ -250,19 +249,6 @@ function colorFunctionContents(nodes): Color|null {
 				value: unitAndValue,
 				node: nodes[i],
 			});
-
-		} else if (out.colorSpace.startsWith('xyz') && isNumericNodePercentageOrNumber(nodes[i])) {
-			// xyz DOES NOT support percentages
-			const unitAndValue = valueParser.unit(nodes[i].value) as Dimension;
-			if (unitAndValue.unit !== '') {
-				return null;
-			}
-
-			out.parameters.push({
-				value: unitAndValue,
-				node: nodes[i],
-			});
-
 		} else {
 			return null;
 		}

plugins/postcss-color-function/test/basic.expect.css

@@ -64,9 +64,9 @@
 }
 
 .test-percentage-xyz {
-	color-1: color(xyz-d50 64.331% 0.19245 0.16771);
-	color-2: color(xyz-d65 0.64331 19.245% 0.16771);
-	color-3: color(xyz 0.64331 0.19245 16.771%);
+	color-1: rgb(252,0,135);
+	color-2: rgb(255,0,126);
+	color-3: rgb(255,0,126);
 }
 
 .test-author-provided-fallback {

plugins/postcss-color-function/test/basic.preserve-true.expect.css

@@ -92,8 +92,11 @@
 }
 
 .test-percentage-xyz {
+	color-1: rgb(252,0,135);
 	color-1: color(xyz-d50 64.331% 0.19245 0.16771);
+	color-2: rgb(255,0,126);
 	color-2: color(xyz-d65 0.64331 19.245% 0.16771);
+	color-3: rgb(255,0,126);
 	color-3: color(xyz 0.64331 0.19245 16.771%);
 }
 

plugins/postcss-lab-function/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changes to PostCSS Lab Function
 
+### Unreleased (minor)
+
+- Allow percentage and number units in more color components.
+
+```css
+.percentages {
+	color-1: lab(40% 35% 30%);
+	color-2: lch(40% 50% 39);
+
+	/* becomes */
+
+	color-1: rgb(163, 57, 35);
+	color-1: color(display-p3 0.59266 0.25309 0.17075);
+	color-2: rgb(181, 30, 19);
+	color-2: color(display-p3 0.65205 0.18193 0.12753);
+}
+
+.numbers {
+	color-1: lab(40 35 30);
+	color-2: lch(40 50 39);
+
+	/* becomes */
+
+	color-1: rgb(152, 68, 47);
+	color-1: color(display-p3 0.55453 0.28432 0.20788);
+	color-2: rgb(157, 63, 45);
+	color-2: color(display-p3 0.57072 0.27138 0.20109);
+}
+```
+
 ### 4.1.2 (March 8, 2022)
 
 - Fix gamut mapping giving overly unsaturated colors.

plugins/postcss-lab-function/src/convert-lab-to-display-p3.ts

@@ -14,17 +14,17 @@ export function labToDisplayP3(labRaw: color): [color, boolean] {
 	const labA = Math.min(
 		Math.max(
 			labARaw,
-			-127,
+			-160,
 		),
-		128,
+		160,
 	);
 
 	const labB = Math.min(
 		Math.max(
 			labBRaw,
-			-127,
+			-160,
 		),
-		128,
+		160,
 	);
 
 	const lab = [labL, labA, labB];

plugins/postcss-lab-function/src/convert-lab-to-srgb.ts

@@ -14,17 +14,17 @@ export function labToSRgb(labRaw: color): color {
 	const labA = Math.min(
 		Math.max(
 			labARaw,
-			-127,
+			-160,
 		),
-		128,
+		160,
 	);
 
 	const labB = Math.min(
 		Math.max(
 			labBRaw,
-			-127,
+			-160,
 		),
-		128,
+		160,
 	);
 
 	const lab = [labL, labA, labB];

plugins/postcss-lab-function/src/on-css-function.ts

@@ -24,10 +24,6 @@ export function onCSSFunctionSRgb(node: FunctionNode) {
 		return;
 	}
 
-	if (relevantNodes.length > 3 && (!nodes.slash || !nodes.alpha)) {
-		return;
-	}
-
 	// rename the Color function to `rgb`
 	node.value = 'rgb';
 
@@ -191,23 +187,6 @@ function isNumericNode(node: Node): node is WordNode {
 	return !!unitAndValue.number;
 }
 
-function isNumericNodeNumber(node): node is WordNode {
-	if (!node || node.type !== 'word') {
-		return false;
-	}
-
-	if (!canParseAsUnit(node)) {
-		return false;
-	}
-
-	const unitAndValue = valueParser.unit(node.value);
-	if (!unitAndValue) {
-		return false;
-	}
-
-	return !!unitAndValue.number && unitAndValue.unit === '';
-}
-
 function isNumericNodeHueLike(node: Node): node is WordNode {
 	if (!node || node.type !== 'word') {
 		return false;
@@ -231,23 +210,6 @@ function isNumericNodeHueLike(node: Node): node is WordNode {
 	);
 }
 
-function isNumericNodePercentage(node: Node): node is WordNode {
-	if (!node || node.type !== 'word') {
-		return false;
-	}
-
-	if (!canParseAsUnit(node)) {
-		return false;
-	}
-
-	const unitAndValue = valueParser.unit(node.value);
-	if (!unitAndValue) {
-		return false;
-	}
-
-	return unitAndValue.unit === '%';
-}
-
 function isNumericNodePercentageOrNumber(node: Node): node is WordNode {
 	if (!node || node.type !== 'word') {
 		return false;
@@ -289,11 +251,11 @@ type Lch = {
 }
 
 function lchFunctionContents(nodes): Lch|null {
-	if (!isNumericNodePercentage(nodes[0])) {
+	if (!isNumericNodePercentageOrNumber(nodes[0])) {
 		return null;
 	}
 
-	if (!isNumericNodeNumber(nodes[1])) {
+	if (!isNumericNodePercentageOrNumber(nodes[1])) {
 		return null;
 	}
 
@@ -323,6 +285,21 @@ function lchFunctionContents(nodes): Lch|null {
 		out.alpha = nodes[4];
 	}
 
+	if (nodes.length > 3 && (!out.slash || !out.alpha)) {
+		return null;
+	}
+
+	// 0% = 0.0, 100% = 100.0
+	if (out.l.unit === '%') {
+		out.l.unit = '';
+	}
+
+	// 0% = 0, 100% = 150
+	if (out.c.unit === '%') {
+		out.c.unit = '';
+		out.c.number = ((parseFloat(out.c.number) / 100) * 150).toFixed(10);
+	}
+
 	return out;
 }
 
@@ -338,15 +315,15 @@ type Lab = {
 }
 
 function labFunctionContents(nodes): Lab|null {
-	if (!isNumericNodePercentage(nodes[0])) {
+	if (!isNumericNodePercentageOrNumber(nodes[0])) {
 		return null;
 	}
 
-	if (!isNumericNodeNumber(nodes[1])) {
+	if (!isNumericNodePercentageOrNumber(nodes[1])) {
 		return null;
 	}
 
-	if (!isNumericNodeNumber(nodes[2])) {
+	if (!isNumericNodePercentageOrNumber(nodes[2])) {
 		return null;
 	}
 
@@ -367,6 +344,27 @@ function labFunctionContents(nodes): Lab|null {
 		out.alpha = nodes[4];
 	}
 
+	if (nodes.length > 3 && (!out.slash || !out.alpha)) {
+		return null;
+	}
+
+	// 0% = 0.0, 100% = 100.0
+	if (out.l.unit === '%') {
+		out.l.unit = '';
+	}
+
+	// -100% = -125, 100% = 125
+	if (out.a.unit === '%') {
+		out.a.unit = '';
+		out.a.number = ((parseFloat(out.a.number) / 100) * 125).toFixed(10);
+	}
+
+	// -100% = -125, 100% = 125
+	if (out.b.unit === '%') {
+		out.b.unit = '';
+		out.b.number = ((parseFloat(out.b.number) / 100) * 125).toFixed(10);
+	}
+
 	return out;
 }
 

plugins/postcss-lab-function/test/basic.css

@@ -28,6 +28,17 @@
 	color-15: lch(60% 50 50grad);
 	color-16: lch(60% 50 0.785398rad);
 	color-17: lch(60% 50 0.785398unknown);
+	color-18: lch(60% 50 405);
+}
+
+.test-percentages {
+	color-1: lab(40% 35% 30%);
+	color-2: lch(40% 50% 39);
+}
+
+.test-numbers {
+	color-1: lab(40 35 30);
+	color-2: lch(40 50 39);
 }
 
 .test-author-provided-fallback {

plugins/postcss-lab-function/test/basic.display-p3-false.expect.css

@@ -28,6 +28,17 @@
 	color-15: rgb(212, 118, 84);
 	color-16: rgb(212, 118, 84);
 	color-17: lch(60% 50 0.785398unknown);
+	color-18: rgb(212, 118, 84);
+}
+
+.test-percentages {
+	color-1: rgb(163, 57, 35);
+	color-2: rgb(181, 30, 19);
+}
+
+.test-numbers {
+	color-1: rgb(152, 68, 47);
+	color-2: rgb(157, 63, 45);
 }
 
 .test-author-provided-fallback {