@import is always async?

I'm trying to use adopted stylesheets with a fallback using:
<style>@import url(styles.css);</style>
<style>@import url(styles.css);</style>
The motivation behind this fallback is either in case adopted stylesheets are unsupported, OR the content is server-rendered and I want to avoid the old FOUC issue. Unfortunately, it doesn't seem to be render blocking like it used to be. So I still get the FOUC issue. I looked into this a bit and tried prefetching first, but it only sort of worked...
<link rel="preload" href="/styles.css" as="style" />
<link rel="preload" href="/styles.css" as="style" />
(check the attached image) I'm not sure what the point of preloading it is if it always ends up refetching... I'm still left with the stubborn FOUC issue. PLEASE NOTE - This can't be solved by Tailwind, I still have to import tailwind.css the same way in my case. In fact, I already am!
3 Replies
shinzou
shinzouOP2y ago
Okay I answered this partly, "disable cache" was checked. poohheh Except, it still didn't resolve the core issue... Why did the cached (304) version take just as long to load as the preload fetch (200)?
shinzou
shinzouOP2y ago
I'm slowly going insane
shinzou
shinzouOP2y ago
So the preload link works as long as you're serving your DSD on first paint. If JavaScript parses it and injects it into the DOM asynchronously, however, it will give you FOUC no matter what. It's strange, but this is what I observe. In my use case, I can just use JS to set visibility: hidden and avoid FOUC issues... I didn't want to use JS before, for the sake of progressive enhancement, but since the issue only occurs when JS is already rendering the page on the client side, we're guaranteed JS is enabled. I'll leave the question open in case someone comes along with more information
Want results from more Discord servers?
Add your server