portfolio
portfolio copied to clipboard
Update emotion monorepo (major)
This PR contains the following updates:
Package | Change | Age | Adoption | Passing | Confidence |
---|---|---|---|---|---|
@emotion/core | ^10.0.22 -> ^11.0.0 |
||||
@emotion/styled | ^10.0.23 -> ^11.0.0 |
Release Notes
emotion-js/emotion
v11.0.0
Major Changes
-
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 parameter -
styled
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.
-
cf56694
#2088 Thanks @Andarist! - UMD filenames have been changed.
Minor Changes
-
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.
Patch Changes
-
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
]:
v10.1.1
Patch Changes
-
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>
v10.1.0
Minor Changes
-
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.
v10.0.35
Patch Changes
-
2cf3b16b
#1973 Thanks @santialbo! - Fixed label extraction from the stack traces in node for components wrapped inReact.forwardRef
. This has affected only development builds.
v10.0.34
Patch Changes
-
4979ebb2
#1966 Thanks @chnakamura! - Fixed label extraction from the stack traces in Chrome in certain scenarios. This has affected only development builds.
v10.0.28
Patch Changes
-
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.
v10.0.27
Patch Changes
-
4c62ae9
#1698 Thanks @Andarist! - Add LICENSE file - Updated dependencies [
4c62ae9
]:
Configuration
📅 Schedule: At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.
- [ ] If you want to rebase/retry this PR, check this box.
This PR has been generated by WhiteSource Renovate. View repository job log here.