DioxusLabs
Delayed CSS loading with asset system
Problem
When using the asset system to add CSS, the styling is loaded later than when using Doxus.toml and results in the components being unstyled at first.
Steps To Reproduce
Steps to reproduce the behavior:
- Or
style = ["/tailwind.css"] - Use
head::Link { rel: "stylesheet", href: asset!("./assets/tailwind.css") }
Expected behavior
Everything should be styled when it appears.
Screenshots
Using Dioxus.toml: https://github.com/user-attachments/assets/0156e208-826d-4b92-941e-b32acfecf32d
Using the asset system: https://github.com/user-attachments/assets/29828eb3-24c2-43db-81ea-d53946111f38
Environment:
- Dioxus version: main
- Rust version: 1.80.1
- OS info: Fedora Linux 40
- App platform: web
- Browser: Firefox 129.0 (also happens sometimes with Chromium 127.0.6533.99, though not as visibly)
This is expected behavior for stylesheets. style = [...] injected the style into the head at compile time. The new head::Link injects it at runtime on the client (or on the server in fullstack). You can still modify the index.html file at the root of your project if you need your stylesheet to load as soon as possible. It looks like react suspends the parent of the link to avoid showing unstyled content. Dioxus may do something similar in the future
Thanks for clarifying the source of the problem. It would indeed be nice if Dioxus would do something like React in the future :)
You can still modify the index.html file at the root of your project if you need your stylesheet to load as soon as possible.
For those that want to do this in an automated fashion from CI:
#!/usr/bin/bash
cd dist || exit
for f in *.css; do
sed -i "/<\/head>/i <link rel=\"stylesheet\" href=\"$(basename "$f")\">" index.html
done
# optional, I wanted to do this for accessibility reasons
sed -i 's/<html>/<html lang="en">/' index.html
However, this approach has flaws:
- The wasm still loads its own stylesheets into the head. So everything you put there gets duplicated. Presumably your browser caches this so it shouldn't affect performance?
- For tailwind users, after running the script above you do end up with an extra tailwind file in the
<head>of theindex.html(e.g.tailwindcss144c5986ae3fe8.cssandtailwind.css), not sure why an extra one exists in the out dir. I guess you could just check if$f == tailwind.cssbut I'm not sure if other ones get duped, or if this is just a weird manganis/tailwind quirk.
