Cannot 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.

[brentertz]

Hi Folks,

The inability to disable these console messages is a blocker for us being able to ship the Emotion 10 update to our component library. As a library, these messages are also visible to all of our downstream consumers.

We do not wish to update the selector usage in our library as we do not believe Emotion’s current SSR strategy to be a valid trade-off for breaking numerous commonly used CSS selectors, hence #1178. We are hopeful that an alternate approach can be found there as well, but in the mean time, simply would like to disable these console messages.

Is there anything that can be done here to move things forward? We are willing to do the work, or collaborate, if you can provide some insight into the direction that you would like to take.

Possible Solutions

• Simply remove logging; instead improve and rely on SSR documentation
• Conditionally remove logging, e.g. ENV var or other opt out mechanism
• Only log when server side rendering
• Only log message once per page load
  • Unsure if this would avoid excess logging during unit tests though
• Remove the Stylis “linting” plugins from the default cache implementation and make them opt-in
• Use linter/stylelint instead
  • Rules then become user configurable as ignored, warning, or error
  • Create and document a stylelint-config-emotion package
• Adjust the Stylis “linting” plugin to support a special style property that allows the message to be suppressed. See PR #1209

Additional Considerations

• Our product is an open-source component library, as opposed to an application, so preferably any solution will not place an additional configuration burden on downstream consumers.

Lastly, thank you for all of your efforts in creating and maintaining this project, which solves a lot of our problems!

[Andarist]

You can disable currently this by using comment in your styled:

css`
  :first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this- 
 the-warning-exists-for-a-reason */ {
    color: hotpink;
  }  
`