@import is always async?

I'm trying to use adopted stylesheets with a fallback using:

<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" />

(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!
image.png
Was this page helpful?