fix(core): Improved css clip-path parsing (#10753)

CatchABus · web-flow · commit 32f2dd14e1b5 · 2025-06-29T20:08:00.000-07:00
diff --git a/packages/core/ui/styling/style-properties.ts b/packages/core/ui/styling/style-properties.ts
@@ -201,19 +201,19 @@ function isNonNegativeFiniteNumber(value: number): boolean {
 }
 
 function parseClipPath(value: string): string | ClipPathFunction {
-	const functionStartIndex = value.indexOf('(');
+	const funcStartIndex = value.indexOf('(');
+	const funcEndIndex = value.lastIndexOf(')');
 
-	if (functionStartIndex > -1) {
-		const functionName = value.substring(0, functionStartIndex).trim();
+	if (funcStartIndex > -1 && funcEndIndex > -1) {
+		const functionName = value.substring(0, funcStartIndex).trim();
 
 		switch (functionName) {
 			case 'rect':
 			case 'circle':
 			case 'ellipse':
 			case 'polygon':
 			case 'inset': {
-				const rule: string = value.replace(`${functionName}(`, '').replace(')', '');
-				return new ClipPathFunction(functionName, rule);
+				return new ClipPathFunction(functionName, value.substring(funcStartIndex + 1, funcEndIndex));
 			}
 			default:
 				throw new Error(`Clip-path function ${functionName} is not valid.`);
