@import is always async?
I'm trying to use adopted stylesheets with a fallback using:
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...
(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
Okay I answered this partly, "disable cache" was checked. 
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)?
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)?
I'm slowly going insane
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