Skip to content

StyleSheet.replaceRule does not replace media query rules #1649

@noahsark769

Description

@noahsark769

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 👍

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions