chore: [#1363] Simplifies the solution

packages/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts

@@ -20,6 +20,7 @@ import MediaQueryList from '../../../match-media/MediaQueryList.js';
 import WindowBrowserSettingsReader from '../../../window/WindowBrowserSettingsReader.js';
 
 const CSS_MEASUREMENT_REGEXP = /[0-9.]+(px|rem|em|vw|vh|%|vmin|vmax|cm|mm|in|pt|pc|Q)/g;
+const CSS_VARIABLE_REGEXP = /var\( *(--[^), ]+)\)|var\( *(--[^), ]+), *(.+)\)/;
 
 type IStyleAndElement = {
 	element: Element | ShadowRoot | Document;
@@ -385,20 +386,16 @@ export default class CSSStyleDeclarationElementStyle {
 	 * @returns CSS value.
 	 */
 	private parseCSSVariablesInValue(value: string, cssVariables: { [k: string]: string }): string {
-		const SINGLE_CSS_VARIABLE_REGEXP = /var\( *(--[^), ]+)\)/;
-		const CSS_VARIABLE_REGEXP = /var\( *(--[^), ]+), *([^), ]+)\)/;
-
 		let newValue = value;
 		let match: RegExpMatchArray | null;
 
-		while ((match = newValue.match(SINGLE_CSS_VARIABLE_REGEXP)) != null) {
-			// Without fallback value - E.g. var(--my-var)
-			newValue = newValue.replace(match[0], cssVariables[match[1]] || '');
-		}
-
 		while ((match = newValue.match(CSS_VARIABLE_REGEXP)) !== null) {
 			// Fallback value - E.g. var(--my-var, #FFFFFF)
-			newValue = newValue.replace(match[0], cssVariables[match[1]] || match[2]);
+			if (match[2] !== undefined) {
+				newValue = newValue.replace(match[0], cssVariables[match[2]] || match[3]);
+			} else {
+				newValue = newValue.replace(match[0], cssVariables[match[1]] || '');
+			}
 		}
 
 		return newValue;