Installation

Solid

React

# npm
npm install @macaron-css/core @macaron-css/solid
# yarn
yarn add @macaron-css/core @macaron-css/solid

Setting up bundler

Macaron currently supports vite and esbuild. Install and setup the plugin for your bundler :-

vite

esbuild

Installation

npm install @macaron-css/vite

vite.config.js

import { macaronVitePlugin } from '@macaron-css/vite';
import { defineConfig } from 'vite';
export default defineConfig({
  plugins: [
    macaronVitePlugin(),
    // other plugins
  ],
});

In the vite.config.js, add the macaron plugin before other plugins

Usage

Create a styled component

Import styled from either @macaron-css/solid or @macaron-css/react and create a styled component.

button.tsx

import { styled } from '@macaron-css/solid';
const Button = styled('button', {});

Add styles

Add base styles that are applied to the component by default. This can include hover states, media queries, nested selectors etc. All styling APIs in macaron take style objects as inputs. This makes the styles type-safe and provides autocomplete via csstype.

button.tsx

import { styled } from '@macaron-css/solid';
const Button = styled('button', {
  base: {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
    fontSize: '13px',
    padding: '10px 15px',
    ':hover': {
      backgroundColor: 'lightgray',
    },
  },
});

Add variants

You can add variants by using the variants key. There is no limit to how many variants you can add.

A variant accepts the same style object as the base styles.

button.tsx

import { styled } from '@macaron-css/solid';
const Button = styled('button', {
  base: {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
    fontSize: '13px',
    padding: '10px 15px',
    ':hover': {
      backgroundColor: 'lightgray',
    },
  },
  variants: {
    color: {
      violet: {
        backgroundColor: 'blueviolet',
        color: 'white',
        ':hover': {
          backgroundColor: 'darkviolet',
        },
      },
      gray: {
        backgroundColor: 'gainsboro',
        ':hover': {
          backgroundColor: 'lightgray',
        },
      },
    },
  },
});

Default variants

You can use the defaultVariants feature to set a variant by default. This variants can be overriden at the time of usage.

button.tsx

import { styled } from '@macaron-css/solid';
const Button = styled('button', {
  base: {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
    fontSize: '13px',
    padding: '10px 15px',
    ':hover': {
      backgroundColor: 'lightgray',
    },
  },
  variants: {
    color: {
      violet: {
        backgroundColor: 'blueviolet',
        color: 'white',
        ':hover': {
          backgroundColor: 'darkviolet',
        },
      },
      gray: {
        backgroundColor: 'gainsboro',
        ':hover': {
          backgroundColor: 'lightgray',
        },
      },
    },
  },
  defaultVariants: {
    color: 'violet',
  },
});

Rendering the component

This component can now be used just like any regular Solid/React component with type-safe props that are derived from your variants. Unlike vanilla-extract that restricts style declarations to .css.ts, macaron allows you to declare styles in the same file providing true colocation.

button.tsx

import { styled } from '@macaron-css/solid';
const Button = styled('button', {
  base: {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
    fontSize: '13px',
    padding: '10px 15px',
    ':hover': {
      backgroundColor: 'lightgray',
    },
  },
  variants: {
    color: {
      violet: {
        backgroundColor: 'blueviolet',
        color: 'white',
        ':hover': {
          backgroundColor: 'darkviolet',
        },
      },
      gray: {
        backgroundColor: 'gainsboro',
        ':hover': {
          backgroundColor: 'lightgray',
        },
      },
    },
  },
  defaultVariants: {
    color: 'violet',
  },
});
() => <Button color="gray">Click me!</Button>;

Create a styled component

Import styled from either @macaron-css/solid or @macaron-css/react and create a styled component.

Add styles

Add variants

You can add variants by using the variants key. There is no limit to how many variants you can add.

A variant accepts the same style object as the base styles.

Default variants

You can use the defaultVariants feature to set a variant by default. This variants can be overriden at the time of usage.

Rendering the component

button.tsx

import { styled } from '@macaron-css/solid';
const Button = styled('button', {
  base: {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
    fontSize: '13px',
    padding: '10px 15px',
    ':hover': {
      backgroundColor: 'lightgray',
    },
  },
  variants: {
    color: {
      violet: {
        backgroundColor: 'blueviolet',
        color: 'white',
        ':hover': {
          backgroundColor: 'darkviolet',
        },
      },
      gray: {
        backgroundColor: 'gainsboro',
        ':hover': {
          backgroundColor: 'lightgray',
        },
      },
    },
  },
});

Available functions

Other than styled, macaron provides the following functions:-

import { styled } from '@macaron-css/solid';
import {
  style,
  recipe,
  createTheme,
  createThemeContract,
  styleVariants,
  createVar,
  fallbackVar,
  assignVars,
  keyframs,
  fontFace,
  createContainer,
} from '@macaron-css/core';