Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpedroschmitz/stitches-mix
Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones.
https://github.com/jpedroschmitz/stitches-mix
css css-in-js react stitches
Last synced: 21 days ago
JSON representation
Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones.
- Host: GitHub
- URL: https://github.com/jpedroschmitz/stitches-mix
- Owner: jpedroschmitz
- License: mit
- Created: 2022-07-25T18:17:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-08T01:40:31.000Z (over 1 year ago)
- Last Synced: 2024-10-04T15:21:06.796Z (about 1 month ago)
- Topics: css, css-in-js, react, stitches
- Language: TypeScript
- Homepage:
- Size: 79.1 KB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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:
```ts
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](#import-specific-properties).
## 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
```ts
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:
```ts
import { createStyled } from "@stitches/react";
import * as spacingUtils from "stitches-mix/spacing";
export const { styled, css } = createStyled({
utils: {
...spacingUtils
}
});
```
## Custom Utils
```ts
import type { PropertyValue } 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>(["width", "height"]);
const borderTopRadius = createUtil>([
"borderTopLeftRadius",
"borderTopRightRadius"
]);
// You can more control over the utility by adding a selector
export const spaceX = createUtil>(
["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](LICENSE.md) file for more information.