StyleSheet.replaceRule does not replace media query rules
Author: noahsark769Created Jul 6, 2023Updated Jul 6, 2023
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
Source: cssinjs/jss