emotion-js/emotion
43.7
Weak · 1 October 2026
13.8k
lines of production code
TypeScript
with JavaScript
2
measurements over time
What this system is
This system is Emotion, a CSS-in-JS library that provides styling solutions for React, React Native, and server-side rendering environments. It enables developers to style applications using JavaScript objects, template literals, and styled components, with built-in support for theming, critical CSS extraction, and atomic class names. The codebase encompasses core packages for runtime styling, build-time Babel transformations, and testing utilities, all unified under a modern TypeScript and Yarn workspace architecture.
How it got here
2017–2018 — TypeScript migration and React Native support
43 changes.
This period focused on modernizing the codebase by migrating core packages to TypeScript and upgrading the development infrastructure to Yarn 3 and Node 16. Significant features included the release of Emotion Primitives v11 and the new @emotion/native package, which brought Emotion's styling engine to React Native with atomic class names. The team also established comprehensive benchmarking infrastructure to monitor render performance and rebuilt the documentation site with Next.js and live code editors.
2019–2020 — TypeScript migration and SSR expansion
29 changes.
The project migrated core packages like @emotion/react, @emotion/babel-plugin, and @emotion/jest to TypeScript, replacing previous Flow implementations and hand-written declarations. This period also introduced comprehensive server-side rendering utilities for CSS extraction and streaming, alongside extensive test coverage and type definitions across the monorepo.
2021–2024 — TypeScript migration and tooling upgrades
13 changes.
This period focused on converting core Emotion packages, including react, styled, cache, and css-prettifier, from JavaScript to TypeScript to improve type safety and developer experience. The work also involved introducing new utilities like insertion effect fallbacks, expanding test coverage for ESLint rules, and upgrading the build infrastructure to Yarn 3 with enhanced workspace tooling.
Features
Add Flow type definition for Vitest
A new Flow type definition file for Vitest has been added to the project, declaring the global \vi\ variable. This enables Flow type checking for Vitest-specific globals in the codebase.
flow-typed · high confidence
Add Next.js playground with automatic JSX transform support
A new Next.js playground has been added to the repository, providing a ready-to-run environment for experimenting with Emotion in a Next.js application. The setup configures the Babel plugin to use the automatic JSX runtime with \@emotion/react\ as the import source, and includes example components demonstrating CSS-in-JS styling, global styles, and dynamic rendering.
playgrounds · high confidence
Add TypeScript definitions for @emotion/is-prop-valid
This change introduces TypeScript type definitions for the @emotion/is-prop-valid package, enabling TypeScript users to receive compile-time type checking and IntelliSense support when using the library. The definitions include a test file that validates the expected behavior of the isPropValid function, ensuring that it accepts a string argument and rejects invalid calls such as no arguments, an object argument, or multiple arguments.
packages/is-prop-valid/types · high confidence
Add TypeScript type definitions and tests for @emotion/serialize
This change introduces the TypeScript declaration file (index.d.ts) and a corresponding test suite (tests.ts) for the @emotion/serialize package. It ensures that types for \serializeStyles\, \CSSObject\, and \Keyframes\ are properly defined and validated, allowing consumers to benefit from static type checking when using the serialization utilities.
packages/serialize/types · high confidence
Add TypeScript type definitions and tests for the \`css\` prop
This change introduces the TypeScript declaration files for the \css\ prop support in \@emotion/react\. It adds a new \css-prop.d.ts\ file that augments React's \Attributes\ interface to allow the \css\ prop, along with comprehensive test files (\tests-css.tsx\, \tests-theming.tsx\, \tests.tsx\) that validate the typing behavior for components accepting the \css\ prop, including those with union types or conditional \className\ support. It also includes configuration files (\tsconfig.json\, \tslint.json\) to run these type checks using \@definitelytyped/dtslint\.
packages/react/types · high confidence
Add TypeScript type definitions for @emotion/sheet
This change introduces TypeScript declaration files and associated test suites for the \@emotion/sheet\ package, enabling strict type checking for consumers using TypeScript. The definitions cover the \StyleSheet\ class constructor options (such as \key\, \container\, \nonce\, and \speedy\) and methods (\insert\, \flush\), ensuring that invalid arguments are caught at compile time. The inclusion of \tests.ts\ validates these types against the DefinitelyTyped standards, providing better developer experience and reducing runtime errors for TypeScript users.
packages/cache/types, packages/sheet/types, packages/styled/types · high confidence
Add TypeScript types for @emotion/weak-memoize
This change introduces TypeScript declaration files and type tests for the \@emotion/weak-memoize\ package. It ensures that the \weakMemoize\ function correctly enforces that its argument must be an object type, preventing usage with primitives like strings, numbers, or booleans, while supporting object types such as interfaces, classes, and collections like Map and Set.
packages/weak-memoize/types · high confidence
Added Emotion benchmark implementations using css, styled, and css-prop APIs
The benchmark suite now includes three new React component implementations using the Emotion library: one using the \@emotion/css\ functional API, one using \@emotion/styled\, and one using the \@emotion/react\ JSX pragma (\css\ prop). These additions provide new data points for comparing rendering performance across different Emotion usage patterns within the benchmark infrastructure.
scripts/benchmarks/src/implementations · high confidence
Added React component benchmarking utility
Added a new benchmarking tool under scripts/benchmarks/src/app/Benchmark that measures React component performance (mount, update, unmount) using high-resolution timing and statistical analysis. The implementation includes core logic for cycle management and rendering, math utilities for calculating mean, median, and standard deviation (filtering outliers), and timing helpers that leverage performance.now() or process.hrtime. Flow type annotations have been removed from the benchmark code.
scripts/benchmarks/src/app/Benchmark · high confidence
Added TypeScript declarations for @emotion/server
This change introduces official TypeScript type definitions for the @emotion/server package, enabling better type safety and IntelliSense for users. The definitions cover the main entry point exports (extractCritical, renderStylesToString, renderStylesToNodeStream, constructStyleTagsFromChunks) and the createEmotionServer factory function, including the new extractCriticalToChunks capability. It also includes test files to validate the type signatures and configuration files for running dtslint checks.
packages/server/types · high confidence
Added TypeScript type definitions for @emotion/hash
Consumers using TypeScript can now import @emotion/hash with full type safety. This change introduces a types directory containing index.d.ts, a tsconfig.json configured for strict checking, and a tests.ts file that validates the expected API surface (e.g., ensuring the hash function accepts a string and rejects invalid arguments).
packages/hash/types · high confidence
Added Yarn workspace tools plugin
The \@yarnpkg/plugin-workspace-tools\ plugin is now included in the Yarn installation, enabling workspace-specific commands such as \yarn workspaces focus\ and \yarn workspaces foreach\. This allows users to run commands on specific subsets of workspaces or iterate over them with various filtering and execution options.
.yarn/plugins/@yarnpkg · high confidence
Added benchmarking infrastructure for Emotion render performance
The repository now includes a new benchmarking suite in \scripts/benchmarks\ to measure and prevent regressions in Emotion's render performance and caching. This addition introduces a local development environment using Babel (with \@babel/env\, \@babel/react\, and \@emotion\ plugins) and a headless browser automation script via Puppeteer. The benchmarks specifically test \emotion-css-func\, \emotion-css-prop\, and \emotion-styled\ libraries against scenarios like mounting deep/wide trees and updating dynamic styles, with optional performance tracing capabilities.
scripts/benchmarks · high confidence
Added server-side rendering benchmarks for Emotion styling approaches
The \scripts/ssr-benchmarks\ directory now contains a new benchmark suite to measure the performance of different Emotion styling methods during server-side rendering. The suite compares \styled\ components, the \css\ prop, the \css\ function with class names, and an experimental inline style approach using Sierpinski triangle components to stress-test rendering throughput.
scripts/ssr-benchmarks · high confidence
Initial release of @emotion/native with TypeScript support and macro integration
The @emotion/native package is now available, providing styled-components-style styling for React Native using Emotion. This release includes TypeScript type definitions for improved developer experience, support for the 'as' prop, and a Babel macro (@emotion/native/macro) for optimized build-time processing. It also introduces a 'shouldForwardProp' option for controlling prop forwarding and aligns with React Native's core component exports. The package relies on @emotion/react for theming and uses StyleSheet.create under the hood for atomic class names when used with React Native Web.
packages/native · high confidence
Introduce Emotion Native with TypeScript support and updated component list
The @emotion/native package is now available, providing styled components for React Native via a new base implementation and a comprehensive list of supported native components (including the newly added Pressable). This release also adds TypeScript definitions to the package to improve type safety for users.
packages/native/src · high confidence
Introduction of @emotion/use-insertion-effect-with-fallbacks package
A new package, @emotion/use-insertion-effect-with-fallbacks, has been added to provide a wrapper around React's useInsertionEffect. It exports two utilities: useInsertionEffectAlwaysWithSyncFallback, which falls back to a synchronous execution if the hook is unavailable, and useInsertionEffectWithLayoutFallback, which falls back to useLayoutEffect. This allows consumers to safely use insertion effects with graceful degradation across different React versions and environments.
packages/use-insertion-effect-with-fallbacks · high confidence
New Babel preset for Emotion development builds
A new Babel preset has been added at \scripts/babel-preset-emotion-dev\ to configure the build environment for Emotion's development mode. This preset automatically applies \@babel/preset-env\ and \@babel/preset-react\, with the React preset configured to use the automatic runtime and \@emotion/react\ as the import source when the \runtime\ option is set to 'automatic'. It also includes essential plugins for code generation, class properties, and runtime support, and conditionally applies the \@emotion/babel-plugin\ when the \useEmotionPlugin\ option is enabled, streamlining the setup for developers working on Emotion's internal tooling.
scripts/babel-preset-emotion-dev · high confidence
New React Native-based benchmark application
The benchmark suite now includes a new React Native application (scripts/benchmarks/src/app) that provides a UI for running performance tests. This app allows users to select between different CSS-in-JS implementations (emotion-css-func, emotion-css-prop, emotion-styled) and benchmark cases (Mount deep tree, Mount wide tree, Update dynamic styles) via pickers, and displays the results in a report card list. The application is built using React Native components like Picker, ScrollView, and View, and includes specific benchmark case implementations for Tree and SierpinskiTriangle.
scripts/benchmarks/src/app · high confidence
New server-side rendering utilities for Emotion CSS extraction and injection
The server package now exports a suite of new functions for handling Emotion CSS during server-side rendering: \extractCritical\, \extractCriticalToChunks\, \renderStylesToString\, \renderStylesToNodeStream\, and \constructStyleTagsFromChunks\. These utilities allow applications to extract critical CSS styles from the rendered HTML, inject them as inline style tags (with optional nonce support for CSP), or stream them, ensuring that styles are correctly applied on the client before hydration.
packages/server/src/create-instance · high confidence
Removals
Removal of Babel plugin for css prop transformation
The Babel plugin (\src/glam/babel.js\) that previously transformed the \css\ prop into \className\ attributes during compilation has been removed. This means the automatic conversion of inline CSS styles via the \css\ prop is no longer handled by this specific build-time transformation, requiring users to rely on alternative styling mechanisms or runtime support.
src/glam · high confidence
Behavioural changes
@emotion/react source code migrated to TypeScript and environment detection updated
The @emotion/react package has migrated its source code to TypeScript, meaning type declarations are now generated automatically rather than being hand-written. Additionally, the library no longer relies on process.env.NODE\_ENV checks to differentiate between production and development builds, instead using proper package conditions (including new edge-light and workerd conditions) to support modern bundlers and edge environments like Vercel Edge and Cloudflare Workers.
packages/react · high confidence
Add 'scale' to unitless CSS properties list
The unitless package now recognizes the 'scale' CSS property as unitless. This ensures that values assigned to the 'scale' property are treated as raw numbers without units, aligning with the behavior of other similar properties like 'opacity' and 'zIndex'.
packages/unitless/src · high confidence
Added boolean condition modules for server-side logic
The server package now includes dedicated modules for boolean conditions, specifically adding \false.js\ and \true.js\ files that export their respective literal values. This allows other parts of the server to import these static boolean constants for use in conditional logic or configuration.
packages/server/src/conditions · high confidence
Babel plugin source code rewritten in TypeScript with new macro architecture
The source code for the Babel plugin has been completely rewritten in TypeScript, replacing the previous Flow-based implementation. This change introduces a new macro-based architecture, splitting the logic into distinct modules for core, styled, and vanilla Emotion transformations. The plugin now supports a more flexible import map configuration, allowing users to specify custom import sources and re-exports for \@emotion/react\, \@emotion/styled\, \@emotion/css\, and related packages. The new structure also includes dedicated transformers for web and native environments, improving modularity and type safety.
packages/babel-plugin/src · high confidence
CRA playground updated to use Emotion for styling
The Create React App playground now uses Emotion for CSS-in-JS styling instead of the previous styling approach. The application component applies global styles via Emotion's Global component and uses the css prop for inline styling, providing a modern example of styling within a CRA environment.
playgrounds/cra · high confidence
CSS Prettifier source converted to TypeScript
The source code for the \@emotion/css-prettifier\ package has been rewritten in TypeScript. This change updates the internal implementation of the CSS formatting logic (specifically the \prettify\ function and its associated serialization middleware) to use TypeScript, while maintaining the existing public API and behavior for users.
packages/css-prettifier/src · high confidence
Cache source code converted to TypeScript
The source files in the cache package (including the main cache implementation, prefixer, stylis plugins, and type definitions) have been rewritten from JavaScript to TypeScript. This change introduces explicit type definitions for internal structures like \StylisElement\ and improves type safety for the cache configuration and CSS processing logic without altering the runtime behavior.
packages/cache/src · high confidence
Emotion CSS package restructured with new exports and TypeScript migration
The @emotion/css package has undergone significant changes, including a migration to TypeScript for improved type safety and a restructuring of the package exports. The package now uses the 'exports' field in package.json to define entry points, which may affect how the package is imported in some environments. Additionally, the package has removed support for interpolating class names returned from the 'css' function, which was deprecated in v10. The package also now supports cascade @layers and container queries through updates to the underlying Stylis parser. These changes aim to improve the overall developer experience and align with modern JavaScript standards.
packages/css, packages/styled · high confidence
Emotion Primitives v11 release with breaking style prop changes and new platform support
The @emotion/primitives package has been updated to version 11, introducing several significant changes for users. Most notably, passing functions as values for the \style\ prop is no longer supported, aligning behavior with the web version of Emotion where the equivalent \className\ prop does not resolve functions. Additionally, the package now uses \StyleSheet.create\ under the hood, which means atomic class names are applied on components when used with React Native Web instead of inline styles. This major version also includes support for macros via \@emotion/primitives/macro\, adds an \exports\ field to the package manifest for better module resolution, and updates the underlying \css-to-react-native\ dependency to version 3.x. Users on Vercel Edge and Cloudflare Workers will also benefit from added \edge-light\ and \workerd\ conditions in the package manifest.
packages/primitives · high confidence
Emotion documentation site migrated to Next.js with live code editors
The Emotion documentation site has been rebuilt using Next.js, replacing the previous Gatsby-based infrastructure. This migration introduces a new layout with a responsive sidebar, integrated DocSearch, and Carbon ads. A key feature is the new live code editor system: markdown code blocks marked with \// @live\ are now rendered as interactive editors that compile JSX in the browser using a Web Worker and the Emotion Babel plugin, allowing users to see immediate results. The site also includes a new global style system, a Ukraine support banner, and module stubs to handle Node.js dependencies in the browser environment.
site · high confidence
Emotion styled package rewritten in TypeScript with improved IDE support
The source code for the \@emotion/styled\ package has been converted from JavaScript to TypeScript, introducing strict type definitions for styled components, options, and prop forwarding. This refactor includes a rename of the default-exported variable to improve auto-import completions in IDEs and adds a JSX namespace compatibility layer to prevent errors when mixing newer \@emotion/styled\ with older \@emotion/react\ versions. Users benefit from better type safety and developer experience without changes to the public API.
packages/styled/src · high confidence
Enforce Yarn usage and automate Slack link updates
The project now requires Yarn for installation, enforced by a new preinstall script that throws an error if npm is used. Additionally, a new utility script has been added to automatically update expired Slack invite links in the site header and README, addressing the issue that these links expire after 30 days.
scripts · high confidence
Introduce Emotion-based styled primitives for React Native
The primitives package now provides a styled API powered by Emotion, allowing developers to create styled View, Text, and Image components that integrate with the Emotion styling engine. This change replaces the previous implementation with a new entry point that exports a default styled factory and a css helper, while introducing specific logic to correctly filter and forward React Native accessibility and layout props (such as accessibilityLabel and resizeMode) to the underlying native components.
packages/primitives/src · high confidence
Migrate @emotion/css to TypeScript with strict type definitions
The @emotion/css package has been migrated from JavaScript to TypeScript, providing comprehensive type definitions for the library's core API. Users now receive strict compile-time checking for the \css\, \cx\, \keyframes\, \injectGlobal\, and \createEmotion\ functions, including validation for CSS object properties and class name arguments. The migration also introduces a \createEmotion\ factory that allows for custom instance configuration (such as cache keys and containers) with full type safety, and adds a \speedy\ method to the sheet interface for performance tuning in development environments.
packages/css/types · high confidence
Migrate @emotion/eslint-plugin to TypeScript
The ESLint plugin rules have been rewritten in TypeScript, replacing the previous JavaScript implementation. This change introduces six linting rules—import-from-emotion, no-vanilla, syntax-preference, styled-import, jsx-import, and pkg-renaming—which help enforce correct import paths for Emotion packages, discourage deprecated patterns like vanilla emotion or incorrect import sources, and guide users toward preferred syntax styles. The migration also includes a TypeScript-based utility for rule creation and documentation URL generation, ensuring type safety and consistent rule metadata across the plugin.
(repo-wide) · high confidence
Migrate babel-tester to TypeScript
The internal \babel-tester\ utility used for running Babel transformation tests has been rewritten from JavaScript to TypeScript. This change introduces type definitions for the tester's options and test cases, and updates the implementation to use TypeScript syntax while maintaining the same functionality for loading fixtures, applying Babel plugins/presets, and validating AST nodes.
scripts/babel-tester · high confidence
Native styled components now support the \`as\` prop and \`ref\` on class components
The TypeScript definitions for @emotion/native have been updated to align with React Native 0.61.5 exports, adding explicit support for the \Pressable\ component. The type system now allows the \as\ prop on styled components, enabling dynamic component replacement, and correctly types the \ref\ prop for host class components, ensuring proper ref forwarding in TypeScript projects.
packages/native/types · high confidence
New test utilities for environment setup and snapshot serialization
The \scripts/test-utils\ directory now provides a comprehensive set of helpers for the test environment. It includes environment configurations for Enzyme (React 16 adapter) and Emotion's Jest serializer, alongside a custom \pretty-css\ serializer that prettifies CSS output in snapshots. The main \src/index.js\ exports utilities such as \ignoreConsoleErrors\ (which correctly restores the original \console.error\ after execution), \safeQuerySelector\, and \disableBrowserEnvTemporarily\ for isolating browser globals. Additionally, \testSetup.js\ implements a feature-flag gating system (\gate\) to conditionally run tests based on environment flags (e.g., development mode) and normalizes React 18 snapshot differences by stripping the \data-reactroot\ attribute.
scripts/test-utils · high confidence
React package source converted to TypeScript
The source code for the \@emotion/react\ package has been rewritten in TypeScript. This change introduces native TypeScript support for the library's core React components and utilities, including \jsx\/\jsxs\ runtimes, \Global\, \ClassNames\, \ThemeProvider\, and the \css\/\keyframes\ APIs, while also adding specific type definitions for the JSX namespace to handle compatibility across different React versions.
packages/react/src · high confidence
Refactored Jest serializer and matcher internals
The \@emotion/jest\ package has been refactored to improve snapshot reliability and API clarity. The Enzyme serializer now supports an \includeStyles\ option to optionally disable CSS printing in snapshots, and handles shallow rendering and \css\ prop elements more robustly. The \toHaveStyleRule\ matcher has been updated to accept \RegExp\ values for the \target\ option and now provides a specific error when passed an array. Additionally, the Enzyme serializer has been moved to a dedicated \@emotion/jest/enzyme\ entry point, and the main entry point now exports the standard serializer and matchers.
packages/jest/src · high confidence
Reintroduce core styling primitives with TypeScript
The \@emotion/primitives-core\ package source has been converted to TypeScript and re-implemented to provide core styling capabilities for React Native primitives. This change introduces \createCss\ for parsing CSS-like template literals and style objects into React Native styles, and \createStyled\ for creating styled components that support theming via \@emotion/react\, prop forwarding, and the \as\ prop for element replacement. The implementation includes utilities for handling interpolation and an abstract \StyleSheet\ interface to support different rendering environments.
packages/primitives-core/src · high confidence
Removal of 'runtime' option in @emotion/babel-preset-css-prop
The \@emotion/babel-preset-css-prop\ Babel preset no longer supports the \runtime\ configuration option. Attempting to use this option now throws an error, directing users to migrate to \@babel/preset-react\ combined with \@emotion/babel-plugin\ if they wish to configure the automatic JSX runtime. The preset continues to function by composing the \@emotion/babel-plugin-jsx-pragmatic\, \@babel/plugin-transform-react-jsx\, and \@emotion/babel-plugin\ plugins with default settings for pragma handling and CSS prop optimization.
packages/babel-preset-css-prop/src · high confidence
Repository modernization: migration to Yarn 3, Node 16, and TypeScript
The project has upgraded its development environment and tooling infrastructure. Node.js support is now restricted to version 16 or higher, enforced via a new \.nvmrc\ file and updated documentation. The package manager has shifted from npm/Yarn Classic to Yarn Modern (v3.2.3), utilizing the \node-modules\ linker and workspace tools plugin. The build system has been standardized on TypeScript, replacing the legacy \.babelrc\ with a \babel.config.js\ and a root \tsconfig.json\ for type checking. Additionally, code formatting is now strictly managed via \.editorconfig\ and \.prettierrc.yaml\, and CI/CD configuration has moved from Travis CI to CircleCI and Netlify.
(repo-wide) · high confidence
Updated TypeScript definitions for @emotion/jest matchers and serializers
The TypeScript type definitions for @emotion/jest have been updated to support new options and stricter typing. The \toHaveStyleRule\ matcher now accepts \RegExp\ values for its \target\ option, allowing more flexible style rule matching. Additionally, the \createSerializer\ function now supports an \includeStyles\ option to optionally disable style printing in snapshots. The types also reflect the separation of the Enzyme serializer into a dedicated entry point (\@emotion/jest/enzyme\) and ensure correct typing for the \classNameReplacer\ callback.
packages/jest/types · high confidence
Updated valid prop allowlist with new HTML and React attributes
The \is-prop-valid\ package has expanded its allowlist of valid HTML and React props to include several new attributes. Users can now use \loading\ (for lazy loading images and iframes), \decoding\, \fetchpriority\, \enterKeyHint\, \translate\, \disablePictureInPicture\, \disableRemotePlayback\, \allowUserMedia\, \allowPaymentRequest\, \popover\, \popoverTarget\, \popoverTargetAction\, and \abbr\ without receiving invalid prop warnings. This update ensures that modern HTML5 and React-specific attributes are correctly recognized as valid.
packages/is-prop-valid/src · high confidence
Upgrade Yarn to v3.2.3 and patch dtslint for React 19 compatibility
The project's package manager has been upgraded to Yarn 3.2.3. Additionally, a patch was applied to \@definitelytyped/dtslint\ to disable the check for \ts-ignore\ comments, improving compatibility with the upcoming \@types/react\ for React 19.
.yarn · high confidence
Fixes
Refactor Babel plugin utility modules for improved label extraction and minification
The \packages/babel-plugin/src/utils\ directory has been restructured into distinct, modular files to enhance maintainability and fix specific transformation bugs. Key changes include a robust \label.js\ module that now correctly extracts labels from object methods and assignment expressions while preventing crashes on complex variable declarations, and a \minify.js\ module that resolves issues with duplicate interpolations and crashes on consecutive empty interpolations. Additionally, \get-styled-options.js\ now properly handles the \autoLabel: 'dev-only'\ setting, and \get-target-class-name.js\ ensures consistent hash generation across development and production builds by normalizing file paths.
packages/babel-plugin/src/utils · high confidence
Test coverage
Add tests for the Babel CSS prop preset; Added Jest mocks for React Native and React Primitives; Added Jest snapshot tests for @emotion/styled; Added Jest snapshot tests for CSS generation and class name handling; Added Jest snapshot tests for CSS instance rendering; Added Jest snapshot tests for React package components; Added Jest snapshots for CSS generation tests; Added Jest snapshots for React compatibility layer; Added Jest snapshots for StyleSheet DOM behavior; Added comprehensive test coverage for @emotion/react; Added comprehensive test suite for @emotion/css; Added server-side rendering test snapshots; Added snapshot test for primitive rendering with object-style styles; Added snapshot tests for Emotion Native styled components; Added snapshot tests for Emotion primitives; Added snapshot tests for cache hydration and container options; Added source-map test suite for nested styles and media queries; Added test coverage for @emotion/eslint-plugin rules; Added test coverage for Emotion Native CSS and Styled primitives; Added test coverage for Emotion Primitives CSS and styled components; Added test coverage for server-side rendering and hydration utilities; Added test coverage for styled component behavior; Added test coverage for styled component behavior and warnings; Added test for hash package string input; Added test suite for Emotion instance API and server-side rendering; Added tests for @emotion/css rendering and warning behavior; Added tests for @emotion/jest matchers and serializers; Added tests for Emotion React compatibility and server-side rendering; Added tests for StyleSheet core functionality; Added tests for babel-plugin-jsx-pragmatic; Added tests for cache hydration, insertion points, and container options; Added tests for weak-memoize package; Expanded test coverage for the Emotion Babel plugin; Removed legacy Glamor Babel and snapshot tests; Updated Jest snapshot tests for Emotion serializer and matchers; Updated snapshot tests for styled components.
Dependencies
Emotion packages updated to latest versions with modern module exports
This release updates the core Emotion packages to their latest versions (e.g., @emotion/react 11.14.0, @emotion/styled 11.14.1, @emotion/babel-plugin 11.13.5) and modernizes their module resolution strategies. The package manifests now define comprehensive \exports\ fields that support conditional imports for various environments, including Node.js, browsers, and edge runtimes like Cloudflare Workers (\worker\, \workerd\) and Edge Light. Additionally, the \@emotion/jest\ package has been updated to support \@types/jest\ versions up to 30.x and includes a dedicated enzyme serializer entry point, while the \@emotion/babel-plugin\ now explicitly depends on \stylis\ 4.2.0 for CSS serialization.
(dependencies) · high confidence
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
How this codebase got here
Score
- CAI 48 → 44 (-3.8)
- Rubric changed (rubric-2026.09.11 → rubric-2026.09.18) — scores are not directly comparable.
Lenses
- Code Health 64 → 64 (+0.1)
- Architecture 95 → 94 (-0.4)
- Maturity 50 → 50 (+0.0)
- Readiness 44 → 35 (-9.6)
- Security 55 → 54 (-1.1)
- Accessibility 43 → 43 (+0.0)
- Performance 91 (new)
Resolved (6)
- Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
- Documentation: no architecture or design documentation (packages/eslint-plugin/README.md)
- Documentation: no installation or build instructions (README.md)
- Documentation: no usage examples (README.md)
- High CVE: [GHSA redacted] (yarn.lock)
- High CVE: [GHSA redacted] (yarn.lock)
New (14)
- Coverage not measured — JavaScript/TypeScript suite
- Documentation: written for insiders (packages/native/README.md)
- End-of-life runtime: Node.js 16
- High CVE: [CVE redacted] (yarn.lock)
- High CVE: [GHSA redacted] (yarn.lock)
- Malicious package: MAL-2023-462 (yarn.lock)
- Off the main sequence: @emotion/babel-plugin-jsx-pragmatic
- Off the main sequence: @emotion/hash
- Off the main sequence: @emotion/memoize
- Off the main sequence: @emotion/sheet
- Off the main sequence: @emotion/use-insertion-effect-with-fallbacks
- Off the main sequence: @emotion/utils
- Off the main sequence: @emotion/weak-memoize
- Unstable project @emotion/css
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
Survey your own repository
emotion-js/emotion was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.
About this page
- The score is its most recent published measurement, taken on 1 October 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
- Measured at commit b882bcba85132554992e4bd49e94c95939bbf810 — the exact code this score is about.
- Scored under rubric-2026.09.18 — the same rubric and the same method as every other entry in this index.
- Measured by watchdog.canine.dev using codehealth-analyzer preprod-e569280dd5e2.