# emotion-js/emotion

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/emotion-js-emotion).**

18,001 stars · 1,133 forks · JavaScript · mit

## Links

- GitHub: https://github.com/emotion-js/emotion
- Homepage: https://emotion.sh/
- awesome-repositories: https://awesome-repositories.com/repository/emotion-js-emotion.md

## Topics

`babel-plugin` `css` `css-in-js` `emotion` `react` `reactjs`

## Description

This project is a styling library and framework designed for component-based architectures, enabling developers to define and manage visual styles directly within JavaScript or TypeScript. It functions as a styling engine that generates unique class names from style definitions, ensuring encapsulated, predictable, and maintainable visual presentation across applications. By integrating with component logic, it allows for the creation of reusable UI elements with styles defined through template literals or object syntax.

The library distinguishes itself through a comprehensive suite of build-time and runtime capabilities that extend beyond basic styling. It supports dynamic theme propagation through the component tree, allowing for consistent design token management, and provides advanced server-side rendering support by extracting and serializing styles for initial page loads. Furthermore, it includes specialized tooling for performance optimization, such as critical CSS management, dead code elimination, and build-time style transformations, alongside security features like content security policy nonce injection for dynamically generated styles.

Beyond its core styling primitives, the project offers a robust ecosystem for managing complex design systems. This includes responsive design utilities, global style management, and extensive configuration options for style injection and debugging. The library also provides automated tools for code migration, style usage validation, and standards enforcement to maintain consistency across large-scale projects.

Comprehensive documentation and installation instructions are available in the repository, which also provides utilities for source-mapped debugging and style serialization to assist in development and testing workflows.

## Tags

### User Interface & Experience

- [Styling Engines](https://awesome-repositories.com/f/user-interface-experience/styling-engines.md) — Functions as a styling engine that generates unique class names from style definitions for encapsulated presentation.
- [Component Styling Tools](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools.md) — Encapsulates visual styles directly within component source files to ensure maintainable and predictable UI presentation.
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Generates reusable UI components with encapsulated styles defined directly in the source code. ([source](https://emotion.sh/docs/@emotion/styled))
- [Dynamic Style Injection](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems/dynamic-style-injection.md) — Generates unique CSS class names and injects style rules dynamically during application execution.
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling.md) — Acts as a CSS-in-JS library for managing component styles with support for themes and server-side rendering.
- [Scoped Style Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/scoped-style-generators.md) — Creates unique CSS class names from style definitions to isolate styles to specific elements. ([source](https://emotion.sh/docs/install))
- [Application Theme Definitions](https://awesome-repositories.com/f/user-interface-experience/custom-theme-definitions/application-theme-definitions.md) — Distributes shared design tokens and theme variables through the component tree for consistent application-wide styling.
- [Design Token Theming](https://awesome-repositories.com/f/user-interface-experience/design-token-theming.md) — Injects shared design tokens and theme variables into the component tree to ensure consistent visual styling. ([source](https://emotion.sh/docs/typescript))
- [Theme Propagators](https://awesome-repositories.com/f/user-interface-experience/dynamic-content-updaters/theme-propagators.md) — Distributes design tokens through the component tree using provider patterns to enable dynamic, context-aware styling.
- [JavaScript Style Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/javascript-style-engines.md) — Maps JavaScript objects to CSS properties to enable styling components directly within code. ([source](https://emotion.sh/docs/object-styles))
- [Dynamic Theming](https://awesome-repositories.com/f/user-interface-experience/dynamic-theming.md) — Provides hooks for components to access and consume theme objects dynamically within the component tree. ([source](https://emotion.sh/docs/theming))
- [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Maps CSS properties to breakpoint arrays to enable fluid layout adaptation across different viewport sizes. ([source](https://emotion.sh/docs/media-queries))
- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Supports responsive design by embedding media queries and breakpoint-based property mapping directly into component styles.
- [Style Props Frameworks](https://awesome-repositories.com/f/user-interface-experience/style-props-frameworks.md) — Enables styling components directly via a CSS property within JSX elements, supporting themes and nested selectors. ([source](https://emotion.sh/docs/@emotion/babel-preset-css-prop))
- [Theme Configuration Systems](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/theme-architecture-frameworks/theme-configuration-systems.md) — Centralizes shared design tokens and theme interfaces to provide consistent styling properties across all components. ([source](https://emotion.sh/docs/best-practices))
- [Style Composition Engines](https://awesome-repositories.com/f/user-interface-experience/style-composition-engines.md) — Merges multiple style definitions with deterministic priority to ensure reliable visual overrides. ([source](https://emotion.sh/docs/styled))
- [Style Injection Systems](https://awesome-repositories.com/f/user-interface-experience/style-injection-systems.md) — Applies global CSS rules like resets or font faces and manages their lifecycle during component unmounting. ([source](https://emotion.sh/docs/@emotion/css))
- [Dynamic Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems.md) — Applies styles to components by passing CSS properties as props for conditional styling based on state. ([source](https://emotion.sh/docs/styled))
- [Global CSS Stylings](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/global-css-stylings.md) — Supports global style injection for resets, font faces, and base styles across the document.
- [Style Selectors](https://awesome-repositories.com/f/user-interface-experience/style-selectors.md) — Targets child elements or parent containers within component styles using standard CSS nesting syntax. ([source](https://emotion.sh/docs/nested))
- [Colocation Patterns](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/colocation-patterns.md) — Groups component logic and visual styling within the same file to simplify maintenance and ensure styles are updated alongside components. ([source](https://emotion.sh/docs/best-practices))
- [Compilation Optimizers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/compilation-optimizers.md) — Transforms and minifies style definitions during the build process to improve runtime performance and reduce bundle size. ([source](https://emotion.sh/docs/package-summary))
- [CSS Specificity Modifiers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/css-specificity-modifiers.md) — Identifies and isolates critical CSS rules to minimize payload size and prevent layout shifts. ([source](https://emotion.sh/docs/ssr))
- [Transparent Attribute Forwarding](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-communication-patterns/component-data-passing/transparent-attribute-forwarding.md) — Automatically forwards attributes and listeners from parent components to internal child elements to prevent unwanted data leakage. ([source](https://emotion.sh/docs/typescript))
- [Reusable Transition Definitions](https://awesome-repositories.com/f/user-interface-experience/component-transitions/reusable-transition-definitions.md) — Generates unique animation identifiers and reusable sequences for controlling visual transitions in components. ([source](https://emotion.sh/docs/@emotion/css))
- [Style Snapshots](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/style-snapshots.md) — Converts component styles into readable snapshots to ensure visual consistency across code changes. ([source](https://emotion.sh/docs/@emotion/jest))

### Web Development

- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Extracts and injects generated styles into the initial HTML response to ensure consistent styling during server-side rendering. ([source](https://emotion.sh/docs/package-summary))
- [Server-Side Rendering Utilities](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities.md) — Extracts and serializes styles during server-side rendering to ensure consistent styling on initial page load.
- [CSS Build Tools](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools/css-build-tools.md) — Provides build-time utilities for optimizing, minifying, and extracting CSS to reduce bundle sizes.
- [Bundle Optimizers](https://awesome-repositories.com/f/web-development/bundle-optimizers.md) — Minifies CSS output and marks style blocks for dead code elimination to reduce final application bundle size. ([source](https://emotion.sh/docs/@emotion/babel-plugin))
- [Style Optimization Tools](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools.md) — Optimizes style declarations during the build process to improve execution speed and reduce runtime overhead. ([source](https://emotion.sh/docs/performance))
- [Cross-Platform Styling](https://awesome-repositories.com/f/web-development/cross-platform-styling.md) — Applies styles to primitive UI elements that render consistently across web, mobile, and design environments. ([source](https://emotion.sh/docs/@emotion/primitives))
- [Performance Optimizations](https://awesome-repositories.com/f/web-development/performance-optimizations.md) — Implements performance optimizations like minification and unused code elimination to improve rendering speed.
- [CSS Build Plugins](https://awesome-repositories.com/f/web-development/css-build-plugins.md) — Integrates custom plugins into the style compilation pipeline to modify or transform CSS output before injection. ([source](https://emotion.sh/docs/@emotion/cache))
- [Style Transformation Utilities](https://awesome-repositories.com/f/web-development/style-transformation-utilities.md) — Transforms component styles during the build process using macros to avoid manual build configuration changes. ([source](https://emotion.sh/docs/babel-macros))

### Software Engineering & Architecture

- [Server-Side Rendering Style Registries](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/framework-specific-integrations/server-side-rendering-style-registries.md) — Collects and serializes generated CSS during server-side rendering to ensure styles are available immediately upon page load.
- [Plugin-Based Architectures](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures.md) — Integrates custom transformation logic into the compilation process to modify or extend CSS output.

### Graphics & Multimedia

- [Style Caching Strategies](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/ui-component-lifecycle-engines/style-caching-strategies.md) — Optimizes rendering performance by processing style definitions outside of component render cycles to ensure they are computed only once. ([source](https://emotion.sh/docs/performance))

### Security & Cryptography

- [Secure Style Injections](https://awesome-repositories.com/f/security-cryptography/security-headers/secure-style-injections.md) — Ensures compliance with strict content security policies by applying security nonces to dynamically generated style elements. ([source](https://emotion.sh/docs/@emotion/cache))

### Development Tools & Productivity

- [Dead Code Elimination](https://awesome-repositories.com/f/development-tools-productivity/dead-code-elimination.md) — Injects markers into style blocks to enable build tools to identify and remove unused code. ([source](https://emotion.sh/docs/babel))
- [Source Map Generators](https://awesome-repositories.com/f/development-tools-productivity/source-map-generators.md) — Generates mapping data that links compiled CSS rules back to original source code locations for easier debugging.