{"id":15671963,"url":"https://github.com/jpedroschmitz/stitches-mix","last_synced_at":"2025-05-06T20:28:52.085Z","repository":{"id":49741831,"uuid":"517774911","full_name":"jpedroschmitz/stitches-mix","owner":"jpedroschmitz","description":"Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones.","archived":false,"fork":false,"pushed_at":"2023-03-08T01:40:31.000Z","size":81,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-25T05:47:54.892Z","etag":null,"topics":["css","css-in-js","react","stitches"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jpedroschmitz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-25T18:17:49.000Z","updated_at":"2023-05-18T20:48:57.000Z","dependencies_parsed_at":"2024-10-23T10:36:49.824Z","dependency_job_id":"018e135f-e3d6-48bf-b47a-33a7407f07f6","html_url":"https://github.com/jpedroschmitz/stitches-mix","commit_stats":{"total_commits":20,"total_committers":3,"mean_commits":6.666666666666667,"dds":0.35,"last_synced_commit":"05faabd16013ee8c888a9b83a7e8478715177b90"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpedroschmitz%2Fstitches-mix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpedroschmitz%2Fstitches-mix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpedroschmitz%2Fstitches-mix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpedroschmitz%2Fstitches-mix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpedroschmitz","download_url":"https://codeload.github.com/jpedroschmitz/stitches-mix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252763690,"owners_count":21800559,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-in-js","react","stitches"],"created_at":"2024-10-03T15:21:16.156Z","updated_at":"2025-05-06T20:28:52.035Z","avatar_url":"https://github.com/jpedroschmitz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stitches Mix\n\nSet of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones.\n\n## Usage\n\nTo import all utils from the package:\n\n```ts\nimport { createStyled } from \"@stitches/react\";\nimport * as utils from \"stitches-mix\";\n\nexport const { styled, css } = createStyled({\n  utils\n});\n```\n\nIf you prefer, you can also import specific properties or groups. For more info, [click here](#import-specific-properties).\n\n## Property overview\n\nDo you have an idea for a new property? Please open an issue to suggest it.\n\n### Spacing\n\nNote: `spaceX` and `spaceY` are utilities for controlling the space between child elements. It's different from `mx` and `my`.\n\n| Property | Group   | CSS Properties Reference                             |\n| -------- | ------- | ---------------------------------------------------- |\n| m        | Spacing | marginTop, marginRight, marginBottom, marginLeft     |\n| mt       | Spacing | marginTop                                            |\n| mb       | Spacing | marginBottom                                         |\n| mr       | Spacing | marginRight                                          |\n| ml       | Spacing | marginLeft                                           |\n| mx       | Spacing | marginLeft, marginRight                              |\n| my       | Spacing | marginTop, marginBottom                              |\n| p        | Spacing | paddingTop, paddingRight, paddingBottom, paddingLeft |\n| pt       | Spacing | paddingTop                                           |\n| pb       | Spacing | paddingBottom                                        |\n| pr       | Spacing | paddingRight                                         |\n| pl       | Spacing | paddingLeft                                          |\n| px       | Spacing | paddingLeft, paddingRight                            |\n| py       | Spacing | paddingTop, paddingBottom                            |\n| spaceX   | Spacing | marginRight, marginLeft                              |\n| spaceY   | Spacing | marginTop, marginBottom                              |\n\n### Radii\n\n| Property           | Group | CSS Properties Reference                        |\n| ------------------ | ----- | ----------------------------------------------- |\n| borderTopRadius    | Radii | borderTopLeftRadius, borderTopRightRadius       |\n| borderBottomRadius | Radii | borderBottomLeftRadius, borderBottomRightRadius |\n| borderLeftRadius   | Radii | borderBottomLeftRadius, borderTopLeftRadius     |\n| borderRightRadius  | Radii | borderBottomRightRadius, borderTopRightRadius   |\n\n### Size\n\n| Property | Group | CSS Properties Reference |\n| -------- | ----- | ------------------------ |\n| w        | Size  | width                    |\n| h        | Size  | height                   |\n| minW     | Size  | minWidth                 |\n| minH     | Size  | minHeight                |\n| size     | Size  | width, height            |\n| minSize  | Size  | minWidth, minHeight      |\n\n## Import specific properties\n\n```ts\nimport { createStyled } from \"@stitches/react\";\nimport { mx, my } from \"stitches-mix\";\n\nexport const { styled, css } = createStyled({\n  utils: {\n    mx,\n    my\n  }\n});\n```\n\nYou can also import specific group utilities:\n\n```ts\nimport { createStyled } from \"@stitches/react\";\nimport * as spacingUtils from \"stitches-mix/spacing\";\n\nexport const { styled, css } = createStyled({\n  utils: {\n    ...spacingUtils\n  }\n});\n```\n\n## Custom Utils\n\n```ts\nimport type { PropertyValue } from \"@stitches/react\";\nimport { createStyled } from \"@stitches/react\";\nimport { createUtil } from \"stitches-mix\";\n\n/**\n * I still haven't found a solution to infer the types based on the provided\n * properties, so you need to provide the types to the createUtil function.\n */\n\nconst size = createUtil\u003cPropertyValue\u003c\"width\"\u003e\u003e([\"width\", \"height\"]);\n\nconst borderTopRadius = createUtil\u003cPropertyValue\u003c\"borderRadius\"\u003e\u003e([\n  \"borderTopLeftRadius\",\n  \"borderTopRightRadius\"\n]);\n\n// You can more control over the utility by adding a selector\nexport const spaceX = createUtil\u003cPropertyValue\u003c\"margin\"\u003e\u003e(\n  [\"marginLeft\"],\n  \"\u0026 \u003e :not([hidden])~:not([hidden])\"\n);\n\nexport const { styled, css } = createStyled({\n  utils: {\n    size,\n    borderTopRadius\n  }\n});\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpedroschmitz%2Fstitches-mix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpedroschmitz%2Fstitches-mix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpedroschmitz%2Fstitches-mix/lists"}