profile
viewpoint

Ask questionsCannot turn off "potentially unsafe when doing server-side rendering" noise

Emotion 10 is emitting a series of console warnings along the lines of:

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to "first-of-type"
The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to "nth-of-type"
  • emotion version: 10.0.4
  • react version: 16.7.0-alpha2

Problem description:

  1. I'm not using server-side rendering so these warnings aren't useful for me and are just console noise that means real problems will be masked. Apart from running in a production build, I can't see any way to turn these warnings off right now.
  2. The error message doesn't help me understand why these pseudo classes are a problem; I can't find them mentioned in the Emotion docs, or references on the Internet as to why these might be a problem.

Suggested solution:

  1. Provide a way to turn off these warnings if users don't want them.
  2. Provide a link, or some documentation, as to why these pseudos are problematic.
emotion-js/emotion

Answer questions nelsonlaquet

This is a pretty serious limitation. I understand it has to do with <style> elements being added inline in the DOM when doing SSR; is it at all possible for emotion to... not do that?

I've been using emotion for a whole of a week and have ran into this issue multiple times, where using :first-of-type isn't a valid substitute. To get around this issue I've had to add superfluous <div> elements, which clutter the DOM unnecessarily, and complicate the use of my components.

useful!

Related questions

Component selectors not working with `@emotion/babel-preset-css-prop` hot 2
How to use babel-emotion-plugin with Storybook + Typescript? hot 1
Snapshot tests showing components as '<ForwardRef />' instead of component name hot 1
Using emotion 9 and 10 in the same window hot 1
Emotion 10 - "React is not defined" hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Problems surrounding SSR injection of <style> and unreliability of :first-child selectors hot 1
Typescript definitions for @emotion/native hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
&:focus not working hot 1
regexp not work in IE hot 1
transpile typescript to babel-plugin-emotion doesn't work hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Snapshot tests showing components as '<ForwardRef />' instead of component name hot 1
Github User Rank List