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 ahutchings

@kylegach Thanks, I missed that check at the top. Do you have a suggestion for how we can use the suppression comment when running unit tests in Jest (along with the babel plugin), where NODE_ENV is set to "test" automatically by the runner?

We're also developing a component library, and would like for our users to be able to take advantage of emotion source maps (provided by the babel plugin) in development without seeing the unsafe selector errors, but I suppose that is more the larger issue that needs to be resolved (#1178).

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