macaron — CSS-in-JS with zero-runtime

Typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity. Macaron is a new compile time CSS-in-JS library with type safety.

Install macaron

$npm install @macaron-css/core

View installation docs

Documentation Playground

const Button = styled('button', {
  base: {
    borderRadius: 6,
  },
  variants: {
    color: {
      neutral: { background: 'whitesmoke' },
      accent: { background: 'slateblue' },
    },
    rounded: {
      true: { borderRadius: 999 },
    },
  },
  compoundVariants: [
    {
      variants: {
        color: 'neutral',
        rounded: true,
      },
      style: { background: 'ghostwhite' },
    },
  ],
  defaultVariants: {
    color: 'accent',
  },
});

<Button color="neutral" rounded>
  Click me
</Button>;