improve detection of calc expressions (#919)

* improve detection of calc expressions

* simplify

* remove unwanted mutations

Author: romainmenke

packages/css-calc/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to CSS Calc
 
+### Unreleased (minor)
+
+- Expose the list of supported math functions.
+
 ### 1.0.1 (March 25, 2023)
 
 - Improve case insensitive string matching.

packages/css-calc/dist/index.cjs

@@ -3,3 +3,4 @@ import type { conversionOptions } from './options';
 import { ComponentValue } from '@csstools/css-parser-algorithms';
 export declare function calc(css: string, options?: conversionOptions): string;
 export declare function calcFromComponentValues(componentValuesList: Array<Array<ComponentValue>>, options?: conversionOptions): ComponentValue[][];
+export declare const mathFunctionNames: Set<string>;

packages/css-calc/dist/index.d.ts

@@ -14,28 +14,29 @@ export function solveCos(cosNode: FunctionNode, a: TokenNode): Calculation | -1
 		return - 1;
 	}
 
+	let result = aToken[4].value;
 	if (aToken[0] === TokenType.Dimension) {
 		switch (toLowerCaseAZ(aToken[4].unit)) {
 			case 'rad':
 				break;
 			case 'deg':
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				aToken[4].value = convert_deg.get('rad')!(aToken[4].value);
+				result = convert_deg.get('rad')!(aToken[4].value);
 				break;
 			case 'grad':
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				aToken[4].value = convert_grad.get('rad')!(aToken[4].value);
+				result = convert_grad.get('rad')!(aToken[4].value);
 				break;
 			case 'turn':
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				aToken[4].value = convert_turn.get('rad')!(aToken[4].value);
+				result = convert_turn.get('rad')!(aToken[4].value);
 				break;
 			default:
 				return -1;
 		}
 	}
 
-	const result = Math.cos(aToken[4].value);
+	result = Math.cos(result);
 
 	return numberToCalculation(cosNode, result);
 }

packages/css-calc/dist/index.mjs

@@ -14,28 +14,29 @@ export function solveSin(sinNode: FunctionNode, a: TokenNode): Calculation | -1
 		return -1;
 	}
 
+	let result = aToken[4].value;
 	if (aToken[0] === TokenType.Dimension) {
 		switch (toLowerCaseAZ(aToken[4].unit)) {
 			case 'rad':
 				break;
 			case 'deg':
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				aToken[4].value = convert_deg.get('rad')!(aToken[4].value);
+				result = convert_deg.get('rad')!(aToken[4].value);
 				break;
 			case 'grad':
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				aToken[4].value = convert_grad.get('rad')!(aToken[4].value);
+				result = convert_grad.get('rad')!(aToken[4].value);
 				break;
 			case 'turn':
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				aToken[4].value = convert_turn.get('rad')!(aToken[4].value);
+				result = convert_turn.get('rad')!(aToken[4].value);
 				break;
 			default:
 				return -1;
 		}
 	}
 
-	const result = Math.sin(aToken[4].value);
+	result = Math.sin(result);
 
 	return numberToCalculation(sinNode, result);
 }

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

@@ -18,6 +18,7 @@ export function solveTan(tanNode: FunctionNode, a: TokenNode): Calculation | -1
 	const startingValue = aToken[4].value;
 
 	let degrees = 0;
+	let result = aToken[4].value;
 	if (aToken[0] === TokenType.Dimension) {
 		switch (toLowerCaseAZ(aToken[4].unit)) {
 			case 'rad':
@@ -27,19 +28,19 @@ export function solveTan(tanNode: FunctionNode, a: TokenNode): Calculation | -1
 			case 'deg':
 				degrees = startingValue;
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				aToken[4].value = convert_deg.get('rad')!(startingValue);
+				result = convert_deg.get('rad')!(startingValue);
 				break;
 			case 'grad':
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 				degrees = convert_grad.get('deg')!(startingValue);
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				aToken[4].value = convert_grad.get('rad')!(startingValue);
+				result = convert_grad.get('rad')!(startingValue);
 				break;
 			case 'turn':
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 				degrees = convert_turn.get('deg')!(startingValue);
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				aToken[4].value = convert_turn.get('rad')!(startingValue);
+				result = convert_turn.get('rad')!(startingValue);
 				break;
 			default:
 				return -1;
@@ -50,11 +51,10 @@ export function solveTan(tanNode: FunctionNode, a: TokenNode): Calculation | -1
 	const timesNinety = degrees / 90;
 	const isAsymptote = isNinetyMultiple && timesNinety % 2 !== 0;
 
-	let result;
 	if (isAsymptote) {
 		result = timesNinety > 0 ? Infinity : -Infinity;
 	} else {
-		result = Math.tan(aToken[4].value);
+		result = Math.tan(result);
 	}
 
 	return numberToCalculation(tanNode, result);

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

@@ -32,3 +32,6 @@ export function calcFromComponentValues(componentValuesList: Array<Array<Compone
 		}
 	});
 }
+
+// Exposed so upstream dependents can use the same set of math functions.
+export const mathFunctionNames = new Set(mathFunctions.keys());

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

@@ -151,3 +151,8 @@ assert.strictEqual(
 	calc('calc(10hz + 0.01khz)', { toCanonicalUnits: false }),
 	'20hz',
 );
+
+assert.strictEqual(
+	calc('sin(90deg)', { toCanonicalUnits: false }),
+	'1',
+);

packages/css-calc/src/index.ts

@@ -1,5 +1,9 @@
 # Changes to CSS Color Parser
 
+### Unreleased (patch)
+
+- Improve the detection of math function in color notations.
+
 ### 1.1.0 (March 28, 2023)
 
 - Add a flag to `serializeP3` and `serializeRGB` to skip gamut mapping.