emotion-js/emotion @emotion/css@11.0.0 on GitHub

Major Changes

b8476e08 #1675 Thanks @mitchellhamilton! - 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 @mitchellhamilton! - 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:
- 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.
cf56694 #2088 Thanks @Andarist! - UMD filenames have been changed.

Minor Changes

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.

Patch Changes

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]:
- @emotion/babel-plugin@11.0.0
- @emotion/cache@11.0.0
- @emotion/serialize@1.0.0
- @emotion/sheet@1.0.0
- @emotion/utils@1.0.0