wasm-html-to-image 1.0.7 → 1.0.8

package/dist/core-resources.d.ts

@@ -69,6 +69,14 @@ export declare function limitCodeForReason(reason: string): string;
  * together, so this bounds the connection burst for many-page documents.
  */
 export declare const FETCH_CONCURRENCY = 16;
+/**
+ * Resolve the relative `url(...)` and `@import` references of a fetched stylesheet against
+ * the stylesheet's own URL. The engine resolves them against the page, which is wrong as soon
+ * as the sheet lives in another directory (`url(../fonts/a.woff)` in `/static/css/a.css`).
+ * Absolute, protocol-relative, `data:`, `#` and root-relative references are left alone, and a
+ * root-relative sheet URL keeps its root-relative form.
+ */
+export declare function absolutizeCssUrls(css: string, cssUrl: string): string;
 /** Run `fn` over `items` with at most `limit` calls in flight (`fn` must not reject). */
 export declare function mapWithLimit<T>(items: readonly T[], limit: number, fn: (item: T) => Promise<void>): Promise<void>;
 /**

package/dist/core-resources.js

@@ -270,6 +270,50 @@ export function limitCodeForReason(reason) {
  * together, so this bounds the connection burst for many-page documents.
  */
 export const FETCH_CONCURRENCY = 16;
+/**
+ * Resolve the relative `url(...)` and `@import` references of a fetched stylesheet against
+ * the stylesheet's own URL. The engine resolves them against the page, which is wrong as soon
+ * as the sheet lives in another directory (`url(../fonts/a.woff)` in `/static/css/a.css`).
+ * Absolute, protocol-relative, `data:`, `#` and root-relative references are left alone, and a
+ * root-relative sheet URL keeps its root-relative form.
+ */
+export function absolutizeCssUrls(css, cssUrl) {
+    if (!css.includes("url(") && !css.includes("@import"))
+        return css;
+    const dummy = "http://css-base.invalid/";
+    let base;
+    try {
+        base = new URL(cssUrl, dummy);
+    }
+    catch {
+        return css;
+    }
+    const keepRootRelative = cssUrl.startsWith("/");
+    const absoluteCssUrl = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(cssUrl);
+    const resolve = (ref) => {
+        const t = ref.trim();
+        if (t === "" ||
+            t.startsWith("#") ||
+            t.startsWith("/") ||
+            /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(t))
+            return ref;
+        try {
+            const u = new URL(t, base);
+            if (absoluteCssUrl)
+                return u.href;
+            if (u.origin !== base.origin)
+                return u.href;
+            const path = u.pathname + u.search + u.hash;
+            return keepRootRelative ? path : path.slice(1);
+        }
+        catch {
+            return ref;
+        }
+    };
+    return css
+        .replace(/url\(\s*(['"]?)([^'")]*)\1\s*\)/g, (_m, q, ref) => `url(${q}${resolve(ref)}${q})`)
+        .replace(/@import\s+(['"])([^'"]+)\1/g, (_m, q, ref) => `@import ${q}${resolve(ref)}${q}`);
+}
 /** Run `fn` over `items` with at most `limit` calls in flight (`fn` must not reject). */
 export async function mapWithLimit(items, limit, fn) {
     let next = 0;
@@ -392,6 +436,10 @@ export async function resolveHtmlResources(module, satoruInst, htmls, width, hei
         const pending = parsePendingResources(bin instanceof Uint8Array ? bin : undefined);
         if (pending.length === 0)
             break;
+        // Stylesheets cascade by document order, not by fetch completion order: a small
+        // later sheet must not land before (and so lose to) a large earlier one. They are
+        // buffered here and injected in discovery order once the whole round has settled.
+        const loadedCss = [];
         await mapWithLimit(pending, FETCH_CONCURRENCY, async (r) => {
             const diag = ctx.diag;
             const entry = diag
@@ -470,7 +518,11 @@ export async function resolveHtmlResources(module, satoruInst, htmls, width, hei
                 }
                 ctx.usage.totalResourceBytes += bytes.length;
                 settle("loaded", bytes.length);
-                (await addRes(satoruInst, r.url, r.type === "image" ? 2 : r.type === "css" ? 3 : 1, bytes));
+                if (r.type === "css") {
+                    loadedCss.push({ index: pending.indexOf(r), url: r.url, bytes });
+                    return;
+                }
+                (await addRes(satoruInst, r.url, r.type === "image" ? 2 : 1, bytes));
                 if (r.type === "font") {
                     diag?.fonts.push({
                         family: r.name || r.url,
@@ -486,6 +538,13 @@ export async function resolveHtmlResources(module, satoruInst, htmls, width, hei
                 diag?.warnings.push(d);
             }
         });
+        loadedCss.sort((a, b) => a.index - b.index);
+        for (const css of loadedCss) {
+            const text = new TextDecoder().decode(css.bytes);
+            const fixed = absolutizeCssUrls(text, css.url);
+            const bytes = fixed === text ? css.bytes : new TextEncoder().encode(fixed);
+            (await addRes(satoruInst, css.url, 3, bytes));
+        }
     }
     // Merge the C++ collect-phase breakdown into the JS timings.
     if (profileEnabled && ctx.diag) {