[V4] matchVariant (from plugin) equivalent in CSS (aka dynamic variant)

[Kiyozz]

The documentation is missing a section about the matchVariant from plugin.

Is it possible to use an equivalent of matchVariant function from plugin in the new CSS syntax?

@variant is not dynamic nor @custom-variant (or missing documentation about it).

I'm building something to support slot-[loader]:text-red-400 for example. As a bonus, is it possible to remove the brackets and tailwind to understand to use loader here like slot-loader:text-red-400? V4 now supports to drop those brackets for grid-cols-xxx or w-xxx for example.

// slot-[slot] -> [data-slot=$slot]
matchVariant('slot', (slot) => {
  return `[data-slot="${slot}"]`
})
// slot-[slot] -> &[data-slot=$slot]
matchVariant('self-slot', (slot) => {
  return `&[data-slot="${slot}"]`
})

Thanks for your help.

[adamwathan]

No CSS API for this yet I'm afraid, still trying to crack the syntax. Any suggestions?

[Kiyozz]

It will be cool if we could build something like

@variant slot-* ([data-slot="@value"]) /* or whatever the name, or maybe @slot */

@slot already exists in @utilities if I remember correctly.

So I could use slot-loader:text-red-400 for example