[v4] How to use --value with @utility and wildcard *

[sjahan]

I try to upgrade from v3 to v4 and we did generate a lot of utilities using plugins and matchUtilities with v3.

Let's imagine that I had an utility class which would work like that: .custom-background-red would @apply bg-red-500;. Of course, i want to do that for all of the colors defined in my theme.

The question is: how to write that with @utility and *
I have tried many attempts like the following:

@utility custom-background-* {
    background-color: --value(--color-*-500);
}

but nothing gave me what I want to achieve and there is not much documentation about --value currently.

NB: If this is not the proper approach for this, please let me know, it is completely possible that I go the wrong way.

Thank you!

EDIT:

I found out that:

@utility custom-background-* {
    background-color: --value(--color-\*);
}

is working but i have to pass the full name of the color. It seems that if there is something after the * in value then it does not work. I want to be able to pass a color scheme name and the @utility deals with the steps.

[mdonstad]

Not sure if this is best solution, or if it helps you at all.

I ended up creating a unique css var for the *-500 colors, then I could just reference in the @Utility.
So I set something like this in @theme:

--color-main-bg-primary: var(--bg-primary-500);

Then my sample Utility definition:
@utility custom-background-* { background-color: --value(--color-main-bg-*); }