[RFC] Define value for multiple pseudo-classes at one

[noghartt]

Describe the feature request

I have a specific approach where all my buttons should follow the same aspect while with disabled attribute. In that case, we should need to disable any style interaction when hovering. I think that would be a great DX improvement if we could handle more elements being applied into the same rules, or just to pseudo-class.

The current approach

This approach is what is working now:

const styles = stylex.create({
  root: {
    opacity: {
      default: 0.5,
      ':hover': 1,
      ':focus': 1,
    },
  },
};

Proposal

What I proposing is handle all these pseudo-class into just one object, for example:

const styles = stylex.create({
  root: {
    opacity: {
      default: 0.5,
      ':hover, :focus': 1,
    },
  },
};

[necolas]

Typically you'd know when you're setting the disabled prop and can use the prop value as a condition to set the relevant disabled styles, rather than needing a CSS selector.

[nmn]

@noghartt I updated your proposal to use the correct syntax for using pseudo-classes in StyleX.

This is a known paper-cut and I'm considering possible ways to improve this, but it's currently a lower priority.

Alternative:

• ':is(:hover, :focus)'

The benefit of this approach is that it works today and we can simply optimise this use-case in the future.