NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #1739 most downloaded on npm
emotion's cache
Last release 2 years ago
no release in 18 months
Release timing varies
gaps range from 8 days to 1.2 years
Some releases are documented
notes for 27 of 52 stable releases
Nothing withdrawn
no release was ever pulled
9 years old
79 releases · first in 2018
Updated dependencies [ e1bf17e ]:
One column per quarter.
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 - #3219 `c72d279` Thanks @Andarist! - Removed incorrect tripleslash directive referencing node types
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.
#3215 a9f6912 Thanks @Andarist! - Added edge-light and workerd conditions to package.json manifest to better serve users using Vercel Edge and Cloudflare Workers.
Updated dependencies [`eed5e6cf`]:
### Patch Changes - #3025 `6bd13425` Thanks @Andarist! - Fixed a parsing issue with & within nested functions in declaration values by updating the un
### Patch Changes - #3019 `b02be0ba` Thanks @Andarist! - Fixed /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-
Updated dependencies [`61c66963`]:
### Patch Changes - #2864 `b9b8b749` Thanks @Andarist! - Fixed a regression that could cause a crash when looking for an ignoring comment for unsafe p
### Patch Changes - #2751 `0ffd6068` Thanks @Andarist, @kyoncy! - Fix /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-th
### Patch Changes - #2842 `28e9b499` Thanks @Andarist! - Thanks to the recently added exports field, the package now includes a worker condition that
28e9b499 Thanks @Andarist! - Thanks to the recently 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.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 [`6c2d7a60`]:
### Patch Changes - #2590 `1554a7e2` Thanks @Andarist! - Upgraded and pinned the version of Stylis - the CSS parser that Emotion uses under the hood.
```jsx const head = document.querySelector('head')
#2521 516fe458 Thanks @mnajdova! - Added insertionPoint option to the createCache. It can be used to insert rules after the specified element. For example, to use it with the CacheProvider from @emotion/react you can do this:
const head = document.querySelector('head')
// <meta name="emotion-insertion-point" content="">
const emotionInsertionPoint = document.createElement('meta')
emotionInsertionPoint.setAttribute('name', 'emotion-insertion-point')
emotionInsertionPoint.setAttribute('content', '')
head.appendChild(emotionInsertionPoint)
// the emotion sheets should be inserted right after the meta tag
const cache = createCache({
key: 'my-app',
insertionPoint: emotionInsertionPoint
})
function App() {
return (
<CacheProvider value={cache}>
<Main />
</CacheProvider>
)
}
9e82a991]:
Updated dependencies [`f2eda829`]:
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.### Patch Changes - #2361 `38f9d44f` Thanks @danieldelcore, @emmatown! - Fixed moving of client-side inserted style tags from Emotion 10 when intendin
38f9d44f Thanks @danieldelcore, @emmatown! - Fixed moving of client-side inserted style tags from Emotion 10 when intending to hydrate Emotion 11 styles resulting in losing styles in production`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:
105de5c8 #1572 Thanks @Andarist! - From now on key option is required. 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.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.4a891bf6 #1473 Thanks @jcharry! - The new prepend option can make Emotion add style tags at the beginning of the specified DOM container instead of the end.a8eb4e75 #1998 Thanks @Andarist! - Styles are now correctly extracted from the correct cache (key-sensitive) on the server.105de5c8 #1572 Thanks @Andarist! - Fixed issue with SSRed styles causing a React rehydration mismatch between server & client when cache was created in render.39be057b #1997 Thanks @Andarist! - From now on an empty rule will get inserted into the DOM in non-production environments if it gets created by the user. This helps to grab used keys from the (JS)DOM even for caches that have not inserted any actual rules to the document yet. It allows @emotion/jest to find those and serialize Emotion classes properly in situations like this:
import styled from '@emotion/styled/macro'
import { render } from '@testing-library/react'
const Div = styled.div``
test('foo', () => {
const { container } = render(<Div />)
expect(container).toMatchSnapshot()
})
Updated dependencies [42df3f3b, 4a891bf6, 1e4a741d, debaad9a, dfe79aca, 9e998e37, 9e998e37]:
`9c4ebc16` #2030 Thanks @Andarist! - Release candidate version.
`42df3f3b` #2028 Thanks @Andarist! - Fixed an issue with Emotion messing up style elements already processed by previously initialized Emotion copy.
`19df60b8` #2015 Thanks @Andarist! - Fixed an issue with rules nested in orphaned pseudo selectors not being adjusted correctly.
`a8eb4e75` #1998 Thanks @Andarist! - Styles are now correctly extracted from the correct cache (key-sensitive) on the server.
a8eb4e75 #1998 Thanks @Andarist! - Styles are now correctly extracted from the correct cache (key-sensitive) on the server.dfe98028 #2003 Thanks @Andarist! - Fixed an issue with orphaned pseudo selectors (e.g. :hover - where &:hover, div:hover, etc are not considered orphaned) having the context selector (the one computed based on all ancestor levels selectors) doubled in a descendant at-rule.39be057b #1997 Thanks @Andarist! - From now on an empty rule will get inserted into the DOM in non-production environments if it gets created by the user. This helps to grab used keys from the (JS)DOM even for caches that have not inserted any actual rules to the document yet. It allows @emotion/jest to find those and serialize Emotion classes properly in situations like this:
import styled from '@emotion/styled/macro'
import { render } from '@testing-library/react'
const Div = styled.div``
test('foo', () => {
const { container } = render(<Div />)
expect(container).toMatchSnapshot()
})
Updated dependencies [debaad9a, 39be057b]:
Updated dependencies [`dc1a0c5e`]:
dc1a0c5e]:
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.`105de5c8` #1572 Thanks @Andarist! - From now on key option is required. Please make sure it's unique (and not equal to 'css') as it's used for linkin
`dfe79aca` #1572 Thanks @Andarist! - Use sheet's rehydrate method for SSRed styles which inserts rehydrated styles at correct position when used in co
`4a891bf6` #1473 Thanks @jcharry! - Accept new prepend option to allow for adding style tags at the beginning of the specified DOM container.
`302bdba1` #1600 Thanks @emmatown! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major
Updated dependencies [`446e756`]:
446e756]:
`4c62ae9` #1698 Thanks @Andarist! - Add LICENSE file
Updated dependencies [c81c0033]:
10514a86 #1482 Thanks @emmatown! - Remove react native bundles in favour of different isBrowser detection
61e61edc #1412 Thanks @donysukardi! - Add explicit entries for react-native and sketch environments
c0eb604d #1419 Thanks @emmatown! - Update build tool
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
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 →