Explore replacing the cx() utility with pre-defined classes

[Greenheart]

Since cx() is executed both during compile time and runtime, it adds a slight performance overhead.

One way to compile the CSS and define styles beforehand would be to use a combination of solutions:

Svelte style blocks with pre-defined classes and Post CSS @apply

Instead of writing

<p class={cx('font-bold text-sm', isRed ? 'text-red-500' : 'text-blue-500')}>text</p

we could replace the cx() helper by defining the classes at compile time.

<p class="font-bold text-sm" class:red={isRed} class:blue={!isRed}>text</p>

<style>
  .red {
    @apply text-red-500;
  }

  .blue {
    @apply text-blue-500;
  }
</style>

This would result in more code, but would remove the need for the cx utility, since all classes would be added in a nicely formatted manner, and invalid values would be filtered out.