[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

[scriptogre]

This would be awesome to have!

[nilennoct]

What about this? Just like Functional utilities:

@theme {
    --lang-en: en;
    --lang-ar: ar;
}

@custom-variant lang-* (&:lang(--value(--lang-*, [*])));

[Kiyozz]

What about this? Just like Functional utilities:

@theme {

    --lang-en: en;

    --lang-ar: ar;

}



@custom-variant lang-* (&:lang(--value(--lang-*, [*])));

The problem here, is that your values are explicit, you need to specify a list of accepted values

[nilennoct]

The --lang-* in @theme is optional. It's possible to use lang-[fr]:bg-white like aria-[modal=true]:bg-white if not specified.

[Kiyozz]

It would be cool to omit the brackets.