chore(deps): update emotion monorepo to v11 (major)

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@emotion/core (source)	^10.1.1 -> ^11.0.0
@emotion/styled (source)	^10.0.27 -> ^11.14.1
emotion (source)	^10.0.27 -> ^11.0.0

---

Release Notes

emotion-js/emotion (@​emotion/core)

v11.0.0

Compare Source

Major Changes

• 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.

v10.3.1

Compare Source

Patch Changes

• #​2576 33c01578 Thanks @​Methuselah96! - Export Keyframes type to avoid TypeScript inserting import("@​emotion/serialize").Keyframes references into declaration files emitted based on a source files exporting keyframes result. This avoids issues with strict package managers that don't allow accessing undeclared dependencies.

v10.3.0

Compare Source

Minor Changes

• #​2566 122e9f11 Thanks @​eps1lon, @​Andarist! - Fixed hydration mismatches if React.useId (an upcoming API in React 18) is used within a tree below our components.

• #​2560 b5a26619 Thanks @​eps1lon! - Dropped usage of a deprecated SFC React type in favor of FC. The FC type has been introduced in @types/[email protected] so this version of this package is now a minimum requirement for TypeScript users.

emotion-js/emotion (@​emotion/styled)

v11.14.1

Compare Source

v11.14.0

Compare Source

Minor Changes

• #​3281 fc4d7bd Thanks @​Andarist! - Source code has been migrated to TypeScript. From now on type declarations will be emitted based on that, instead of being hand-written.

Patch Changes

• Updated dependencies [8dc1a6d, e1bf17e]:
  • @​emotion/cache@​11.14.0
  • @​emotion/use-insertion-effect-with-fallbacks@​1.2.0

v11.13.5

Compare Source

Patch Changes

• #​3270 77d930d Thanks @​emmatown! - Fix inconsistent hashes using development vs production bundles/exports conditions when using @emotion/babel-plugin with sourceMap: true (the default). This is particularly visible when using Emotion with the Next.js Pages router where the development condition is used when bundling code but not when importing external code with Node.js.

• Updated dependencies [77d930d]:

  • @​emotion/serialize@​1.3.3
  • @​emotion/cache@​11.13.5
  • @​emotion/utils@​1.4.2
  • @​emotion/babel-plugin@​11.13.5

v11.13.0

Compare Source

Minor Changes

• #​3198 d8ff8a5 Thanks @​Andarist! - Migrated away from relying on process.env.NODE_ENV checks to differentiate between production and development builds.

  Development builds (and other environment-specific builds) can be used by using proper conditions (see here). Most modern bundlers/frameworks already preconfigure those for the user so no action has to be taken.

  Default files should continue to work in all environments.

• #​3215 a9f6912 Thanks @​Andarist! - Added edge-light and workerd conditions to package.json manifest to better serve users using Vercel Edge and Cloudflare Workers.

Patch Changes

• Updated dependencies [d8ff8a5, a9f6912]:
  • @​emotion/cache@​11.13.0
  • @​emotion/serialize@​1.3.0
  • @​emotion/use-insertion-effect-with-fallbacks@​1.1.0
  • @​emotion/utils@​1.4.0

v11.12.0

Compare Source

Minor Changes

• #​2815 65a1eea Thanks @​srmagura! - Automatic labeling at runtime is now an opt-in feature. Define globalThis.EMOTION_RUNTIME_AUTO_LABEL = true before Emotion gets initialized to enable it.

Patch Changes

• #​3206 d1994c4 Thanks @​DiegoAndai! - Improved compatibility with the upcoming @types/react for React 19 where the global JSX namespace doesn't exist anymore

• #​3208 56109e7 Thanks @​Andarist! - Only forward defined refs to improve compatibility with the upcoming React 19

• Updated dependencies [9ca22c6, b1d16b0, 16d8a8c]:

  • @​emotion/serialize@​1.2.0
  • @​emotion/weak-memoize@​0.4.0
  • @​emotion/utils@​1.3.0
  • @​emotion/babel-plugin@​11.12.0
  • @​emotion/cache@​11.12.0

v11.11.5

Compare Source

Patch Changes

• #​3164 c9b84dbe Thanks @​Cerber-Ursi! - Reordered styled overloads to accommodate the recent change in @emotion/serialize's types.

• Updated dependencies [c9b84dbe]:

  • @​emotion/serialize@​1.1.4

v11.11.0

Compare Source

Minor Changes

• #​3031 336f3d50 Thanks @​Andarist! - Added support for cascade @layers by updating the underlying parser (stylis).

Patch Changes

• #​3029 eed5e6cf Thanks @​Andarist! - Fixed importing in Node ESM

• Updated dependencies [336f3d50, eed5e6cf, 336f3d50]:

  • @​emotion/babel-plugin@​11.11.0
  • @​emotion/cache@​11.11.0
  • @​emotion/serialize@​1.1.2
  • @​emotion/use-insertion-effect-with-fallbacks@​1.0.1
  • @​emotion/utils@​1.2.1
  • @​emotion/weak-memoize@​0.3.1

v11.10.8

Compare Source

Patch Changes

• #​3025 6bd13425 Thanks @​Andarist! - Fixed a parsing issue with & within nested functions in declaration values by updating the underlying parser (stylis).

• Updated dependencies [6bd13425, 6bd13425]:

  • @​emotion/babel-plugin@​11.10.8
  • @​emotion/cache@​11.10.8

v11.10.6

Compare Source

Patch Changes

• #​2985 4e172c2a Thanks @​emmatown! - Remove peer dependency on @babel/core

• Updated dependencies [4e172c2a]:

  • @​emotion/babel-plugin@​11.10.6

v11.10.5

Compare Source

Patch Changes

• #​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

v11.10.4

Compare Source

Patch Changes

• #​2867 89b6dbb3 Thanks @​Andarist! - Externalized code referencing React.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 references useInsertionEffect 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 reference useInsertionEffect 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 to useInsertionEffect 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

v11.10.0

Compare Source

Minor Changes

• #​2819 bbad8c79 Thanks @​nicksrandall! - exports field has been added to the package.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 added exports field, the package now includes a worker 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.

Patch Changes

• Updated dependencies [bbad8c79, bbad8c79]:
  • @​emotion/babel-plugin@​11.10.0
  • @​emotion/cache@​11.10.0
  • @​emotion/serialize@​1.1.0
  • @​emotion/utils@​1.2.0
  • @​emotion/weak-memoize@​0.3.0

v11.9.3

Compare Source

Patch Changes

• #​2766 5b3f4d78 Thanks @​Andarist! - ThemeProviderProps["children"] was marked as a required prop as ThemeProvider should always wrap some subtree.

• Updated dependencies [26e4e3e8, 6c2d7a60, 5e81f213]:

  • @​emotion/serialize@​1.0.4
  • @​emotion/cache@​11.9.3

v11.8.1

Compare Source

Patch Changes

• #​2651 39ac5b99 Thanks @​Andarist! - Fixed a transpilation issue that caused useInsertionEffect 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.

v11.8.0

Compare Source

Minor Changes

• #​2600 2f27156a Thanks @​Andarist! - Refactored code to use the upcoming React.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.

Patch Changes

• Updated dependencies [d2531639, 2f27156a]:
  • @​emotion/is-prop-valid@​1.1.2
  • @​emotion/utils@​1.1.0

v11.6.0

Compare Source

Minor Changes

• #​2542 eb013d25 Thanks @​eps1lon! - Fixed hydration mismatches if React.useId (an upcoming API in React 18) is used within a tree below our components.

Patch Changes

• Updated dependencies [9861a18b]:
  • @​emotion/is-prop-valid@​1.1.1

v11.3.0

Compare Source

Patch Changes

• 734b36bf #​2199 Thanks @​FezVrasta! - Improved Flow type inference of props for inline functions passed to the styled factory.

• Updated dependencies [36a51c27, 662f0e0f, 36a51c27, 830dd0e6]:

  • @​emotion/babel-plugin@​11.3.0
  • @​emotion/serialize@​1.0.2

v11.1.5

Compare Source

Patch Changes

• d0293508 #​2240 Thanks @​wolszczak96! - as prop has been removed from TypeScript declarations for composite components. This prop has not actually been handled by default by styled for those components - to make styled handle it you need to provide a custom shouldForwardProp that doesn't forward the as prop.

• Updated dependencies [f3c2e81d]:

  • @​emotion/is-prop-valid@​1.1.0

v11.0.0

Compare Source

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 deprecated innerRef 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 the ComponentType you will need to remove that generic parameter
  • styled no longer takes a second ExtraProps parameter - instead of that move it to after the styled call. So instead of writing styled<typeof MyComponent, ExtraProps>(MyComponent)({}) you should now be writing styled(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 for Theme. Instead of creating custom instances (like before) you can augment the builtin Theme 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. 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

• 4d3b60d0 #​1874 Thanks @​connor-baer! - Added basic TS type support for as 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! - Added CreateStyled overload to handle when shouldForwardProp 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! - Custom shouldForwardProp is being preserved now when using .withComponent. Also, when passing an additional shouldForwardProp in .withComponent's options (like this: SomeComponent.withComponent('span', { shouldForwardProp })) it's being composed with the potentially existing shouldForwardProp.

• 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

• 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

v10.3.0

Compare Source

Minor Changes

• #​2566 122e9f11 Thanks @​eps1lon, @​Andarist! - Fixed hydration mismatches if React.useId (an upcoming API in React 18) is used within a tree below our components.

• #​2560 b5a26619 Thanks @​eps1lon! - Dropped usage of a deprecated SFC React type in favor of FC. The FC type has been introduced in @types/[email protected] so this version of this package is now a minimum requirement for TypeScript users.

Patch Changes

• Updated dependencies [122e9f11, b5a26619]:
  • @​emotion/styled-base@​10.3.0

---

Configuration

📅 Schedule: Branch creation - Between 12:00 AM and 03:59 AM ( * 0-3 * * * ) (UTC), Automerge - 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.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.