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

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@emotion/babel-preset-css-prop	10.2.0 -> 11.0.0
@emotion/core	10.x -> 10.x || 11.x
@emotion/core	10.1.1 -> 11.0.0
@emotion/styled	10.x -> 10.x || 11.x
@emotion/styled	10.0.27 -> 11.0.0
babel-plugin-emotion (source)	10.0.33 -> 11.0.0
create-emotion-server (source)	10.0.27 -> 11.0.0
emotion-theming (source)	^10.0.27 -> ^11.0.0

---

Release Notes

emotion-js/emotion

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.

• cbb8b796 #​1628 Thanks @​Andarist! - emotion-theming has been removed and all its exports were moved to @emotion/react package. Please import them like this import { 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 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
    }
  }

• f57a7229 #​1941 Thanks @​Andarist! - The way in which we provide TypeScript support for the css prop has changed. Based on the usage of our JSX factories, we can add support for css prop only for components that support className prop (as our JSX factory functions take the provided css prop, resolve it and pass the generated className 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 with css prop support, such as styled-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 leverage css 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 the css prop globally, for all components. Use it like this:

  /// <reference types="@&#8203;emotion/react/types/css-prop" />

  In this particular case we are forced to extend the existing React.Attributes interface. Previously we've been extending both React.DOMAttributes<T> and JSX.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 allow css 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. 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.

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

Minor Changes

• c672175b #​1130 Thanks @​jtmthf! - Support functions in arrays passed to css prop and Global'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 the styles prop.

• 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

• 7dea6d7a #​1734 Thanks @​Andarist! - Fixed styles inserted by <Global/> component not inheriting speedy 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 with css from @emotion/react being passed to cx 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

v10.2.1

Compare Source

Patch Changes

• 32c8528a #​2084 Thanks @​Andarist! - Only use '@​babel/plugin-transform-react-jsx-development' based on the development option when runtime is set to "automatic". The classic runtime is not compatible with this plugin.

---

Renovate configuration

📅 Schedule: "on the 1st and 3rd day instance on Wednesday after 3am" (UTC).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻️ Rebasing: Renovate will not automatically rebase this PR, because other commits have been found.

🔕 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 has been generated by WhiteSource Renovate. View repository job log here.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/commercetools/commercetools-docs-kit/456nn2g1x
✅ Preview: https://commercetools-docs-kit-git-renovate-major-emotion-monorepo.commercetools.now.sh

[changeset-bot]

🦋 Changeset detected

Latest commit: 7728212

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@commercetools-docs/gatsby-theme-api-docs	Major
@commercetools-docs/gatsby-theme-code-examples	Major
@commercetools-docs/gatsby-theme-constants	Major
@commercetools-docs/gatsby-theme-docs	Major
@commercetools-docs/ui-kit	Major
@commercetools-website/api-docs-smoke-test	Minor
@commercetools-website/docs-smoke-test	Minor
@commercetools-website/site-template	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[emmenko]

FYI: waiting for gatsby-plugin-emotion to be released gatsbyjs/gatsby#27981