Emotion

Emotion est une bibliothèque CSS-in-JS moderne et performante conçue pour styler les applications React et autres frameworks JavaScript. Elle permet d'écrire des styles directement dans le code JavaScript avec une syntaxe flexible, tout en offrant des fonctionnalités avancées comme les styles dynamiques, la composition et l'optimisation automatique. Emotion combine la puissance du CSS traditionnel avec la logique JavaScript pour créer des interfaces utilisateur maintenables et performantes.

Fondements

• API double : styled components pour une approche orientée composant, et css prop pour une utilisation plus flexible
• Génération automatique de noms de classes uniques évitant les conflits de styles globaux
• Support natif du SSR (Server-Side Rendering) avec extraction CSS optimisée
• Système de thématisation puissant via Context API React pour gérer les design tokens

Avantages

• Performance optimale grâce à la génération de styles à la compilation et au runtime minimal
• Co-localisation des styles avec les composants facilitant la maintenance et la compréhension du code
• Styles dynamiques basés sur les props sans surcharge de performance
• Excellent support TypeScript avec typage complet des props et du thème
• Taille de bundle réduite (7.9kB gzippé) comparée aux alternatives comme styled-components
• Intégration transparente avec les outils de développement React et support du hot reloading

Exemple concret

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

// Approche 1: css prop
interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'large';
}

const Button: React.FC<ButtonProps> = ({ variant = 'primary', size = 'large', children }) => (
  <button
    css={css`
      padding: ${size === 'small' ? '8px 16px' : '12px 24px'};
      background: ${variant === 'primary' ? '#007bff' : '#6c757d'};
      color: white;
      border: none;
      border-radius: 4px;
      font-weight: 600;
      transition: all 0.2s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      
      &:active {
        transform: translateY(0);
      }
    `}
  >
    {children}
  </button>
);

// Approche 2: styled components
const StyledButton = styled.button<ButtonProps>`
  padding: ${props => props.size === 'small' ? '8px 16px' : '12px 24px'};
  background: ${props => props.theme.colors[props.variant || 'primary']};
  color: white;
  border: none;
  border-radius: ${props => props.theme.radii.md};
  font-weight: 600;
  transition: all 0.2s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
`;

export default Button;

Mise en œuvre

1. Installer les packages nécessaires : npm install @emotion/react @emotion/styled
2. Configurer le JSX pragma pour Babel ou TypeScript (jsxImportSource: @emotion/react)
3. Créer un fichier de thème global définissant couleurs, espacements et typographie
4. Wrapper l'application avec ThemeProvider pour distribuer le thème aux composants
5. Choisir entre css prop (flexibilité) ou styled components (encapsulation) selon les besoins
6. Configurer l'extraction CSS pour le SSR si nécessaire avec createEmotionCache
7. Optimiser avec Babel plugin @emotion/babel-plugin pour de meilleures performances

Outils associés

• Facepaint : bibliothèque compagnon pour gérer facilement les media queries responsive
• Emotion DevTools : extension Chrome pour inspecter et débugger les styles Emotion
• Twin.macro : combinaison d'Emotion avec Tailwind CSS pour le meilleur des deux mondes
• Polished : bibliothèque de helpers CSS (darken, lighten, etc.) compatible avec Emotion
• ESLint plugin emotion : règles de linting pour garantir les meilleures pratiques

Emotion représente une solution mature et performante pour le styling en React, adoptée par des entreprises comme Atlassian, Reddit et Coinbase. Sa flexibilité permet aux équipes de choisir le niveau d'abstraction adapté à leurs besoins, tandis que son écosystème riche et sa performance optimale en font un choix stratégique pour les applications modernes nécessitant un styling dynamique et maintenable.