How to preload css.

[onweru]

We used to load css directly from the head section of index.html. Lately, it seems to me that we have to either use manganis or

    head::Link {
      rel: "stylesheet",
      href: "/index.css"
    }

The problem is that in both of these cases, the css is loads after the wasm binary does. Which is really a problem because you notice the content flash just before the css file loads.

How can we guarantee that the css file will load before the application binary does?

[ealmloff]

The CSS will be injected into the head during the server side rendering if you are using dioxus-fullstack or dioxus-static-generation. If you are using just dioxus-web, you can still add css links into your index.html manually

[onweru]

I'm using dioxus-web, somehow css files are not loaded when using index.html. In fact, dx strips stylesheet links out.

[onweru]

Hmm, it seems that when using dx, the css files needs to be:

1. inside the assets dir
2. listed under [web.resource] style=[] section of dioxus.toml

I kept doing #2 in futility because I was listing it as style=["/index.css"]. Notice the forward slash.

#1 also applies to other files e.g favicon.ico. The presence of an index.html seems to be inconsequential as it's utterly ignored.

[onweru]

Just updated dioxus to d0c9b67 and style=["/index.css"] works as intended.

[Ddystopia]

@ealmloff Why can't dioxus-web with dx tool include css into head? I have a shared crate that has its own css, and it would be extremely convenient to have asset! inside it, instead of copying the css to every user and manually including into index.html.

Additionally, I doubt that there exist use cases where current behavior of asset!("foo.css") is better. It seems inferior in every aspect to having css in head, as if it is just a workaround.

[ealmloff]

You can if you enable the preload option: https://docs.rs/manganis-core/0.7.0-alpha.2/manganis_core/struct.AssetOptionsBuilder.html#method.with_preload-1

This it not the default behavior because some css may be used only conditionally when rendering a specific component or route

[Ddystopia]

I used AssetOptions::Css(CssAssetOptions::new().with_preload(true)) with asset! in dioxus 0.6.0, which has manganis v0.6.2, and in network tab I see that css gets preloaded, but nothing else changes - the same css file is then fetched again (with time for content download etc, not simply retrieved from cache), page still can be seen without css for some time. Is it expected in 0.6.2 and will be fixed in 0.7.0 manganise you've referenced?