jss: Version 10.8.1 release looks incompatible with 10.8.0.

Expected behavior: Things should work.

Describe the bug: I am using MUI v5 and using a theme that is using jss in style provider. The theme uses @mui/styles which is depreciated for mui5 but was working fine. I am also using data-grid.

The recent release of 10.8.1 caused the app to break when a screen with data-grid is viewed. I spent multiple hours to find that there are different versions of jss and plugins in the yarn.lock, and 10.8.0 and 10.8.1 does not seem to go together because of replaceUrl or something.

Did some tweaking but then there was a type issue. I don’t know where the problem is and I could not find anything so I am posting it here. The problem is probably not with the package itself but a unique combination of different packages with different versions of jss and plugins.

Reproduction:

Unfortunately, I was not able to reproduce it outside of the project. May try on weekends if got time.

Versions (please complete the following information):

jss: 10.8.1
Browser [e.g. chrome, safari]: Brave
OS [e.g. Windows, macOS]: Windows 10 Pro, Ubuntu 20.x
@mui/styles: 5.0.0
@mui/x-data-grid-pro": “^5.0.0-beta.2” Feel free to add any additional versions which you may think are relevant to the bug.

Managing expectations:

Maintainers will not be fixing the problem you have unless they have it too, if you want it to get fixed:

Submit a PR with a failing test
Discuss a solution
Implement it

You can also do the first step only and wait for someone else to work on a fix. Anything is much better than nothing.

I am short of time at the moment and can’t really provide anything right now, maybe I can try to reproduce on weekends if I get time.

The yarn resolutions fixed the issue for me:

"resolutions": {
    "jss": "10.8.0",
    "jss-plugin-camel-case": "10.8.0",
    "jss-plugin-default-unit": "10.8.0",
    "jss-plugin-global": "10.8.0",
    "jss-plugin-nested": "10.8.0",
    "jss-plugin-props-sort": "10.8.0",
    "jss-plugin-rule-value-function": "10.8.0",
    "jss-plugin-vendor-prefixer": "10.8.0"
  }

If someone else face the similar issue, try this.

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 18
Comments: 20 (15 by maintainers)

Commits related to this issue

perhaps fix unwanted replace BUG: #1565 — committed to seiyab/jss by seiyab 3 years ago
add test for accidental replace in v10.8.1 Issue: #1565 — committed to seiyab/jss by seiyab 3 years ago
Revert 87952b48 because of #1565 — committed to cssinjs/jss by kof 3 years ago
add test for accidental replace in v10.8.1 (#1571) * add test for accidental replace in v10.8.1 Issue: #1565 * revert unwanted format — committed to cssinjs/jss by seiyab 3 years ago
Revert "Revert 87952b48 because of #1565" This reverts commit 45f44639403a88edb8c4f60f0bd55d5649296bb6. try to fix memory leak again — committed to seiyab/jss by seiyab 3 years ago
Revert "Revert 87952b48 because of #1565" This reverts commit 45f44639403a88edb8c4f60f0bd55d5649296bb6. try to fix memory leak again — committed to seiyab/jss by seiyab 3 years ago
Revert "Revert 87952b48 because of #1565" This reverts commit 45f44639403a88edb8c4f60f0bd55d5649296bb6. try to fix memory leak again — committed to cssinjs/jss by seiyab 3 years ago

Most upvoted comments

10.8.1 changed the output of nested styles, now it is can’t generate correct nested and dynamic className

That’s my case: https://codesandbox.io/s/amazing-rain-ut7q1?file=/src/App.js

viko16 on Oct 20, 2021

+1 we have the same issue. it caused issues in material-ui styles

kabdelkareem on Oct 20, 2021

Extending number of items to 10, https://github.com/cssinjs/jss/issues/1565#issuecomment-947407480 shows 2nd, 5th, and 8th items render wrong style. react-jss might accidentally generates same key for different rules and they are replaced by update of other rules.

seiyab on Oct 20, 2021

Patch released https://github.com/cssinjs/jss/releases/tag/v10.8.2

kof on Oct 25, 2021

@seiyab, not sure if it is helpful but the style of tiem number 2 in @viko16 is missing because of this line in jss removes the style from the cssRules.

//_proto.replaceRule
this.cssRules.splice(index, 1);

But this line only inserts the new rule in the container styles and not in the cssRules

return this.insertRule(rule, index);

This makes the _proto.refCssRule function to replace the wrong item in the array because the element to be removed is not inserted yet?

if (rule.options.parent instanceof StyleSheet) {
      this.cssRules[index] = cssRule;
}

TLDR: The old rule was at index 4. Splice removed it. Now next style (of item 2) is at index 4. Insert should add the new rule in cssRule at index 4, So style of 2 gets back to 5 again. At last style at index 4 (which was 5 initially) gets replaced by new rule.

Potential Solutions:

Don’t remove from this.cssRules because it will eventually get replaced later. I don’t know it will work.

My breakpoints

mfaheemakhtar on Oct 21, 2021