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/solid
import { styled } from '@macaron-css/react';
const Button = 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 component
function App() {
return (
<Button color="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';
function App() {
return (
<div
class={style({
display: 'flex',
padding: '10px',
})}
>
<button class={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.