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,
  },
});