Warnings about pseudo classes in console

[daturon]

Describe the bug The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". It appears when I try to add files.

To Reproduce Steps to reproduce the behavior:

1. Click on the file field
2. Add a file
3. In a browser console you can see a warning "The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"

Desktop (please complete the following information):

• OS: Mac OS 13.4.1
• Browser Chrome
• 115.0.5790.170 (Official Build) (arm64)

[daturon]

It could be fixed with smth like this:

const Filename = styled('div')`
  display: flex;
  width: 100%;

  & > span {
    display: block;
  }

  & > span:first-of-type {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  & > span:last-of-type {
    flex-shrink: 0;
    display: block;
  }
`

Could you update these (:first-child and :last-child) pseudo-classes, please?

[viclafouch]

Hey !

How to you get this warning ? With which framework ?

[daturon]

Hey! I use React 18.2.0. But I think this seems to be an emotion issue.

stack overflow example