fix(emotion): fix ESM interop

Refer #338, #343

Author: gregberge

packages/emotion/src/createStyled.ts

@@ -1,13 +1,10 @@
 import * as React from 'react'
-import emStyled, { CreateStyledComponent, CreateStyled } from '@emotion/styled'
+import { CreateStyledComponent, CreateStyled } from '@emotion/styled'
 import { Theme } from '@emotion/react'
 import { StyleGenerator, StyleGeneratorProps } from '@xstyled/system'
 import { BoxElements } from '@xstyled/core'
 import { createCssFunction, XCSSFunction } from './createCssFunction'
-
-const emStyledInterop =
-  // @ts-ignore
-  typeof emStyled === 'function' ? emStyled : emStyled.default
+import { emStyled } from './emStyled'
 
 const flattenArgs = (arg: any, props: any): any => {
   if (typeof arg === 'function') return flattenArgs(arg(props), props)
@@ -69,7 +66,7 @@ export const createBaseStyled = <TGen extends StyleGenerator>(
     : {}
   return ((component: any, options: any) =>
     getCreateStyle(
-      emStyledInterop(component, { ...defaultOptions, ...options }),
+      emStyled(component, { ...defaultOptions, ...options }),
       css,
       generator,
     )) as XStyled<TGen>
@@ -82,7 +79,7 @@ export const createStyled = <TGen extends StyleGenerator>(
   const styled = createBaseStyled(css)
   const xstyled = createBaseStyled(css, generator)
   styled.box = xstyled('div')
-  Object.keys(emStyledInterop).forEach((key) => {
+  Object.keys(emStyled).forEach((key) => {
     // @ts-ignore
     styled[key] = styled(key)
     // @ts-ignore

packages/emotion/src/createX.ts

@@ -1,9 +1,10 @@
 import * as React from 'react'
 import { Theme } from '@emotion/react'
-import emStyled, { StyledComponent } from '@emotion/styled'
+import { StyledComponent } from '@emotion/styled'
 import { StyleGenerator, StyleGeneratorProps } from '@xstyled/system'
 import { createBaseStyled } from './createStyled'
 import { createCssFunction } from './createCssFunction'
+import { emStyled } from './emStyled'
 
 type JSXElementKeys = keyof JSX.IntrinsicElements
 

packages/emotion/src/emStyled.ts

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled'
+
+// Provide interop since `@emotion/styled` does not work out of the box with ESM
+export const emStyled =
+  // @ts-ignore
+  typeof styled === 'function' ? styled : styled.default