You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, the class name that gets generated is hashed by the value of the key when a selector is provided. However, this can lead to unintended leaking of styles, which I discovered while testing segmentio/evergreen#1554
The class name that is added to the stylesheet with the selector appended looks like this: .ub-bg-clr_169mlyl:hover, which means any element with ub-bg-clr_169mlyl will receive a red background on hover.
Currently, the class name that gets generated is hashed by the value of the key when a selector is provided. However, this can lead to unintended leaking of styles, which I discovered while testing segmentio/evergreen#1554
Take a small example:
Box 1 should only have a red background when it is
disabled
.Box 2 should only have a red background when it is hovered (which works).
However, because we are only hashing the value of the styles inside, i.e.
red
->169mlyl
, both of the boxes get the same class nameub-bg-clr_169mlyl
.The class name that is added to the stylesheet with the selector appended looks like this:
.ub-bg-clr_169mlyl:hover
, which means any element withub-bg-clr_169mlyl
will receive a red background on hover.This simple example can be demoed in this CodeSandbox: https://codesandbox.io/s/ui-box-selector-uniqueness-bug-n7i3sj
Additionally, this behavior can be observed in the deployment preview of that Evergreen PR
#F4F5F9
background color on hover, which is correct.#F4F5F9
background color on hover, which was leaked when the Tab styles were injectedThe text was updated successfully, but these errors were encountered: