#1649·jss

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:

javascript
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:

javascript
  // 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:

javascript
  // 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