Possible method to opt-out of emotion 10's "unreliable selectors" warnings

app.js

// app/src/app.js

// This will _not_ throw the 'first-child' warning
const sampleStyles = {
  '&:first-child': {
    emotionIgnore: 'ssr-warning',
    color: 'rebeccapurple'
  }
}

const Sample = (props) => <div css={styles} {...props />

render(<Sample />)

index.js

// @emotion/cache/src/index.js; line 202

stylis.use((context, content, selectors) => {
  switch (context) {
    case 2: {
      for (let i = 0, len = selectors.length; len > i; i++) {
        // :last-child isn't included here since it's safe
        // because a style element will never be the last element
        let match = selectors[i].match(/:(first|nth|only)-child/)
        if (match !== null) {
          const IGNORE_SSR = 'emotion-ignore:ssr-warning';
          if (content.indexOf(IGNORE_SSR) === -1) {
            console.error(
              `The pseudo class "${
                match[0]
              }" is potentially unsafe when doing server-side rendering. Try changing it to "${
                match[1]
              }-of-type"`
            )
          } else {
            return content.replace(IGNORE_SSR, '')
          }
        }
      }
      break
    }
  }
})