stitches-utils
Helpful stitches utilities like
marginY,marginXetc. 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,
},
});Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Achim Rolle |
 Bernardo Raposo |
This project follows the all-contributors specification. Contributions of any kind welcome!