fix: Allow links with duplicate href if rel is different (#5071)

Fixes #5070

packages/playwright-tests/web.spec.js

@@ -156,6 +156,22 @@ test("document elements", async ({ page }) => {
   await expect(main).toHaveCSS("font-family", "Roboto");
 });
 
+test("link preload and stylesheet with same href are not deduplicated", async ({ page }) => {
+  await page.goto("http://localhost:9990");
+
+  // Both links should exist (different rel = not deduplicated)
+  await expect(page.locator("link#dedup-preload[rel='preload']")).toHaveCount(1);
+  await expect(page.locator("link#dedup-stylesheet[rel='stylesheet']")).toHaveCount(1);
+});
+
+test("links with same href and rel are deduplicated", async ({ page }) => {
+  await page.goto("http://localhost:9990");
+
+  // Only first link should exist (same rel = deduplicated)
+  await expect(page.locator("link#dedup-first")).toHaveCount(1);
+  await expect(page.locator("link#dedup-second")).toHaveCount(0);
+});
+
 test("merge styles", async ({ page }) => {
   await page.goto("http://localhost:9990");
   // wait until the div is mounted

packages/playwright-tests/web/src/main.rs

@@ -154,6 +154,32 @@ fn DocumentElements() -> Element {
         document::Stylesheet { id: "stylesheet-head", href: "https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic" }
         document::Script { id: "script-head", async: true, "console.log('hello world');" }
         document::Style { id: "style-head", "body {{ font-family: 'Roboto'; }}" }
+
+        // Test that links with same href but different rel are NOT deduplicated
+        // See https://github.com/DioxusLabs/dioxus/issues/5070
+        document::Link {
+            id: "dedup-preload",
+            rel: "preload",
+            href: "dedup-test.css",
+            r#as: "style",
+        }
+        document::Link {
+            id: "dedup-stylesheet",
+            rel: "stylesheet",
+            href: "dedup-test.css",
+        }
+
+        // Test that links with same href AND same rel ARE deduplicated
+        document::Link {
+            id: "dedup-first",
+            rel: "stylesheet",
+            href: "dedup-same.css",
+        }
+        document::Link {
+            id: "dedup-second",
+            rel: "stylesheet",
+            href: "dedup-same.css",
+        }
     }
 }