Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kripod/otion
Atomic CSS-in-JS with a featherweight runtime
https://github.com/kripod/otion
atomic-css css-in-js microlibrary styling typescript
Last synced: about 2 months ago
JSON representation
Atomic CSS-in-JS with a featherweight runtime
- Host: GitHub
- URL: https://github.com/kripod/otion
- Owner: kripod
- License: mit
- Created: 2020-05-04T03:31:47.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-08T02:02:18.000Z (over 1 year ago)
- Last Synced: 2024-07-04T15:09:07.981Z (2 months ago)
- Topics: atomic-css, css-in-js, microlibrary, styling, typescript
- Language: TypeScript
- Homepage:
- Size: 5.29 MB
- Stars: 634
- Watchers: 5
- Forks: 24
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-list - otion - in-JS with a featherweight runtime | kripod | 579 | (TypeScript)
README
Atomic CSS-in-JS with a featherweight runtime
## Backstory
Design 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.
Atomicity 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.
[tailwind css]: https://tailwindcss.com/
[atomic css-in-js]: https://sebastienlorber.com/atomic-css-in-js
## Key features
- 🎳 Support for shorthand properties
- 🍱 Reliable pseudo selector ordering
- 🔐 Type safety with autocompletion
- 🦖 Auto-prefixing and fallback values
- 📚 Embedded JSDoc reference
- 🐾 Negligible runtime footprint
- 💫 Works without a framework
## Getting started
Install the library with a package manager of choice, e.g.:
```shell
npm install otion
```
Additionally, configure frameworks as shown below:
- Create React App ([example](./packages/example-cra), [sandbox](https://githubbox.com/kripod/otion/tree/main/packages/example-cra))
- Gatsby ([plugin](./packages/gatsby-plugin-otion), [example](./packages/example-gatsby), [sandbox](https://githubbox.com/kripod/otion/tree/main/packages/example-gatsby))
- Next.js ([example](./packages/example-nextjs), [sandbox](https://githubbox.com/kripod/otion/tree/main/packages/example-nextjs))
## Example
The following demo covers a wide range of use-cases.
As 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.
Please refer to the [core package manual](./packages/otion/README.md) for further information.
```jsx
import { css, keyframes } from "otion";
// Animation keyframes are lazily initialized
const pulse = keyframes({
from: { opacity: 1 },
to: { opacity: 0 }
});
// Use of JSX is optional, as the solution is framework-agnostic
function Component() {
return (
<>
I am blue
I am also blue, reusing the CSS class injected by my sibling
I am orange if your viewport is wider than 768px
>
);
}
```
## Is this ready for production?
The 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.
If you decide to give otion a try, module aliasing may help migrating between CSS-in-JS libraries:
```jsonc
/* package.json */
{
"devDependencies": {
"emotion": "npm:otion@^X.Y.Z" // Could also be done in reverse
}
}
```
Please 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.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Kristóf Poduszló
🚧 💻 📖 💡 🤔 🚇
efflam
🐛 🤔
Katja Lutz
🐛 🤔
Mark Kvetny
🤔
Jared Palmer
📖
Tiago Souza
📖 📦 💡 💻
Eddy Wilson
🤔 🐛
Samuel Hobl
🐛
Juho Vepsäläinen
📖
Daniel Emod Kovacs
🐛
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## Acknowledgements
The 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:
- [Styled Components](https://styled-components.com/), with its thoroughly tested approaches
- [Styletron](https://www.styletron.org/), for openly discussing the caveats of atomic styling
- [glamor](https://github.com/threepointone/glamor), by its simplistic and comprehensible implementation
The logo's ocean emoji is courtesy of [Twemoji](https://twemoji.twitter.com/).