feat(emotion): emotion v11

BREAKING CHANGE: upgrade to emotion v11

package.json

@@ -21,19 +21,20 @@
     "build": "lerna run build",
     "watch": "lerna run watch --parallel",
     "format": "prettier --write \"**/*.{js,ts,tsx,json,md,mdx}\"",
-    "lint": "eslint .",
-    "release": "lerna publish --conventional-commits && conventional-github-releaser --preset angular",
-    "test": "jest"
-  },
+      "lint": "eslint .",
+      "release": "lerna publish --conventional-commits && conventional-github-releaser --preset angular",
+      "test": "jest"
+    },
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
-    "@emotion/core": "^10.0.35",
-    "@emotion/styled": "^10.0.23",
+    "@emotion/jest": "^11.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.2",
+    "@testing-library/react": "^11.2.1",
     "@types/react": "^16.9.49",
     "@types/styled-components": "^5.1.3",
     "babel-eslint": "^10.1.0",
@@ -42,7 +43,6 @@
     "bundlesize": "^0.18.0",
     "codecov": "^3.7.2",
     "conventional-github-releaser": "^3.1.5",
-    "emotion-theming": "^10.0.19",
     "eslint": "^7.9.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
@@ -52,13 +52,12 @@
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.2",
     "jest": "^26.4.2",
-    "jest-emotion": "^10.0.32",
     "jest-styled-components": "^7.0.3",
     "lerna": "^3.22.1",
     "prettier": "^2.1.1",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "shx": "^0.3.2",
     "styled-components": "5.2.1",
     "tsdx": "^0.14.0",

packages/babel-preset-emotion-css-prop/package.json

@@ -25,8 +25,8 @@
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.10.4",
     "@babel/runtime": "^7.11.2",
-    "@emotion/babel-plugin-jsx-pragmatic": "^0.1.4",
-    "babel-plugin-emotion": "^10.0.33"
+    "@emotion/babel-plugin": "^11.0.0",
+    "@emotion/babel-plugin-jsx-pragmatic": "^0.1.4"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"

packages/babel-preset-emotion-css-prop/src/index.test.ts

@@ -33,12 +33,20 @@ describe('preset', () => {
     expect(testPreset(code)).toMatchInlineSnapshot(`
       "function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+      function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
       import * as React from 'react';
       import { jsx as ___xstyledEmotionJSX } from \\"@xstyled/emotion\\";
-      var _ref = {
-        name: \\"1q24rv0-Button\\",
-        styles: \\"color:hotpink;;label:Button;\\"
+
+      var _ref = process.env.NODE_ENV === \\"production\\" ? {
+        name: \\"3sn2xs\\",
+        styles: \\"color:hotpink\\"
+      } : {
+        name: \\"1v4u9bq-Button\\",
+        styles: \\"color:hotpink;label:Button;\\",
+        toString: _EMOTION_STRINGIFIED_CSS_ERROR__
       };
+
       export let Button = props => {
         return ___xstyledEmotionJSX(React.Fragment, null, ___xstyledEmotionJSX(\\"button\\", _extends({
           css: _ref

packages/babel-preset-emotion-css-prop/src/index.ts

@@ -2,7 +2,7 @@
 // see https://github.com/emotion-js/emotion/blob/master/packages/babel-preset-css-prop/src/index.js
 import jsx from '@babel/plugin-transform-react-jsx'
 import pragmatic from '@emotion/babel-plugin-jsx-pragmatic'
-import emotion from 'babel-plugin-emotion'
+import emotion from '@emotion/babel-plugin'
 
 const pragmaName = '___xstyledEmotionJSX'
 

packages/emotion/README.md

@@ -14,7 +14,7 @@
 [![Small size](https://img.badgesize.io/https://unpkg.com/@xstyled/emotion/dist/xstyled-emotion.min.js?compression=gzip)](https://unpkg.com/@xstyled/emotion/dist/xstyled-emotion.min.js)
 
 ```bash
-npm install @xstyled/emotion @emotion/core @emotion/styled emotion-theming
+npm install @xstyled/emotion @emotion/react @emotion/styled
 ```
 
 ## [Docs](https://www.smooth-code.com/open-source/xstyled)

packages/emotion/package.json

@@ -29,9 +29,8 @@
     "url": "https://github.com/sponsors/gregberge"
   },
   "peerDependencies": {
-    "@emotion/core": "^10.0.0",
-    "@emotion/styled": "^10.0.0",
-    "emotion-theming": "^10.0.0"
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",

packages/emotion/src/Box.ts

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import styled from '@emotion/styled'
+import { Theme } from '@emotion/react'
 import { createBox } from '@xstyled/core'
 import { createSystemComponent } from '@xstyled/system'
-import { DefaultTheme } from './types'
 
-const InnerBox = createSystemComponent<DefaultTheme>(React)
+const InnerBox = createSystemComponent<Theme>(React)
 export const Box = styled(InnerBox)(createBox)

packages/emotion/src/breakpoints.ts

@@ -4,7 +4,7 @@ import {
   useThemeUp,
   useThemeDown,
 } from '@xstyled/core'
-import { useTheme } from 'emotion-theming'
+import { useTheme } from '@emotion/react'
 
 export { useViewportWidth } from '@xstyled/core'
 

packages/emotion/src/colorModes.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { ThemeContext, Global } from '@emotion/core'
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeContext, Global, ThemeProvider } from '@emotion/react'
 import { createColorModeProvider, createColorStyles } from '@xstyled/core'
 
 function ColorModeStyle({ targetSelector }: { targetSelector?: string }) {

packages/emotion/src/createGlobalStyle.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as React from 'react'
-import { withTheme } from 'emotion-theming'
-import { Global } from '@emotion/core'
+import { withTheme } from '@emotion/react'
+import { Global } from '@emotion/react'
 import { css } from './css'
 
 export const createGlobalStyle = (...args) => {

packages/emotion/src/css.ts

@@ -1,4 +1,5 @@
-import { css as emCss, Interpolation } from '@emotion/core'
+import { css as emCss } from '@emotion/react'
+import { CSSInterpolation } from '@emotion/serialize'
 import { transform } from '@xstyled/core'
 
 function styleToString(style: any, props: any): any {
@@ -11,7 +12,7 @@ function styleToString(style: any, props: any): any {
 // @ts-ignore
 export const css: typeof emCss = (
   strings: TemplateStringsArray,
-  ...rawArgs: Array<Interpolation>
+  ...rawArgs: Array<CSSInterpolation>
 ) => {
   const emCssArgs = emCss(strings, ...rawArgs)
   const transformedStyles = transform(emCssArgs.styles)

packages/emotion/src/cx.test.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import '@testing-library/jest-dom/extend-expect'
 import { render, cleanup } from '@testing-library/react'
 import { css, cx } from '.'

packages/emotion/src/index.ts

@@ -12,8 +12,10 @@ export {
   Global,
   ClassNames,
   keyframes,
-} from '@emotion/core'
-export { ThemeProvider, withTheme, useTheme } from 'emotion-theming'
+  ThemeProvider,
+  withTheme,
+  useTheme,
+} from '@emotion/react'
 export * from './breakpoints'
 export * from '@xstyled/system'
 export * from './types'

packages/emotion/src/jsx.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { jsx as emJsx } from '@emotion/core'
+import { jsx as emJsx } from '@emotion/react'
 import { cx } from './cx'
 
 // @ts-ignore

packages/emotion/src/styled.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { render, cleanup } from '@testing-library/react'
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeProvider } from '@emotion/react'
 import styled, { css, keyframes } from '.'
 
 afterEach(cleanup)
@@ -147,7 +147,9 @@ describe('#styled.xxxBox', () => {
 
   it('supports as prop', () => {
     const Dummy = styled.divBox``
-    const { container } = render(<Dummy as="a" margin={1} />)
+    // This is not supported by emotion
+    // @ts-expect-error
+    const { container } = render(<Dummy as="a" margin={1} href="ok" />)
     expect(container.firstChild!.nodeName).toBe('A')
     expect(container.firstChild).toHaveStyle('margin: 4px;')
     expect(container.firstChild).not.toHaveAttribute('margin')

packages/emotion/src/styled.ts

@@ -1,13 +1,11 @@
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
 import * as React from 'react'
-import emStyled, {
-  CreateStyled,
-  CreateStyledComponentIntrinsic,
-} from '@emotion/styled'
+import emStyled, { CreateStyledComponent, CreateStyled } from '@emotion/styled'
+import { Theme } from '@emotion/react'
 import { createSystemComponent, SystemProps } from '@xstyled/system'
 import { Box } from './Box'
 import { css } from './css'
-import { BoxElements, DefaultTheme } from './types'
+import { BoxElements } from './types'
 
 function flattenArgs(arg: any, props: any): any {
   if (typeof arg === 'function') return flattenArgs(arg(props), props)
@@ -25,17 +23,14 @@ function getCreateStyle(baseCreateStyle: any) {
     })
 }
 
-type ThemedXStyledComponentFactories<T extends object> = {
-  [Key in keyof BoxElements]: CreateStyledComponentIntrinsic<
-    BoxElements[Key],
-    SystemProps<T> & { as?: any },
-    T
+type BoxStyledTags = {
+  [Tag in keyof BoxElements]: CreateStyledComponent<
+    SystemProps<Theme> & { as?: React.ElementType; theme?: Theme },
+    JSX.IntrinsicElements[BoxElements[Tag]]
   >
 }
 
-interface CreateXStyled<T extends object = DefaultTheme>
-  extends CreateStyled<T>,
-    ThemedXStyledComponentFactories<T> {}
+interface CreateXStyled extends CreateStyled, BoxStyledTags {}
 
 // @ts-ignore
 export const styled: CreateXStyled = (component) => {
@@ -51,6 +46,6 @@ Object.keys(emStyled).forEach((key) => {
   // @ts-ignore
   styled[`${key}Box`] = styled(
     // @ts-ignore
-    Box.withComponent(createSystemComponent<DefaultTheme>(React, key)),
+    Box.withComponent(createSystemComponent<Theme>(React, key)),
   )
 })

packages/emotion/src/types.ts

@@ -1,5 +1,3 @@
-export interface DefaultTheme {}
-
 export interface BoxElements {
   box: 'div'
   aBox: 'a'

packages/system/tests/emotion/breakpoints.test.ts

@@ -1,6 +1,6 @@
-import { matchers } from 'jest-emotion'
+import { matchers } from '@emotion/jest'
 import styled from '@emotion/styled'
-import { css } from '@emotion/core'
+import { css } from '@emotion/react'
 import { testBreakpoints } from '../common/breakpoints'
 
 expect.extend(matchers)

packages/system/tests/xstyled-emotion/breakpoints.test.ts

@@ -1,4 +1,4 @@
-import { matchers } from 'jest-emotion'
+import { matchers } from '@emotion/jest'
 import styled, { css } from '@xstyled/emotion'
 import { testBreakpoints } from '../common/breakpoints'
 

website/src/pages/docs/emotion.mdx

@@ -13,7 +13,7 @@ xstyled has complete support of [emotion](https://emotion.sh).
 To download xstyled run:
 
 ```bash
-npm install @xstyled/emotion @emotion/core @emotion/styled emotion-theming
+npm install @xstyled/emotion @emotion/react @emotion/styled
 ```
 
 ## System as props