StyleSheet.replaceRule does not replace media query rules
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
__Expected behavior:__
When using replaceRule with a media query as part of the rule, the style rules described by the media query should be replaced, but they're not.
__Describe the bug:__
When using replaceRule, jss does not replace the media query rules. Specifically, when using a sheet like this:
```js
const newSheet = jss.createStyleSheet({}, { element, link: true });
const rules = {
example: {
color: "red",
"@media (max-width: 640px)": {
color: "blue"
}
}
};
newSheet.addRules(rules);
newSheet.attach();
```
Then calling replaceRule with a new media style:
```js
// This does not work:
newSheet.replaceRule("example", {
color: "purple",
"@media (max-width: 640px)": {
color: "green"
}
});
```
The non-media rule is added to the style tag's css rules, but the media rule is not. Note that deleting the rule then re-adding it works correctly:
```js
// This works:
newSheet.deleteRule("example");
newSheet.addRule("example", {
color: "purple",
"@media (max-width: 640px)": {
color: "green"
}
});
```
__Reproduction:__
Codesandbox link: https://codesandbox.io/s/cool-engelbart-cqyh2k?file=/src/index.js
The text here is red by default / blue on max-width: 640px, which is controlled by a jss StyleSheet attached to a element. The intended behavior is to change the text to purple by default / green on max-width: 640px. When using replaceRule, the purple style rule is applied but the green style rule is not.
__Versions (please complete the following information):__
- jss: 10.10.0
- Browser: Chrome (though I suspect this applies to all browsers)
- OS: macOS (though I suspect this applies to all OSs)
__Managing expectations:__
I'd be happy to submit a PR to help fix this, but I'm not quite sure where to start - I tried to look through how replaceRule works but everything looked straightforward there. I'm not sure whether this is a problem with JSS itself, or one of its plugins, or whether this might be an issue with using the rules when the sheet is attached/deployed/linked. If one of the maintainers could confirm they think this is a bug and point me in the right direction, will happily try and figure out a test case and fix 👍
Contributor guide
Research direction
Start by running the linked CodeSandbox reproduction and then trace the replaceRule entry point used by the attached JSS StyleSheet. Add a regression test for replacing a rule containing an @media block, and confirm that both the base style and the media-query style change from red/blue to purple/green.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100