Feature request: A more useful compilation mode

[UltraCakeBakery]

Now that unocss can do transforms, I am wondering how easy it would be to add support for a more useful compilation mode compared to the one from windicss. One where you can also manually pick what elements get their classes and attributes combined into one.

EXAMPLE:

Before:

<!-- note the additional `compile` class at the beginning -->
<div class="compile bg-red-500 text-xl font-bold border border-gray-200 dark:hover:bg-green-500 transform scale-5">

After:

<div class="uno-2xjw9">

[antfu]

Well, originally I was going to say this is out-of-scope since it would be a lot of caveats to do it right (in Windi it's only supported in CLI but not the Vite plugin). But with your proposal of adding the compile key making it explicit, and actually becomes possible to do!

The word compile might be a bit too general, but I guess once we figure out a nice-looking one we could ever support it in string literals. Like (say ::uno:: for example)

<script setup>
const styling = '::uno:: bg-red-500 text-xl font-bold border border-gray-200` // to be `uno-2xjw9`
</script>

<template>
  <div :class="styling">
</template>

I like this idea!

[antfu]

Implemented at #950

[UltraCakeBakery]

@antfu that was implemented very quickly! Thank you for this! I have not gotten around to testing it yet. Will do in the near future.

[MehrdadKhnzd]

I didn't find a way to make it work with Attributify. Is there a way to do that?
If not, would it be possible to have the same mechanism for that as well using the attributes' prefix?