Environment Information

• Package version(s): @fluentui/react-make-styles@9
• Browser and OS versions: NA

Please provide a reproduction of the bug in a codepen:

To reproduce:

• focus a demo element via Tab
• hover a demo element
• 💣 behavior should be always the same, but when ":focus" will be inserted first, ":hover" will win

https://codesandbox.io/s/css-pseudo-order-38lld

Actual behavior:

Behavior of pseudo selector does not depend on insertion order and is not determistic.

Expected behavior:

Behavior of pseudo selector is deterministic and does not depend on insertion order.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes
Requested priority: High/Normal