emotion

Emotion is a CSS-in-JS library designed for high performance style composition. It allows developers to style applications using either string or object styles, and provides predictable composition to avoid CSS specificity issues. The library includes source maps and labels for an improved developer experience, along with heavy caching for production performance. Key features include the CSS prop for inline styling, styled components, composition, nested selectors, and media queries. A Babel plugin is optional but can enable additional optimizations and customizations. The project provides a demo sandbox and extensive documentation at emotion.sh. Emotion has a broad ecosystem with integrations for Vue, Nuxt.js, Ember, and React Native, as well as tools like facepaint, polished, and stylelint. It is used in production by companies such as The New York Times, Sentry, Codecademy, and Apache Superset. The project is supported by sponsors and backers through Open Collective.