css-calc: infectious NaN

packages/css-calc/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Unreleased (patch)
 
+- Fix infectious `NaN`
 - Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`4.0.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#401) (patch)
 
 ### 3.4.0

packages/css-calc/src/functions/abs.ts

@@ -10,6 +10,11 @@ export function solveAbs(absNode: FunctionNode, a: TokenNode, options: conversio
 		return -1;
 	}
 
+	// NaN is infectious, forcing the function to return NaN if any argument calculation is NaN.
+	if (Number.isNaN(aToken[4].value)) {
+		return resultToCalculation(absNode, aToken, Number.NaN);
+	}
+
 	if (!options.rawPercentages && isTokenPercentage(aToken)) {
 		return -1;
 	}

packages/css-calc/src/functions/clamp.ts

@@ -21,10 +21,6 @@ export function solveClamp(clampNode: FunctionNode, minimum: TokenNode | -1, cen
 		return -1;
 	}
 
-	if (!options.rawPercentages && isTokenPercentage(minimumToken)) {
-		return -1;
-	}
-
 	const centralToken = convertUnit(minimumToken, central.value);
 	if (!twoOfSameNumeric(minimumToken, centralToken)) {
 		return -1;
@@ -35,6 +31,19 @@ export function solveClamp(clampNode: FunctionNode, minimum: TokenNode | -1, cen
 		return -1;
 	}
 
+	// NaN is infectious, forcing the function to return NaN if any argument calculation is NaN.
+	if (
+		Number.isNaN(minimumToken[4].value) ||
+		Number.isNaN(centralToken[4].value) ||
+		Number.isNaN(maximumToken[4].value)
+	) {
+		return resultToCalculation(clampNode, minimumToken, Number.NaN);
+	}
+
+	if (!options.rawPercentages && isTokenPercentage(minimumToken)) {
+		return -1;
+	}
+
 	const result = Math.max(minimumToken[4].value, Math.min(centralToken[4].value, maximumToken[4].value));
 
 	return resultToCalculation(clampNode, minimumToken, result);

packages/css-calc/src/functions/hypot.ts

@@ -19,12 +19,18 @@ export function solveHypot(hypotNode: FunctionNode, solvedNodes: Array<Component
 		return -1;
 	}
 
-	if (!options.rawPercentages && isTokenPercentage(firstSolvedToken)) {
+	const tokens = solvedNodes.map((x) => convertUnit(firstSolvedToken, x.value));
+	if (!arrayOfSameNumeric(tokens)) {
 		return -1;
 	}
 
-	const tokens = solvedNodes.map((x) => convertUnit(firstSolvedToken, x.value));
-	if (!arrayOfSameNumeric(tokens)) {
+	// https://drafts.csswg.org/css-values-4/#exponent-ranges
+	// NaN is infectious, forcing the function to return NaN if any argument calculation is NaN.
+	if (tokens.some((x) => Number.isNaN(x[4].value))) {
+		return resultToCalculation(hypotNode, firstSolvedToken, Number.NaN);
+	}
+
+	if (!options.rawPercentages && isTokenPercentage(firstSolvedToken)) {
 		return -1;
 	}
 

packages/css-calc/src/functions/max.ts

@@ -19,12 +19,17 @@ export function solveMax(maxNode: FunctionNode, solvedNodes: Array<ComponentValu
 		return -1;
 	}
 
-	if (!options.rawPercentages && isTokenPercentage(firstSolvedToken)) {
+	const tokens = solvedNodes.map((x) => convertUnit(firstSolvedToken, x.value));
+	if (!arrayOfSameNumeric(tokens)) {
 		return -1;
 	}
 
-	const tokens = solvedNodes.map((x) => convertUnit(firstSolvedToken, x.value));
-	if (!arrayOfSameNumeric(tokens)) {
+	// NaN is infectious, forcing the function to return NaN if any argument calculation is NaN.
+	if (tokens.some((x) => Number.isNaN(x[4].value))) {
+		return resultToCalculation(maxNode, firstSolvedToken, Number.NaN);
+	}
+
+	if (!options.rawPercentages && isTokenPercentage(firstSolvedToken)) {
 		return -1;
 	}
 

packages/css-calc/src/functions/min.ts

@@ -19,12 +19,17 @@ export function solveMin(minNode: FunctionNode, solvedNodes: Array<ComponentValu
 		return -1;
 	}
 
-	if (!options.rawPercentages && isTokenPercentage(firstSolvedToken)) {
+	const tokens = solvedNodes.map((x) => convertUnit(firstSolvedToken, x.value));
+	if (!arrayOfSameNumeric(tokens)) {
 		return -1;
 	}
 
-	const tokens = solvedNodes.map((x) => convertUnit(firstSolvedToken, x.value));
-	if (!arrayOfSameNumeric(tokens)) {
+	// NaN is infectious, forcing the function to return NaN if any argument calculation is NaN.
+	if (tokens.some((x) => Number.isNaN(x[4].value))) {
+		return resultToCalculation(minNode, firstSolvedToken, Number.NaN);
+	}
+
+	if (!options.rawPercentages && isTokenPercentage(firstSolvedToken)) {
 		return -1;
 	}
 

packages/css-calc/src/functions/mod.ts

@@ -17,7 +17,10 @@ export function solveMod(modNode: FunctionNode, a: TokenNode, b: TokenNode): Cal
 	}
 
 	let result;
-	if (bToken[4].value === 0) {
+	if (Number.isNaN(aToken[4].value) || Number.isNaN(bToken[4].value)) {
+		// NaN is infectious, forcing the function to return NaN if any argument calculation is NaN.
+		result = Number.NaN;
+	} else if (bToken[4].value === 0) {
 		result = Number.NaN;
 	} else if (!Number.isFinite(aToken[4].value)) {
 		result = Number.NaN;

packages/css-calc/src/functions/pow.ts

@@ -15,6 +15,13 @@ export function solvePow(powNode: FunctionNode, a: TokenNode, b: TokenNode): Cal
 		return -1;
 	}
 
+	// https://drafts.csswg.org/css-values-4/#exponent-infinities
+	// NaN is infectious, forcing the function to return NaN if any argument calculation is NaN.
+	// Note: `Math.pow(NaN, 0)` returns `1` in JS, but CSS requires NaN.
+	if (Number.isNaN(aToken[4].value) || Number.isNaN(bToken[4].value)) {
+		return numberToCalculation(powNode, Number.NaN);
+	}
+
 	const result = Math.pow(aToken[4].value, bToken[4].value);
 
 	return numberToCalculation(powNode, result);

packages/css-calc/src/functions/random.ts

@@ -53,6 +53,10 @@ export function solveRandom(randomNode: FunctionNode, randomValueSharing: Random
 		}
 	}
 
+	if (Number.isNaN(aToken[4].value) || Number.isNaN(bToken[4].value)) {
+		return resultToCalculation(randomNode, aToken, Number.NaN);
+	}
+
 	if (!Number.isFinite(aToken[4].value)) {
 		return resultToCalculation(randomNode, aToken, Number.NaN);
 	}
@@ -65,6 +69,10 @@ export function solveRandom(randomNode: FunctionNode, randomValueSharing: Random
 		return resultToCalculation(randomNode, aToken, Number.NaN);
 	}
 
+	if (stepValueToken && Number.isNaN(stepValueToken[4].value)) {
+		return resultToCalculation(randomNode, aToken, Number.NaN);
+	}
+
 	if (stepValueToken && !Number.isFinite(stepValueToken[4].value)) {
 		return resultToCalculation(randomNode, aToken, aToken[4].value);
 	}

packages/css-calc/src/functions/rem.ts

@@ -17,7 +17,10 @@ export function solveRem(remNode: FunctionNode, a: TokenNode, b: TokenNode): Cal
 	}
 
 	let result;
-	if (bToken[4].value === 0) {
+	if (Number.isNaN(aToken[4].value) || Number.isNaN(bToken[4].value)) {
+		// NaN is infectious, forcing the function to return NaN if any argument calculation is NaN.
+		result = Number.NaN;
+	} else if (bToken[4].value === 0) {
 		result = Number.NaN;
 	} else if (!Number.isFinite(aToken[4].value)) {
 		result = Number.NaN;

packages/css-calc/src/functions/round.ts

@@ -17,12 +17,17 @@ export function solveRound(roundNode: FunctionNode, roundingStrategy: string, a:
 		return -1;
 	}
 
-	if (!options.rawPercentages && isTokenPercentage(aToken)) {
+	const bToken = convertUnit(aToken, b.value);
+	if (!twoOfSameNumeric(aToken, bToken)) {
 		return -1;
 	}
 
-	const bToken = convertUnit(aToken, b.value);
-	if (!twoOfSameNumeric(aToken, bToken)) {
+	// NaN is infectious, forcing the function to return NaN if any argument calculation is NaN.
+	if (Number.isNaN(aToken[4].value) || Number.isNaN(bToken[4].value)) {
+		return resultToCalculation(roundNode, aToken, Number.NaN);
+	}
+
+	if (!options.rawPercentages && isTokenPercentage(aToken)) {
 		return -1;
 	}
 

packages/css-calc/src/functions/sign.ts

@@ -10,6 +10,11 @@ export function solveSign(signNode: FunctionNode, a: TokenNode, options: convers
 		return -1;
 	}
 
+	// NaN is infectious, forcing the function to return NaN if any argument calculation is NaN.
+	if (Number.isNaN(aToken[4].value)) {
+		return numberToCalculation(signNode, Number.NaN);
+	}
+
 	if (!options.rawPercentages && isTokenPercentage(aToken)) {
 		return -1;
 	}

packages/css-calc/src/util/is-none.ts

@@ -1,12 +1,12 @@
 import type { ComponentValue } from '@csstools/css-parser-algorithms';
-import { isCommentNode, isTokenNode, isWhitespaceNode } from '@csstools/css-parser-algorithms';
+import { isTokenNode, isWhiteSpaceOrCommentNode } from '@csstools/css-parser-algorithms';
 import { isTokenIdent } from '@csstools/css-tokenizer';
 
 const IS_NONE_REGEX = /^none$/i;
 
 export function isNone(v: Array<ComponentValue> | ComponentValue): boolean {
 	if (Array.isArray(v)) {
-		const relevantNodes = v.filter((x) => !(isWhitespaceNode(x) && isCommentNode(x)));
+		const relevantNodes = v.filter((x) => !isWhiteSpaceOrCommentNode(x));
 		if (relevantNodes.length === 1) {
 			return isNone(relevantNodes[0]);
 		}

packages/css-calc/test/additional/random.mjs

@@ -440,3 +440,68 @@ for (let i = 0; i < 100; i++) {
 	assert.ok(result <= 190);
 	assert.ok(result === 100 || result === 130 || result === 160 || result === 190);
 }
+
+// NaN is infectious: any NaN argument forces random() to return NaN.
+// https://drafts.csswg.org/css-values-5/#random-infinities
+{
+	assert.strictEqual(
+		calc('random(100, NaN)', { randomCaching: { documentID: 'a', elementID: 'b', propertyName: 'c', propertyN: 0 } }),
+		'calc(NaN)',
+	);
+
+	assert.strictEqual(
+		calc('random(calc(NaN), 100)', { randomCaching: { documentID: 'a', elementID: 'b', propertyName: 'c', propertyN: 0 } }),
+		'calc(NaN)',
+	);
+
+	assert.strictEqual(
+		calc('random(calc(NaN * 1px), 100px)', { randomCaching: { documentID: 'a', elementID: 'b', propertyName: 'c', propertyN: 0 } }),
+		'calc(NaN * 1px)',
+	);
+
+	assert.strictEqual(
+		calc('random(100px, calc(NaN * 1px))', { randomCaching: { documentID: 'a', elementID: 'b', propertyName: 'c', propertyN: 0 } }),
+		'calc(NaN * 1px)',
+	);
+
+	assert.strictEqual(
+		calc('random(0%, calc(NaN * 1%))', { randomCaching: { documentID: 'a', elementID: 'b', propertyName: 'c', propertyN: 0 } }),
+		'calc(NaN * 1%)',
+	);
+
+	assert.strictEqual(
+		calc('random(100px, 500px, calc(NaN * 1px))', { randomCaching: { documentID: 'a', elementID: 'b', propertyName: 'c', propertyN: 0 } }),
+		'calc(NaN * 1px)',
+	);
+
+	// NaN in any of the three arguments, including the optional step.
+	assert.strictEqual(
+		calc('random(fixed 0.5, NaN, 100)'),
+		'calc(NaN)',
+	);
+
+	assert.strictEqual(
+		calc('random(fixed 0.5, 10, NaN)'),
+		'calc(NaN)',
+	);
+
+	assert.strictEqual(
+		calc('random(fixed 0.5, NaN * 1px, 100px)'),
+		'calc(NaN * 1px)',
+	);
+
+	assert.strictEqual(
+		calc('random(fixed 0.5, 10px, NaN * 1px, 5px)'),
+		'calc(NaN * 1px)',
+	);
+
+	assert.strictEqual(
+		calc('random(fixed 0.5, NaN, 100, 5)'),
+		'calc(NaN)',
+	);
+
+	assert.strictEqual(
+		calc('random(fixed 0.5, NaN * 1%, 100%)'),
+		'calc(NaN * 1%)',
+	);
+}

packages/css-calc/test/wpt/hypot-pow-sqrt-computed.mjs

@@ -190,3 +190,49 @@ assert.strictEqual(
 	calc('hypot(1turn)'),
 	'1turn',
 );
+
+assert.strictEqual(
+	calc('hypot(NaN, 5)'),
+	'calc(NaN)',
+);
+
+assert.strictEqual(
+	calc('hypot(infinity, NaN)'),
+	'calc(NaN)',
+);
+
+assert.strictEqual(
+	calc('hypot(NaN, infinity)'),
+	'calc(NaN)',
+);
+
+assert.strictEqual(
+	calc('hypot(1, NaN)'),
+	'calc(NaN)',
+);
+
+assert.strictEqual(
+	calc('hypot(infinity, 5)'),
+	'calc(infinity)',
+);
+
+assert.strictEqual(
+	calc('hypot(5, infinity)'),
+	'calc(infinity)',
+);
+
+// NaN is infectious, even for `pow(NaN, 0)` where `Math.pow` would return 1.
+assert.strictEqual(
+	calc('pow(NaN, 0)'),
+	'calc(NaN)',
+);
+
+assert.strictEqual(
+	calc('pow(1, NaN)'),
+	'calc(NaN)',
+);
+
+assert.strictEqual(
+	calc('pow(NaN, NaN)'),
+	'calc(NaN)',
+);

packages/css-calc/test/wpt/index.mjs

@@ -15,6 +15,7 @@ import './clamp-length-computed.mjs';
 import './clamp-length-invalid.mjs';
 import './exp-log-compute.mjs';
 import './hypot-pow-sqrt-computed.mjs';
+import './infectious-nan.mjs';
 import './invalid.mjs';
 import './max-20-arguments.mjs';
 import './minmax-angle-computed.mjs';