cssinjs / cssinjs/jss

StyleSheet.replaceRule does not replace media query rules

Open
#1,649 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.