Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Element “style” not allowed as child of element “div” in this context.

See original GitHub issue

Description

When I use the W3C validator I expect to get no errors but there are many errors with misplaced “style” elements

Link to Reproduction

https://validator.w3.org/nu/?doc=https%3A%2F%2Fchakra-ui.com%2F

Steps to reproduce

Go to https://validator.w3.org/nu/?doc=https%3A%2F%2Fchakra-ui.com%2F
Click check the Element “style” not allowed as child of element “div” in this context.

Chakra UI Version

Latest

Browser

Not applicable

Operating System

macOS
Windows
Linux

Additional Information

As per https://github.com/validator/validator/issues/489, using <style> tags outside <head> is not following the HTML5 specifications.

There is a risk that by not following the HTML5 specifications, SEO can be impacted (see https://www.elegantthemes.com/blog/wordpress/how-to-use-w3c-validator-to-improve-seo)

As per Emotion’s documentation, it looks like it is possible to move the <style> tag inside the <head>: https://emotion.sh/docs/ssr#nextjs

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:33 (24 by maintainers)

Top GitHub Comments

2reactions

segunadebayocommented, Jun 5, 2022

Let me try to explain what’s happening here:

With our current setup and approach, during SSR, emotion will render style tags inline as a sibling of any Chakra component. After hydration, emotion will move the styles to the head as fast as it can to prevent FOUC (flash of unstyled content)

If we implemented the SSR setup recommended by emotion docs, we’ll skip that hydration step and extract all the styles to the head ahead of time. I think we should attempt to do this within our docs @nikolovlazar @TylerAPfledderer. If we notice improvements from this, we’ll update our documentation to reflect this.

When you use markup validators, they’ll run against the SSR output of the website and will see inline style as invalid, when in fact, that’s not the full story.

2reactions

dube25commented, Jun 4, 2022

@segunadebayo : watching this issue. Is there a timeline on a fix from Chakra-UI?

Thanks!