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 |
Size
| Property | Group | CSS Properties Reference |
|---|---|---|
| w | Size | width |
| h | Size | height |
| minW | Size | minWidth |
| minH | Size | minHeight |
| size | Size | width, height |
| minSize | Size | minWidth, minHeight |
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";
/**
* I 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.
0 Nov 9, 2022
2 Mar 29, 2022
2 Jul 22, 2022
7 Jul 20, 2022
91 Jan 6, 2023
1 Dec 19, 2021
5 Sep 7, 2022
11.1k Dec 28, 2022
25 Dec 11, 2022