Version 10.8.1 release looks incompatible with 10.8.0.

[mfaheemakhtar]

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:

1. Submit a PR with a failing test
2. Discuss a solution
3. 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.

[viko16]

+1

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

[kabdelkareem]

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

[seiyab]

Extending number of items to 10, #1565 (comment) 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.

[kof]

@seiyab do you see an easy fix?

[seiyab]

@kof Not yet. I would read react-jss codes.
I found that react-jss might still cause memory leak.
I peeked RuleList that #1565 (comment) generates.
It generates more rules on rerendering component.
I should have added rerendering test for react-jss.

[kof]

Let me know if we should revert the change for now and release a previous version as a patch

[mfaheemakhtar]

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

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

My breakpoints

[seiyab]

It seems to be better to revert 10.8.1 because #1565 is more serious than #1360 .

@mfaheemakhtar Thanks a lot. It will help.

[seiyab]

Perhaps

this.cssRules[index] = cssRule

should be

this.cssRules.splice(index, 0, cssRule)

However, it still render rules in different order between RuleList and style.
I use following test case and it went wrong.

sheet = jss
  .createStyleSheet(
    {
      a: ({color}) => ({
        color: 'red',
        '& a': {
          color
        }
      }),
      b: ({display}) => ({
        display: 'block',
        '& b': {
          display
        }
      })
    },
    {link: true}
  )
  .attach()

[mfaheemakhtar]

I will do some more debugging tomorrow and compare 10.8.0 and 10.8.1. I will also take a look at what changed in tests.

[kof]

please somebody add a failing test for this new problem