cssinjs/jss

[core] sheet.addRule with media query after attachment

Open

#1,038 opened on Feb 17, 2019

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
bugcomplexity:highhelp wanted

Description

Expected behavior: I should be able to create a style sheet, attach it to the dom and add a rule to a media query rule.

Describe the bug: Currently, the rule is added virtually but isn't rendered.

Codesandbox link: https://codesandbox.io/s/w66v8p8m35

Versions (please complete the following information):

  • jss: 9, 10
  • Browser chrome
  • OS macOS

Contributor guide

Tech stack
javascriptcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic knowledge of JSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the `sheet.attach()` and `sheet.addRule()` methods in JSS source code to understand why rules added after attachment are not rendered in the DOM. The provided codesandbox reproduces the issue; focus on how rules are inserted into the style element and why media query rules might be skipped. Look at the `insertRule` function and the `toCSS` method for media queries.