track-extension icon indicating copy to clipboard operation
track-extension copied to clipboard

#issue number 1934 Fix "first-child" pseudo class error

Open bytrangle opened this issue 4 years ago • 0 comments

:star2: What does this PR do?

Fix the error thrown by Emotion JS when using :first-child pseudo class selector.

The error stems from the RunningTimerDescription component inside the Timer component.

first-child-pseudo-class

The RunningTimerDescription component, denoted by the smaller rectangle with orange stroke, is targeted via >div:first-child. However, this component uses Emotion JS, which sometimes inject a <style> element as the first child of an element, making the :first-child rule vulnerable to break.

Hence, I removed the >div::first-child rule and applied CSS properties directly to the RunningTimerDescription.

:bug: Recommendations for testing

  1. Install the extension in development mode following the README file.
  2. Leave the Chrome and Firefox Extension Management page open.
  3. Click the extension button to open the popup.
  4. Go back to each Extension Management page and you should see no error warning regarding :first-child selector.
  5. In the popup, type anything in the Input field of the Timer component and press Enter key or click the Stop button next to it. The input field will turn into the RunningTimerDescription and all the styling remain the same as before.

:memo: Links to relevant issues or information

https://github.com/toggl/toggl-button/issues/1934

Fixes #1934

bytrangle avatar Apr 06 '21 08:04 bytrangle