feat(emotion): add preflight component to emotion (#167)

package.json

@@ -34,6 +34,7 @@
     "@babel/preset-typescript": "^7.12.7",
     "@emotion/jest": "^11.0.0",
     "@emotion/react": "^11.1.4",
+    "@emotion/serialize": "^1.0.0",
     "@emotion/styled": "^11.0.0",
     "@testing-library/jest-dom": "^5.11.8",
     "@testing-library/react": "^11.2.2",

packages/emotion/src/index.ts

@@ -18,4 +18,5 @@ export {
 } from '@emotion/react'
 export * from './breakpoints'
 export * from './theme'
+export * from './preflight'
 export * from '@xstyled/system'

packages/emotion/src/preflight.test.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import '@testing-library/jest-dom/extend-expect'
+import { render, cleanup } from '@testing-library/react'
+import { Preflight } from '.'
+
+afterEach(cleanup)
+
+describe('#Preflight', () => {
+  it('renders as a null component', () => {
+    const { container } = render(<Preflight />)
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('outputs all styles', () => {
+    render(<Preflight />)
+
+    expect(document.querySelectorAll('style').length).toBeGreaterThan(0)
+  })
+})

packages/emotion/src/preflight.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { CSSInterpolation } from '@emotion/serialize'
+import { Global, css } from '@emotion/react'
+import { createPreflight } from '@xstyled/system'
+import { useTheme } from './theme'
+
+function createGlobalStyle(...styles: Array<CSSInterpolation | Function>) {
+  return function Preflight() {
+    const theme = useTheme()
+
+    // emotion does not support function interpolation so we do from our side
+    // https://github.com/emotion-js/emotion/blob/%40emotion/serialize%401.0.0/packages/serialize/src/index.js#L189
+    const parsedStyles = styles.map((style) => {
+      if (typeof style === 'function') {
+        return style({ theme })
+      }
+
+      return style
+    })
+
+    return <Global styles={css(parsedStyles)} />
+  }
+}
+
+export const Preflight = createPreflight({ createGlobalStyle })

website/pages/docs/getting-started/installation.mdx

@@ -74,7 +74,7 @@ npm install @emotion/core @emotion/react @emotion/styled @xstyled/emotion
 
 ```js
 // App.js
-import { defaultTheme, ThemeProvider } from '@xstyled/emotion'
+import { defaultTheme, ThemeProvider, Preflight } from '@xstyled/emotion'
 
 const theme = {
   ...defaultTheme,