fix: [#1837] Fixes issue where CSS var() isn't parsed correctly when inside CSS functions (#1838)

Author: fimion

packages/happy-dom/src/css/declaration/computed-style/CSSStyleDeclarationComputedStyle.ts

@@ -23,8 +23,9 @@ import CSSScopeRule from '../../rules/CSSScopeRule.js';
 import CSSStyleSheet from '../../CSSStyleSheet.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\( *(--[^), ]+), *(.+)\)/;
 const HOST_REGEXP = /:host\s*\(([^)]+)\)|:host-context\s*\(([^)]+)\)/;
+const SINGLE_CSS_VARIABLE_REGEXP = /var\( *(--[^), ]+)\)/;
+const CSS_VARIABLE_REGEXP = /var\( *(--[^), ]+), *([^), ]+)\)/;
 
 type IStyleAndElement = {
 	element: Element | ShadowRoot | Document | null;
@@ -460,13 +461,14 @@ export default class CSSStyleDeclarationComputedStyle {
 		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)
-			if (match[2] !== undefined) {
-				newValue = newValue.replace(match[0], cssVariables[match[2]] || match[3]);
-			} else {
-				newValue = newValue.replace(match[0], cssVariables[match[1]] || '');
-			}
+			newValue = newValue.replace(match[0], cssVariables[match[1]] || match[2]);
 		}
 
 		return newValue;

packages/happy-dom/test/css/declaration/computed-style/CSSStyleDeclarationComputedStyle.test.ts

@@ -28,5 +28,27 @@ describe('CSSStyleDeclarationElementStyle', () => {
 
 			expect(computedElementStyleDeclaration.getComputedStyle()).not.toBe(computedElementStyle);
 		});
+		it('parses variables correctly.', () => {
+			document.body.appendChild(element);
+			element.setAttribute(
+				'style',
+				`--bg-color: rgb(0 128 0 / 1); background-color: var(--bg-color);`
+			);
+
+			const computedElementStyleDeclaration = new CSSStyleDeclarationElementStyle(element);
+			const computedElementStyle = computedElementStyleDeclaration.getComputedStyle();
+			expect(computedElementStyle.get('background-color').value).toBe('rgb(0 128 0 / 1)');
+		});
+		it('parses nested variables correctly.', () => {
+			document.body.appendChild(element);
+			element.setAttribute(
+				'style',
+				`--bg-color-alpha: 1; background-color: rgb(0 128 0 / var(--bg-color-alpha, 1));`
+			);
+
+			const computedElementStyleDeclaration = new CSSStyleDeclarationElementStyle(element);
+			const computedElementStyle = computedElementStyleDeclaration.getComputedStyle();
+			expect(computedElementStyle.get('background-color').value).toBe('rgb(0 128 0 / 1)');
+		});
 	});
 });