Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix bug where preloading and using a stylesheet deduplicates the link #3843

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Makosai
Copy link

@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
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.

1 participant