Fix value calculation for hue components in relative color syntax.

packages/css-color-parser/CHANGELOG.md

@@ -1,11 +1,14 @@
 # Changes to CSS Color Parser
 
+### Unreleased (patch)
+
+- Fix value calculation for `hue` components in relative color syntax.
+
 ### 1.2.0 (May 19, 2023)
 
 - Add support for relative color syntax.
 - Updated `@csstools/color-helpers` to `2.1.0` (minor)
 
-
 ### 1.1.2 (April 10, 2023)
 
 - Updated `@csstools/css-tokenizer` to `2.1.1` (patch)

packages/css-color-parser/src/color-data.ts

@@ -301,7 +301,7 @@ export function convertPowerlessComponentsToMissingComponents(a: Color, colorNot
 				out[1] = NaN;
 			}
 
-			if (out[1] <= 0) {
+			if (reducePrecision(out[1]) <= 0) {
 				out[0] = NaN;
 			}
 
@@ -388,7 +388,7 @@ export function normalizeRelativeColorDataChannels(x: ColorData): Map<string, To
 
 			break;
 		case ColorNotation.HSL:
-			globals.set('h', dummyAngleToken(x.channels[0]));
+			globals.set('h', dummyNumberToken(x.channels[0]));
 			globals.set('s', dummyPercentageToken(x.channels[1]));
 			globals.set('l', dummyPercentageToken(x.channels[2]));
 
@@ -398,7 +398,7 @@ export function normalizeRelativeColorDataChannels(x: ColorData): Map<string, To
 
 			break;
 		case ColorNotation.HWB:
-			globals.set('h', dummyAngleToken(x.channels[0]));
+			globals.set('h', dummyNumberToken(x.channels[0]));
 			globals.set('w', dummyPercentageToken(x.channels[1]));
 			globals.set('b', dummyPercentageToken(x.channels[2]));
 
@@ -422,7 +422,7 @@ export function normalizeRelativeColorDataChannels(x: ColorData): Map<string, To
 		case ColorNotation.OKLCH:
 			globals.set('l', dummyNumberToken(x.channels[0]));
 			globals.set('c', dummyNumberToken(x.channels[1]));
-			globals.set('h', dummyAngleToken(x.channels[2]));
+			globals.set('h', dummyNumberToken(x.channels[2]));
 
 			if (typeof x.alpha === 'number') {
 				globals.set('alpha', dummyNumberToken(x.alpha));
@@ -484,10 +484,6 @@ function dummyPercentageToken(x: number): TokenPercentage {
 	return [TokenType.Percentage, x.toString() + '%', -1, -1, { value: x }];
 }
 
-function dummyAngleToken(x: number): TokenDimension {
-	return [TokenType.Dimension, x.toString() + 'deg', -1, -1, { value: x, type: NumberType.Number, unit: 'deg' }];
-}
-
 function reducePrecision(x: number, precision = 7): number {
 	const factor = Math.pow(10, precision);
 	return Math.round(x * factor) / factor;

packages/css-color-parser/test/basic/relative-color.mjs

@@ -44,7 +44,7 @@ assert.deepStrictEqual(
 );
 
 assert.deepStrictEqual(
-	serialize_sRGB_data(color(parse('hsl(from rebeccapurple calc(h - 10deg) s l)'))),
+	serialize_sRGB_data(color(parse('hsl(from rebeccapurple calc(h - 10) s l)'))),
 	'rgb(85, 51, 153)',
 );
 

packages/css-color-parser/test/wpt/color-invalid-relative-color.mjs

@@ -27,10 +27,8 @@ const tests = [
 	// Testing invalid permutation (types don't match).
 	['hsl(from rebeccapurple s h l)'],
 	['hsl(from rebeccapurple s s s / s)'],
-	['hsl(from rebeccapurple h h h / h)'],
 	['hsl(from rgb(10%, 20%, 30%, 40%) s h l)'],
 	['hsl(from rgb(10%, 20%, 30%, 40%) s s s / s)'],
-	['hsl(from rgb(10%, 20%, 30%, 40%) h h h / h)'],
 
 	// Testing invalid values.
 	['hsl(from rebeccapurple 10% s l)'],
@@ -50,11 +48,9 @@ const tests = [
 	// Testing invalid permutation (types don't match).
 	['hwb(from rebeccapurple w h b)'],
 	['hwb(from rebeccapurple b b b / b)'],
-	['hwb(from rebeccapurple h h h / h)'],
 	['hwb(from rebeccapurple alpha alpha alpha / alpha)'],
 	['hwb(from rgb(10%, 20%, 30%, 40%) w b h)'],
 	['hwb(from rgb(10%, 20%, 30%, 40%) b b b / b)'],
-	['hwb(from rgb(10%, 20%, 30%, 40%) h h h / h)'],
 	['hwb(from rgb(10%, 20%, 30%, 40%) alpha alpha alpha / alpha)'],
 
 	// Testing invalid values.
@@ -86,10 +82,6 @@ const tests = [
 
 
 
-	// Testing invalid permutation (types don't match).
-	['lch(from lch(.70 45 30) h l c / alpha)'],
-	['lch(from lch(.70 45 30 / 40%) h l c / alpha)'],
-
 	// Testing invalid values.
 	['lch(from lch(.70 45 30) l 10deg h)'],
 	['lch(from lch(.70 45 30) l c 10%)'],

plugins/postcss-relative-color-syntax/CHANGELOG.md

@@ -1,10 +1,13 @@
 # Changes to PostCSS Relative Color Syntax
 
+### Unreleased (patch)
+
+- Fix value calculation for `hue` components in relative color syntax.
+
 ### 1.0.1 (June 1, 2023)
 
 - Updated `@csstools/postcss-progressive-custom-properties` to `2.3.0` (minor)
 
-
 ### 1.0.0 (May 19, 2023)
 
 - Initial version

plugins/postcss-relative-color-syntax/test/basic.css

@@ -30,7 +30,7 @@
 }
 
 .spec-example-11 {
-	background: oklch(from oklch(52.6% 0.115 44.6deg) l c calc(h + 90deg));
+	background: oklch(from oklch(52.6% 0.115 44.6deg) l c calc(h + 90));
 }
 
 .spec-example-12 {
@@ -73,7 +73,7 @@
 }
 
 .spec-example-20 {
-	color: hsl(from lightseagreen calc(h + 180deg) s l);
+	color: hsl(from lightseagreen calc(h + 180) s l);
 }
 
 .spec-example-21{
@@ -90,7 +90,7 @@
 }
 
 .spec-example-24 {
-	--complement: lch(from lightseagreen l c calc(h + 180deg));
+	--complement: lch(from lightseagreen l c calc(h + 180));
 }
 
 .spec-example-25 {
@@ -99,10 +99,10 @@
 }
 
 .spec-example-26 {
-	color: lch(from lch(60% 90 320) l c calc(h - 120deg));
-	color-2: hsl(from lch(60% 90 320) calc(h - 120deg) s l);
+	color: lch(from lch(60% 90 320) l c calc(h - 120));
+	color-2: hsl(from lch(60% 90 320) calc(h - 120) s l);
 }
 
 .spec-example-27 {
-	color: oklch(from lch(60% 90 320) l c calc(h - 120deg));
+	color: oklch(from lch(60% 90 320) l c calc(h - 120));
 }

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

@@ -94,7 +94,7 @@
 
 .spec-example-11 {
 	background: rgb(77, 121, 47);
-	background: oklch(from oklch(52.6% 0.115 44.6deg) l c calc(h + 90deg));
+	background: oklch(from oklch(52.6% 0.115 44.6deg) l c calc(h + 90));
 }
 
 .spec-example-12 {
@@ -155,7 +155,7 @@
 
 .spec-example-20 {
 	color: rgb(178, 32, 40);
-	color: hsl(from lightseagreen calc(h + 180deg) s l);
+	color: hsl(from lightseagreen calc(h + 180) s l);
 }
 
 .spec-example-21{
@@ -186,7 +186,7 @@
 
 @supports (color: rgb(from red r g b)) {
 .spec-example-24 {
-	--complement: lch(from lightseagreen l c calc(h + 180deg));
+	--complement: lch(from lightseagreen l c calc(h + 180));
 }
 }
 
@@ -205,13 +205,13 @@
 .spec-example-26 {
 	color: rgb(0, 159, 164);
 	color: color(display-p3 0 0.63049 0.66369);
-	color: lch(from lch(60% 90 320) l c calc(h - 120deg));
+	color: lch(from lch(60% 90 320) l c calc(h - 120));
 	color-2: rgb(85, 249, 219);
-	color-2: hsl(from lch(60% 90 320) calc(h - 120deg) s l);
+	color-2: hsl(from lch(60% 90 320) calc(h - 120) s l);
 }
 
 .spec-example-27 {
 	color: rgb(0, 178, 186);
 	color: color(display-p3 0 0.71015 0.76142);
-	color: oklch(from lch(60% 90 320) l c calc(h - 120deg));
+	color: oklch(from lch(60% 90 320) l c calc(h - 120));
 }