Skip to content

StyleSheet.replaceRule does not replace media query rules #1649

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions