-
#2929
13afe030
Thanks @Andarist! - The support for@container
queries has been added by updating the underlying parser (stylis) . -
Updated dependencies [
13afe030
,c02b1214
]:- @emotion/babel-plugin@11.10.5
- @emotion/serialize@1.1.1
-
#2867
89b6dbb3
Thanks @Andarist! - Externalized code referencingReact.useInsertionEffect
to a separate@emotion/use-insertion-effect-with-fallbacks
package. This package should be used in your defined externals if you bundle Emotion for whatever reason. It referencesuseInsertionEffect
in a very specific way that allows us to use it conditionally. However, if the code consuming Emotion is bundled as a library with Emotion in it then some bundlers might change the way in which we referenceuseInsertionEffect
and that might create problems for bundlers used to consume the said library code. By externalizing this new package you can still bundle Emotion if you want to without running into this problem as you won't "destroy" the carefully crafted reference touseInsertionEffect
in the process.Note that we don't recommend bundling Emotion. You should have very specific reasons to do so.
-
Updated dependencies [
89b6dbb3
]:- @emotion/use-insertion-effect-with-fallbacks@1.0.0
- #2819
bbad8c79
Thanks @nicksrandall! -exports
field has been added to thepackage.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.
- #2819
bbad8c79
Thanks @nicksrandall! - Thanks to the addedexports
field, the package now includes aworker
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
]:- @emotion/babel-plugin@11.10.0
- @emotion/is-prop-valid@1.2.0
- @emotion/serialize@1.1.0
- @emotion/utils@1.2.0
- #2759 Thanks @srmagura, @Andarist! - Change the argument of the
shouldForwardProp
option ofstyled
fromPropertyKey
tostring
in the TypeScript definitions.
- #2333
3055efdd
Thanks @Andarist! -shouldForwardProp
has been changed from being a bivariant method to a contravariant function - it improves the type-safety for those that type this option.
-
#2333
3055efdd
Thanks @antongolub! -FilteringStyledOptions
andStyledOptions
types no longer require a type argument for theProps
generic. -
Updated dependencies [
26e4e3e8
,5e81f213
,3055efdd
]:- @emotion/serialize@1.0.4
- @emotion/is-prop-valid@1.1.3
- #2651
39ac5b99
Thanks @Andarist! - Fixed a transpilation issue that causeduseInsertionEffect
to be referenced directly in the specifiers list of the import statement. This has caused build errors in the consuming tools since the import statement can only reference known exports of a module.
- #2600
2f27156a
Thanks @Andarist! - Refactored code to use the upcomingReact.useInsertionEffect
when it's available (this is a new hook that is going to be introduced in React 18). This shouldn't have any effect on existing codebases and the change should be transparent.
- #2542
eb013d25
Thanks @eps1lon! - Fixed hydration mismatches ifReact.useId
(an upcoming API in React 18) is used within a tree below our components.
- Updated dependencies [
9861a18b
]:- @emotion/is-prop-valid@1.1.1
-
734b36bf
#2199 Thanks @FezVrasta! - Improved Flow type inference of props for inline functions passed to thestyled
factory. -
Updated dependencies [
36a51c27
,662f0e0f
,36a51c27
,830dd0e6
]:- @emotion/babel-plugin@11.3.0
- @emotion/serialize@1.0.2
-
d0293508
#2240 Thanks @wolszczak96! -as
prop has been removed from TypeScript declarations for composite components. This prop has not actually been handled by default bystyled
for those components - to makestyled
handle it you need to provide a customshouldForwardProp
that doesn't forward theas
prop. -
Updated dependencies [
f3c2e81d
]:- @emotion/is-prop-valid@1.1.0
f9feab1a
#1575 Thanks @mitchellhamilton! - Removed support for@emotion/styled-base
package. It has been moved to@emotion/styled
and is available as@emotion/styled/base
. This simplifies how the regular and base versions relate to each other and eliminates problems with stricter package managers when@emotion/styled-base
was not installed explicitly by a user.
-
79036056
#967 Thanks @mitchellhamilton! - Remove support for deprecatedinnerRef
prop -
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 } }
-
105de5c8
#1572 Thanks @Andarist! -[data-emotion]
attribute on SSRed styled has changed. You should never rely on it though.
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.
4d3b60d0
#1874 Thanks @connor-baer! - Added basic TS type support foras
prop on styled components. It's possible to pass any component to it but it has no effect on other accepted props. This means that it's not 100% type-safe so use it sparingly and with care.
-
ad77ed24
#1624 Thanks @JakeGinnivan! - AddedCreateStyled
overload to handle whenshouldForwardProp
is a custom type guard for intrinsic props.As an example, if you want to override the type of the
color
prop:export const Box = styled('div', { shouldForwardProp: ( propName ): propName is Exclude<keyof JSX.IntrinsicElements['div'], 'color'> => propName !== 'color' })<{ color: Array<string> }>(props => ({ color: props.color[0] })) ;<Box color={['green']} />
18c0d5f4
#1668 Thanks @animecyc! - CustomshouldForwardProp
is being preserved now when using.withComponent
. Also, when passing an additionalshouldForwardProp
in.withComponent
's options (like this:SomeComponent.withComponent('span', { shouldForwardProp })
) it's being composed with the potentially existingshouldForwardProp
.
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.
22935470
#1588 Thanks @FezVrasta! -StyledComponent
Flow type is now polymorphic, that means you can now define the component prop types to get better type safety.
58dc08a6
#1837 Thanks @arcanis! - Fixed TS compatibility under PnP environments by making@types/react
an optional peer dependency.
- Updated dependencies [
c672175b
,923ded01
,e3d7db87
,8a896a31
,c5b12d90
,5e803106
,b8476e08
,debaad9a
,0a4a22ff
,5c55fd17
,b0ad4f0c
,9e998e37
,c65c5d88
,5c7ec859
,a085003d
,c7850e61
,b7d21373
,5d692a6a
,c5b12d90
,c6431074
,828111cd
,9e998e37
,69446cb5
]:- @emotion/babel-plugin@11.0.0
- @emotion/is-prop-valid@1.0.0
- @emotion/serialize@1.0.0
- @emotion/utils@1.0.0
- Updated dependencies [
9c4ebc16
,69446cb5
]:- @emotion/babel-plugin@11.0.0-rc.0
- @emotion/is-prop-valid@1.0.0-rc.0
- @emotion/react@11.0.0-rc.0
- @emotion/serialize@1.0.0-rc.0
- @emotion/utils@1.0.0-rc.0
- Updated dependencies []:
- @emotion/react@11.0.0-next.19
- Updated dependencies [
76e3dc4d
]:- @emotion/serialize@1.0.0-next.5
- @emotion/babel-plugin@11.0.0-next.17
- @emotion/react@11.0.0-next.17
18c0d5f4
#1668 Thanks @animecyc! - CustomshouldForwardProp
is being preserved now when using.withComponent
. Also, when passing an additionalshouldForwardProp
in.withComponent
's options (like this:SomeComponent.withComponent('span', { shouldForwardProp })
) it's being composed with the potentially existingshouldForwardProp
.
23faf9ef
#1996 Thanks @Andarist! - Fixed an issue with wrapped class components not having a type for theref
prop.
-
0895f1f3
#1995 Thanks @Andarist! - Fixed an issue with typing for theas
prop not being provided to components created using component factories available on thestyled
factory (e.g.styled.div
). -
Updated dependencies [
debaad9a
,58b2bbca
]:- @emotion/utils@1.0.0-next.1
- @emotion/react@11.0.0-next.16
- @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 [
5d692a6a
]:- @emotion/react@11.0.0-next.15
- @emotion/serialize@1.0.0-next.3
- @emotion/babel-plugin@11.0.0-next.15
4d3b60d0
#1874 Thanks @connor-baer! - Added basic TS type support foras
prop on styled components. It's possible to pass any component to it but it has no effect on other accepted props. This means that it's not 100% type-safe so use it sparingly and with care.
-
58dc08a6
#1837 Thanks @arcanis! - Fixed TS compatibility under PnP environments by making@types/react
an optional peer dependency. -
Updated dependencies [
58dc08a6
,f57a7229
]:- @emotion/react@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 [
5e803106
,9e998e37
,9e998e37
,9e998e37
]:- @emotion/babel-plugin@11.0.0-next.13
- @emotion/react@11.0.0-next.13
- @emotion/utils@1.0.0-next.0
- @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.
- Updated dependencies [
7dea6d7a
,e3d7db87
,105de5c8
,5c7ec859
,be2eb614
,75e2f9e1
,e3d7db87
]:- @emotion/react@11.0.0-next.12
- @emotion/serialize@1.0.0-next.1
- @emotion/babel-plugin@11.0.0-next.12
b79781f8
#1708 Thanks @fabien0102! - Fixprops.theme
type in styled component interpolation being optional (Theme | undefined
) for components withoutAdditionalProps
being specified.- Updated dependencies [
f08ef5a3
]:- @emotion/serialize@0.11.15-next.4
- @emotion/babel-plugin@11.0.0-next.11
- @emotion/react@11.0.0-next.11
2fa7a213
#1572 Thanks @Andarist! - RemoveStyleProps
type parameter fromCreateStyledComponent
- it's no longer needed.- Updated dependencies [
b8476e08
,b8476e08
,c7850e61
,affed3dd
,d62d9101
]:- @emotion/babel-plugin@11.0.0-next.10
- @emotion/react@11.0.0-next.10
8b59959
#1659 Thanks @Andarist! - Fixed issue when using "component as selector" in styled interpolations which caused the wrong type to be inferred.- Updated dependencies []:
- @emotion/core@11.0.0-next.9
-
c643107
#1609 Thanks @joltmode! - Reworked TypeScript definitions so it's easier to provide a type for Theme. Instead of creating custom instances (like before) you can augment builtin Theme interface like this:declare module '@emotion/core' { export interface Theme { primaryColor: string secondaryColor: string } }
- Updated dependencies [
c643107
,c643107
,c643107
,c643107
]:- babel-plugin-emotion@11.0.0-next.8
- @emotion/core@11.0.0-next.8
- @emotion/serialize@0.12.0-next.3
- Updated dependencies [
5c55fd17
,729ef9d8
]:- @emotion/core@11.0.0-next.7
- @emotion/serialize@0.11.15-next.2
923ded01
#1643 Thanks @JakeGinnivan! - Relaxed types forshouldForwardProp
as it needs to be able to filter props for a generic argument of the resulting function.- Updated dependencies [
923ded01
,0a4a22ff
,828111cd
,843bfb11
,828111cd
,cbb8b796
]:- @emotion/is-prop-valid@0.9.0-next.1
- babel-plugin-emotion@11.0.0-next.6
- @emotion/core@11.0.0-next.6
-
ad77ed24
#1624 Thanks @JakeGinnivan! - AddedCreateStyled
overload to handle whenshouldForwardProp
is a custom type guard for intrinsic props.As an example, if you want to override the type of the
color
prop:export const Box = styled('div', { shouldForwardProp: ( propName ): propName is Exclude<keyof JSX.IntrinsicElements['div'], 'color'> => propName !== 'color' })<{ color: Array<string> }>(props => ({ color: props.color[0] })) ;<Box color={['green']} />
99c6b7e2
#1632 Thanks @JakeGinnivan! - Fix issue with one of TypeScript overloads forstyled
. It passStyleProps
toInterpolation
correctly now.- Updated dependencies []:
- @emotion/core@11.0.0-next.5
e6e079c3
#1627 Thanks @frankwallis! - Fix for TypeScript error when importing@emotion/styled/base
in combination withisolatedModules
option.- Updated dependencies [
c65c5d88
]:- babel-plugin-emotion@11.0.0-next.4
- @emotion/core@11.0.0-next.4
f9feab1a
#1575 Thanks @mitchellhamilton! - Removed support for@emotion/styled-base
package. It has been moved to@emotion/styled
and is available as@emotion/styled/base
. This simplifies how the regular and base versions relate to each other and eliminates problems with stricter package managers when@emotion/styled-base
was not installed explicitly by a user.
- Updated dependencies [
8a896a31
,c5b12d90
,c5b12d90
,a085003d
,f9feab1a
,c5b12d90
]:- @emotion/serialize@0.11.15-next.1
- babel-plugin-emotion@11.0.0-next.3
- @emotion/core@11.0.0-next.3
- @emotion/is-prop-valid@0.8.6-next.0
79036056
#967 Thanks @mitchellhamilton! - Remove support for deprecatedinnerRef
prop
79036056
#967 Thanks @mitchellhamilton! - Use hooks internally for improved bundle size and a better tree in React DevTools
- Updated dependencies [
79036056
,79036056
]:- @emotion/styled-base@11.0.0-next.2
- @emotion/core@11.0.0-next.2
-
a72e6dc0
#1501 Thanks @JakeGinnivan! - TypeScript types have been restructured. These changes:- Reduce build times when using emotion
- In many cases remove the need for manually specifying generic parameters for your emotion components.
If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below.
- useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section.
- Union types as props are better supported and should be inferred properly
- Build times should be reduced significantly in larger projects.
-
withTheme can now have the Theme type specified when calling it. For example
withTheme<MyTheme>(MyComponent)
Breaking change: Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section
-
css
function has been restricted to prevent passing of invalid types -
CreateStyled
functions no longer take a secondExtraProps
argument. Instead move it to after the create styled call. For examplestyled<typeof MyComponent, ExtraProps>(MyComponent)({})
tostyled(MyComponent)<ExtraProps>({})
-
StyledComponent
type no longer supports the third genericTheme
parameter. Instead add thetheme
prop to the firstProps
argument. For example:StyledComponent<Props, {}, MyTheme>
toStyledComponent<Props & { theme?: MyTheme }>
22935470
#1588 Thanks @FezVrasta! - StyledComponent Flow type is now polymorphic, that means you can now define the component prop types to get better type safety.- Updated dependencies [
1eaa3a38
,22935470
]:- @emotion/styled-base@11.0.0-next.1
- babel-plugin-emotion@11.0.0-next.1
- @emotion/core@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 [
b0ad4f0c
,302bdba1
]:- babel-plugin-emotion@11.0.0-next.0
- @emotion/core@11.0.0-next.0
- @emotion/styled-base@11.0.0-next.0
ef7794f
#1788 Thanks @aaronjensen! - Fixed issue with TypeScript 3.8 wheretheme
was inferred to be required for a styled component.
- Updated dependencies [
babbbe3
]:- @emotion/is-prop-valid@0.8.8
4c62ae9
#1698 Thanks @Andarist! - Add LICENSE file- Updated dependencies [
4c62ae9
]:- babel-plugin-emotion@10.0.27
- @emotion/core@10.0.27
- @emotion/styled-base@10.0.27
-
97673098
#1570 Thanks @FezVrasta! - Fixed package's Flow types -
Updated dependencies [
3927293d
,97673098
,b3a0f148
]:- babel-plugin-emotion@10.0.23
- @emotion/styled-base@10.0.23
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
c3f0bc10
#1545 Thanks @jgroszko! - Accept objects asclassName
in styled components (they are stringified) to match React behavior
-
11bea3a8
#1562 Thanks @FezVrasta! - Export Flow type definitions for @emotion/styled/macro and @emotion/css/macro -
Updated dependencies [
4fc5657a
,2fc75f26
,10211951
,57a767ea
,1bb3efe3
,c3f0bc10
]:- @emotion/core@10.0.22
- @emotion/styled-base@10.0.22
- babel-plugin-emotion@10.0.22
- 8638c416 #1421 Thanks @Andarist! - TS: Disallow Theme parameter when it was already parametrized by using CustomStyled
- c0eb604d #1419 Thanks @mitchellhamilton! - Update build tool
- f7238e7e #1364 Thanks @arcanis! - Adds @emotion/core & react to the peer dependencies
- b849f66c #1369 Thanks @SavePointSam! - Exposed macro.d.ts
- 595aa85 #1315 Thanks @lifeiscontent! - Add macro.d.ts for @emotion/styled