Closes #6634: Preload tag has incorrect markup if LCP element has at …

…least 2 background-images among pseudo-elements (#6664)

Co-authored-by: WordPressFan <ahmed@wp-media.me>
Co-authored-by: Opeyemi Ibrahim <opeyemi.khadri@gmail.com>
Co-authored-by: Mathieu Lamiot <mathieu.lamiot@free.fr>

assets/js/lcp-beacon.js

@@ -148,7 +148,7 @@ class RocketLcpBeacon {
 			current_src: ""
 		};
 
-		const css_bg_url_rgx = /url\(\s*?['"]?\s*?(\S+?)\s*?["']?\s*?\)\s*?([a-zA-Z0-9\s]*[x|dpcm|dpi|dppx]?)/ig;
+		const css_bg_url_rgx = /url\(\s*?['"]?\s*?(.+?)\s*?["']?\s*?\)/ig;
 
 		if (nodeName === "img" && element.srcset) {
 			element_info.type = "img-srcset";
@@ -186,9 +186,12 @@ class RocketLcpBeacon {
 				computed_style.getPropertyValue("background-image"),
 				getComputedStyle(element, ":after").getPropertyValue("background-image"),
 				getComputedStyle(element, ":before").getPropertyValue("background-image")
-			];
+			].filter(prop => prop !== "none");
 
-			const full_bg_prop = bg_props.filter(prop => prop !== "none").join("");
+			if (bg_props.length === 0) {
+				return null;
+			}
+			const full_bg_prop = bg_props[0];
 			element_info.type = "bg-img";
 			if (full_bg_prop.includes("image-set(")) {
 				element_info.type = "bg-img-set";