Magma 2

Magma with a zero runtime flavour

Magma Podríamos crear un Magma 2 basándonos en la API de sprinkles de vanilla-extract, que sería algo parecido a Magma 1, que se basa en la API de styled-system

🍨 Vanilla-extract

Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.

Basically, it’s “CSS Modulesin-TypeScript” but with scoped CSS Variables and heaps more.

Vanilla extract encaja a la perfección con este modelo. Es parecido a CSS-IN-JS en cuanto a que se escriben los estilos en objetos de js, que se parsean a css en build time.

Para el theming hace uso de las custom properties de css, las cuales hashea para así hacelo totalmente local y evitar el clashing.

Tiene una API, sprinkles que es esencialmente como styled-system (en lo que realmente está basado Magma 1)

Pros

• Hecho por el creador de CSSModules.
• No es almost zero runtime, etc.., es ZERO runtime.
• Typescript ready (se puede usar javascript).
• Al soportar typescript se pueden crear una DX brutal el el editor haciendo uso del autocomplete para primitivas.
• Webpack, Esbuild, Vite, Next, Gatsby ready.
• Adopción de la comunidad brutal.

Contras

• Aunque mínima, tiene abstracción sobre vanilla css
• Estilos escritos en objetos javascript