Use UnoCSS directive transformers

[emi420]

Instead of adding classes to the element:

<h1 class="hot-text-2xl hot-color-primary hot-font-sans hot-font-bold hot-pl-3 hot-m-0">

Use @apply (or --at-apply)

.hot-header-h1 {
  @apply: hot-text-2xl hot-color-primary hot-font-sans hot-font-bold hot-pl-3 hot-m-0;
}

And then the single class:

<h1 class="hot-header-h1">

[spwoodcock]

Looks better!

But does this sort of approach replace the proposed Class Variance Authority setup?

[emi420]

Class Variance Authority is partially implemented, but I think we could use both things together, as one not replace the other.

Taking Header as an example:

const headerVariants = cva(
  // Defaults to include in all variants
  `
    flex flex-row bg-[var(--hot-white)] items-center justify-between
    sm:justify-around p-2 border-b-2 border-b-gray-100 border-b-solid
  `,
  {
    variants: {
      size: {
        small: "h-8",
        large: "h-14",
      },
    },
  }
);

We could have a base class and then the variants:

const headerVariants = cva(
  // Defaults to include in all variants
  `hot-header-container`,
  {
    variants: {
      size: {
        small: "hot-h-8",
        large: "hot-h-14",
      },
    },
  }
);

Then, there are other places when styling doesn't have variance, like the example that I've provided. But, if we need variance there, we can also implement the same strategy, having a base class and the variants.

[spwoodcock]

Looks great 🎉