stitches-utils

Helpful stitches utilities like marginY, marginX etc. combined in one package

Installation:

yarn add stitches-utils

or

nom install stitches-utils

Usage:

Import all utils

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

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

Import specific utils

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

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

Utils overview:

| Utility | Properties | | ------------ | ---------------------------------------------------- | | m | marginTop, marginRight, marginBottom, marginLeft | | mt | marginTop | | mr | marginRight | | mb | marginBottom | | ml | marginLeft | | mx, marginX | marginLeft, marginRight | | my, marginY | marginTop, marginBottom | | p | paddingTop, paddingRight, paddingBottom, paddingLeft | | pt | paddingTop | | pr | paddingRight | | pb | paddingBottom | | pl | paddingLeft | | px, paddingX | paddingLeft, paddingRight | | py, paddingY | paddingTop, paddingBottom | | br | borderRadius | | btlr | borderTopLeftRadius | | btrr | borderTopRightRadius | | bblr | borderBottomLeftRadius | | bbrr | borderBottomRightRadius | | w | width | | minW | minWidht | | maxW | maxWidth | | h | height | | minH | minHeight | | maxH | maxHeight | | boxSize | width, height |

Custom utils:

It's also possible to build custom utils by using the composeUtil function.

import { createStyled } from "@stitches/react";
import { composeUtil } from "stitches-utils";

const size = composeUtil("width", "height");

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