Attributify Mode enhancement

[unbiased-dev]

Attributify Mode enhancement

Instead of the current (variant[:-]{1})*key? = "((variant:)*value)*" syntax, prefix it with $ symbol maybe?

So this

<div
  sm="bg-blue-200 hover:bg-blue-300"
  sm:hover="bg-blue-200 dark:bg-blue-300"
  sm-hover="bg-blue-200 dark:bg-blue-300"
/>

Would be written as this

<div
  $sm="bg-blue-200 hover:bg-blue-300"
  $sm:hover="bg-blue-200 dark:bg-blue-300"
  $sm-hover="bg-blue-200 dark:bg-blue-300"
/>

This is so that:

• one can distinguish native attributes from windicss attributes
• avoid accidental name clashing with native attributes (probably not an actual issue)
• and additionally, be able to parse those out of the final build.

<!-- look in dev -->
<div
  $sm="bg-blue-200 hover:bg-blue-300"
  $sm:hover="bg-blue-200 dark:bg-blue-300"
  $sm-hover="bg-blue-200 dark:bg-blue-300"
/>

<!-- look in prod -->
<div class="sm:(bg-blue-200 hover:bg-blue-300) sm:hover:(bg-blue-200 dark:bg-blue-300 bg-blue-200 dark:bg-blue-300)" />

<!-- look in prod including compilation mode on -->
<style>
@media (min-width: 640px) {
  .sm\:bg-blue-200 {
    --tw-bg-opacity: 1;
    background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
  }
  .sm\:hover\:bg-blue-300:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(147, 197, 253, var(--tw-bg-opacity));
  }
  .sm\:hover\:bg-blue-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
  }
  .dark .sm\:hover\:dark\:bg-blue-300:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(147, 197, 253, var(--tw-bg-opacity));
  }
}
</style>
<div class="windi-123456" />

What do you think?