fix: stylesheet links in <Head> drop entry CSS (#3825)

crowlKats · web-flow · commit 56faed1998ff · 2026-05-27T15:10:31.000+02:00
The Head cache key for <link> excluded href for every rel, so any <link rel="stylesheet"> in <Head> collided with entry-asset stylesheets (e.g. Tailwind) and replaced them at the layout's <head> position. The href exclusion was added to let <Head> override a singleton like canonical without a key; scope it to those rels so distinct stylesheets no longer dedupe. Closes #3824
diff --git a/packages/fresh/src/runtime/server/preact_hooks.ts b/packages/fresh/src/runtime/server/preact_hooks.ts
@@ -203,6 +203,14 @@ options[OptionsType.ATTR] = (name, value) => {
 
 const PATCHED = new WeakSet<VNode>();
 
+// Link rels whose presence is conceptually singleton: a `<Head>` override
+// should replace the existing tag regardless of its href. Other rels
+// (stylesheet, preload, alternate, ...) can legitimately appear multiple
+// times with different hrefs, so href must remain part of the cache key.
+function isSingletonLinkRel(rel: unknown): boolean {
+  return rel === "canonical" || rel === "manifest";
+}
+
 function normalizeKey(key: unknown): string {
   const value = key ?? "";
   const s = (typeof value !== "string") ? String(value) : value;
@@ -406,7 +414,10 @@ options[OptionsType.DIFF] = (vnode) => {
                   continue;
                 } else if (originalType === "meta" && key === "content") {
                   continue;
-                } else if (originalType === "link" && key === "href") {
+                } else if (
+                  originalType === "link" && key === "href" &&
+                  isSingletonLinkRel(props.rel)
+                ) {
                   continue;
                 }
 
diff --git a/packages/fresh/tests/head_test.tsx b/packages/fresh/tests/head_test.tsx
@@ -156,6 +156,41 @@ Deno.test("Head - ssr - merge keyed", async () => {
   expect(last?.textContent).toEqual("ok");
 });
 
+Deno.test("Head - ssr - stylesheet links with different hrefs coexist", async () => {
+  const handler = new App()
+    .appWrapper(({ Component }) => {
+      return (
+        <html lang="en">
+          <head>
+            <meta charset="utf-8" />
+            <link rel="stylesheet" href="/entry.css" />
+          </head>
+          <body>
+            <Component />
+          </body>
+        </html>
+      );
+    })
+    .get("/", (ctx) => {
+      return ctx.render(
+        <Head>
+          <link rel="stylesheet" href="https://fonts.example.com/font.css" />
+        </Head>,
+      );
+    }).handler();
+
+  const server = new FakeServer(handler);
+  const res = await server.get("/");
+  const doc = parseHtml(await res.text());
+
+  const hrefs = Array.from(
+    doc.querySelectorAll("link[rel='stylesheet']"),
+  ).map((el) => (el as HTMLLinkElement).getAttribute("href"));
+
+  expect(hrefs).toContain("/entry.css");
+  expect(hrefs).toContain("https://fonts.example.com/font.css");
+});
+
 Deno.test("Head - ssr - updates link", async () => {
   const handler = new App()
     .appWrapper(({ Component }) => {
