Emotion

Overview

Emotion is an open-source library that facilitates writing CSS with JavaScript, commonly referred to as CSS-in-JS. It is designed to enhance the developer experience for styling web applications, particularly those built with React. By allowing developers to define styles directly within their JavaScript components, Emotion promotes highly modular, maintainable, and dynamic styling solutions. This approach enables styles to be colocated with components, ensuring that each component carries its own styling logic, which can simplify code management in larger applications.

Emotion provides several core packages, including @emotion/react for integrating with React, @emotion/styled for creating styled components similar to other CSS-in-JS libraries, and @emotion/css for a lower-level API that allows for object-based styling without component wrappers. The library is recognized for its performance characteristics, which include optimizations for runtime style injection and critical CSS extraction. Critical CSS refers to the minimum set of styles required to render the initial view of a page, and extracting these styles is crucial for improving page load times and user experience, especially in server-rendered applications as described by web.dev.

Developers choose Emotion when they require a flexible and performant styling solution that integrates deeply with the component-based architecture of frameworks like React. It excels in scenarios demanding advanced styling capabilities, such as dynamic theming, where application-wide style variables can be easily managed and applied, and sophisticated composition patterns, where styles can be reused and extended across components. Emotion supports server-side rendering (SSR) out of the box, which is vital for applications requiring fast initial page loads and improved SEO, as it ensures styles are present before JavaScript execution on the client. The library's API is designed to be developer-friendly, offering type safety when used with TypeScript and a range of utilities for common styling tasks, from media queries to keyframe animations.

Emotion is especially suited for teams building complex single-page applications (SPAs) or universal applications where consistent styling, maintainability, and performance are primary concerns. Its modular nature allows developers to adopt specific parts of the library as needed, making it adaptable to various project requirements. For instance, some projects might prefer the css prop for ad-hoc styling, while others might favor the styled component approach for more structured and reusable UI elements. The library provides robust error handling during development and supports modern CSS features, ensuring compatibility with contemporary web development practices.

Key features

• CSS-in-JS syntax: Write CSS directly within JavaScript files using template literals or object styles, allowing for dynamic and component-scoped styling as detailed in the Emotion introduction.
• Theming: Implement global or contextual themes across applications, enabling easy management of design tokens such as colors, fonts, and spacing.
• Server-Side Rendering (SSR) support: Automatically extracts critical CSS for server-rendered applications, ensuring styles are available on the initial page load to prevent flashes of unstyled content (FOUC) and improve perceived performance.
• Composition and reusability: Facilitates the creation of reusable style utilities and component styles, promoting a consistent design system and reducing code duplication.
• Performant runtime styling: Optimizes style injection and updates, aiming for efficient rendering even with complex and dynamic style changes.
• Framework agnostic (with React integration): While primarily associated with React via @emotion/react and @emotion/styled, Emotion's core @emotion/css package can be used in other JavaScript environments.
• TypeScript support: Provides strong TypeScript definitions for enhanced developer experience, including type checking for styles and props.
• Atomic CSS generation: Emotion can generate atomic CSS classes, where each class contains a single CSS declaration, which can lead to smaller CSS bundles and better caching in certain scenarios.

Pricing

Emotion is an open-source project distributed under the MIT License.

There are no commercial versions or paid tiers for Emotion. Its development is supported by contributions from the community.

Common integrations

• React: Emotion integrates seamlessly with React applications through the @emotion/react package, allowing for the use of the css prop and the styled API directly within React components as described in the Emotion React documentation.
• Next.js: For Next.js applications, Emotion offers specific guidance for server-side rendering and static site generation, ensuring styles are correctly hydrated and optimized on the Emotion SSR page.
• Gatsby: Similar to Next.js, Emotion provides instructions for integrating with Gatsby, enabling efficient SSR and styling in static progressive web apps.
• Babel: Emotion utilizes Babel plugins (e.g., @emotion/babel-plugin) for compile-time optimizations, such as unique class name generation and source map improvements on the Emotion Babel documentation.
• TypeScript: Emotion provides comprehensive TypeScript types, ensuring type safety and enhanced autocompletion when defining styles and component props in TypeScript projects.
• Storybook: Developers often integrate Emotion with Storybook to build and test UI components in isolation, ensuring consistent styling across a component library.

Alternatives

• styled-components: Another popular CSS-in-JS library, offering a similar API and feature set, often compared with Emotion for React styling.
• Tailwind CSS: A utility-first CSS framework that provides a comprehensive set of predefined CSS classes for building custom designs directly in markup, contrasting with the CSS-in-JS approach.
• Chakra UI: A component library that offers pre-built, accessible React components with a focus on developer experience and a robust theming system, often used in conjunction with CSS-in-JS solutions.

Getting started

To begin using Emotion in a React project, you typically install the necessary packages and configure a Babel plugin. Below is an example of setting up @emotion/react and @emotion/styled and creating a simple styled component:

# Install Emotion packages
npm install @emotion/react @emotion/styled
# or
yarn add @emotion/react @emotion/styled

Next, ensure your Babel configuration (e.g., in .babelrc or babel.config.js) includes the Emotion plugin:

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": [
    "@emotion/babel-plugin"
  ]
}

Now, you can create and use styled components in your React application:

import React from 'react';
import styled from '@emotion/styled';
import { css } from '@emotion/react';

// Create a simple styled component
const Button = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

// Use the css prop for inline styles or condition-based styling
const DynamicBox = ({ isLarge }) => (
  <div
    css={css`
      width: ${isLarge ? '200px' : '100px'};
      height: ${isLarge ? '200px' : '100px'};
      background-color: lightblue;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
      border-radius: 8px;
    `}
  >
    {isLarge ? 'Large Box' : 'Small Box'}
  </div>
);

// Example component using the styled button and dynamic box
function App() {
  const [large, setLarge] = React.useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Emotion with React</h1>
      <Button onClick={() => alert('Button Clicked!')}>
        Click Me
      </Button>

      <p>Toggle box size:</p>
      <input type="checkbox" id="toggleSize" checked={large} onChange={() => setLarge(!large)} />
      <label htmlFor="toggleSize"> Make large</label>

      <DynamicBox isLarge={large} />
    </div>
  );
}

export default App;