snappy-prerender 2.6.0-rc.2 → 2.6.0

package/src/core/browser.js

@@ -1,14 +1,26 @@
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import * as browsers from '@puppeteer/browsers';
 import { chromium } from 'playwright-core';
 import { isExecutablePath } from './config.js';
 
 /**
- * Resolves a usable Chromium-compatible browser, preferring the browser already on
- * the machine, then any Playwright cache, then a one-time Chrome for Testing
- * download. Returns the launched browser plus a human-readable source for logs.
+ * Lists the resolution steps for a browser option. Explicit choices only ever try the
+ * browser they name, so a machine without Chrome cannot silently prerender in Edge;
+ * `auto` is the only choice that falls through the machine, the Playwright cache, a
+ * cached Chrome for Testing, and finally a download.
+ */
+export function browserSteps(browser) {
+  if (browser === 'auto') return ['chrome', 'msedge', 'playwright', 'cache', 'download'];
+  if (browser === 'chromium') return ['playwright'];
+  if (browser === 'chrome' || browser === 'msedge') return [browser];
+  return [];
+}
+
+/**
+ * Resolves a usable Chromium-compatible browser. Explicit channel choices fail rather
+ * than falling back, while `auto` prefers the machine's browser, then any cached
+ * download, then a one-time Chrome for Testing install.
  */
 export async function launchBrowser(config, log) {
   if (isExecutablePath(config.browser)) {
@@ -19,40 +31,54 @@ export async function launchBrowser(config, log) {
   }
 
   const attempts = [];
-  const channels =
-    config.browser === 'auto'
-      ? ['chrome', 'msedge']
-      : config.browser === 'chromium'
-        ? []
-        : [config.browser];
-
-  for (const channel of channels) {
+  for (const step of browserSteps(config.browser)) {
     try {
-      const browser = await launch(config, { channel });
-      return { browser, source: `system ${channel}` };
+      const launched = await runStep(step, config, log);
+      if (launched) return launched;
     } catch (error) {
-      attempts.push(`${channel}: ${firstLine(error.message)}`);
+      attempts.push(`${step}: ${firstLine(error.message)}`);
     }
   }
 
-  try {
-    const browser = await launch(config, {});
-    return { browser, source: 'playwright cache' };
-  } catch (error) {
-    attempts.push(`playwright cache: ${firstLine(error.message)}`);
-  }
-
   if (!config.browserDownload) {
     throw new Error(
       `No usable browser found and browserDownload is disabled. Tried:\n  ${attempts.join('\n  ')}`,
     );
   }
+  if (config.browser === 'chromium') {
+    throw new Error(
+      `No Playwright-managed Chromium is installed. Run "npx playwright install chromium", or set browser to auto or chrome. Tried:\n  ${attempts.join('\n  ')}`,
+    );
+  }
+  throw new Error(`No usable browser found. Tried:\n  ${attempts.join('\n  ')}`);
+}
 
-  const executablePath = await downloadChrome(config, log);
-  return {
-    browser: await launch(config, { executablePath }),
-    source: `downloaded ${executablePath}`,
-  };
+// Runs one browser resolution step and returns the launched browser, or null when the
+// step has nothing to offer on this machine.
+async function runStep(step, config, log) {
+  if (step === 'chrome' || step === 'msedge') {
+    return { browser: await launch(config, { channel: step }), source: `system ${step}` };
+  }
+  if (step === 'playwright') {
+    return { browser: await launch(config, {}), source: 'playwright cache' };
+  }
+  if (step === 'cache') {
+    const cached = await findCachedChrome(config);
+    if (!cached) return null;
+    return {
+      browser: await launch(config, { executablePath: cached.executablePath }),
+      source: `cached Chrome for Testing ${cached.buildId}`,
+    };
+  }
+  if (step === 'download') {
+    if (!config.browserDownload) return null;
+    const executablePath = await downloadChrome(config, log);
+    return {
+      browser: await launch(config, { executablePath }),
+      source: `downloaded ${executablePath}`,
+    };
+  }
+  return null;
 }
 
 // Launches Chromium with the configured headless mode, extra args and target.
@@ -70,20 +96,64 @@ function firstLine(message) {
 }
 
 /**
- * Downloads Chrome for Testing into the tool's own cache directory. Used only when
- * neither a system browser nor a Playwright-managed browser is available. The
- * archive comes from Google's version-pinned HTTPS bucket via @puppeteer/browsers,
- * which verifies it against browserDownloadHash when one is configured and deletes
- * it on a mismatch. Without a configured hash the download is trusted on the
- * strength of HTTPS alone, which is logged as a warning.
+ * Chooses a cached Chrome for Testing install. Kept pure so the offline/version-pinned
+ * selection can be tested without touching the machine's browser cache.
+ */
+export function selectCachedChrome(
+  installed,
+  { browser = 'chrome', platform, buildId = null, executableExists = () => true },
+) {
+  return (
+    installed.find(
+      (entry) =>
+        entry.browser === browser &&
+        entry.platform === platform &&
+        (!buildId || entry.buildId === buildId) &&
+        executableExists(entry.executablePath),
+    ) ?? null
+  );
+}
+
+// Formats download progress for the debug log; a missing content length reports 0%.
+export function downloadPercent(downloaded, total) {
+  return total > 0 ? Math.round((downloaded / total) * 100) : 0;
+}
+
+/**
+ * Finds a Chrome for Testing build already present in the tool's cache, so a rebuild
+ * never needs the version feed or a download when a browser is available offline.
+ * Honours browserDownloadVersion when one is configured.
+ */
+async function findCachedChrome(config) {
+  const browsers = await import('@puppeteer/browsers');
+  const platform = browsers.detectBrowserPlatform();
+  if (!platform) return null;
+  const installed = browsers.getInstalledBrowsers({ cacheDir: browserCacheDir() });
+  return selectCachedChrome(installed, {
+    browser: browsers.Browser.CHROME,
+    platform,
+    buildId: config.browserDownloadVersion,
+    executableExists: fs.existsSync,
+  });
+}
+
+/**
+ * Downloads Chrome for Testing into the tool's own cache directory. The archive comes
+ * from Google's version-pinned HTTPS bucket via @puppeteer/browsers, which verifies it
+ * against browserDownloadHash when one is configured and deletes it on a mismatch.
+ * Without a configured hash the download is trusted on the strength of HTTPS alone,
+ * which is logged as a warning.
  */
 async function downloadChrome(config, log) {
+  const browsers = await import('@puppeteer/browsers');
+  const platform = browsers.detectBrowserPlatform();
+  if (!platform) {
+    throw new Error(`Cannot download a browser for ${os.platform()} (${os.arch()})`);
+  }
   const cacheDir = browserCacheDir();
-  const buildId = await browsers.resolveBuildId(
-    browsers.Browser.CHROME,
-    browsers.detectBrowserPlatform(),
-    'stable',
-  );
+  const buildId =
+    config.browserDownloadVersion ??
+    (await browsers.resolveBuildId(browsers.Browser.CHROME, platform, 'stable'));
   if (config.browserDownloadHash) {
     log.info(
       `Downloading Chrome for Testing ${buildId}, verifying SHA-256 against browserDownloadHash`,
@@ -99,7 +169,7 @@ async function downloadChrome(config, log) {
     cacheDir,
     expectedHash: config.browserDownloadHash ?? undefined,
     downloadProgressCallback: (downloaded, total) =>
-      log.debug(`  downloaded ${total > 0 ? Math.round((downloaded / total) * 100) : 0}%`),
+      log.debug(`  downloaded ${downloadPercent(downloaded, total)}%`),
   });
   if (!fs.existsSync(installed.executablePath)) {
     throw new Error(`Chrome download reported success but ${installed.executablePath} is missing`);

package/src/core/build-origin.js

@@ -0,0 +1,19 @@
+import { parse } from 'parse5';
+import { collectBuildOrigins, isMetadataUrlNode, metadataUrlValue } from './metadata-origin.js';
+
+/**
+ * Collects build-server origins from the metadata URLs in a serialized document.
+ * Only canonical and URL-bearing social tags are inspected, so a loopback API URL in
+ * application state does not trip the optional build-origin gate.
+ */
+export function findBuildOriginUrls(html) {
+  const origins = new Set();
+  const walk = (node) => {
+    if (isMetadataUrlNode(node)) {
+      for (const origin of collectBuildOrigins(metadataUrlValue(node))) origins.add(origin);
+    }
+    for (const child of node.childNodes ?? []) walk(child);
+  };
+  walk(parse(html));
+  return [...origins].slice(0, 3);
+}

package/src/core/config.js

@@ -24,14 +24,23 @@ const NULLABLE_KEYS = [
   'userAgent',
   'destination',
   'browserDownloadHash',
+  'browserDownloadVersion',
   'url',
   'serveCmd',
 ];
-const ARRAY_KEYS = ['include', 'exclude', 'allowedHosts', 'browserArgs', 'ignoreForPreload'];
+const ARRAY_KEYS = [
+  'include',
+  'exclude',
+  'allowedHosts',
+  'browserArgs',
+  'ignoreForPreload',
+  'removeAttributes',
+];
 
 export const DEFAULTS = Object.freeze({
   sourceDir: 'dist',
   destination: null,
+  cleanDestination: false,
   base: '/',
   include: ['/'],
   exclude: [],
@@ -52,6 +61,7 @@ export const DEFAULTS = Object.freeze({
   browser: 'auto',
   browserDownload: true,
   browserDownloadHash: null,
+  browserDownloadVersion: null,
   browserArgs: [],
   headless: true,
   ignoreHTTPSErrors: false,
@@ -68,6 +78,7 @@ export const DEFAULTS = Object.freeze({
   minifyHtml: false,
   minifyCss: false,
   removeBlobs: true,
+  removeAttributes: [],
   removeStyleTags: false,
   removeScriptTags: false,
   asyncScriptTags: false,
@@ -75,15 +86,26 @@ export const DEFAULTS = Object.freeze({
   preconnectThirdParty: true,
   preloadImages: false,
   preloadManifest: false,
+  sitemap: false,
   ignoreForPreload: ['service-worker.js'],
   cacheAjaxRequests: false,
   maxCachedBytes: 5 * 1024 * 1024,
   flatOutput: false,
   notFoundRoute: '/404',
   verify: true,
+  verifyChangedOnly: false,
   failOnHydrationError: false,
   failOnRerender: false,
   failOnPageError: false,
+  failOnEmptyPage: true,
+  failOnUndetected: false,
+  failOnVerificationError: false,
+  failOnConsoleError: false,
+  failOnFailedRequest: false,
+  failOnDuplicateContent: false,
+  stripBuildOriginMetadata: true,
+  failOnBuildOriginMetadata: false,
+  pruneStaleRoutes: false,
   metadata: null,
   failOnError: true,
   dryRun: false,
@@ -97,6 +119,19 @@ export const DEFAULTS = Object.freeze({
 // below decide what is allowed.
 const MULTI_TYPE_KEYS = new Set(['inlineCss', 'minifyHtml', 'minifyCss']);
 
+// Freeze the nested list defaults as well, so a consumer cannot mutate the defaults
+// used by every later run in the same process.
+for (const key of [
+  'include',
+  'exclude',
+  'allowedHosts',
+  'browserArgs',
+  'ignoreForPreload',
+  'removeAttributes',
+]) {
+  Object.freeze(DEFAULTS[key]);
+}
+
 // Every boolean option is validated, derived from the defaults so a new flag cannot be
 // forgotten in a hand-maintained list.
 const BOOLEAN_KEYS = Object.entries(DEFAULTS)
@@ -116,7 +151,9 @@ export function resolveConfig(userOptions = {}) {
   config.concurrency =
     userOptions.concurrency ??
     Math.max(1, Math.min(os.availableParallelism(), MAX_DEFAULT_CONCURRENCY));
-  config.includeProvided = userOptions.include !== undefined;
+  config.includeProvided =
+    userOptions.include !== undefined &&
+    !(config.include.length === 1 && config.include[0] === '/');
   // The CSP dial decides the defaults for the pieces that can move. Explicit options still
   // win, so a project can take 'strict' and put one part back.
   if (userOptions.externalScripts === undefined) config.externalScripts = config.csp === 'strict';
@@ -125,9 +162,87 @@ export function resolveConfig(userOptions = {}) {
   }
   config.warnings = [];
   validateConfig(config);
+  addConfigWarnings(config, userOptions);
   return config;
 }
 
+/**
+ * Reports options that do nothing in the current combination, so a build does not
+ * quietly skip a gate the caller believes is active.
+ */
+function addConfigWarnings(config, userOptions) {
+  const warn = (message) => config.warnings.push(message);
+  for (const key of Object.keys(userOptions)) {
+    if (!Object.hasOwn(DEFAULTS, key)) {
+      warn(`unknown option "${key}" is ignored; check the spelling`);
+    }
+  }
+  if (!config.verify) {
+    for (const key of [
+      'verifyChangedOnly',
+      'failOnHydrationError',
+      'failOnRerender',
+      'failOnUndetected',
+      'failOnVerificationError',
+    ]) {
+      if (config[key]) warn(`${key} has no effect because verify is false`);
+    }
+  }
+  if (config.verify && (config.serveCmd || config.saveAs !== 'html')) {
+    for (const key of [
+      'failOnHydrationError',
+      'failOnRerender',
+      'failOnUndetected',
+      'failOnVerificationError',
+    ]) {
+      if (config[key]) {
+        warn(
+          `${key} has no effect because hydration verification is skipped with ${config.serveCmd ? 'serveCmd' : `saveAs: '${config.saveAs}'`}`,
+        );
+      }
+    }
+  }
+  if (
+    userOptions.criticalCssPreload !== undefined &&
+    config.criticalCssPreload !== false &&
+    config.inlineCss !== 'critical'
+  ) {
+    warn('criticalCssPreload has no effect unless inlineCss is "critical"');
+  }
+  if (config.minifyCss && !config.minifyHtml && !config.inlineCss) {
+    warn('minifyCss has no effect unless minifyHtml or inlineCss is enabled');
+  }
+  if (config.allowedHosts.length > 0 && !config.blockThirdParty) {
+    warn('allowedHosts has no effect unless blockThirdParty is true');
+  }
+  if (config.csp === 'strict' && config.inlineCss) {
+    warn(
+      "csp controls script-src; inlineCss emits inline styles, which need style-src 'unsafe-inline' or hashes",
+    );
+  }
+  if (
+    config.csp === 'strict' &&
+    userOptions.criticalCssPreload !== undefined &&
+    config.criticalCssPreload !== false
+  ) {
+    warn(
+      "criticalCssPreload emits an inline onload handler that a script-src 'self' policy blocks",
+    );
+  }
+  if (config.removeStyleTags && config.inlineCss === 'critical') {
+    warn('removeStyleTags removes CSS-in-JS styles before critical CSS is extracted');
+  }
+  if (config.sitemap && config.saveAs !== 'html') {
+    warn(`sitemap has no effect when saveAs is '${config.saveAs}'`);
+  }
+  const metadataBase = config.metadata?.base;
+  if (metadataBase && metadataBase !== config.base) {
+    warn(
+      `metadata.base (${metadataBase}) differs from base (${config.base}); canonical, social URLs and routing will disagree`,
+    );
+  }
+}
+
 /**
  * Ensures the base path always carries a leading and trailing slash so route and
  * URL helpers can strip or append it without branching on user input shape.
@@ -189,8 +304,9 @@ export function validateConfig(config) {
   stringList(config.allowedHosts, 'allowedHosts');
   stringList(config.browserArgs, 'browserArgs');
   stringList(config.ignoreForPreload, 'ignoreForPreload');
+  patternList(config.removeAttributes, 'removeAttributes');
   for (const key of ['readyFlag', 'readySelector', 'waitFor', 'notFoundRoute']) nullableString(key);
-  for (const key of ['userAgent', 'destination']) nullableString(key);
+  for (const key of ['userAgent', 'destination', 'browserDownloadVersion']) nullableString(key);
   for (const key of BOOLEAN_KEYS) booleanOption(key);
 
   if (config.browserDownloadHash !== null && !/^[a-f0-9]{64}$/i.test(config.browserDownloadHash)) {
@@ -246,6 +362,14 @@ export function validateConfig(config) {
   if (config.url !== null && !/^https?:\/\//.test(config.url)) {
     throw new TypeError('url must be an absolute http(s) URL');
   }
+  if (config.serveCmd !== null && config.url) {
+    const parsed = new URL(config.url);
+    if (parsed.pathname !== '/' && parsed.pathname !== '') {
+      throw new TypeError(
+        'url must be an origin without a path when serveCmd is used; set base for a sub-path deployment',
+      );
+    }
+  }
   if (!INLINE_CSS_STRATEGIES.includes(config.inlineCss)) {
     throw new TypeError("inlineCss must be false, true, 'inline' or 'critical'");
   }
@@ -270,7 +394,15 @@ export function validateConfig(config) {
   if (!SAVE_AS_CHOICES.includes(config.saveAs)) {
     throw new TypeError(`saveAs must be one of: ${SAVE_AS_CHOICES.join(', ')}`);
   }
+  if (config.removeStyleTags && (config.inlineCss === true || config.inlineCss === 'inline')) {
+    throw new TypeError(
+      "removeStyleTags cannot be combined with inlineCss 'inline' or true: it would strip the CSS the inline step just added",
+    );
+  }
   validateMetadata(config);
+  if (config.sitemap && !config.metadata?.siteUrl) {
+    throw new TypeError('sitemap needs metadata.siteUrl so the sitemap can list absolute URLs');
+  }
 }
 
 // The metadata keys the head component reads, so a typo is reported instead of ignored.
@@ -305,6 +437,14 @@ function validateMetadata(config) {
   if (metadata.siteUrl && !/^https?:\/\//.test(metadata.siteUrl)) {
     throw new TypeError('metadata.siteUrl must be an absolute http(s) URL');
   }
+  if (metadata.siteUrl) {
+    const parsed = new URL(metadata.siteUrl);
+    if (parsed.pathname !== '/' && parsed.pathname !== '') {
+      throw new TypeError(
+        'metadata.siteUrl must be an origin without a path; set base for a sub-path deployment',
+      );
+    }
+  }
   if (metadata.base && !metadata.base.startsWith('/')) {
     throw new TypeError('metadata.base must start with a slash, for example /app/');
   }

package/src/core/css-url.js

@@ -0,0 +1,34 @@
+const URL_TOKEN = /url\(\s*(['"]?)([^'")]+)\1\s*\)/gi;
+const NON_LOCAL = /^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i;
+
+/**
+ * Rebases the relative url() values in a stylesheet against the stylesheet's own URL.
+ * Moving a sheet from /assets/app.css into a <style> element would otherwise resolve
+ * its fonts and images against the page URL, which differs on nested routes. Local
+ * URLs become root-relative so they work from any page depth.
+ */
+export function rewriteCssUrls(css, stylesheetUrl, pageOrigin) {
+  return css.replace(URL_TOKEN, (match, quote, value) => {
+    const target = value.trim();
+    if (target.length === 0 || NON_LOCAL.test(target)) return match;
+    let resolved;
+    try {
+      resolved = new URL(target, stylesheetUrl);
+    } catch {
+      return match;
+    }
+    const next =
+      resolved.origin === pageOrigin
+        ? `${resolved.pathname}${resolved.search}${resolved.hash}`
+        : resolved.href;
+    return `url(${quote}${next}${quote})`;
+  });
+}
+
+/**
+ * Reports whether a stylesheet uses @import. Inlining cannot preserve the rule's
+ * position in the cascade, so the caller leaves that sheet as a link instead.
+ */
+export function hasImportRule(css) {
+  return /@import\b/i.test(css);
+}

package/src/core/destination.js

@@ -7,9 +7,34 @@ import path from 'node:path';
  * HTML and the source directory stays untouched. An existing destination is reported
  * before it is overwritten, and entries that cannot be copied are counted.
  */
-export async function prepareDestination({ sourceDir, destination, log }) {
-  if (!destination || path.resolve(destination) === path.resolve(sourceDir)) {
-    return sourceDir;
+export async function prepareDestination({
+  sourceDir,
+  destination,
+  log,
+  cleanDestination = false,
+}) {
+  if (!destination) return path.resolve(sourceDir);
+  const source = path.resolve(sourceDir);
+  const target = path.resolve(destination);
+  if (target === source) return source;
+  if (target.startsWith(`${source}${path.sep}`)) {
+    throw new Error(
+      `destination cannot be inside sourceDir: ${target} is inside ${source}. Use a sibling directory.`,
+    );
+  }
+  if (cleanDestination) {
+    const sourceInsideTarget = path.relative(target, source);
+    if (
+      sourceInsideTarget.length > 0 &&
+      !sourceInsideTarget.startsWith('..') &&
+      !path.isAbsolute(sourceInsideTarget)
+    ) {
+      throw new Error(
+        `cleanDestination would delete sourceDir: ${source} is inside ${target}. Choose a destination outside the build output.`,
+      );
+    }
+    await fs.rm(target, { recursive: true, force: true });
+    log?.debug(`cleaned destination ${destination}`);
   }
   const existing = await fs.readdir(destination).catch(() => []);
   if (existing.length > 0) {

package/src/core/init.js

@@ -1,5 +1,7 @@
 import fs from 'node:fs/promises';
+import { createRequire } from 'node:module';
 import path from 'node:path';
+import { pathToFileURL } from 'node:url';
 import { normaliseRoute } from './routes.js';
 
 export const CONFIG_FILE = 'snappy.config.js';
@@ -23,14 +25,55 @@ export async function detectProjectDefaults(dir = process.cwd()) {
   const dependencies = { ...manifest?.dependencies, ...manifest?.devDependencies };
   const usesVite = Boolean(dependencies.vite) || (await anyExists(dir, VITE_CONFIGS));
   const usesCreateReactApp = Boolean(dependencies['react-scripts']) && !usesVite;
+  const vite = usesVite ? await detectViteConfig(dir) : null;
   return {
-    sourceDir: usesCreateReactApp ? 'build' : 'dist',
+    sourceDir: vite?.sourceDir ?? (usesCreateReactApp ? 'build' : 'dist'),
+    base: vite?.base ?? homepageBase(manifest?.homepage) ?? '/',
     usesVite,
     runner: await detectRunner(dir),
     installed: PACKAGE_NAME in dependencies,
   };
 }
 
+/**
+ * Reads the project's real Vite output directory and base when Vite can be resolved
+ * from that project. Falls back to the conventional defaults when the config is
+ * missing, imports an unavailable plugin, or Vite is not installed.
+ */
+async function detectViteConfig(dir) {
+  try {
+    const require = createRequire(path.join(dir, 'package.json'));
+    const entry = require.resolve('vite');
+    const { resolveConfig } = await import(pathToFileURL(entry).href);
+    const resolved = await resolveConfig({ root: dir, logLevel: 'silent' }, 'build');
+    const relative = path.relative(dir, resolved.build.outDir);
+    return {
+      sourceDir: relative.startsWith('..') ? resolved.build.outDir : relative || '.',
+      base: detectedBase(resolved.base),
+    };
+  } catch {
+    return null;
+  }
+}
+
+// Keeps a detected base usable by normaliseBase: only root-relative bases apply here.
+function detectedBase(base) {
+  if (typeof base !== 'string' || !base.startsWith('/') || base.startsWith('//')) return '/';
+  return base.endsWith('/') ? base : `${base}/`;
+}
+
+// Reads Create React App's homepage into a base path, ignoring absolute deployments
+// and values that are not a path.
+function homepageBase(homepage) {
+  if (typeof homepage !== 'string' || homepage.length === 0) return null;
+  try {
+    const url = new URL(homepage, 'https://example.invalid');
+    return url.pathname.endsWith('/') ? url.pathname : `${url.pathname}/`;
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Normalises a comma separated route list into include patterns, keeping wildcards as the
  * user wrote them and falling back to the root route so the config always renders something.

package/src/core/inline-css.js

@@ -1,9 +1,12 @@
+import { hasImportRule, rewriteCssUrls } from './css-url.js';
 import { minifyCss } from './minify.js';
 
 /**
  * Inlines every same-origin stylesheet the page loaded, replacing the links with a
  * single style tag. Blob-backed stylesheets work too because the text is read from
- * the live page. Stylesheets that cannot be fetched are left in place.
+ * the live page. Stylesheets that cannot be fetched, or that use @import, are left in
+ * place. Relative url() values are rebased against each sheet before joining so fonts
+ * and images keep working on nested routes.
  */
 export async function inlineStylesheets({ page, minifyCssOptions }) {
   const collected = await page.evaluate(async () => {
@@ -11,7 +14,7 @@ export async function inlineStylesheets({ page, minifyCssOptions }) {
     // applies, so a print stylesheet is left as a link instead of becoming active.
     const INLINEABLE_MEDIA = new Set(['', 'all', 'screen']);
     const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
-    const parts = [];
+    const sheets = [];
     const skipped = [];
     for (const link of links) {
       const media = (link.getAttribute('media') ?? '').trim().toLowerCase();
@@ -22,23 +25,41 @@ export async function inlineStylesheets({ page, minifyCssOptions }) {
       try {
         const response = await fetch(link.href);
         if (!response.ok) throw new Error(String(response.status));
-        parts.push(await response.text());
-        link.remove();
+        sheets.push({ css: await response.text(), href: link.href });
       } catch {
         skipped.push(link.href);
       }
     }
-    return { css: parts.join('\n'), skipped };
+    return { sheets, skipped };
   });
 
-  if (collected.css.trim().length === 0) return { skipped: collected.skipped };
-  const css = minifyCssOptions ? minifyCss(collected.css, minifyCssOptions) : collected.css;
-  await page.evaluate((text) => {
-    const style = document.createElement('style');
-    style.textContent = text;
-    document.head.appendChild(style);
-  }, css);
-  return { skipped: collected.skipped };
+  const inlineable = [];
+  const skipped = [...collected.skipped];
+  for (const sheet of collected.sheets) {
+    if (hasImportRule(sheet.css)) skipped.push(sheet.href);
+    else inlineable.push(sheet);
+  }
+  if (inlineable.length === 0) return { skipped };
+
+  const pageOrigin = new URL(page.url()).origin;
+  const joined = inlineable
+    .map((sheet) => rewriteCssUrls(sheet.css, sheet.href, pageOrigin))
+    .join('\n');
+  const css = minifyCssOptions ? minifyCss(joined, minifyCssOptions) : joined;
+  await page.evaluate(
+    ({ text, hrefs }) => {
+      const style = document.createElement('style');
+      style.setAttribute('data-snappy-inline', '');
+      style.textContent = text;
+      document.head.appendChild(style);
+      const inlined = new Set(hrefs);
+      for (const link of document.querySelectorAll('link[rel="stylesheet"]')) {
+        if (inlined.has(link.href)) link.remove();
+      }
+    },
+    { text: css, hrefs: inlineable.map((sheet) => sheet.href) },
+  );
+  return { skipped };
 }
 
 /**