capricorn86#976@minor: Fix CSS value incorrect comma split.

malko · Jul 13, 2023 · c3c9d80 · c3c9d80
1 parent 06e23b3
commit c3c9d80
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 23 deletions.
diff --git a/packages/happy-dom/src/css/declaration/css-parser/CSSStyleDeclarationCSSParser.ts b/packages/happy-dom/src/css/declaration/css-parser/CSSStyleDeclarationCSSParser.ts
@@ -12,24 +12,19 @@ export default class CSSStyleDeclarationCSSParser {
 		cssText: string,
 		callback: (name: string, value: string, important: boolean) => void
 	): void {
-		const parts = cssText.split(';');
-
-		for (const part of parts) {
-			if (part) {
-				const [name, value]: string[] = part.trim().split(':');
-				if (value) {
-					const trimmedName = name.trim();
-					const trimmedValue = value.trim();
-					if (trimmedName && trimmedValue) {
-						const important = trimmedValue.endsWith(' !important');
-						const valueWithoutImportant = trimmedValue.replace(' !important', '');
-
-						if (valueWithoutImportant) {
-							callback(trimmedName, valueWithoutImportant, important);
-						}
-					}
-				}
+		const rules = [
+			...cssText.matchAll(
+				// PropName   => \s*([^:;]+?)\s*:
+				// PropValue  => \s*((?:[^(;]*?(?:\([^)]*\))?)*?) <- will match any non ';' char except inside (), nested parentheses are not supported
+				// !important => \s*(!important)?
+				// EndOfRule  => \s*(?:$|;)
+				/\s*([^:;]+?)\s*:\s*((?:[^(;]*?(?:\([^)]*\))?)*?)\s*(!important)?\s*(?:$|;)/g
+			)
+		];
+		rules.forEach(([, key, value, important]) => {
+			if (key && value) {
+				callback(key.trim(), value.trim(), !!important);
 			}
-		}
+		});
 	}
 }
diff --git a/...es/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts b/...es/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts
@@ -2,6 +2,7 @@ import CSSStyleDeclarationValueParser from './CSSStyleDeclarationValueParser.js'
 import ICSSStyleDeclarationPropertyValue from './ICSSStyleDeclarationPropertyValue.js';
 
 const RECT_REGEXP = /^rect\((.*)\)$/i;
+const SPLIT_PARTS_REGEXP = /,(?=(?:(?:(?!\))[\s\S])*\()|[^\(\)]*$)/; // Split on commas that are outside of parentheses
 const BORDER_STYLE = [
 	'none',
 	'hidden',
@@ -2383,7 +2384,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-size': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.split(',');
+		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
 		const parsed = [];
 
 		for (const imagePart of imageParts) {
@@ -2554,7 +2555,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			};
 		}
 
-		const imageParts = value.replace(/ *, */g, ',').split(',');
+		const imageParts = value.split(SPLIT_PARTS_REGEXP);
 		let x = '';
 		let y = '';
 
@@ -2667,7 +2668,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-position-x': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.replace(/ *, */g, ',').split(',');
+		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
 		let parsedValue = '';
 
 		for (const imagePart of imageParts) {
@@ -2718,7 +2719,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-position-y': { value: lowerValue, important } };
 		}
 
-		const imageParts = lowerValue.replace(/ *, */g, ',').split(',');
+		const imageParts = lowerValue.split(SPLIT_PARTS_REGEXP);
 		let parsedValue = '';
 
 		for (const imagePart of imageParts) {
@@ -2794,7 +2795,7 @@ export default class CSSStyleDeclarationPropertySetParser {
 			return { 'background-image': { value: lowerValue, important } };
 		}
 
-		const parts = value.replace(/ *, */g, ',').split(',');
+		const parts = value.split(SPLIT_PARTS_REGEXP);
 		const parsed = [];
 
 		for (const part of parts) {