yuttasakcom/otion

Atomic CSS-in-JS with a featherweight runtime

Atomic CSS-in-JS with a featherweight runtime

Backstory

Design systems embrace a component-oriented mindset. Popularized 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.

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

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.

import { css, keyframes } from "otion";

// Animation keyframes are lazily initialized
const pulse = keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 }
});

// Use of JSX is optional, as the solution is framework-agnostic
function Component() {
  return (
    <>
      <p className={css({ color: "blue" })}>I am blue</p>
      <p
        className={css({
          color: "blue",
          ":hover": {
            animation: `${pulse} 3s infinite alternate`
          }
        })}
      >
        I am also blue, reusing the CSS class injected by my sibling
      </p>
    </>
  );
}

Documentation

Please refer to the otion package manual for further information. Additionally, each integration below has its own setup guide.

Integrations

• Gatsby (plugin, example)
• Next.js (example)

Contributors

Thanks goes to these wonderful people (emoji key):

Kristóf Poduszló 🚧 💻 📖 💡 🤔 🚇

This project follows the all-contributors specification. Contributions of any kind welcome!

Acknowledgements

The project's name is an ode to Emotion, an extensive CSS-in-JS runtime. Similar libraries had great impact on the initial development process, including but not limited to:

• Styled Components, with its thoroughly tested approaches
• Styletron, for openly discussing the caveats of atomic styling
• glamor, by its simplistic and comprehensible implementation

The logo's ocean emoji is courtesy of Twemoji.