v11.0.0

Compare Source

Major Changes

• b8476e08 #​1675 Thanks @​mitchellhamilton! - Rename @emotion/core to @emotion/react. Please change any imports of @emotion/core to import @emotion/react or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.

v10.3.1

Compare Source

Patch Changes

• #​2576 33c01578 Thanks @​Methuselah96! - Export Keyframes type to avoid TypeScript inserting import("@​emotion/serialize").Keyframes references into declaration files emitted based on a source files exporting keyframes result. This avoids issues with strict package managers that don't allow accessing undeclared dependencies.

v10.3.0

Compare Source

Minor Changes

• #​2566 122e9f11 Thanks @​eps1lon, @​Andarist! - Fixed hydration mismatches if React.useId (an upcoming API in React 18) is used within a tree below our components.

• #​2560 b5a26619 Thanks @​eps1lon! - Dropped usage of a deprecated SFC React type in favor of FC. The FC type has been introduced in @types/[email protected] so this version of this package is now a minimum requirement for TypeScript users.

v11.14.1

Compare Source

v11.14.0

Compare Source

Minor Changes

• #​3281 fc4d7bd Thanks @​Andarist! - Source code has been migrated to TypeScript. From now on type declarations will be emitted based on that, instead of being hand-written.

Patch Changes

• Updated dependencies [8dc1a6d, e1bf17e]:
  • @​emotion/cache@​11.14.0
  • @​emotion/use-insertion-effect-with-fallbacks@​1.2.0

v11.13.5

Compare Source

Patch Changes

• #​3270 77d930d Thanks @​emmatown! - Fix inconsistent hashes using development vs production bundles/exports conditions when using @emotion/babel-plugin with sourceMap: true (the default). This is particularly visible when using Emotion with the Next.js Pages router where the development condition is used when bundling code but not when importing external code with Node.js.

• Updated dependencies [77d930d]:

  • @​emotion/serialize@​1.3.3
  • @​emotion/cache@​11.13.5
  • @​emotion/utils@​1.4.2
  • @​emotion/babel-plugin@​11.13.5

v11.13.0

Compare Source

Minor Changes

• #​3198 d8ff8a5 Thanks @​Andarist! - Migrated away from relying on process.env.NODE_ENV checks to differentiate between production and development builds.

  Development builds (and other environment-specific builds) can be used by using proper conditions (see here). Most modern bundlers/frameworks already preconfigure those for the user so no action has to be taken.

  Default files should continue to work in all environments.

• #​3215 a9f6912 Thanks @​Andarist! - Added edge-light and workerd conditions to package.json manifest to better serve users using Vercel Edge and Cloudflare Workers.

Patch Changes

• Updated dependencies [d8ff8a5, a9f6912]:
  • @​emotion/serialize@​1.3.0
  • @​emotion/use-insertion-effect-with-fallbacks@​1.1.0
  • @​emotion/utils@​1.4.0

v11.12.0

Compare Source

Minor Changes

• #​2815 65a1eea Thanks @​srmagura! - Automatic labeling at runtime is now an opt-in feature. Define globalThis.EMOTION_RUNTIME_AUTO_LABEL = true before Emotion gets initialized to enable it.

Patch Changes

• #​3206 d1994c4 Thanks @​DiegoAndai! - Improved compatibility with the upcoming @types/react for React 19 where the global JSX namespace doesn't exist anymore

• #​3208 56109e7 Thanks @​Andarist! - Only forward defined refs to improve compatibility with the upcoming React 19

• Updated dependencies [9ca22c6, b1d16b0, 16d8a8c]:

  • @​emotion/serialize@​1.2.0
  • @​emotion/weak-memoize@​0.4.0
  • @​emotion/utils@​1.3.0
  • @​emotion/babel-plugin@​11.12.0
  • @​emotion/cache@​11.12.0

v11.11.5

Compare Source

Patch Changes

• #​3164 c9b84dbe Thanks @​Cerber-Ursi! - Reordered styled overloads to accommodate the recent change in @emotion/serialize's types.

• Updated dependencies [c9b84dbe]:

  • @​emotion/serialize@​1.1.4

v11.11.0

Compare Source

Minor Changes

• #​3031 336f3d50 Thanks @​Andarist! - Added support for cascade @layers by updating the underlying parser (stylis).

Patch Changes

• #​3029 eed5e6cf Thanks @​Andarist! - Fixed importing in Node ESM

• Updated dependencies [336f3d50, eed5e6cf]:

  • @​emotion/babel-plugin@​11.11.0
  • @​emotion/is-prop-valid@​1.2.1
  • @​emotion/serialize@​1.1.2
  • @​emotion/use-insertion-effect-with-fallbacks@​1.0.1
  • @​emotion/utils@​1.2.1

v11.10.8

Compare Source

Patch Changes

• #​3025 6bd13425 Thanks @​Andarist! - Fixed a parsing issue with & within nested functions in declaration values by updating the underlying parser (stylis).

• Updated dependencies [6bd13425, 6bd13425]:

  • @​emotion/babel-plugin@​11.10.8
  • @​emotion/cache@​11.10.8

v11.10.6

Compare Source

Patch Changes

• #​2985 4e172c2a Thanks @​emmatown! - Remove peer dependency on @babel/core

• Updated dependencies [4e172c2a]:

  • @​emotion/babel-plugin@​11.10.6

v11.10.5

Compare Source

Patch Changes

• #​2905 4c0005f6 Thanks @​p-m-p! - Do not warn about @emotion/react being loaded twice in Vitest as that might easily happen with mocked modules.

• #​2929 13afe030 Thanks @​Andarist! - The support for @container queries has been added by updating the underlying parser (stylis) .

• Updated dependencies [13afe030, c02b1214, d8a13bca]:

  • @​emotion/babel-plugin@​11.10.5
  • @​emotion/serialize@​1.1.1
  • @​emotion/cache@​11.10.5

v11.10.4

Compare Source

Patch Changes

• #​2867 89b6dbb3 Thanks @​Andarist! - Externalized code referencing React.useInsertionEffect to a separate @emotion/use-insertion-effect-with-fallbacks package. This package should be used in your defined externals if you bundle Emotion for whatever reason. It references useInsertionEffect in a very specific way that allows us to use it conditionally. However, if the code consuming Emotion is bundled as a library with Emotion in it then some bundlers might change the way in which we reference useInsertionEffect and that might create problems for bundlers used to consume the said library code. By externalizing this new package you can still bundle Emotion if you want to without running into this problem as you won't "destroy" the carefully crafted reference to useInsertionEffect in the process.

  Note that we don't recommend bundling Emotion. You should have very specific reasons to do so.

• Updated dependencies [89b6dbb3]:

  • @​emotion/use-insertion-effect-with-fallbacks@​1.0.0

v11.10.0

Compare Source

Minor Changes

• #​2819 bbad8c79 Thanks @​nicksrandall! - exports field has been added to the package.json manifest. It limits what files can be imported from a package but we've tried our best to allow importing all the files that were considered to be a part of the public API.

• #​2819 bbad8c79 Thanks @​nicksrandall! - Thanks to the added exports field, the package now includes a worker condition that can be utilized by properly configured bundlers when targeting worker-like environments. It fixes the issue with browser-specific files being prioritized by some bundlers when targeting workers.

Patch Changes

• Updated dependencies [bbad8c79, bbad8c79]:
  • @​emotion/babel-plugin@​11.10.0
  • @​emotion/cache@​11.10.0
  • @​emotion/serialize@​1.1.0
  • @​emotion/utils@​1.2.0
  • @​emotion/weak-memoize@​0.3.0

v11.9.3

Compare Source

Patch Changes

• #​2759 Thanks @​srmagura, @​Andarist! - Change the argument of the shouldForwardProp option of styled from PropertyKey to string in the TypeScript definitions.

• #​2333 3055efdd Thanks @​Andarist! - shouldForwardProp has been changed from being a bivariant method to a contravariant function - it improves the type-safety for those that type this option.

• #​2333 3055efdd Thanks @​antongolub! - FilteringStyledOptions and StyledOptions types no longer require a type argument for the Props generic.

• Updated dependencies [26e4e3e8, 5e81f213, 3055efdd]:

  • @​emotion/serialize@​1.0.4
  • @​emotion/is-prop-valid@​1.1.3

v11.8.1

Compare Source

Patch Changes

• #​2651 39ac5b99 Thanks @​Andarist! - Fixed a transpilation issue that caused useInsertionEffect to be referenced directly in the specifiers list of the import statement. This has caused build errors in the consuming tools since the import statement can only reference known exports of a module.

v11.8.0

Compare Source

Minor Changes

• #​2600 2f27156a Thanks @​Andarist! - Refactored code to use the upcoming React.useInsertionEffect when it's available (this is a new hook that is going to be introduced in React 18). This shouldn't have any effect on existing codebases and the change should be transparent.

Patch Changes

• Updated dependencies [d2531639, 2f27156a]:
  • @​emotion/is-prop-valid@​1.1.2
  • @​emotion/utils@​1.1.0

v11.6.0

Compare Source

Minor Changes

• #​2542 eb013d25 Thanks @​eps1lon! - Fixed hydration mismatches if React.useId (an upcoming API in React 18) is used within a tree below our components.

Patch Changes

• Updated dependencies [9861a18b]:
  • @​emotion/is-prop-valid@​1.1.1

v11.3.0

Compare Source

Patch Changes

• 734b36bf #​2199 Thanks @​FezVrasta! - Improved Flow type inference of props for inline functions passed to the styled factory.

• Updated dependencies [36a51c27, 662f0e0f, 36a51c27, 830dd0e6]:

  • @​emotion/babel-plugin@​11.3.0
  • @​emotion/serialize@​1.0.2

v11.1.5

Compare Source

Patch Changes

• d0293508 #​2240 Thanks @​wolszczak96! - as prop has been removed from TypeScript declarations for composite components. This prop has not actually been handled by default by styled for those components - to make styled handle it you need to provide a custom shouldForwardProp that doesn't forward the as prop.

• Updated dependencies [f3c2e81d]:

  • @​emotion/is-prop-valid@​1.1.0

v11.0.0

Compare Source

Major Changes

• 9e3671c4 #​2076 Thanks @​Andarist! - Removed runtime option that was introduced to this preset and deprecated shortly after that. If you want to configure runtime: "automatic", replace @emotion/babel-preset-css-prop with @babel/preset-react and @emotion/babel-plugin. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset

• c5b12d90 #​1220 Thanks @​mitchellhamilton! - Removed support for the instances option, any usage of it should be replaced with the importMap option

• c7850e61 #​1656 Thanks @​Andarist! - autoLabel option no longer is a simple boolean. Instead we accept now 3 values: dev-only (the default), always and never.

  Each possible value for this option produces different output code:

  • with dev-only we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
  • with always we always add labels when possible,
  • with never we disable this entirely and no labels are added.

Minor Changes

• c5b12d90 #​1220 Thanks @​mitchellhamilton! - Added the importMap option which allows you to tell @emotion/babel-plugin what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms

• c672175b #​1130 Thanks @​jtmthf! - Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime.

• 0a4a22ff #​1651 Thanks @​Andarist! - Allow labelFormat option to be a function.

Patch Changes

• Updated dependencies [c672175b, c5b12d90, 5e803106, b8476e08, 0a4a22ff, b0ad4f0c, 9e998e37, c65c5d88, 5c7ec859, c7850e61, b7d21373, c5b12d90, 828111cd]:
  • @​emotion/babel-plugin@​11.0.0

v10.3.0

Compare Source

Minor Changes

• #​2566 122e9f11 Thanks @​eps1lon, @​Andarist! - Fixed hydration mismatches if React.useId (an upcoming API in React 18) is used within a tree below our components.

• #​2560 b5a26619 Thanks @​eps1lon! - Dropped usage of a deprecated SFC React type in favor of FC. The FC type has been introduced in @types/[email protected] so this version of this package is now a minimum requirement for TypeScript users.

Patch Changes

• Updated dependencies [122e9f11, b5a26619]:
  • @​emotion/styled-base@​10.3.0