Failed to override styles when selectors are grouped

[Yixian15]

Hi Griffel developers,

I ran into an issue when trying to override CSS styles with mergeStyles. After some investigation I think it might relate to selctor matching issue.

The original style is defined with grouped selectors ".active,:hover":

square: {
    width: "100px",
    height: "100px",
    ...shorthands.border("2px", "solid", "black"),
    ":active,:hover": {
      backgroundColor: "blue",
    },
  },

Then tried to override the behavior of ":hover":

 hoverOverride1: {
    ":hover": {
      backgroundColor: "red",
    },
  },

This is how the styles are used:

<div className={mergeClasses(styles.square, styles.hoverOverride1)}>
  hover me
</div>

It is expected to override the previous definition by the later one. But it doesn't work.

Then I tried other ways to override the styles. It turns out override only works when the exact same grouped selectors are used. Even one whitespace between the selectors can fail it.

For example:

  hoverOverride2: {
    ":active, :hover": { // This won't work due to one extra space between the selectors
      backgroundColor: "red",
    },
  },
  hoverOverride3: {
    ":active,:hover": { // This works because the selectors are identical to the original definition
      backgroundColor: "red",
    },
  },

You can see the demo in the sandbox