Macaron

Typesafe CSS-in-JS with zero runtime, colocation, maximum safety and produc...

CSS in JSReactSolid
macaron-css/macaronmacaron.js.org/@macaron-css/core

README


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


  1. ```jsx
  2. // or import it from @macaron-css/solid
  3. import { styled } from '@macaron-css/react';

  5. const Button = styled('button', {
  6.   base: {
  7.     borderRadius: 6,
  8.   },
  9.   variants: {
  10.     color: {
  11.       neutral: { background: 'whitesmoke' },
  12.       brand: { background: 'blueviolet' },
  13.       accent: { background: 'slateblue' },
  14.     },
  15.     size: {
  16.       small: { padding: 12 },
  17.       medium: { padding: 16 },
  18.       large: { padding: 24 },
  19.     },
  20.     rounded: {
  21.       true: { borderRadius: 999 },
  22.     },
  23.   },
  24.   compoundVariants: [
  25.     {
  26.       variants: {
  27.         color: 'neutral',
  28.         size: 'large',
  29.       },
  30.       style: {
  31.         background: 'ghostwhite',
  32.       },
  33.     },
  34.   ],

  36.   defaultVariants: {
  37.     color: 'accent',
  38.     size: 'medium',
  39.   },
  40. });

  42. // Use it like a regular solidjs/react component
  43. function App() {
  44.   return (
  45.     <Button color="accent" size="small" rounded>
  46.       Click me!
  47.     </Button>
  48.   );
  49. }
  50. ```

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:-

  1. ```js
  2. import { style } from '@macaron-css/core';

  4. function App() {
  5.   return (
  6.     <div
  7.       class={style({
  8.         display: 'flex',
  9.         padding: '10px',
  10.       })}
  11.     >
  12.       <button class={style({ color: 'red' })}>Click me</button>
  13.     </div>
  14.   );
  15. }
  16. ```

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.