importing raw css with ?inline
I want to inline some critical css styles into a head style (via useHead in all layouts) using
import appCss from '../app.css?inline, but them, I get those styles duplicated: running dev server I can see this style being added twice (link preload + link stylesheet) and also the style entry, is there a way to prevent this (maybe Vite problem)?
18 Replies
the style is just below the
theme-color meta entry
https://github.com/vitejs/vite/pull/10762#issuecomment-1301860548
adding &used is even worst, it is added 4 times; using only ?used only adds the stylesheet link (no preload)
since I have only 1 layout I'll copy the contentWhat happens if you try disabling
experimental.renderInlineStyles?could be a hydration issue if something is happening differently between client + server, you could use a
key on that style entry to test that
key: 'app-css'Good suggestion. I think
?inline will result in an empty string on server build (but will result in inlining it if you have renderInlineStyles turned on), which is why &used is needed to get the string (but will still also inline it).I'm testing it rn, I added an id not a key
@danielroe there is no such entry, do you mean
inlineSSRStyles?
wow writeEarlyHints 💯that'd be the one.
disabling
inlineSSRStyles using only ?inline both links on the head
adding id and key to the style...
wait...
the same result adding id and key to the script
using
import appCss from '../app.css' doesn't work either
you'll really need to build this to see.
ok
we don't inline styles in dev mode at all, but we do automatically inline critical styles in prod
(that is, that are used in a vue SFC)
so it may be you don't even need to do this
I know, the problem, styles being duplicated: is there a way to hint some order? it seems the styles in the pages will go first, then styles from the imports in the layout
Interesting. And just to confirm you're on 3.0.0?
hey @danielroe sorry to bother you, is there a way to avoid doing this hacks https://discord.com/channels/473401852243869706/1043560786364223603 ?