Extend custom variants in plugins to vanilla CSS as well

[GermanJablo]

Currently, it is possible to modify selectors like :active, :disabled, etc., or create new ones like :hocus.

While these can be used in className, It would be great if these could also be used as native CSS selectors.

// tailwind.config.js
module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('hocus', ['&:hover', '&:focus'])
    })
  ]
}

In CSS file:

  /* This works... as intended */
  button {
    @apply hocus:bg-green-400
  }

  /* But it would be great if this worked too! */
  button:hocus { 
    @apply bg-green-400 
  }

Considering Tailwind is switching from PostCSS to Lightning CSS in v4, I think the way to achieve this would be with a custom transformation in Lightning CSS, right?

A little context about my use case:

I use react-aria-components, which does an excellent job of unifying and correcting the behavior of almost all selectors (:active, :hover, :focus-within, etc.). It does it by adding data attributes (data-pressed, data-hover, data-focus...).
Additionally, they provide a tailwindcss-react-aria-components plugin that allows you to use selectors in tailwind in the way explained here instead of having to use data attributes.
Something like this would allow you to use RAC without even thinking about the differences with actual browser selectors. You could define for example:
addVariant("focus-visible", ["[data-rac][data-focus-visible='true']", ":focus-visible:not([data-rac])"])
and if it could be used in both Tailwind and CSS, someone could migrate their styles from a simpler component library to RAC automatically.