Automatically apply a variant to all utilities used in certain files

[RebeccaStevens]

Clear and concise description of the problem

I'd like to be able to transform the following

<button class="bg-red p-4 b-1 b-solid b-blue">Foo</button>

into

<button class="bar:bg-red bar:p-4 bar:b-1 bar:b-solid bar:b-blue">Foo</button>

by specifying that the bar variant should be applied to all utilities in a certain collection of files (e.g. all files in the components directory).

This will allow for doing things such as changing the layer all these utilities are generated on; helping to prevent CSS specificity issues.

Suggested solution

I believe this can be done with a transformer - though I'm entirely sure.

Alternative

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README.md of using the package.
• Already used the Interactive Docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[Simon-He95]

I think you can completely use the unocss parser and then use your own plug-in to handle it.