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:
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:
// 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:
// 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 <style> 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 👍
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:
Then calling replaceRule with a new media style:
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:
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 <style> 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):
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 👍