The pseudo class ":first-child" is potentially unsafe when doing server-side rendering.

[bytrangle]

• OS version:
• Browser version: Chrome
• Extension version: 1.69.5

🐛 Describe the bug

This bug comes from the Timer component of the extension popup. The :first-child selector targets the div rendered inside a TimerContainer when there is a running time entry. It doesn't apply when when there is no running time entry because an input field will be rendered as the first child of the container.

Toggl Button extension uses Emotion JS to write CSS in Javascript, and this library has a setting that warns against using :first-child selector.

The reason is that sometimes Emotion injects a <style> element in the beginning, which would make it the first child and therefore defeats the purpose of our :first-child selector.

Expected behaviour

In this case, there was no <style> element injected by Emotion, so our :first-child rule is safe. The error is only thrown in development mode and doesn't impact the product build.

However, when developing, the error is thrown every time I open to popup and it's a nuisance to have to clear it. We could have disabled that rule from Emotion, but I think using pseudo class in this case is a reactive way of styling our extension. Hence, I suggest making changes to the popup stylesheet to stop this error.

Steps to reproduce

To recreate the bug, please follow this sequence:

1. Install the extension in development mode following the instruction in README file.
2. Leave the Chrome Extension management page open (`chrome://extensions)
3. Click on the extension button to open the popup.
4. Go back to the Chrome Extension management page and you should see a warning:

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to "first-of-type".