css-color-parser: fix handling of hue in interpolation when both parts have a missing hue component

Author: romainmenke

packages/css-color-parser/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to CSS Color Parser
 
+### Unreleased (patch)
+
+- Fix handling of `hue` in interpolation when both parts have a missing `hue` component
+
 ### 4.1.4
 
 _June 13, 2026_

packages/css-color-parser/dist/index.mjs

@@ -198,6 +198,13 @@ const predefinedRGB_or_XYZ_Spaces = new Set([
 ]);
 
 export function colorDataTo(colorData: ColorData, toNotation: ColorNotation): ColorData {
+	colorData = {
+		...colorData,
+	};
+
+	// Change any powerless components in src to missing components
+	colorData.channels = convertPowerlessComponentsToMissingComponents(colorData.channels, colorData.colorNotation);
+
 	const outputColorData: ColorData = {
 		...colorData,
 	};
@@ -443,8 +450,6 @@ export function colorDataTo(colorData: ColorData, toNotation: ColorNotation): Co
 		}
 	}
 
-	outputColorData.channels = convertPowerlessComponentsToMissingComponents(outputColorData.channels, toNotation);
-
 	return outputColorData;
 }
 

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

@@ -577,57 +577,59 @@ function colorMixPolarPair(colorNotation: ColorNotation, hueInterpolationMethod:
 			break;
 	}
 
-	a_hue = fillInMissingComponent(a_hue, b_hue);
-	if (Number.isNaN(a_hue)) {
-		a_hue = 0;
-	}
-
-	b_hue = fillInMissingComponent(b_hue, a_hue);
-	if (Number.isNaN(b_hue)) {
-		b_hue = 0;
-	}
-
 	a_first = fillInMissingComponent(a_first, b_first);
 	b_first = fillInMissingComponent(b_first, a_first);
 
 	a_second = fillInMissingComponent(a_second, b_second);
 	b_second = fillInMissingComponent(b_second, a_second);
 
-	const angleDiff = b_hue - a_hue;
+	a_hue = fillInMissingComponent(a_hue, b_hue);
+	b_hue = fillInMissingComponent(b_hue, a_hue);
+	if (Number.isNaN(a_hue) && Number.isNaN(b_hue)) {
+		// noop
+	} else {
+		if (Number.isNaN(a_hue)) {
+			a_hue = 0;
+		} else if (Number.isNaN(b_hue)) {
+			b_hue = 0;
+		}
 
-	switch (hueInterpolationMethod) {
-		case 'shorter':
-			if (angleDiff > 180) {
-				a_hue += 360;
-			} else if (angleDiff < -180) {
-				b_hue += 360;
-			}
+		const angleDiff = b_hue - a_hue;
 
-			break;
-		case 'longer':
-			if (-180 < angleDiff && angleDiff < 180) {
-				if (angleDiff > 0) {
+		switch (hueInterpolationMethod) {
+			case 'shorter':
+				if (angleDiff > 180) {
 					a_hue += 360;
-				} else {
+				} else if (angleDiff < -180) {
 					b_hue += 360;
 				}
-			}
 
-			break;
-		case 'increasing':
-			if (angleDiff < 0) {
-				b_hue += 360;
-			}
+				break;
+			case 'longer':
+				if (-180 < angleDiff && angleDiff < 180) {
+					if (angleDiff > 0) {
+						a_hue += 360;
+					} else {
+						b_hue += 360;
+					}
+				}
 
-			break;
-		case 'decreasing':
-			if (angleDiff > 0) {
-				a_hue += 360;
-			}
+				break;
+			case 'increasing':
+				if (angleDiff < 0) {
+					b_hue += 360;
+				}
 
-			break;
-		default:
-			throw new Error('Unknown hue interpolation method');
+				break;
+			case 'decreasing':
+				if (angleDiff > 0) {
+					a_hue += 360;
+				}
+
+				break;
+			default:
+				throw new Error('Unknown hue interpolation method');
+		}
 	}
 
 	a_first = premultiply(a_first, a_alpha);

packages/css-color-parser/src/functions/color-mix.ts

@@ -81,10 +81,29 @@ const tests = [
 	['color-mix(in hsl shorter hue, hsl(none 50% 50%), hsl(90deg 50% 50%)', canonicalize('hsl(90deg 50% 50%)')],
 	['color-mix(in hsl increasing hue, hsl(none 50% 50%), hsl(90deg 50% 50%)', canonicalize('hsl(90deg 50% 50%)')],
 	['color-mix(in hsl decreasing hue, hsl(none 50% 50%), hsl(90deg 50% 50%)', canonicalize('hsl(90deg 50% 50%)')],
-	['color-mix(in hsl longer hue, hsl(none 50% 50%), hsl(none 50% 50%)', canonicalize('hsl(180deg 50% 50%)')],
-	['color-mix(in hsl shorter hue, hsl(none 50% 50%), hsl(none 50% 50%)', canonicalize('hsl(0deg 50% 50%)')],
-	['color-mix(in hsl increasing hue, hsl(none 50% 50%), hsl(none 50% 50%)', canonicalize('hsl(0deg 50% 50%)')],
-	['color-mix(in hsl decreasing hue, hsl(none 50% 50%), hsl(none 50% 50%)', canonicalize('hsl(0deg 50% 50%)')],
+
+	['color-mix(in hsl longer hue, hsl(none 50% 50%), hsl(none 50% 50%))', canonicalize('hsl(none 50% 50%)')],
+	['color-mix(in hsl shorter hue, hsl(none 50% 50%), hsl(none 50% 50%)', canonicalize('hsl(none 50% 50%)')],
+	['color-mix(in hsl increasing hue, hsl(none 50% 50%), hsl(none 50% 50%))', canonicalize('hsl(none 50% 50%)')],
+	['color-mix(in hsl decreasing hue, hsl(none 50% 50%), hsl(none 50% 50%))', canonicalize('hsl(none 50% 50%)')],
+
+	['color-mix(in hsl, color-mix(in hsl longer hue, hsl(none 50% 50%), hsl(none 50% 50%)), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+	['color-mix(in hsl, color-mix(in hsl shorter hue, hsl(none 50% 50%), hsl(none 50% 50%)), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+	['color-mix(in hsl, color-mix(in hsl increasing hue, hsl(none 50% 50%), hsl(none 50% 50%)), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+	['color-mix(in hsl, color-mix(in hsl decreasing hue, hsl(none 50% 50%), hsl(none 50% 50%)), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+
+	['color-mix(in hsl longer hue, color-mix(in hsl longer hue, hsl(none 50% 50%), hsl(none 50% 50%)), hsl(180deg 50% 50%))', canonicalize('hsl(0deg 50% 50%)')],
+	['color-mix(in hsl shorter hue, color-mix(in hsl longer hue, hsl(none 50% 50%), hsl(none 50% 50%)), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+	['color-mix(in hsl increasing hue, color-mix(in hsl longer hue, hsl(none 50% 50%), hsl(none 50% 50%)), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+	['color-mix(in hsl decreasing hue, color-mix(in hsl longer hue, hsl(none 50% 50%), hsl(none 50% 50%)), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+
+	['color-mix(in hsl longer hue, hsl(180deg 50% 50%), hsl(180deg 50% 50%))', canonicalize('hsl(0deg 50% 50%)')],
+	['color-mix(in hsl shorter hue, hsl(180deg 50% 50%), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+	['color-mix(in hsl increasing hue, hsl(180deg 50% 50%), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+	['color-mix(in hsl decreasing hue, hsl(180deg 50% 50%), hsl(180deg 50% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+
+	['color-mix(in hsl, color-mix(in hsl longer hue, hsl(50deg 0% 50%), hsl(50deg 0% 50%)), hsl(180deg 100% 50%))', canonicalize('hsl(180deg 50% 50%)')],
+
 	['color-mix(in hsl, hsl(30deg 40% 80% / 25%) 0%, hsl(90deg none none / none))', canonicalize('hsl(90deg 40% 80% / 25%)')],
 	['color-mix(in hwb, hwb(30deg 30% 40% / 25%) 0%, hwb(90deg none none / 0.5))', canonicalize('hwb(90deg 30% 40% / 0.5)')],
 	['color-mix(in hsl, hsl(from hsl(none 50% 50%) h s l), hsl(from hsl(120deg 50% 50%) h s l))', canonicalize('hsl(120deg 50% 50%)')],
@@ -187,3 +206,73 @@ assert.deepStrictEqual(
 		syntaxFlags: new Set(['color-mix', 'color-mix-variadic']),
 	},
 );
+
+assert.deepStrictEqual(
+	color(parse('color-mix(in lch, lch(100 0 40deg), lch(100 0 60deg))')),
+	{
+		colorNotation: 'lch',
+		channels: [100, 0, Number.NaN],
+		alpha: 1,
+		syntaxFlags: new Set(['color-mix']),
+	},
+);
+
+assert.deepStrictEqual(
+	color(parse('oklch(from lch(100 0 0deg) l c h)')),
+	{
+		colorNotation: 'oklch',
+		channels: [1, 4.996003610813204e-16, Number.NaN],
+		alpha: 1,
+		syntaxFlags: new Set(['relative-color-syntax', 'has-number-values']),
+	},
+);
+
+assert.deepStrictEqual(
+	color(parse('lch(from oklch(100 0 0deg) l c h)')),
+	{
+		colorNotation: 'lch',
+		channels: [100, 1.1102230246251565e-13, Number.NaN],
+		alpha: 1,
+		syntaxFlags: new Set(['relative-color-syntax', 'has-number-values']),
+	},
+);
+
+assert.deepStrictEqual(
+	color(parse('color-mix(in oklch, lch(100 0 40deg), lch(100 0 60deg))')),
+	{
+		colorNotation: 'oklch',
+		channels: [1.0000000000000002, 4.996003610813204e-16, Number.NaN],
+		alpha: 1,
+		syntaxFlags: new Set(['color-mix']),
+	},
+);
+
+assert.deepStrictEqual(
+	color(parse('color-mix(in lch, lch(none 20 none), lch(none 40 none))')),
+	{
+		colorNotation: 'lch',
+		channels: [Number.NaN, 30, Number.NaN],
+		alpha: 1,
+		syntaxFlags: new Set(['color-mix']),
+	},
+);
+
+assert.deepStrictEqual(
+	color(parse('color-mix(in hsl, lch(50% 50% 30), hsl(50 50% 50%))')),
+	{
+		colorNotation: 'hsl',
+		channels: [383.202603842081, 60.179695614531866, 51.44446807428794],
+		alpha: 1,
+		syntaxFlags: new Set(['color-mix']),
+	},
+);
+
+assert.deepStrictEqual(
+	color(parse('color-mix(in hsl, lch(none 0 30), hsl(50 0 none))')),
+	{
+		colorNotation: 'hsl',
+		channels: [Number.NaN, 0, Number.NaN],
+		alpha: 1,
+		syntaxFlags: new Set(['color-mix']),
+	},
+);