Stitches Mix

Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones.

Usage

To import all utils from the package:

import { createStyled } from "@stitches/react";
import * as utils from "stitches-mix";

export const { styled, css } = createStyled({
  utils
});

If you prefer, you can also import specific properties or groups. For more info, click here.

Property overview

Do you have an idea for a new property? Please open an issue to suggest it.

Spacing

Note: spaceX and spaceY are utilities for controlling the space between child elements. It’s different from mx and my.

Property Group CSS Properties Reference
m Spacing marginTop, marginRight, marginBottom, marginLeft
mt Spacing marginTop
mb Spacing marginBottom
mr Spacing marginRight
ml Spacing marginLeft
mx Spacing marginLeft, marginRight
my Spacing marginTop, marginBottom
p Spacing paddingTop, paddingRight, paddingBottom, paddingLeft
pt Spacing paddingTop
pb Spacing paddingBottom
pr Spacing paddingRight
pl Spacing paddingLeft
px Spacing paddingLeft, paddingRight
py Spacing paddingTop, paddingBottom
spaceX Spacing marginRight, marginLeft
spaceY Spacing marginTop, marginBottom

Radii

Property Group CSS Properties Reference
borderTopRadius Radii borderTopLeftRadius, borderTopRightRadius
borderBottomRadius Radii borderBottomLeftRadius, borderBottomRightRadius
borderLeftRadius Radii borderBottomLeftRadius, borderTopLeftRadius
borderRightRadius Radii borderBottomRightRadius, borderTopRightRadius

Import specific properties

import { createStyled } from "@stitches/react";
import { mx, my } from "stitches-mix";

export const { styled, css } = createStyled({
  utils: {
    mx,
    my
  }
});

You can also import specific group utilities:

import { createStyled } from "@stitches/react";
import * as spacingUtils from "stitches-mix/spacing";

export const { styled, css } = createStyled({
  utils: {
    ...spacingUtils
  }
});

Custom Utils

import type * as Stitches from "@stitches/react";
import { createStyled } from "@stitches/react";
import { createUtil } from "stitches-mix";

/**
 * We still haven't found a solution to infer the types based on the provided
 * properties, so you need to provide the types to the createUtil function.
 */

const size = createUtil<Stitches.PropertyValue<"width">>(["width", "height"]);

const borderTopRadius = createUtil<Stitches.PropertyValue<"borderRadius">>([
  "borderTopLeftRadius",
  "borderTopRightRadius"
]);

// You can more control over the utility by adding a selector
export const spaceX = createUtil<Stitches.PropertyValue<"margin">>(
  ["marginLeft"],
  "& > :not([hidden])~:not([hidden])"
);

export const { styled, css } = createStyled({
  utils: {
    size,
    borderTopRadius
  }
});

License

This project is licensed under the MIT License – see the LICENSE.md file for more information.

GitHub

View Github