Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

StyleSheet.replaceRule does not replace media query rules #1649

Open
noahsark769 opened this issue Jul 6, 2023 · 0 comments
Open

StyleSheet.replaceRule does not replace media query rules #1649

noahsark769 opened this issue Jul 6, 2023 · 0 comments

Comments

@noahsark769
Copy link

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 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant