Unocss or Master CSS ?

[pierredewilde]

Master CSS is like fresh air in the Tailwind ecosystem (Tailwind CSS, Windi CSS, Unocss, etc.).

I use Unocss with component-based frameworks like Astro and Svelte.

Some issues prevent me to switch to Master CSS:

1. no pre-rendering (CSS created at build time): supported in upcoming Master CSS v2.0 with AOT support ?
2. 0kb JavaScript by default (eg Astro): configuration to disable CSS-in-JS completely ? (*)
3. no @apply support: ?

(*) of course, it implies use of static CSS classes only and not dynamic font:${size} nor (isVisible ? 'block' : 'hide')

In component-based frameworks, I use @apply in <style> instead of HTML class= as separation of concerns (SOC):

<style>
  h1 {
    @apply text-3xl font-bold mb-2;
  }
  a {
    @apply bg-green-700 text-white;
  }
</style>  

[1aron]

Master CSS is a new CSS language with a structured syntax, so we can highlight class names in markup.
In 2.0 we'll introduce four compilation modes to cover all project scales, including AOT.
In addition, we allow you to output CSS in advance and have the feature of dynamic binding, so stay tuned!
See what Master CSS has to say about SoC: https://docs.master.co/css/why-master-css#obsessed-with-separation-of-concerns
This is the official reusing style API in 2.0.

module.exports = {
    classes: {
         'title': 'font:48 font:bold mb:4',
         'link': 'bg:green-70 fg:white'
    }
}

Currently there is no plan to provide @apply, because we do not integrate with CSS preprocessor. Most of the requirements can be completed through the official API and marking class names.