Skip to content

Conversation

@Makosai
Copy link
Contributor

@Makosai Makosai commented Mar 7, 2025

This adds a quick fix for this issue that could be applied immediately.

The issue I came across was that the code below would only show the preload link but not the stylesheet below:

const FAVICON: Asset = asset!("/assets/favicon.ico");
const MAIN_CSS: Asset = asset!("/assets/css/main.css");
const FONTAWESOME_CSS: Asset = asset!("/assets/fontawesome/css/fontawesome.min.css");
const FONTAWESOME_SOLID_CSS: Asset = asset!("/assets/fontawesome/css/solid.min.css");
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");

fn main() {
    core::start_app(app);
}

fn app() -> Element {
    rsx!(
        // Global app resources
        document::Link { rel: "icon", href: FAVICON }

        document::Link { rel: "preload", href: MAIN_CSS, as: "style" }
        document::Link { rel: "preload", href: FONTAWESOME_CSS, as: "style" }
        document::Link { rel: "preload", href: FONTAWESOME_SOLID_CSS, as: "style" }
        document::Link { rel: "preload", href: TAILWIND_CSS, as: "style" }

        document::Link { rel: "stylesheet", href: MAIN_CSS }
        document::Link { rel: "stylesheet", href: MAIN_CSS }
        document::Link { rel: "stylesheet", href: FONTAWESOME_CSS }
        document::Link { rel: "stylesheet", href: FONTAWESOME_SOLID_CSS }
        document::Link { rel: "stylesheet", href: TAILWIND_CSS }

        Router::<Route> {}
    )
}

A quick solution would be:

document::Link { rel: "preload", href: MAIN_CSS, as: "style", onload: "this.rel = 'stylesheet'" }

The best solution would be to go to https://github.com/DioxusLabs/dioxus/edit/main/packages/document/src/elements/link.rs and change:

fn should_insert_link(href: &str) -> bool {
    get_or_insert_root_context::<LinkContext>()
        .0
        .should_insert(href)
}

It'll need to support checking to see if the url is a preload, prefetch, etc. I was initially going to use an enum as a second argument in should_insert_link and convert the string to the enum for all rel types. And maybe have separate HashSets of DeduplicationContext. Something about it just doesn't feel nice. But if someone else wants to jump in and finish this up go for it. The goal is to make it to where preload/prefetch are grouped together and every other rel should be grouped together in their own dedupe. So technically no need for an enum. It could just be a match for those two rels.

@Makosai Makosai requested a review from a team as a code owner March 7, 2025 18:56
@jkelleyrtp jkelleyrtp merged commit 841256e into DioxusLabs:main May 30, 2025
@jkelleyrtp jkelleyrtp changed the title Fix bug where preloading and using a stylesheet deduplicates the link Add the onload property to links May 30, 2025
AnteDeliria pushed a commit to AnteDeliria/dioxus that referenced this pull request Jun 2, 2025
AnteDeliria pushed a commit to AnteDeliria/dioxus that referenced this pull request Jul 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants