fix: [#2344] Resolve every var() in a value, not only the first one

Since v20.12.1 resolveVariables() substituted the first var() and returned,
leaving later occurrences in the value unresolved. The remainder of the value
is now resolved as well.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Author: klaesra

packages/happy-dom/src/css/declaration/property-manager/utilities/CSSVariableFormatter.ts

@@ -66,7 +66,8 @@ export default class CSSVariableFormatter {
 			if (variable && variable.parentheses === parentheses) {
 				const fallbackValue = value.substring(variable.fallbackIndex, match.index).trim();
 				const variableValue = cssVariables[variable.name];
-				return `${value.substring(0, variable.index)}${this.resolveVariables(variableValue || fallbackValue, cssVariables)}${value.substring(match.index! + match[0].length)}`;
+				// The rest of the value may hold further var() references (e.g. "calc(var(--a) + var(--b))").
+				return `${value.substring(0, variable.index)}${this.resolveVariables(variableValue || fallbackValue, cssVariables)}${this.resolveVariables(value.substring(match.index! + match[0].length), cssVariables)}`;
 			}
 		}
 

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

@@ -98,6 +98,50 @@ describe('CSSComputedStyle', () => {
 			expect(propertyManager.get('background-color')?.value).toBe('rgb(255, 219, 0)');
 		});
 
+		it('Resolves every var() in a value, not only the first one.', () => {
+			document.body.appendChild(element);
+			element.setAttribute(
+				'style',
+				`--box: 20px; --gap: 2px; width: calc(5 * var(--box) + 6 * var(--gap)); height: calc(var(--gap) + var(--gap));`
+			);
+
+			const computedStyle = new CSSComputedStyle(element);
+			const propertyManager = computedStyle.getComputedStyle();
+
+			expect(propertyManager.get('width')?.value).toBe('calc(5 * 20px + 6 * 2px)');
+			expect(propertyManager.get('height')?.value).toBe('calc(2px + 2px)');
+		});
+
+		it('Resolves every var() in a shorthand value.', () => {
+			document.body.appendChild(element);
+			element.setAttribute(
+				'style',
+				`--x: 16px; padding: calc(0.375 * var(--x)) calc(0.75 * var(--x)); margin: var(--x) var(--x, 4px) var(--y, 8px);`
+			);
+
+			const computedStyle = new CSSComputedStyle(element);
+			const propertyManager = computedStyle.getComputedStyle();
+
+			expect(propertyManager.get('padding-top')?.value).toBe('calc(0.375 * 16px)');
+			expect(propertyManager.get('padding-right')?.value).toBe('calc(0.75 * 16px)');
+			expect(propertyManager.get('margin-top')?.value).toBe('16px');
+			expect(propertyManager.get('margin-right')?.value).toBe('16px');
+			expect(propertyManager.get('margin-bottom')?.value).toBe('8px');
+		});
+
+		it('Resolves every var() in an inherited value on a descendant.', () => {
+			const child = document.createElement('div');
+			element.appendChild(child);
+			document.body.appendChild(element);
+			element.setAttribute('style', `--box: 20px; --gap: 2px;`);
+			child.setAttribute('style', `width: calc(5 * var(--box) + 6 * var(--gap));`);
+
+			const computedStyle = new CSSComputedStyle(child);
+			const propertyManager = computedStyle.getComputedStyle();
+
+			expect(propertyManager.get('width')?.value).toBe('calc(5 * 20px + 6 * 2px)');
+		});
+
 		it('Ignores invalid CSS variable fallback value.', () => {
 			document.body.appendChild(element);
 			element.setAttribute('style', `width: var(--my-width, invalid);`);