-
#2700
d9357621
Thanks @arturmuller! - Fixed a false positive warning forcontent
properties that includedvar()
. -
Updated dependencies [
d9357621
]:- @emotion/serialize@1.0.3
-
#2590
1554a7e2
Thanks @Andarist! - Upgraded and pinned the version of Stylis - the CSS parser that Emotion uses under the hood. -
Updated dependencies [
1554a7e2
]:- @emotion/babel-plugin@11.7.1
- @emotion/cache@11.7.1
-
#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
]:- @emotion/cache@11.5.0
- @emotion/sheet@1.0.3
-
704b0092
#2180 Thanks @Andarist! - Fixed an issue with global styles containing pseudo selectors in at-rules not being able to be inserted. -
Updated dependencies [
704b0092
]:- @emotion/cache@11.1.3
b8476e08
#1675 Thanks @mitchellhamilton! - Renameemotion
to@emotion/css
. Please change any imports ofemotion
to import@emotion/css
or use the@emotion/pkg-renaming
ESLint rule from@emotion/eslint-plugin
.
b8476e08
#1675 Thanks @mitchellhamilton! - Move createcreate-emotion
to@emotion/css/create-instance
. Please change any imports ofcreate-emotion
to import@emotion/css/create-instance
or use the@emotion/pkg-renaming
ESLint rule from@emotion/eslint-plugin
.
105de5c8
#1572 Thanks @Andarist! - Thekey
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 fromcss
, 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 allowcss
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. Theprefix
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 customstylisPlugins
and you want to have your styles prefixed automatically you must include prefixer in your customstylisPlugins
. You can importprefixer
from thestylis
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! - Upgradedcsstype
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! - Addedspeedy
method to the TS type declaration of thesheet
object available on Emotion instances. In addition to that -StyleSheet
type is no longer exported from this package and insteadCSSStyleSheet
is available now. TheStyleSheet
type might still be imported from@emotion/sheet
, but it has nospeedy
method and thus it's not the same as what is available in this package asCSSStyleSheet
. -
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
- Updated dependencies [
9c4ebc16
]:- @emotion/babel-plugin@11.0.0-rc.0
- @emotion/cache@11.0.0-rc.0
- @emotion/serialize@1.0.0-rc.0
- @emotion/sheet@1.0.0-rc.0
- @emotion/utils@1.0.0-rc.0
- Updated dependencies [
42df3f3b
,42df3f3b
]:- @emotion/sheet@1.0.0-next.5
- @emotion/cache@11.0.0-next.19
- Updated dependencies [
76e3dc4d
]:- @emotion/serialize@1.0.0-next.5
- @emotion/babel-plugin@11.0.0-next.17
- Updated dependencies [
a8eb4e75
,dfe98028
,debaad9a
,39be057b
,39be057b
]:- @emotion/cache@11.0.0-next.16
- @emotion/utils@1.0.0-next.1
- @emotion/sheet@1.0.0-next.4
- @emotion/serialize@0.11.15-next.4
- @emotion/babel-plugin@11.0.0-next.16
5d692a6a
#1956 Thanks @eps1lon! - Upgradedcsstype
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.
- Updated dependencies [
dc1a0c5e
,5d692a6a
]:- @emotion/sheet@1.0.0-next.3
- @emotion/serialize@1.0.0-next.3
- @emotion/cache@11.0.0-next.15
- @emotion/babel-plugin@11.0.0-next.15
6d32d82b
#1848 Thanks @osdiab! - Addedspeedy
method to the TS type declaration of thesheet
object available on Emotion instances. In addition to that -StyleSheet
type is no longer exported from this package and insteadCSSStyleSheet
is available now. TheStyleSheet
type might still be imported from@emotion/sheet
, but it has nospeedy
method and thus it's not the same as what is available in this package asCSSStyleSheet
.
-
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:
- 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. Theprefix
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. - Prefixer is now just a plugin which happens to be put in default
stylisPlugins
. If you plan to use customstylisPlugins
and you want to have your styles prefixed automatically you must include prefixer in your customstylisPlugins
. You can importprefixer
from thestylis
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.
- Updated dependencies [
91046a8c
,5e803106
,9e998e37
,9e998e37
,9e998e37
,9e998e37
]:- @emotion/sheet@1.0.0-next.2
- @emotion/babel-plugin@11.0.0-next.13
- @emotion/cache@11.0.0-next.13
- @emotion/utils@1.0.0-next.0
- @emotion/serialize@0.11.15-next.2
-
5bea60b1
#1807 Thanks @Andarist! - Removed support for interpolating class names returned fromcss
, 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 onkey
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 [
e3d7db87
,5c7ec859
,105de5c8
,e3d7db87
,105de5c8
]:- @emotion/serialize@1.0.0-next.1
- @emotion/babel-plugin@11.0.0-next.12
- @emotion/cache@11.0.0-next.12
- Updated dependencies [
f08ef5a3
]:- @emotion/serialize@0.11.15-next.4
- @emotion/babel-plugin@11.0.0-next.11
b8476e08
#1675 Thanks @mitchellhamilton! - Move createcreate-emotion
to@emotion/css/create-instance
. Please change any imports ofcreate-emotion
to import@emotion/css/create-instance
or use the@emotion/pkg-renaming
ESLint rule from@emotion/eslint-plugin
.
b8476e08
#1675 Thanks @mitchellhamilton! - Renameemotion
to@emotion/css
. Please change any imports ofemotion
to import@emotion/css
or use the@emotion/pkg-renaming
ESLint rule from@emotion/eslint-plugin
.
- Updated dependencies [
b8476e08
,1e4a741d
,dfe79aca
,c7850e61
,dfe79aca
]:- @emotion/babel-plugin@11.0.0-next.10
- @emotion/sheet@0.10.0-next.1
- @emotion/cache@11.0.0-next.10
302bdba1
#1600 Thanks @mitchellhamilton! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number
- Updated dependencies [
b0ad4f0c
,302bdba1
]:- babel-plugin-emotion@11.0.0-next.0
- create-emotion@11.0.0-next.0
4c62ae9
#1698 Thanks @Andarist! - Add LICENSE file- Updated dependencies [
4c62ae9
]:- babel-plugin-emotion@10.0.27
- create-emotion@10.0.27
- @emotion/stylis@0.8.5
-
1ae94891
#1583 Thanks @Andarist! - Export TS & Flow types for emotion/macro -
Updated dependencies [
3927293d
,b3a0f148
]:- babel-plugin-emotion@10.0.23
- c0eb604d #1419 Thanks @mitchellhamilton! - Update build tool