stitches-mix

KO | EN

gitlite — search

#javascript #python #llm #golang #android #rust #linux #nodejs #java #windows #kubernetes #security #ios #openai

(★ 15)

Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones.

stitches-mix 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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<PropertyValue<"width">>(["width", "height"]);

const borderTopRadius = createUtil<PropertyValue<"borderRadius">>([
  "borderTopLeftRadius",
  "borderTopRightRadius"
]);

// You can more control over the utility by adding a selector
export const spaceX = createUtil<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](LICENSE.md) file for more information.

stitches-mix

stitches-mix 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

stitches-mix

stitches-mix 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README