fix(core): preserve CSS URL identity and escape rebased suffixes

Author: miguel-heygen

packages/core/src/compiler/htmlBundler.test.ts

@@ -1858,6 +1858,52 @@ describe("bundleToSingleHtml", () => {
     expect(styleText(linked)).toContain('url("css/icon1.png")');
   });
 
+  it("preserves escaped leading spaces as part of linked CSS asset identity", async () => {
+    const dir = makeTempProject({
+      "index.html": `<link rel="stylesheet" href="css/theme.css"><div data-composition-id="root" data-width="320" data-height="180"></div>`,
+      "css/theme.css": String.raw`.bg { background: url(\ image.png); }`,
+      "css/ image.png": "leading-space-image",
+      "css/image.png": "different-image",
+    });
+
+    const linked = await bundleToSingleHtml(dir, { inlineAssets: false });
+    expect(styleText(linked)).toContain("url(css/%20image.png)");
+    const inlined = await bundleToSingleHtml(dir);
+    expect(styleText(inlined)).toContain(inlinedAs("image/png", "leading-space-image"));
+    expect(styleText(inlined)).not.toContain(inlinedAs("image/png", "different-image"));
+  });
+
+  it.each([
+    ["", String.raw`?v=\ 1`, String.raw`?v=\0000201`],
+    ['"', String.raw`?v=\22 1`, String.raw`?v=\0000221`],
+    ['"', String.raw`?v=\22`, String.raw`?v=\000022`],
+    ['"', String.raw`?v=\3c /style\3e 1`, String.raw`?v=\00003c/style\00003e1`],
+  ])("escapes decoded CSS URL suffixes with delimiter %j", async (quote, suffix, escaped) => {
+    const dir = makeTempProject({
+      "index.html": `<link rel="stylesheet" href="css/theme.css"><div data-composition-id="root" data-width="320" data-height="180"></div>`,
+      "css/theme.css": `.bg { background: url(${quote}icon.png${suffix}${quote}); }`,
+      "css/icon.png": "suffix-image",
+    });
+
+    const linked = await bundleToSingleHtml(dir, { inlineAssets: false });
+    expect(styleText(linked)).toContain(`url(${quote}css/icon.png${escaped}${quote})`);
+    const inlined = await bundleToSingleHtml(dir);
+    expect(styleText(inlined)).toContain(inlinedAs("image/png", "suffix-image"));
+  });
+
+  it("normalizes CSS nulls before resolving linked stylesheet assets", async () => {
+    const dir = makeTempProject({
+      "index.html": `<link rel="stylesheet" href="css/theme.css"><div data-composition-id="root" data-width="320" data-height="180"></div>`,
+      "css/theme.css": ".bg { background: url(\0.png); }",
+      "css/\uFFFD.png": "replacement-character-image",
+    });
+
+    const linked = await bundleToSingleHtml(dir, { inlineAssets: false });
+    expect(styleText(linked)).toContain("url(css/%EF%BF%BD.png)");
+    const inlined = await bundleToSingleHtml(dir);
+    expect(styleText(inlined)).toContain(inlinedAs("image/png", "replacement-character-image"));
+  });
+
   it("rebases url() paths with ../ traversal in nested @import", async () => {
     const dir = makeTempProject({
       "index.html": `<!doctype html>

packages/core/src/compiler/htmlBundler.ts

@@ -145,14 +145,18 @@ function rebaseCssUrls(css: string, cssFileDir: string, projectDir: string): str
   const resolvedDir = resolve(cssFileDir);
   if (resolvedDir === resolvedRoot) return css;
   return css.replace(CSS_URL_RE, (full, quote: string, urlValue: string) => {
-    const decoded = decodeCssEscapes(urlValue).trim();
+    const decoded = decodeCssEscapes(urlValue);
     if (!decoded || !isRelativeUrl(decoded)) return full;
     const { basePath, suffix } = splitUrlSuffix(decoded);
     if (!basePath) return full;
     const absolutePath = resolve(resolvedDir, decodeWellFormedEscapes(basePath));
     const rebased = encodeUrlPath(relative(resolvedRoot, absolutePath).split(sep).join("/"));
     if (rebased === basePath) return full;
-    return `url(${quote || ""}${rebased}${suffix}${quote || ""})`;
+    const escapedSuffix = suffix.replace(
+      /[\x00-\x20\x7f"'()\\<>]/g,
+      (char) => `\\${char.charCodeAt(0).toString(16).padStart(6, "0")}`,
+    );
+    return `url(${quote || ""}${rebased}${escapedSuffix}${quote || ""})`;
   });
 }
 

packages/parsers/src/utils/urlPath.test.ts

@@ -13,8 +13,8 @@ describe("URL filename identity", () => {
   it("removes URL suffixes before decoding encoded filename punctuation exactly once", () => {
     expect(decodedUrlPath("a%2520%3F%23.png?cache=1#view")).toBe("a%20?#.png");
   });
-  it("replaces invalid CSS escaped code points before URL encoding", () => {
-    for (const escaped of [String.raw`\0`, String.raw`\d800`, String.raw`\110000`]) {
+  it("normalizes CSS nulls and invalid escaped code points before URL encoding", () => {
+    for (const escaped of ["\0", String.raw`\0`, String.raw`\d800`, String.raw`\110000`]) {
       expect(decodeCssEscapes(escaped)).toBe("\uFFFD");
     }
   });

packages/parsers/src/utils/urlPath.ts

@@ -35,18 +35,20 @@ export function encodeUrlPath(path: string): string {
 }
 
 export function decodeCssEscapes(text: string): string {
-  return text.replace(
-    /\\(?:([0-9a-f]{1,6})(?:\r\n|[ \t\r\n\f])?|(\r\n|[\n\r\f])|([\s\S]))/gi,
-    (
-      _escaped,
-      hex: string | undefined,
-      lineBreak: string | undefined,
-      char: string | undefined,
-    ) => {
-      if (hex === undefined) return lineBreak === undefined ? char! : "";
-      const code = Number.parseInt(hex, 16);
-      if (code === 0 || code > 0x10ffff || (code >= 0xd800 && code <= 0xdfff)) return "\uFFFD";
-      return String.fromCodePoint(code);
-    },
-  );
+  return text
+    .replace(/\0/g, "\uFFFD")
+    .replace(
+      /\\(?:([0-9a-f]{1,6})(?:\r\n|[ \t\r\n\f])?|(\r\n|[\n\r\f])|([\s\S]))/gi,
+      (
+        _escaped,
+        hex: string | undefined,
+        lineBreak: string | undefined,
+        char: string | undefined,
+      ) => {
+        if (hex === undefined) return lineBreak === undefined ? char! : "";
+        const code = Number.parseInt(hex, 16);
+        if (code === 0 || code > 0x10ffff || (code >= 0xd800 && code <= 0xdfff)) return "\uFFFD";
+        return String.fromCodePoint(code);
+      },
+    );
 }