Allowing components to be SSR-friendly by changing pseudo class ":first-child" to ":first-of-type"

[cheton]

A warning message reported by Next.js that the pseudo class :first-child is potentially unsafe when doing server-side rendering. Try changing it to :first-of-type.

Here are the component list that use the pseudo class ":first-child". It's suggested that we replace it with ":first-of-type" to make components to be SSR-friendly.

src/Checkbox/styles.js:      '& > :first-child': {
src/Input/styles.js:    '&:not(:first-child)': {
src/InputGroupAppend/styles.js:    '& > *:first-child': notFirstChildStyle,
src/InputGroupAppend/styles.js:    '&:not(:last-child) > *:first-child': notLastChildStyle,
src/InputGroupPrepend/styles.js:    '& > *:first-child': notLastChildStyle,
src/InputGroupPrepend/styles.js:    '&:not(:first-child) > *:first-child': notFirstChildStyle,
src/Modal/ModalFooter.js:        '&:first-child': {
src/Modal/ModalBody.js:        '&:first-child': {

[albertshala]

Hi @cheton, In Narnia, we have also seen this issue happen when using checkbox and modal components as well, for the modal component in particular, the above error happens only the first time the click event to open the modal occurs, all subsequent events to open or close the modal do not produce any error.

Note: The error is hidden when build in production mode via webpack.

[cheton]

It will be fixed in PR #253

[cheton]

Published @trendmicro/[email protected] to NPM

https://www.npmjs.com/package/@trendmicro/react-styled-ui/v/0.9.3

[cheton]

See emotion-js/emotion#1105 (comment) for details.

Add emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason to ignore warning messages (packages/cache/src/stylis-plugins.js)

Option 1

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

Option 2

import { CacheProvider } from '@emotion/core'
import createCache from '@emotion/cache'

const myCache = createCache()
myCache.compat = true

<CacheProvider value={myCache}>
  <App/>
</CacheProvider>

Option 3

import { cache } from 'emotion'

<CacheProvider value={cache}>
  <App/>
</CacheProvider>