system-ui/theme-ui

Add styles to HEAD, not to BODY

illialaz opened this issue · 4 comments

Hello. I want to ask, if there any ability to add all the <style> tags in head, but not in body. In my case, we use NextJS with config { amp: true }, but it requires all the styles to store inside head tag. In this case we can't run the app. As well, the standards (HTML 4.01: the style element) clearly specifies that the style tag is only allowed inside the head tag. Could you add an ability to insert style inside head? It will be really helpful for us.

Hmm. Not sure how amp changes it but all the Next.js sites I've made with Theme UI/Emotion have <style> tags only in the <head> (see my personal site). I don't think anything about Theme UI changes this; Emotion is handling that part of the CSS rendering. Maybe check through their docs/issues? emotion-js/emotion#2037

Thank you, @lachlanjc
In my case I use NextJS 13.5.3, ThemeUI 0.15.3 and I run next build with output standalone
I add ThemeUIProvider in _app.tsx
My site is vention
And in my .next/server/pages/... I see that styles are added in

Well, you won't see that in the site the styles are in body. They are somehow moved to head. But when I check .next/server/pages/....html I see that styles are in body. And amp sends me error for these html files