{"id":22202053,"url":"https://github.com/syfxlin/ustyled","last_synced_at":"2026-04-29T19:32:33.328Z","repository":{"id":57164036,"uuid":"445220777","full_name":"syfxlin/ustyled","owner":"syfxlin","description":"一个 CSS-in-JS 的工具库","archived":false,"fork":false,"pushed_at":"2022-07-16T16:01:44.000Z","size":363,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-08T22:51:40.167Z","etag":null,"topics":["css-in-js","emotion","styled-components","styled-system"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/syfxlin-ustyled-5cjtg?file=/src/App.tsx","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/syfxlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-06T15:37:38.000Z","updated_at":"2023-03-17T12:50:39.000Z","dependencies_parsed_at":"2022-09-04T00:52:09.450Z","dependency_job_id":null,"html_url":"https://github.com/syfxlin/ustyled","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/syfxlin/ustyled","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syfxlin%2Fustyled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syfxlin%2Fustyled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syfxlin%2Fustyled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syfxlin%2Fustyled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syfxlin","download_url":"https://codeload.github.com/syfxlin/ustyled/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syfxlin%2Fustyled/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32440991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T18:12:22.909Z","status":"ssl_error","status_checked_at":"2026-04-29T18:11:33.322Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-in-js","emotion","styled-components","styled-system"],"created_at":"2024-12-02T16:12:11.966Z","updated_at":"2026-04-29T19:32:33.311Z","avatar_url":"https://github.com/syfxlin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ustyled\n\n## Introduction\n\nustyled（**styled**-system, **u**til） 是一个基于 CSS-in-JS 的工具库，旨在为 CSS-in-JS 添加类似 styled-system 的编写方式，同时避免使用 styled-system 导致的一些问题。\n\n## Features\n\n- 函数式主题\n- 暗色模式支持\n- 快速应用调色板\n- 按比例排版\n\n## Installation\n\n```shell\nnpm i @syfxlin/ustyled\n```\n\n**注意事项**：目前 ustyled 还处于早期测试阶段，可能会存在一些问题，请避免用于重要的项目中。\n\n## Usage\n\n见 `demo/Demo.tsx`\n\n## Tip\n\nv1 采用了较为激进的方式对样式进行预处理，因此造成了很多问题，导致在一些场景下出现无法处理的情况。\n由于不能顾及所有方面，因此采用模板字符串的方式注入主题变量 `${u.color('blue1', 'blue2')}`\n\nv2 同时改进了主题的定义方式，如下，你可以通过 `prop` 定义字段名称，通过 `animation-delay: ${u.d(1)};` 方式进行定义，\nustyled 会通过 `css` 将参数处理成字符串，并替换定义的字符，如转换后为 `animation-delay: 1s;`。\n\n```typescript\nexport const delay = style({\n  prop: [\"d\", \"delay\"],\n  css: () =\u003e (value: string | number) =\u003e {\n    if (typeof value === \"number\") {\n      return `${value}s`;\n    }\n    return value;\n  },\n});\n```\n\n## Maintainer\n\nustyled 由 [Otstar Lin](https://ixk.me/)\n和下列 [贡献者](https://github.com/syfxlin/ustyled/graphs/contributors)\n的帮助下撰写和维护。\n\n\u003e Otstar Lin - [Personal Website](https://ixk.me/) · [Blog](https://blog.ixk.me/) · [Github](https://github.com/syfxlin)\n\n## License\n\n![License](https://img.shields.io/github/license/syfxlin/ustyled.svg?style=flat-square)\n\n根据 Apache License 2.0 许可证开源。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyfxlin%2Fustyled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyfxlin%2Fustyled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyfxlin%2Fustyled/lists"}