css-color-parser: fix normalization of hue to [0, 360] range when hue is a negative number

Author: romainmenke

packages/css-color-parser/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to CSS Color Parser
 
+### Unreleased (patch)
+
+- Fix normalization of `hue` to `[0, 360]` range when `hue` is a negative number
+
 ### 4.1.5
 
 _June 14, 2026_

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

@@ -5,7 +5,12 @@ import { toLowerCaseAZ } from '../util/to-lower-case-a-z';
 export function normalizeHue(token: CSSToken): TokenNumber | false {
 	if (isTokenNumber(token)) {
 		token[4].value = token[4].value % 360;
+		if (token[4].value < 0) {
+			token[4].value += 360;
+		}
+
 		token[1] = token[4].value.toString();
+
 		return token;
 	}
 
@@ -34,6 +39,9 @@ export function normalizeHue(token: CSSToken): TokenNumber | false {
 		}
 
 		value = value % 360;
+		if (value < 0) {
+			value += 360;
+		}
 
 		return [
 			TokenType.Number,

packages/css-color-parser/src/functions/hue-normalize-channel-value.ts

@@ -276,3 +276,33 @@ assert.deepStrictEqual(
 		syntaxFlags: new Set(['color-mix']),
 	},
 );
+
+assert.deepStrictEqual(
+	color(parse('color-mix(in lch, lch(none none none), lch(none none none))')),
+	{
+		colorNotation: 'lch',
+		channels: [Number.NaN, Number.NaN, Number.NaN],
+		alpha: 1,
+		syntaxFlags: new Set(['color-mix']),
+	},
+);
+
+assert.deepStrictEqual(
+	color(parse('color-mix(in lch decreasing hue, lch(50% 50% -40deg), lch(50% 50% 40deg))')),
+	{
+		colorNotation: 'lch',
+		channels: [50, 75, 180],
+		alpha: 1,
+		syntaxFlags: new Set(['color-mix']),
+	},
+);
+
+assert.deepStrictEqual(
+	color(parse('color-mix(in lch decreasing hue, lch(50% 50% 320deg), lch(50% 50% 40deg))')),
+	{
+		colorNotation: 'lch',
+		channels: [50, 75, 180],
+		alpha: 1,
+		syntaxFlags: new Set(['color-mix']),
+	},
+);

packages/css-color-parser/test/basic/color-mix-function.mjs

@@ -134,6 +134,36 @@ assert.deepStrictEqual(
 	},
 );
 
+assert.deepStrictEqual(
+	color(parse('oklch(-2 -3 -400 / -500)')),
+	{
+		colorNotation: 'oklch',
+		channels: [0, 0, 320],
+		alpha: 0,
+		syntaxFlags: new Set(['has-number-values', 'has-alpha']),
+	},
+);
+
+assert.deepStrictEqual(
+	color(parse('oklch(from oklch(0.7 0.45 30 / 40%) -2 -3 -400 / -500)')),
+	{
+		colorNotation: 'oklch',
+		channels: [0, 0, 320],
+		alpha: 0,
+		syntaxFlags: new Set(['relative-color-syntax', 'has-number-values', 'has-alpha']),
+	},
+);
+
+assert.deepStrictEqual(
+	color(parse('oklch(from oklch(0.7 0.45 30 / 40%) -2 -3 -760 / -500)')),
+	{
+		colorNotation: 'oklch',
+		channels: [0, 0, 320],
+		alpha: 0,
+		syntaxFlags: new Set(['relative-color-syntax', 'has-number-values', 'has-alpha']),
+	},
+);
+
 [
 	['color(from color(srgb 0 1 0) srgb r g b)', 'rgb(0, 255, 0)'],
 	['color(from color(srgb-linear 0 1 0) srgb r g b)', 'rgb(0, 255, 0)'],