Expected behavior:
Once new css rules are added older css rules should be deleted from DOM
Describe the bug:
When i use dynamic selectors in dynamic styles, the new rules are added while the older ones are not removed from DOM resulting in elements having style while the current state doesn't require them to have this style.
Noticed it used to work in JSS v9.07 and stopped working from V10.0.0+
Reproduction:
open the codesandbox bellow and:
click on a box to select it and make it change the color to red using the dynamic selector
click again and notice the older dynamic selector is still in the DOM resulting the button to become red
further explanation:
i know the example i give doesn't look like the common use case, sure you can apply a class for selected items, but in my project i really heavily on SVGs in a way which i would want to manipulate some inner paths to paint in different colors or locations based on state, for that reason i needed to have dynamic selectors to be able to color inner paths in the svg component, i did found a work-around by adding a unique class name to the svg container in each render, and applying new css rules on a &.timespamp svg[id=${id}] selector. but i do experience some animalities when for some millseconds the newer style wasn't yet rendered on DOM but the class name timestamp already changed and the entire component entirely loses its style for a brief moment
Versions (please complete the following information):
Expected behavior: Once new css rules are added older css rules should be deleted from DOM
Describe the bug: When i use dynamic selectors in dynamic styles, the new rules are added while the older ones are not removed from DOM resulting in elements having style while the current state doesn't require them to have this style. Noticed it used to work in JSS v9.07 and stopped working from V10.0.0+
Reproduction: open the codesandbox bellow and:
Codesandbox link: https://codesandbox.io/s/react-jss-playground-forked-o7fmy1
further explanation: i know the example i give doesn't look like the common use case, sure you can apply a class for selected items, but in my project i really heavily on SVGs in a way which i would want to manipulate some inner paths to paint in different colors or locations based on state, for that reason i needed to have dynamic selectors to be able to color inner paths in the svg component, i did found a work-around by adding a unique class name to the svg container in each render, and applying new css rules on a
&.timespamp svg[id=${id}]selector. but i do experience some animalities when for some millseconds the newer style wasn't yet rendered on DOM but the class name timestamp already changed and the entire component entirely loses its style for a brief momentVersions (please complete the following information):
Screenshots:
