Utils

Create your own CSS properties in the utils object. Add as many utils as you need. Below are a few examples:

export const { styled, css } = createStyled({
  utils: {
    m: (config) => (value) => ({
      marginTop: value,
      marginBottom: value,
      marginLeft: value,
      marginRight: value,
    }),
    mt: (config) => (value) => ({
      marginTop: value,
    }),
    mr: (config) => (value) => ({
      marginRight: value,
    }),
    mb: (config) => (value) => ({
      marginBottom: value,
    }),
    ml: (config) => (value) => ({
      marginLeft: value,
    }),
    mx: (config) => (value) => ({
      marginLeft: value,
      marginRight: value,
    }),
    my: (config) => (value) => ({
      marginTop: value,
      marginBottom: value,
    }),
    size: (config) => (value) => ({
      width: value,
      height: value,
    }),
    linearGradient: (config) => (value) => ({
      backgroundImage: `linear-gradient(${value})`,
    }),
    br: (config) => (value) => ({
      borderRadius: value,
    }),
  },
});

The config is your configuration and the value will be the value passed in via the CSS property.

Try it out in the example below.

const Box = styled('div', {
  size: '200px',
  linearGradient: '19deg, #21D4FD 0%, #B721FF 100%',
  br: '$round',
});

render(<Box />);

Typescript

You can type the value against a specific scale to improve the developer experience.

export const { styled, css } = createStyled({
  utils: {
    mx: (config) => (value: keyof typeof theme['space'] | (string & {})) => ({
      marginLeft: value,
      marginRight: value,
    }),
  },
});