Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

bytrangle
Copy link

@bytrangle bytrangle commented Apr 6, 2021

🌟 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.

🐛 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.

📝 Links to relevant issues or information

#1934

Fixes #1934

@bytrangle bytrangle changed the title Fix "first-child" pseudo class error by applying styles directly to t… #issue number 1934 Fix "first-child" pseudo class error Apr 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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