fix(styled-components): fix ESM interop

Fixes #338

Author: gregberge

packages/styled-components/src/createStyled.ts

@@ -3,17 +3,14 @@ import type { ElementType } from 'react'
 import { BoxElements } from '@xstyled/core'
 import { string } from '@xstyled/util'
 import { StyleGenerator, StyleGeneratorProps, Theme } from '@xstyled/system'
-import scStyled, {
+import {
   StyledConfig,
   ThemedBaseStyledInterface,
   ThemedStyledFunction,
 } from 'styled-components'
+import { scStyled } from './scStyled'
 import { createCssFunction, XCSSFunction } from './createCssFunction'
 
-const scStyledInterop =
-  // @ts-ignore
-  typeof scStyled === 'function' ? scStyled : scStyled.default
-
 const getCreateStyle = (
   baseCreateStyle: ThemedStyledFunction<any, any>,
   css: XCSSFunction,
@@ -80,7 +77,7 @@ export const createBaseStyled = <TGen extends StyleGenerator>(
       }
     : {}
   return ((component: Parameters<typeof scStyled>[0]) => {
-    const baseStyled = scStyledInterop(component)
+    const baseStyled = scStyled(component)
     return getCreateStyle(
       config ? baseStyled.withConfig(config) : baseStyled,
       css,
@@ -96,7 +93,7 @@ export const createStyled = <TGen extends StyleGenerator>(
   const styled = createBaseStyled(css)
   const xstyled = createBaseStyled(css, generator)
   styled.box = xstyled('div')
-  Object.keys(scStyledInterop).forEach((key) => {
+  Object.keys(scStyled).forEach((key) => {
     // @ts-ignore
     styled[key] = styled(key)
     // @ts-ignore

packages/styled-components/src/createX.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
-import scStyled, { StyledComponent, DefaultTheme } from 'styled-components'
+import { StyledComponent, DefaultTheme } from 'styled-components'
+import { scStyled } from './scStyled'
 import { StyleGenerator, StyleGeneratorProps } from '@xstyled/system'
 import { createBaseStyled } from './createStyled'
 import { createCssFunction } from './createCssFunction'

packages/styled-components/src/css.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { render, cleanup } from '@testing-library/react'
-import styled from 'styled-components'
 import { css, ThemeProvider } from '.'
+import { scStyled as styled } from './scStyled'
 
 afterEach(cleanup)
 

packages/styled-components/src/scStyled.ts

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