@schalkneethling/css-media-pseudo-polyfill 1.0.10 → 1.0.11

package/dist/fn.mjs

@@ -1,2 +1,2 @@
-import { t as polyfill } from "./polyfill-BA69lY_2.mjs";
+import { t as polyfill } from "./polyfill-CiJgx85h.mjs";
 export { polyfill };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { t as polyfill } from "./polyfill-BA69lY_2.mjs";
+import { t as polyfill } from "./polyfill-CiJgx85h.mjs";
 //#region src/index.ts
 if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => polyfill());
 else polyfill();

package/dist/{polyfill-BA69lY_2.mjs → polyfill-CiJgx85h.mjs}

@@ -211,6 +211,21 @@ function rewriteStyleElements(unsupported) {
 //#endregion
 //#region src/rewrite-link.ts
 /**
+* Resolve relative url() references in CSS text to absolute URLs, using
+* the stylesheet's own URL as the base. This is necessary because when CSS
+* is fetched from a <link> and re-injected as an inline <style>, the browser
+* resolves url() references relative to the document URL rather than the
+* original stylesheet URL, breaking any relative paths (e.g. url('../images/bg.png')).
+*
+* Data URIs and absolute URLs (https?:, //, /) are left untouched.
+*/
+function resolveUrls(cssText, base) {
+	return cssText.replace(/url\(\s*(['"]?)(.*?)\1\s*\)/gi, (match, quote, path) => {
+		if (/^(?:data:|https?:|\/)/.test(path)) return match;
+		return `url(${quote}${new URL(path, base).href}${quote})`;
+	});
+}
+/**
 * Check whether a stylesheet URL is same-origin. The browser resolves
 * relative hrefs to absolute URLs on the HTMLLinkElement.href property,
 * so comparing the origin portion covers both relative paths and
@@ -243,6 +258,7 @@ async function processLinkSheet(link, unsupported) {
 	} catch {
 		return;
 	}
+	cssText = resolveUrls(cssText, href);
 	const rewritten = rewriteCss(cssText, unsupported);
 	link.setAttribute("data-polyfill-rewritten", "");
 	if (rewritten === null) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schalkneethling/css-media-pseudo-polyfill",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "A CSS polyfill for media pseudo-classes (:playing, :paused, :seeking, :buffering, :stalled, :muted)",
   "keywords": [
     "audio",