Styling

All styling APIs in macaron take style objects as inputs. These makes the styles type-safe and provides autocomplete via csstype. Below are some examples.

Component-less styles

import { style } from '@macaron-css/core';
const button = style({
  backgroundColor: 'gainsboro',
  borderRadius: '9999px',
  fontSize: '13px',
  border: '0',
});
() => <button class={button}>Button</button>;

Global styles

import { globalStyle } from '@macaron-css/core';
globalStyle('*', {
  margin: 0,
  padding: 0,
});

Base styles

import { styled } from '@macaron-css/solid';
const Button = styled('button', {
  base: {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
    fontSize: '13px',
    border: '0',
  },
});
() => <Button>Button</Button>;

Simple Psuedo selectors

Selectors that don't take any parameters can be used at top level

const Button = styled('button', {
  base: {
    // base styles
    ':hover': {
      backgroundColor: 'lightgray',
    },
  },
});
() => <Button>Button</Button>;

const Button = styled('button', {
  base: {
    // base styles
    '::before': {
      content: `''`,
      display: 'block',
      backgroundImage: 'linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb)',
      position: 'absolute',
      top: '-3px',
      left: '-3px',
      width: 'calc(100% + 6px)',
      height: 'calc(100% + 6px)',
      borderRadius: 'inherit',
      zIndex: -1,
    },
  },
});
() => <Button>Button</Button>;

Complex selectors

More complex selectors can be written inside selectors

const Button = styled('button', {
  base: {
    // base styles
    selectors: {
      '&[data-custom-attribute]': {
        boxShadow: '0 0 0 3px royalblue',
      },
    },
  },
});
() => <Button data-custom-attribute>Button</Button>;

Target a macaron component

macaron components implement .toString() which returns their base styles' classname. This can be used to target a macaron component.

const Button = styled('button', {
  base: {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
    fontSize: '13px',
    border: '0',
  },
});
const Icon = styled('svg', {
  base: {
    // base styles
    selectors: {
      [`${Button} &`]: {
        marginLeft: '5px',
      },
    },
  },
});
() => (
  <Button>
    Button
    <Icon>...</Icon>
  </Button>
);

Target variants of macaron component

macaron components also implement a selector method that can be used to get the css selector of the variants applied.

const Icon = styled('svg', {
  base: {
    display: 'inline-block',
    marginLeft: '5px',
  },
  variants: {
    size: {
      small: {
        width: '12px',
      },
      regular: {
        width: '16px',
      },
    },
  },
  defaultVariants: {
    size: 'regular',
  },
});
const Button = styled('button', {
  base: {
    // base styles
    selectors: {
      [`${Icon.selector({ size: 'small' })} &`]: {
        marginLeft: '5px',
      },
    },
  },
});
() => <Button color="violet">Button</Button>;

Generating styles

There can be cases where you want to generate styles based on some theme config, or programmatically. Directly writing the code to transform the config into styles doesn't work since macaron's compiler only extracts the functions that are exported from macaron, not the closure surrounding it. To make it work, you can use the macaron$ function. It evaluates the block passed to it at compile time and inlines the value returned in the bundle.

import { macaron$ } from '@macaron-css/core';
const colors = [...];
const styles = macaron$(() => {
  return colors.map(color => style({ backgroundColor: color }))
});