{"id":13626473,"url":"https://github.com/kripod/otion","last_synced_at":"2025-05-16T07:05:37.653Z","repository":{"id":38433755,"uuid":"261072457","full_name":"kripod/otion","owner":"kripod","description":"Atomic CSS-in-JS with a featherweight runtime","archived":false,"fork":false,"pushed_at":"2023-01-08T02:02:18.000Z","size":5550,"stargazers_count":629,"open_issues_count":24,"forks_count":24,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-12T08:37:25.117Z","etag":null,"topics":["atomic-css","css-in-js","microlibrary","styling","typescript"],"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/kripod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"open_collective":"otion"}},"created_at":"2020-05-04T03:31:47.000Z","updated_at":"2025-03-19T21:05:31.000Z","dependencies_parsed_at":"2023-02-08T04:16:33.667Z","dependency_job_id":null,"html_url":"https://github.com/kripod/otion","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kripod","download_url":"https://codeload.github.com/kripod/otion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253878942,"owners_count":21977899,"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","microlibrary","styling","typescript"],"created_at":"2024-08-01T21:02:19.946Z","updated_at":"2025-05-16T07:05:36.390Z","avatar_url":"https://github.com/kripod.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n\t\u003cimg alt=\"otion\" src=\"https://raw.githubusercontent.com/kripod/otion/main/assets/logo.svg?sanitize=true\" width=\"307\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\tAtomic CSS-in-JS with a featherweight runtime\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/otion\"\u003e\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/otion\"\u003e\u003c/a\u003e\n\t\u003ca href=\"https://lgtm.com/projects/g/kripod/otion/context:javascript\"\u003e\u003cimg alt=\"Language grade: JavaScript\" src=\"https://img.shields.io/lgtm/grade/javascript/g/kripod/otion.svg?logo=lgtm\u0026logoWidth=18\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://travis-ci.com/github/kripod/otion\"\u003e\u003cimg alt=\"Travis (.com)\" src=\"https://img.shields.io/travis/com/kripod/otion\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Backstory\n\nDesign systems embrace a component-oriented mindset. Inspired by [Tailwind CSS][], utility classes provide reusable styles with no unwanted side-effects. However, they have to be generated upfront.\n\nAtomicity generalizes the former concept by instantiating style rules on demand. Serving as a solid foundation for constraint-based layouts, [atomic CSS-in-JS][] has come to fluorish at scale.\n\n[tailwind css]: https://tailwindcss.com/\n[atomic css-in-js]: https://sebastienlorber.com/atomic-css-in-js\n\n## Key features\n\n- 🎳 Support for shorthand properties\n- 🍱 Reliable pseudo selector ordering\n- 🔐 Type safety with autocompletion\n- 🦖 Auto-prefixing and fallback values\n- 📚 Embedded JSDoc reference\n- 🐾 Negligible runtime footprint\n- 💫 Works without a framework\n\n## Getting started\n\nInstall the library with a package manager of choice, e.g.:\n\n```shell\nnpm install otion\n```\n\nAdditionally, configure frameworks as shown below:\n\n- Create React App ([example](./packages/example-cra), [sandbox](https://githubbox.com/kripod/otion/tree/main/packages/example-cra))\n- Gatsby ([plugin](./packages/gatsby-plugin-otion), [example](./packages/example-gatsby), [sandbox](https://githubbox.com/kripod/otion/tree/main/packages/example-gatsby))\n- Next.js ([example](./packages/example-nextjs), [sandbox](https://githubbox.com/kripod/otion/tree/main/packages/example-nextjs))\n\n## Example\n\nThe following demo covers a wide range of use-cases.\n\nAs a core function, `css` returns a space-separated string of unique class names. Each property–value pair is only injected once to the library-managed style sheet.\n\nPlease refer to the [core package manual](./packages/otion/README.md) for further information.\n\n```jsx\nimport { css, keyframes } from \"otion\";\n\n// Animation keyframes are lazily initialized\nconst pulse = keyframes({\n  from: { opacity: 1 },\n  to: { opacity: 0 }\n});\n\n// Use of JSX is optional, as the solution is framework-agnostic\nfunction Component() {\n  return (\n    \u003c\u003e\n      \u003cp className={css({ color: \"blue\" })}\u003eI am blue\u003c/p\u003e\n      \u003cp\n        className={css({\n          color: \"blue\",\n          \":hover\": {\n            animation: `${pulse} 3s infinite alternate`\n          }\n        })}\n      \u003e\n        I am also blue, reusing the CSS class injected by my sibling\n      \u003c/p\u003e\n      \u003cp\n        className={css({\n          color: \"blue\",\n          \"@media\": {\n            \"(min-width: 768px)\": {\n              color: \"orange\"\n            }\n          }\n        })}\n      \u003e\n        I am orange if your viewport is wider than 768px\n      \u003c/p\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Is this ready for production?\n\nThe project is marked with a '0.Y.Z' version until thorough automatic tests are written for it. However, existing functionality should be safe to use.\n\nIf you decide to give otion a try, module aliasing may help migrating between CSS-in-JS libraries:\n\n```jsonc\n/* package.json */\n{\n  \"devDependencies\": {\n    \"emotion\": \"npm:otion@^X.Y.Z\" // Could also be done in reverse\n  }\n}\n```\n\nPlease bear in mind that while the APIs of otion and Emotion are similar, they're not totally interchangeable. For example, custom selectors and [conditional group rules](https://developer.mozilla.org/docs/Web/CSS/At-rule#Conditional_group_rules) have no type-safe syntax in Emotion.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/kripod\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/14854048?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKristóf Poduszló\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-kripod\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/kripod/otion/commits?author=kripod\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kripod/otion/commits?author=kripod\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-kripod\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#ideas-kripod\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#infra-kripod\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/efflam\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/149307?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eefflam\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kripod/otion/issues?q=author%3Aefflam\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-efflam\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://nitropage.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/4012401?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKatja Lutz\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kripod/otion/issues?q=author%3Akatywings\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-katywings\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/biowaffeln\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/29342337?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMark Kvetny\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-biowaffeln\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://formik.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/4060187?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJared Palmer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kripod/otion/commits?author=jaredpalmer\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/etc-tiago\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/33164463?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTiago Souza\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kripod/otion/commits?author=etc-tiago\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#platform-etc-tiago\" title=\"Packaging/porting to new platform\"\u003e📦\u003c/a\u003e \u003ca href=\"#example-etc-tiago\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"https://github.com/kripod/otion/commits?author=etc-tiago\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/eddyw\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/1407526?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEddy Wilson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-eddyw\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/kripod/otion/issues?q=author%3Aeddyw\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/namjul\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/328836?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSamuel Hobl\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kripod/otion/issues?q=author%3Anamjul\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://survivejs.com/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/166921?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJuho Vepsäläinen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kripod/otion/commits?author=bebraw\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://kde.design\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/18039004?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDaniel Emod Kovacs\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kripod/otion/issues?q=author%3Adanielkov\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## Acknowledgements\n\nThe project's name is an ode to [Emotion](https://emotion.sh/), an extensive CSS-in-JS runtime. Similar libraries had great impact on the initial development process, including but not limited to:\n\n- [Styled Components](https://styled-components.com/), with its thoroughly tested approaches\n- [Styletron](https://www.styletron.org/), for openly discussing the caveats of atomic styling\n- [glamor](https://github.com/threepointone/glamor), by its simplistic and comprehensible implementation\n\nThe logo's ocean emoji is courtesy of [Twemoji](https://twemoji.twitter.com/).\n","funding_links":["https://opencollective.com/otion"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Fotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkripod%2Fotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Fotion/lists"}