Work around for https://github.com/withastro/astro/issues/2146

replace-vite-asset-path.mjs

// @ts-check
import fs from "node:fs/promises";
import path from "node:path";

// This script is temporary work-around for issue,
// https://github.com/withastro/astro/issues/2146
// TL;DR, we need to replace all url() in CSS manually...
// e.g. url(__VITE_ASSET__********__) => url(/assets/asset.********.webp)
// Some url() work fine if they are updated to data-url.
(async () => {
  const ASSETS_DIR = path.resolve("./dist/assets");
  const REPLACE_TARGET_RE = /__VITE_ASSET__([0-9a-f]{8})__/g;

  console.log("🔄 Checking VITE_ASSET urls in CSS");

  const assetPaths = await fs.readdir(ASSETS_DIR);

  const cssPaths = [];
  const assetMap = new Map();
  for (const assetPath of assetPaths) {
    if (assetPath.endsWith(".css")) {
      cssPaths.push(assetPath);
    } else {
      const [_, hash] = assetPath.split(".");
      assetMap.set(hash, assetPath);
    }
  }

  /** @type {string[]} */
  const cssPathsToReplace = [];
  await Promise.all(
    cssPaths.map((p) =>
      fs.readFile(`${ASSETS_DIR}/${p}`, "utf8").then((c) => {
        if (REPLACE_TARGET_RE.test(c)) cssPathsToReplace.push(p);
      })
    )
  );

  if (cssPathsToReplace.length === 0) {
    console.log("✅ No files to be replaced!");
    return process.exit(0);
  }

  for (const css of cssPathsToReplace) {
    const cssPath = `${ASSETS_DIR}/${css}`;
    let content = await fs.readFile(cssPath, "utf8");
    const matches = content.matchAll(REPLACE_TARGET_RE);

    // @ts-ignore: downlevelIteration...?
    for (const match of matches) {
      const [target, hash] = match;
      content = content.replace(target, `/assets/${assetMap.get(hash)}`);
    }
    await fs.writeFile(cssPath, content, "utf8");
    console.log(`✅ Found and replaced ${css}`);
  }
})();

  "build": "astro build",
  "postbuild": "node ./replace-vite-asset-path.mjs"