[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.

[tounsoo]

Hello @nmn I recently got some time to get back into trying out StyleX and I have someone similar use case that I was not able to find documentation on. How would one do:

backgroundColor: {
	default: `light-dark(${tokens.colorGray100}, ${tokens.colorGray700})`,
	":hover:not([aria-disabled='true'])": `light-dark(${tokens.colorGray200}, ${tokens.colorGray600})`,
	":active:not([aria-disabled='true'])": `light-dark(${tokens.colorGray300}, ${tokens.colorGray500})`,
},

With the code above, hover works but not active.

UPDATE: I take it back, I think the reason for things not working isn't stylex issue but from the Vite-plugin I'm using.
UPDATE2: I take back that it might be Vite-plugin issue, turns out its just me 🤣

The issue I had was specificity issue and I resolved it by this:

backgroundColor: {
	default: `light-dark(${tokens.colorGray100}, ${tokens.colorGray700})`,
	":not([aria-disabled="true"])": {
		":hover:not(:active)": { // without :not(:active), it had active color didn't have higher specificity
			"@media (hover: hover)": `light-dark(${tokens.colorGray200}, ${tokens.colorGray600})`,
		},
		":active": `light-dark(${tokens.colorGray300}, ${tokens.colorGray500})`,
	},
},

[nmn]

@tounsoo complex selectors are not supported in StyleX and will error in the near future.

[tounsoo]

@nmn is there a recommendation on how to handle complex selectors like the one I have above?

[nmn]

@tounsoo In almost all cases, your React (or other UI framework) component are responsible for setting the attributes such as aria-disabled. You should define two separate style objects for aria-disabled and not, and then apply one of the two styles on the element using "conditional styles"

As for the :hover:not(:active) case, you can write the styles like so:

backgroundColor: {
  default: `light-dark(${tokens.colorGray100}, ${tokens.colorGray700})`,
  "@media (hover: hover)": {
    default: null,
    ":hover": `light-dark(${tokens.colorGray200}, ${tokens.colorGray600})`,
    ":active": `light-dark(${tokens.colorGray300}, ${tokens.colorGray500})`,
  },
  ":active": `light-dark(${tokens.colorGray300}, ${tokens.colorGray500})`,
},

We're currently working further improvements to such scenarios.

[nmn]

We do not plan to add any new syntax for defining values for multiple pseudo classes at once.

We might add more syntax in the future, but we don't want to add any new syntax purely for convenience while we polish all the functional rough edges of StyleX.