NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #4255 most downloaded on npm
The Next Generation of CSS-in-JS.
Last release 2 years ago
no release in 18 months
Release timing varies
gaps range from 8 days to 13 months
Some releases are documented
notes for 18 of 48 stable releases
Nothing withdrawn
no release was ever pulled
9 years old
79 releases · first in 2018
Updated dependencies [ 77d930d ]:
#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]:
### Patch Changes - #3262 `b10de75` Thanks @emmatown! - Fix Cannot find name 'EmotionCache' type error
One column per quarter.
Development builds (and other environment-specific builds) can be used by using proper conditions (see here). Most modern bundlers/frameworks already
#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.
Updated dependencies [`9ca22c6`, `16d8a8c`, `52aadc6`, `52aadc6`]:
85772c3 Thanks @emmatown! - Source code has been migrated to TypeScript. From now on type declarations will be emitted based on that, instead of being hand-written.#2558 85772c3 Thanks @emmatown! - Fixed options parameter to createEmotion from @emotion/css/create-instance incorrectly being marked as optional when it's required.
Updated dependencies [9ca22c6, 16d8a8c, 52aadc6, 52aadc6]:
### Patch Changes - #3057 `8f665262` Thanks @emmatown! - Fix @emotion/css/create-instance types in TypeScript module resolution modes that support the
Updated dependencies [`336f3d50`, `eed5e6cf`, `336f3d50`]:
Updated dependencies [`6bd13425`, `6bd13425`]:
Updated dependencies [`4e172c2a`]:
Updated dependencies [`13afe030`, `61c66963`, `c02b1214`, `d8a13bca`]:
Updated dependencies [`bbad8c79`, `bbad8c79`]:
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.Updated dependencies [`d9357621`]:
#2700 d9357621 Thanks @arturmuller! - Fixed a false positive warning for content properties that included var().
Updated dependencies [d9357621]:
Updated dependencies [`1554a7e2`]:
Updated dependencies [`e5beae8e`, `9ae4a91a`, `f2eda829`]:
#2498 e5beae8e Thanks @Andarist! - Fixed an edge case issue with incorrect rules being generated. When a context selector (&) was used not at the beginning of a selector (which is not valid SCSS but is allowed by the Stylis parser that we are using) within a group of selectors containing a pseudoclass then it was not replaced correctly with the current context selector.
Updated dependencies [e5beae8e, 9ae4a91a, f2eda829]:
`704b0092` #2180 Thanks @Andarist! - Fixed an issue with global styles containing pseudo selectors in at-rules not being able to be inserted.
It has been completely rewritten and comes with some breaking changes. The most notable ones that might affect Emotion users are:
b8476e08 #1675 Thanks @emmatown! - Rename emotion to @emotion/css. Please change any imports of emotion to import @emotion/css or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.b8476e08 #1675 Thanks @emmatown! - Move create create-emotion to @emotion/css/create-instance. Please change any imports of create-emotion to import @emotion/css/create-instance or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.105de5c8 #1572 Thanks @Andarist! - The key option is now required when creating a custom instance of a cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.5bea60b1 #1807 Thanks @Andarist! - Removed support for interpolating class names returned from css, so this will no longer be possible:
const cls1 = css`
color: blue;
`
const cls2 = css`
& .${cls1} {
color: red;
}
`
This has already been deprecated for the lifetime of v10.
843bfb11 #1630 Thanks @Andarist! - Removed default export from @emotion/css - it's main purpose was to allow css to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. @emotion/react/macro has been added to account for this use case and appropriate changes has been made to @emotion/babel-plugin to facilitate those changes.
If you have used @emotion/css directly (it was always reexported from @emotion/react) or you have been using its macro then you should update your code like this:
-import css from '@emotion/css'
+import { css } from '@emotion/react'
// or
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
You can also use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin to do this for you.
9e998e37 #1817 Thanks @Andarist! - The parser we use (Stylis) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀
It has been completely rewritten and comes with some breaking changes. The most notable ones that might affect Emotion users are:
prefix option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The prefix option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.stylisPlugins. If you plan to use custom stylisPlugins and you want to have your styles prefixed automatically you must include prefixer in your custom stylisPlugins. You can import prefixer from the stylis module to do that.@import rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.5d692a6a #1956 Thanks @eps1lon! - Upgraded csstype dependency to its v3. This is what we use to provide TypeScript typings for object styles. The upgrade should not affect any consuming code but it's worth mentioning if any edge case scenarios arise.6d32d82b #1848 Thanks @osdiab! - Added speedy method to the TS type declaration of the sheet object available on Emotion instances. In addition to that - StyleSheet type is no longer exported from this package and instead CSSStyleSheet is available now. The StyleSheet type might still be imported from @emotion/sheet, but it has no speedy method and thus it's not the same as what is available in this package as CSSStyleSheet.
Updated dependencies [c672175b, a8eb4e75, e3d7db87, 8a896a31, 42df3f3b, c5b12d90, 4a891bf6, 5e803106, b8476e08, 1e4a741d, debaad9a, 0a4a22ff, 5c55fd17, b0ad4f0c, 9e998e37, c65c5d88, 5c7ec859, a085003d, dfe79aca, c7850e61, 105de5c8, 39be057b, b7d21373, 105de5c8, 5d692a6a, c5b12d90, 9e998e37, c6431074, 828111cd, 9e998e37, 9e998e37]:
`9c4ebc16` #2030 Thanks @Andarist! - Release candidate version.
Updated dependencies [`42df3f3b`, `42df3f3b`]:
Updated dependencies [`76e3dc4d`]:
76e3dc4d]:
Updated dependencies [`a8eb4e75`, `dfe98028`, `debaad9a`, `39be057b`, `39be057b`]:
`5d692a6a` #1956 Thanks @eps1lon! - Upgraded `csstype` dependency to its v3. This is what we use to provide TypeScript typings for object styles. The
`6d32d82b` #1848 Thanks @osdiab! - Added speedy method to the TS type declaration of the sheet object available on Emotion instances. In addition to t
6d32d82b #1848 Thanks @osdiab! - Added speedy method to the TS type declaration of the sheet object available on Emotion instances. In addition to that - StyleSheet type is no longer exported from this package and instead CSSStyleSheet is available now. The StyleSheet type might still be imported from @emotion/sheet, but it has no speedy method and thus it's not the same as what is available in this package as CSSStyleSheet.It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:
9e998e37 #1817 Thanks @Andarist! - The parser we use (Stylis) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀
It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:
prefix option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The prefix option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.stylisPlugins. If you plan to use custom stylisPlugins and you want to have your styles prefixed automatically you must include prefixer in your custom stylisPlugins. You can import prefixer from the stylis module to do that.@import rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.This has already been deprecated for the lifetime of v10.
5bea60b1 #1807 Thanks @Andarist! - Removed support for interpolating class names returned from css, so this will no longer be possible:
const cls1 = css`
color: blue;
`
const cls2 = css`
& .${cls1} {
color: red;
}
`
This has already been deprecated for the lifetime of v10.
105de5c8 #1572 Thanks @Andarist! - From now on key option is required when creating a custom instance. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.Updated dependencies [`f08ef5a3`]:
f08ef5a3]:
`b8476e08` #1675 Thanks @emmatown! - Move create create-emotion to @emotion/css/create-instance. Please change any imports of create-emotion to import
b8476e08 #1675 Thanks @emmatown! - Move create create-emotion to @emotion/css/create-instance. Please change any imports of create-emotion to import @emotion/css/create-instance or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.b8476e08 #1675 Thanks @emmatown! - Rename emotion to @emotion/css. Please change any imports of emotion to import @emotion/css or use the @emotion/pkg-renaming ESLint rule from @emotion/eslint-plugin.Nothing published for this version
Nothing published for this version
Nothing published for this version
`302bdba1` #1600 Thanks @emmatown! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major
`4c62ae9` #1698 Thanks @Andarist! - Add LICENSE file
Nothing published for this version
c0eb604d #1419 Thanks @emmatown! - Update build tool
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Emotion 10 is a big change that we're really excited about with improvements to the css prop, a Global component for dynamic global styles, zero confi
Emotion 10 is a big change that we're really excited about with improvements to the css prop, a Global component for dynamic global styles, zero config SSR, lots of small fixes and improvements and more with an incremental adoption strategy. For a higher-level overview, read the Medium article on Emotion 10. For a migration guide, visit the migrating to Emotion 10 page on emotion.sh
babel-plugin-emotion
babel-plugin-emotion in some casesbabel-plugin-emotionchannel and createBroadcast exports from emotion-theming have been removedextractStatic option to babel-plugin-emotion has been removedcreate-emotion-server accepts a cache instead of an emotion instancejsx can be manually imported from @emotion/core(which can be automated with eslint-plugin-emotion) or babel-plugin-jsx-pragmatic can be used.create-emotion doesn't return a caches property and instead returns a cache property which is the same return value as @emotion/cacheimportedNames option to babel-plugin-emotion is gonehoist option is gone, hoisting always happensNothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Your coding agent can read these notes before it upgrades. Set up the MCP server →