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

[layershifter]

Hey @Yixian15. Thanks for bringing this up 👍

Indeed Griffel is "picky" about selectors (or keys on an object). :hover,:active & :hover are considered as different rules and can't be deduplicated properly:

makeStyles({
  root: {
    ":hover": { color: "red" },
    ":hover,:active": { color: "blue" },
  },
});

(playground link)

---

That's not limited to this case, as it's true for any defined selector... To avoid the problem, in the case that you mentioned it should be declared like:

const sharedStyles = { color: "red" }

makeStyles({
  root: {
    ":hover": sharedStyles,
    ":active": sharedStyles
  },
});

I am not sure that anything can be done there to make it more predictable as this problem is a part of design...

We can emit a warning in dev environment and add a ESLint rule to avoid such selectors as the change in transform logic does not seem to be something easy... WDYT?

[Yixian15]

Here's the case I'm working on. We're trying override styles of fluent components in our application.

The styles are defined here in fluent: https://github.com/microsoft/fluentui/blob/fcbadc1a22fe17a3c0a96bf88746e25e7def19a8/packages/react-components/react-input/src/components/Input/useInputStyles.styles.ts#L122

There's no way to override styles of ':focus-within' without affecting the styles of ':active', right? I think this could be a problem.

[layershifter]

There's no way to override styles of ':focus-within' without affecting the styles of ':active', right? I think this could be a problem.

You are correct. There is no predictable way to override it. I created #499 to introduce a lint rule.

---

Now you can do a nasty hack to increase specificity:

const useClasses = makeStyles({
  c: {
    ':hover&': {
      color: 'blue',
    },
  },
});

// ⬇️⬇️⬇️
// .fms2va0:hover.fms2va0 { color: blue; }

https://stackblitz.com/edit/stackblitz-starters-2xtajv