Previous styles not being removed when returning 'null' values using dynamic rule sets.

[ernestostifano]

NOTE: Similar to https://github.com/cssinjs/jss/issues/1026, but with dynamic rule sets instead of dynamic values.

Just to clarify nomenclature... dynamic rule set Vs. dynamic value:

{
  // DYNAMIC RULE SET
  a: ({color}) => ({
    display: 'inline',
    color: color
  }) ,
  b: {
    display: 'inline',
    // DYNAMIC VALUE
    color: ({ color }) => color
  }
}

Expected behavior: Previous applied values to be removed when respective value is set to null in a dynamic rule set.

Describe the bug: Previous values are not removed causing a number of trouble.

Codesandbox link: https://codesandbox.io/s/fervent-dawn-uomkr

Versions:

• JSS: 10.4.0
• Browser: All
• OS: macOS 10.15.7

[ernestostifano]

I've continued to test and I've found that the above problem when returning null is only a sub-case. It seems that previous styles are never being removed (at least in Chrome inspector, you can see styles being accumulated and hopefully overridden on each change. When you return null there is simply no new style to override the previous). This is only happening with dynamic rule sets as explained above.

I can also confirm that the problem is almost certainly not with react-jss package. I have my own React implementation of jss, I'm facing the same exact issue and I've carefully checked every part of my code.

[kof]

In that case I would recommend to

1. create a reproduction without using react-jss (as a first step)
2. or directly create a failing test for jss

Without a failing test there will be no mergeable fix. A failing test will also help any contributor to see how to fix the problem better.