emotion-js/emotion

Emotion is a JavaScript library for writing CSS styles directly inside JavaScript or TypeScript code, a technique called CSS-in-JS. Normally, CSS (the language that controls how web pages look) lives in separate files. Emotion lets you define styles as JavaScript objects or strings right next to the component code they apply to, which makes it easier to keep styles and logic together and to use JavaScript variables and logic inside your styles. Emotion is designed with performance in mind and uses heavy caching in production environments to keep things fast. It handles the tricky problem of CSS specificity, the rules that determine which style wins when multiple rules apply to the same element, in a predictable way, avoiding a common source of bugs. It also generates source maps and meaningful label names in development mode to make debugging easier. The library works as a standalone package for plain JavaScript, and has a dedicated integration for React that enables a special css prop you can add directly to any element. An optional Babel plugin (a code-transformation tool that runs during your build step) enables additional optimizations. Emotion is open source and licensed under the MIT license.