{"id":13496358,"url":"https://github.com/styletron/styletron","last_synced_at":"2025-04-28T15:44:00.511Z","repository":{"id":38433883,"uuid":"55190888","full_name":"styletron/styletron","owner":"styletron","description":":zap: Toolkit for component-oriented styling","archived":false,"fork":false,"pushed_at":"2023-12-22T12:25:22.000Z","size":2603,"stargazers_count":3316,"open_issues_count":36,"forks_count":96,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-04-18T02:32:12.011Z","etag":null,"topics":["atomic-css","css","css-in-js","cssinjs","styletron"],"latest_commit_sha":null,"homepage":"https://www.styletron.org","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/styletron.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2016-04-01T00:00:06.000Z","updated_at":"2025-02-16T12:50:58.000Z","dependencies_parsed_at":"2023-02-08T07:46:18.273Z","dependency_job_id":"78db7308-df74-476e-92bd-964e4457da81","html_url":"https://github.com/styletron/styletron","commit_stats":{"total_commits":537,"total_committers":42,"mean_commits":"12.785714285714286","dds":0.6089385474860336,"last_synced_commit":"cc7e51d5c4be869c71b313155ff72e7f292e7f49"},"previous_names":["rtsao/styletron"],"tags_count":280,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styletron%2Fstyletron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styletron%2Fstyletron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styletron%2Fstyletron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styletron%2Fstyletron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styletron","download_url":"https://codeload.github.com/styletron/styletron/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250417887,"owners_count":21427322,"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":["atomic-css","css","css-in-js","cssinjs","styletron"],"created_at":"2024-07-31T19:01:46.687Z","updated_at":"2025-04-28T15:44:00.491Z","avatar_url":"https://github.com/styletron.png","language":"TypeScript","readme":"# [![Styletron logo](https://cdn.rawgit.com/styletron/styletron/logo/logo.svg \"Styletron\")](https://github.com/styletron/styletron)\n\n![test workflow](https://github.com/styletron/styletron/actions/workflows/test.yml/badge.svg)\n\nStyletron is an universal toolkit for component-oriented styling. It falls into the CSS in JS category. Styletron works great with React but can be used with other frameworks or plain JS as well.\n\n**Go to our documentation at [styletron.org](https://www.styletron.org)**!\n\n## Usage with React\n\n```js\nimport { styled } from \"styletron-react\";\n\n// Create a styled component by passing an element name and a style object\nconst RedAnchor = styled(\"a\", { color: \"red\" });\n\u003cRedAnchor href=\"/foo\"\u003eHello\u003c/RedAnchor\u003e;\n\n// Or pass a function that takes props and returns a style object\nconst Panel = styled(\"div\", props =\u003e {\n  return { backgroundColor: props.$alert ? \"orange\" : \"lightblue\" };\n});\n\u003cPanel $alert\u003eHello\u003c/Panel\u003e;\n\n// Do you prefer hooks?\nimport { useStyletron } from \"styletron-react\";\nconst [css] = useStyletron();\n\u003ca className={css({ color: \"red\" })} href=\"/foo\"\u003e\n  Hello\n\u003c/a\u003e;\n```\n\n## Getting Started\n\nCheck [the documentation](https://www.styletron.org/getting-started/) to setup Styletron with Next.js, Gatsby or plain React/JS apps.\n\n[_Looking for v3.x docs?_](https://www.styletron.org/v3/) | [_v3.x to v4.x migration guide_](docs/v3-migration-guide.md)\n\n## Design principles\n\n1.  Component-oriented\n    - Stateless, single-element styled components as base styling primitive\n    - Prop interfaces for conditional/dynamic styling\n2.  Embrace typed JavaScript\n    - Composition of styles via (typed) JavaScript objects\n    - No extra tooling (e.g. Webpack loaders, Babel plugins, etc.)\n3.  Portability and flexibility\n    - Portability of styled components across different rendering engines (e.g. atomic CSS)\n\nSee [docs/design.md](docs/design.md) for more details.\n\n## Packages\n\n- [`styletron-engine-atomic`](packages/styletron-engine-atomic)\n- [`styletron-react`](packages/styletron-react)\n- [`styletron-standard`](packages/styletron-standard)\n","funding_links":[],"categories":["Styling","TypeScript","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyletron%2Fstyletron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyletron%2Fstyletron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyletron%2Fstyletron/lists"}