- #2609
242f7d8c
Thanks @Andarist! - Added@emotion/babel-plugin
as a dependency - this is an actual dependency of the@emotion/react/macro
entrypoint and it has to be explicitly declared to fix compatibility with strict package managers.
- #2615
3d672acd
Thanks @srmagura! - Fix an edge case where runtime label extraction in class components led to invalid class names in Firefox. This only affected the development build of Emotion.
- #2577
04681a5f
Thanks @Methuselah96! - ExportKeyframes
type to avoid TypeScript insertingimport("@emotion/serialize").Keyframes
references into declaration files emitted based on a source files exportingkeyframes
result. This avoids issues with strict package managers that don't allow accessing undeclared dependencies.
-
#2590
1554a7e2
Thanks @Andarist! - Upgraded and pinned the version of Stylis - the CSS parser that Emotion uses under the hood. -
Updated dependencies [
1554a7e2
]:- @emotion/cache@11.7.1
- #2534
57be9e8c
Thanks @srmagura! - Changed the implementation of the runtime label extraction in elements using the css prop (that only happens in development) to one that should yield more consistent results across browsers. This fixes some minor issues with React reporting hydration mismatches that wouldn't happen in production.
- #2542
eb013d25
Thanks @eps1lon! - Fixed hydration mismatches ifReact.useId
(an upcoming API in React 18) is used within a tree below our components.
-
#2551
99fcea04
Thanks @Andarist! - Shorten the path of the "private"isolated-hoist-non-react-statics-do-not-use-this-in-your-code
entrypoint to avoid exeeding path limitations on Windows. -
Updated dependencies [
9e82a991
,516fe458
]:- @emotion/sheet@1.1.0
- @emotion/cache@11.6.0
- #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.
-
#2500
eda5e687
Thanks @Jarred-Sumner! - Fix error loading @emotion/react in alternative JS environments -
Updated dependencies [
e5beae8e
,9ae4a91a
,f2eda829
]:- @emotion/cache@11.5.0
- @emotion/sheet@1.0.3
- #2441
24557d9d
Thanks @garronej! - Exposed__unsafe_useEmotionCache
which can be used to access the current Emotion's cache in an easier way than before. Using this might break 0-config SSR and is not recommended to be used unless there you know what you are doing and you are OK with the mentioned downside.
- #2424
cd25b62d
Thanks @tills13! - Use theme context when rendering components at all times. This removes a conditional usage of a React hook that could break Rules of Hooks in some scenarios.
-
#2428
a69929d6
Thanks @eps1lon! - Added display names to public React contexts in development builds. This helps to recognize them in React Developer Tools. -
Updated dependencies [
405af5ca
]:- @emotion/sheet@1.0.2
-
#2334
7d9e74f8
Thanks @Andarist! - The Global component no longer replaces style elements from server-rendering on first mount and instead reuses the server-side rendered style element -
Updated dependencies [
38f9d44f
]:- @emotion/cache@11.4.0
4d2e732e
#2206 Thanks @jimmydief! - Added export forSerializedStyles
Flow type.
71ca9be3
#2181 Thanks @101arrowz! - Fixed some typing issues with React components with custom generic render functions.
-
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
3f8bf70e
#2132 Thanks @dcastil! -displayName
s have been added toGlobal
andClassNames
components so React Developer Tools should display those better now.
1ee34005
#2122 Thanks @dcastil! - Improved label extraction from the stack traces to handle components with numbers in their names.
-
e5843530
#2140 Thanks @hasparus! - Fixed an issue withcss
prop type not being added to all components that accept a stringclassName
correctly. -
Updated dependencies [
5469d003
]:- @emotion/sheet@1.0.1
fdd46bdf
#2112 Thanks @Andarist! - Fixed the latest tree-shakeability improvements by adding"sideEffects": false
to all internalpackage.json
files as well. This fixeshoist-non-react-statics
not being dropped correctly despite of the latest improvements.
0e465d1c
#2101 Thanks @Andarist! - Improved tree-shakeability of the package. The main benefit is that bundlers should be able now to drophoist-non-react-statics
if you don't actually use ourwithTheme
export.
b8476e08
#1675 Thanks @mitchellhamilton! - Rename@emotion/core
to@emotion/react
. Please change any imports of@emotion/core
to import@emotion/react
or use the@emotion/pkg-renaming
ESLint rule from@emotion/eslint-plugin
.
cbb8b796
#1628 Thanks @Andarist! -emotion-theming
has been removed and all its exports were moved to@emotion/react
package. Please import them like thisimport { useTheme, ThemeProvider, withTheme } from '@emotion/react'
from now on.
-
a72e6dc
#1501 Thanks @JakeGinnivan! - TypeScript types have been significantly restructured. These changes:- reduce build times when using Emotion, especially in larger projects
- it's no longer necessary to manually specify generic parameters for your Emotion components in many cases
- union types as props are better supported and should be inferred properly
- the
css
function has been restricted to prevent passing invalid types styled
's generic parameter has been changed, if you were specifying theComponentType
you will need to remove that generic parameterstyled
no longer takes a secondExtraProps
parameter - instead of that move it to after thestyled
call. So instead of writingstyled<typeof MyComponent, ExtraProps>(MyComponent)({})
you should now be writingstyled(MyComponent)<ExtraProps>({})
If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred.
-
c6431074
#1609 Thanks @tomsseisums! - It's now easier to provide a type forTheme
. Instead of creating custom instances (like before) you can augment the builtinTheme
interface like this:import '@emotion/react' declare module '@emotion/react' { export interface Theme { primaryColor: string secondaryColor: string } }
-
f57a7229
#1941 Thanks @Andarist! - The way in which we provide TypeScript support for thecss
prop has changed. Based on the usage of our JSX factories, we can add support forcss
prop only for components that supportclassName
prop (as our JSX factory functions take the providedcss
prop, resolve it and pass the generatedclassName
to the rendered component).For the classic runtime this has been implemented using technique described here. What is important - we no longer extend any global interfaces, so people shouldn't bump anymore into type conflicts for the
css
prop when using different libraries withcss
prop support, such asstyled-components
.For the automatic runtime this has been implemented by exporting
JSX
namespace from the appropriate entries but this is only supported in TypeScript 4.1 or higher.However, if you are stuck with older version of TypeScript or using the classic runtime implicitly by using our
@emotion/babel-preset-css-prop
then it's not possible to leverage leveragecss
prop support being added conditionally based on a type of rendered component. For those cases we have added a special file that can be imported once to add support for thecss
prop globally, for all components. Use it like this:/// <reference types="@emotion/react/types/css-prop" />
In this particular case we are forced to extend the existing
React.Attributes
interface. Previously we've been extending bothReact.DOMAttributes<T>
andJSX.IntrinsicAttributes
. This change is really minor and shouldn't affect any consuming code. -
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.
79036056
#967 Thanks @mitchellhamilton! - Use hooks internally for improved bundle size and a better tree in React DevTools
-
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.
-
105de5c8
#1572 Thanks @Andarist! -[data-emotion]
attribute on SSRed styled has changed. You should never rely on it though. -
cf56694
#2088 Thanks @Andarist! - UMD filenames have been changed.
c672175b
#1130 Thanks @jtmthf! - Support functions in arrays passed tocss
prop andGlobal
's styles prop. This allows for composition of theme-accepting functions.
828111cd
#1639 Thanks @Andarist! -Global
imported from macro entry (@emotion/react/macro
) gets source maps generated now when inline css-less expression is used as value of thestyles
prop.
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.
-
7dea6d7a
#1734 Thanks @Andarist! - Fixed styles inserted by<Global/>
component not inheritingspeedy
option from a cache passed to a wrapping<CacheProvider/>
. -
5c55fd17
#1653 Thanks @Andarist! - Fix to what location generated source maps are pointing in case of composed styles.
75e2f9e1
#1810 Thanks @Andarist! - Add a dev-only warning about styles created withcss
from@emotion/react
being passed tocx
from<ClassNames/>
.
-
d62d9101
#1677 Thanks @ajs139! - Warn if@emotion/react
is initialized more than once in the same development environment. -
a085003d
#1613 Thanks @Andarist! - Add missing#__PURE__
annotations
58dc08a6
#1837 Thanks @arcanis! - Fixed TS compatibility under PnP environments by making@types/react
an optional peer dependency.
- Updated dependencies [
a8eb4e75
,e3d7db87
,8a896a31
,42df3f3b
,4a891bf6
,1e4a741d
,debaad9a
,5c55fd17
,a085003d
,dfe79aca
,105de5c8
,39be057b
,105de5c8
,5d692a6a
,9e998e37
,c6431074
,9e998e37
,9e998e37
]:- @emotion/cache@11.0.0
- @emotion/serialize@1.0.0
- @emotion/sheet@1.0.0
- @emotion/utils@1.0.0
- Updated dependencies [
9c4ebc16
]:- @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
-
58b2bbca
#1981 Thanks @Andarist! - Changed the key of the global flag that helps us identify that@emotion/react
has been loaded more than once to include the current major version of@emotion/react
. -
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
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
58dc08a6
#1837 Thanks @arcanis! - Fixed TS compatibility under PnP environments by making@types/react
an optional peer dependency.
-
f57a7229
#1941 Thanks @Andarist! - The way in which we provide TypeScript support forcss
prop has changed. Based on usage of our jsx pragma we are able to add support forcss
prop only for components that supportclassName
prop (as ourjsx
factory function takes providedcss
prop, resolves it and pass the generatedclassName
to the rendered component). This has been implemented using technique described here. What is important - we no longer extend any global interfaces, so people shouldn't bump anymore into type conflicts for thecss
prop when using different libraries with thecss
prop support, such asstyled-components
.However, it's not possible to leverage
css
prop support being added conditionally based on a type of rendered component when one is not using our jsx pragma. For those cases when people use our pragma implicitly (for example when using our@emotion/babel-preset-css-prop
) we have added special file that can be imported once to add support for thecss
prop globally, for all components. Use it like this:import {} from '@emotion/react/types/css-prop'
In this particular case we are forced to extend the existing
React.Attributes
interface. Previously we've been extending bothReact.DOMAttributes<T>
andJSX.IntrinsicAttributes
. This change is really minor and shouldn't affect any consuming code. -
Updated dependencies [
4d3b60d0
,58dc08a6
,6d32d82b
]:- @emotion/styled@11.0.0-next.14
- @emotion/css@11.0.0-next.14
- @emotion/server@11.0.0-next.14
-
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
,9e998e37
,9e998e37
,9e998e37
]:- @emotion/sheet@1.0.0-next.2
- @emotion/cache@11.0.0-next.13
- @emotion/css@11.0.0-next.13
- @emotion/styled@11.0.0-next.13
- @emotion/utils@1.0.0-next.0
- @emotion/server@11.0.0-next.13
- @emotion/serialize@0.11.15-next.2
105de5c8
#1572 Thanks @Andarist! -[data-emotion]
attribute on SSRed styled has changed. You should never rely on it though.
7dea6d7a
#1734 Thanks @Andarist! - Fixed styles inserted by<Global/>
component not inheritingspeedy
option from a cache passed to a wrapping<CacheProvider/>
.
be2eb614
#1806 Thanks @Andarist! - Do not warn about@emotion/react
being loaded twice in Jest. For some reason Jest sometimes evaluates modules twice whenjest.mock
is being called.
-
75e2f9e1
#1810 Thanks @Andarist! - Add a dev-only warning about styles created withcss
from@emotion/react
being passed tocx
from<ClassNames/>
. -
Updated dependencies [
e3d7db87
,105de5c8
,105de5c8
,5bea60b1
,105de5c8
,105de5c8
]:- @emotion/serialize@1.0.0-next.1
- @emotion/server@11.0.0-next.12
- @emotion/styled@11.0.0-next.12
- @emotion/cache@11.0.0-next.12
- @emotion/css@11.0.0-next.12
- Updated dependencies [
f08ef5a3
,b79781f8
]:- @emotion/serialize@0.11.15-next.4
- @emotion/styled@11.0.0-next.11
- @emotion/css@11.0.0-next.11
b8476e08
#1675 Thanks @mitchellhamilton! - Rename@emotion/core
to@emotion/react
. Please change any imports of@emotion/core
to import@emotion/react
or use the@emotion/pkg-renaming
ESLint rule from@emotion/eslint-plugin
.
affed3dd
#1702 Thanks @Andarist! - Fix issue with published TypeScript test files augmenting Theme interface.
d62d9101
#1677 Thanks @ajs139! - Warn if @emotion/react is initialized more than once in the same development environment.- Updated dependencies [
1e4a741d
,2fa7a213
,b8476e08
,dfe79aca
,b8476e08
,b8476e08
,b8476e08
,dfe79aca
]:- @emotion/sheet@0.10.0-next.1
- @emotion/styled@11.0.0-next.10
- @emotion/css@11.0.0-next.10
- @emotion/server@11.0.0-next.10
- @emotion/cache@11.0.0-next.10
5c55fd17
#1653 Thanks @Andarist! - Fix to what location generated source maps are pointing in case of composed styles.- Updated dependencies [
5c55fd17
,729ef9d8
]:- @emotion/serialize@0.11.15-next.2
- @emotion/styled@11.0.0-next.7
-
843bfb11
#1630 Thanks @Andarist! - Removed@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/core/macro
has been added to account for this use case and appropriate changes has been made tobabel-plugin-emotion
to facilitate those changes.If you have used
@emotion/css
directly (it was always reexported from@emotion/core
) or you have been using its macro then you should update your code like this:-import css from '@emotion/css' +import { css } from '@emotion/core' // or -import css from '@emotion/css/macro' +import { css } from '@emotion/core/macro'
-
cbb8b796
#1628 Thanks @Andarist! -emotion-theming
has been removed and all its exports were moved to@emotion/core
package. Please import them like thisimport { useTheme, ThemeProvider, withTheme } from '@emotion/core'
from now on.
828111cd
#1639 Thanks @Andarist! -Global
imported from macro entry (@emotion/core/macro
) gets source maps generated now when inline css-less expression is used as value of thestyles
prop.
- Updated dependencies [
923ded01
,4a891bf6
,843bfb11
]:- @emotion/styled@11.0.0-next.6
- @emotion/cache@11.0.0-next.6
- @emotion/sheet@0.10.0-next.0
- @emotion/css@11.0.0-next.6
- Updated dependencies [
ad77ed24
,99c6b7e2
]:- @emotion/styled@11.0.0-next.5
- emotion-theming@11.0.0-next.5
- Updated dependencies [
e6e079c3
]:- @emotion/styled@11.0.0-next.4
- emotion-theming@11.0.0-next.4
a085003d
#1613 Thanks @Andarist! - Add missing#__PURE__
annotations- Updated dependencies [
8a896a31
,a085003d
,f9feab1a
]:- @emotion/serialize@0.11.15-next.1
- @emotion/styled@11.0.0-next.3
- @emotion/css@11.0.0-next.3
- emotion-theming@11.0.0-next.3
79036056
#967 Thanks @mitchellhamilton! - Use hooks internally for improved bundle size and a better tree in React DevTools
- Updated dependencies [
79036056
,79036056
]:- @emotion/styled@11.0.0-next.2
- emotion-theming@11.0.0-next.2
- Updated dependencies [
1eaa3a38
,22935470
]:- @emotion/css@11.0.0-next.1
- emotion-theming@11.0.0-next.1
- @emotion/serialize@1.0.0-next.0
- @emotion/styled@11.0.0-next.1
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 [
302bdba1
]:- @emotion/cache@11.0.0-next.0
- @emotion/css@11.0.0-next.0
- emotion@11.0.0-next.0
- emotion-server@11.0.0-next.0
- emotion-theming@11.0.0-next.0
- @emotion/styled@11.0.0-next.0
-
fe30cbd6
#2066 Thanks @Andarist! - Fixed an issue with React giving warning about static children not having unique keys when using the classicjsx
factory. This example illustrates the situation in which this has been incorrectly happening:<div css={{ color: 'hotpink' }}> <div /> <div /> </div>
-
71514b06
#1970 Thanks @FLGMwt! - Support for the new JSX runtimes has been added. They require compatible React versions and shouldn't be manually used.To use them you can use the new
@jsxImportSource @emotion/core
pragma instead of the old@jsx jsx
or you can use@emotion/babel-preset-css-prop
with{ runtime: 'automatic' }
option to have it handled automatically for you for the whole project.
2cf3b16b
#1973 Thanks @santialbo! - Fixed label extraction from the stack traces in node for components wrapped inReact.forwardRef
. This has affected only development builds.
4979ebb2
#1966 Thanks @chnakamura! - Fixed label extraction from the stack traces in Chrome in certain scenarios. This has affected only development builds.
d0b2a94
#1714 Thanks @Andarist! - Fixed label extraction from the stack traces in FireFox and Safari. We have failed to match a label in Emotion wrappers like Theme UI which caused SSR mismatches in mentioned browsers. This has affected only development builds.
4c62ae9
#1698 Thanks @Andarist! - Add LICENSE file- Updated dependencies [
4c62ae9
]:- @emotion/cache@10.0.27
- @emotion/css@10.0.27
- emotion-server@10.0.27
- emotion-theming@10.0.27
- emotion@10.0.27
- @emotion/serialize@0.11.15
- @emotion/sheet@0.9.4
- @emotion/styled@10.0.27
- @emotion/utils@0.11.3
2fc75f26
#1548 Thanks @Andarist! - Accept objects asclassName
in jsx-created components (they are stringified) to match React behavior
10211951
#1553 Thanks @Andarist! - Add dev warning about keyframes being interpolated into plain strings.
-
57a767ea
#1560 Thanks @Andarist! - Fix composition of styles without a final semicolon in a declaration block -
Updated dependencies [
4fc5657a
,10211951
,57a767ea
,c3f0bc10
,11bea3a8
]:- @emotion/serialize@0.11.12
- @emotion/styled@10.0.22
- @emotion/css@10.0.22
- 7855db4a #1537 Thanks @Andarist! - Add missing
/* #__PURE__ */
annotation to creation of EmotionCssPropInternal
- 38bb2b19 #1530 Thanks @Andarist! - Fix class not being applied when putting nil as css prop value on wrapper component
- 47262b64 - Fix labels from stack traces in some cases
- 188dc0e7 #1443 Thanks @mitchellhamilton! - Extract styles rather than inline them in compat mode with the Global component
- c0eb604d #1419 Thanks @mitchellhamilton! - Update build tool