{"id":16897799,"url":"https://github.com/behnammodi/atyled","last_synced_at":"2025-03-20T11:20:44.849Z","repository":{"id":86778662,"uuid":"605747899","full_name":"behnammodi/atyled","owner":"behnammodi","description":"atyled is a combination of 2 ideas (atomic css and styled-components)","archived":false,"fork":false,"pushed_at":"2023-04-10T05:54:05.000Z","size":336,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-29T13:15:12.341Z","etag":null,"topics":["atomic-css","css-in-js","styled-components"],"latest_commit_sha":null,"homepage":"http://npmjs.com/package/atyled","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/behnammodi.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,"governance":null}},"created_at":"2023-02-23T20:19:31.000Z","updated_at":"2023-04-10T05:43:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"f0d13ff6-d3ac-40d8-8904-b7826e0991ce","html_url":"https://github.com/behnammodi/atyled","commit_stats":{"total_commits":107,"total_committers":1,"mean_commits":107.0,"dds":0.0,"last_synced_commit":"2cab8a7f219f249b28d4b481386d301f7290566f"},"previous_names":["atyled/atyled"],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Fatyled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Fatyled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Fatyled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Fatyled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/behnammodi","download_url":"https://codeload.github.com/behnammodi/atyled/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244135850,"owners_count":20403798,"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-in-js","styled-components"],"created_at":"2024-10-13T17:39:52.452Z","updated_at":"2025-03-20T11:20:44.827Z","avatar_url":"https://github.com/behnammodi.png","language":"TypeScript","readme":"![atyled](https://user-images.githubusercontent.com/1549069/221021089-c41b03e0-ef6f-4835-bc10-669d44d19bb3.png)\n\n## inspired by atomic css + styled-components\n\n### This library inspired by atomic css and styled-components, plus:\n\n- It generate atomic classes\n- Final stylesheet is very optimized and small\n- It's tiny and less than 2KB\n- SSR support\n- Faster than `styled-components`\n- No overwrite rules\n\n## Example\n\n[Edit on Codesandbox](https://codesandbox.io/s/atyled-readme-sample-79rco6)\n\n```js\nimport atyled from 'atyled';\n\nconst Button = atyled.button`\n  --background: transparent;\n  --color: #FF0000;\n  background: var(--background);\n  color: var(--color);\n\n  \u0026:hover {\n    color: orange;\n  }\n\n  \u0026::before {\n    content: ' ★ ';\n  }\n`;\n\nconst PrimaryButton = atyled(Button)`\n  --background: #FF0000;\n  --color: white;\n\n  \u0026::before {\n    content: ' ☀︎ ';\n  }\n`;\n\nconst Container = atyled.div`\n  text-align: center;\n`;\n\nfunction App() {\n  return (\n    \u003cContainer\u003e\n      \u003cButton\u003eNormal Button\u003c/Button\u003e\n      \u003cPrimaryButton\u003ePrimary Button\u003c/PrimaryButton\u003e\n    \u003c/Container\u003e\n  );\n}\n```\n\n## Result\n\nHTML:\n\n```html\n\u003cdiv class=\"p0v0\"\u003e\n  \u003cbutton class=\"p1v1 p2v2 p3v3 p4v4 p5v5 p6v6\"\u003eNormal Button\u003c/button\u003e\n  \u003cbutton class=\"p3v3 p4v4 p1v2 p2v7 p5v5 p6v8\"\u003ePrimary Button\u003c/button\u003e\n\u003c/div\u003e\n```\n\nStyleSheet:\n\n```css\n.p0v0 { text-align: center; }\n.p1v1 { --background: transparent; }\n.p2v2 { --color: #FF0000; }\n.p3v3 { background: var(--background); }\n.p4v4 { color: var(--color); }\n.p5v5:hover { color: orange; }\n.p6v6::before { content: \" ★ \"; }\n.p1v2 { --background: #FF0000; }\n.p2v7 { --color: white; }\n.p6v8::before { content: \" ☀︎ \"; }\n```\n\n## SSR (Server Side Rendering)\n\n```jsx\nimport { createStyleCollector } from 'atyled';\n\nconst { jsx, getStyleSheet, getStyleTags } = createStyleCollector(\u003cApp /\u003e);\nconst html = React.renderToString(jsx);\n\ngetStyleSheet() // return all style rules\n// or\ngetStyleTags()  // return all style rules + tag \u003cstyle\u003e...\u003c/style\u003e\n```\n\n## Examples\n\n[atyled](https://codesandbox.io/s/atyled-example-1-vxhd58)\n\n[atyled + nodejs](https://codesandbox.io/p/sandbox/cold-rain-i0b7q4?file=%2FREADME.md)\n\n[atyled + express](https://codesandbox.io/p/sandbox/gracious-lucy-51542e?file=%2FREADME.md)\n\n[atyled + nextjs](https://codesandbox.io/p/sandbox/fast-breeze-4bxfz1?file=%2FREADME.md)\n\n[atyled + remix](https://codesandbox.io/p/sandbox/atyled-gxp00f?file=%2FREADME.md)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbehnammodi%2Fatyled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbehnammodi%2Fatyled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbehnammodi%2Fatyled/lists"}