CSS-in-JS with zero runtime, type safety and colocation

Features

• Zero runtime bundles with build time style extraction.
• Colocation of styles and components.
• First class Typescript support.
• Supports both styled-components API and vanilla styling API.
• Stitches-like variants API.
• Out of box support for React, Solid and Qwik.
• Integrations for esbuild and Vite.

Documentation

For full documentation, visit https://macaron.js.org

Example

Styled API

// or import it from @macaron-css/solidimport{styled}from'@macaron-css/react';constButton=styled('button',{base: {borderRadius: 6,},variants: {color: {neutral: {background: 'whitesmoke'},brand: {background: 'blueviolet'},accent: {background: 'slateblue'},},size: {small: {padding: 12},medium: {padding: 16},large: {padding: 24},},rounded: {true: {borderRadius: 999},},},compoundVariants: [{variants: {color: 'neutral',size: 'large',},style: {background: 'ghostwhite',},},],defaultVariants: {color: 'accent',size: 'medium',},});// Use it like a regular solidjs/react componentfunctionApp(){return(<Buttoncolor="accent"size="small"rounded>
Click me!
</Button>);}

Styling API

The styling API is the same api is vanilla-extract, but allows styles to be defined in the same file, improving the DX.

Check out vanilla-extract docs for the API reference.

These functions can also be called directly inside expressions to provide a css prop-like API with zero-runtime cost:-

import{style}from'@macaron-css/core';functionApp(){return(<divclass={style({display: 'flex',padding: '10px',})}><buttonclass={style({color: 'red'})}>Click me</button></div>);}

Playground

You can try about these above examples at https://macaron.js.org/playground and see how macaron figures out which expressions have to be extracted and what your code would look like after being transpiled

How it works

https://macaron.js.org/docs/working/

Acknowledgements

• Vanilla Extract Thanks to the vanilla-extract team for their work on VE, which macaron uses for evaluating files.

• Dax Raad Thanks to Dax for helping me with this and thoroughly testing it outß, helping me find numerous bugs and improving macaron.