emotion-js/emotion @emotion/cache@11.0.0

on GitHub

Major Changes

• 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:

  • plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its README and the source code of core plugins.
  • vendor-prefixing was previously customizable using 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.
  • the prefixer is now just a plugin which happens to be included in the default 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.

Minor Changes

• 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.

Patch Changes

• 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]:

  • @emotion/sheet@1.0.0
  • @emotion/utils@1.0.0