chore(website): support emotion imports

Author: nihgwu

website/next.config.js

@@ -6,10 +6,6 @@ const shouldPrefix = process.env.PREFIX === 'true'
 module.exports = {
   assetPrefix: shouldPrefix ? '/react-runner/' : '',
   basePath: shouldPrefix ? '/react-runner' : '',
-  experimental: {
-    // ssr and displayName are configured by default
-    styledComponents: true,
-  },
   reactStrictMode: true,
   webpack: (config, options) => {
     config.resolve.alias = {

website/package.json

@@ -10,18 +10,21 @@
     "deploy": "rm -rf node_modules/.cache build && PREFIX=true next build && next export -o build && touch build/.nojekyll && gh-pages -d build -t true"
   },
   "dependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/hash": "^0.8.0",
+    "@emotion/is-prop-valid": "^1.1.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "common-tags": "^1.8.2",
     "next": "12.0.9",
     "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "styled-components": "^5.3.3"
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
     "@types/common-tags": "^1.8.1",
     "@types/lz-string": "^1.3.34",
     "@types/node": "17.0.5",
     "@types/react": "17.0.38",
-    "@types/styled-components": "^5.1.15",
     "eslint": "8.5.0",
     "eslint-config-next": "12.0.7",
     "gh-pages": "^3.2.3",

website/src/components/BackButton.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import NextLink from 'next/link'
 
 const RoundLink = styled.a`

website/src/components/GlobalStyle.ts

@@ -0,0 +1,30 @@
+import { Global, css } from '@emotion/react'
+
+export const GlobalStyle = () => (
+  <Global
+    styles={css`
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: sans-serif;
+        font-size: 16px;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      pre,
+      code,
+      kbd {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New,
+          monospace;
+      }
+
+      ul {
+        list-style: auto inside;
+        padding: 0;
+      }
+    `}
+  />
+)

website/src/components/GlobalStyle.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import NextLink from 'next/link'
 
 const Container = styled.header`

website/src/components/Header.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import { useRunner, Scope } from 'react-runner'
 import {
   LiveProvider,
@@ -86,11 +86,13 @@ type Props = {
   language?: Language
 }
 
+const StyledEditor = Editor.withComponent(LiveEditor)
+
 export const LiveRunner = (props: Props) => (
   <LiveProvider {...props}>
     <Container>
       <EditorContainer>
-        <Editor as={LiveEditor} />
+        <StyledEditor />
       </EditorContainer>
       <PreviewContainer>
         <Preview as={LivePreview} />

website/src/components/LiveRunner.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import { importCode, Runner, Scope } from 'react-runner'
 
 import {

website/src/components/MultiFilesExample/index.tsx

@@ -1,19 +1,47 @@
 import React from 'react'
-import styled, { css, keyframes, createGlobalStyle } from 'styled-components'
-import * as Styled from 'styled-components'
+import * as EmotionCss from '@emotion/css'
+import * as EmotionReact from '@emotion/react'
+import styled from '@emotion/styled'
+import isPropValid from '@emotion/is-prop-valid'
+import hashString from '@emotion/hash'
 import { codeBlock } from 'common-tags'
 // @ts-ignore
 import hn from '!!raw-loader!./pages/examples/hacker-news.tsx'
 
-export const scope = {
+// mimic the @emotion/bable-plugin's behaviour to support `Components as selectors`
+let counter = 0
+const hijackedStyled = styled.bind(undefined)
+const hash = hashString('react-runner')
+Object.getOwnPropertyNames(styled).forEach((tag) => {
+  if (tag === 'length') return
+  Object.defineProperty(hijackedStyled, tag, {
+    get() {
+      return styled(tag as keyof JSX.IntrinsicElements, {
+        target: `e${hash}${counter++}`,
+      })
+    },
+  })
+})
+
+const _React = {
   ...React,
-  styled,
-  css,
-  keyframes,
-  createGlobalStyle,
+  createElement: EmotionReact.jsx,
+}
+
+export const scope = {
+  React: _React,
+  ..._React,
+  styled: hijackedStyled,
+  css: EmotionReact.css,
+  keyframes: EmotionReact.keyframes,
+  Global: EmotionReact.Global,
+  createElement: EmotionReact.jsx,
   import: {
-    react: React,
-    'styled-components': Styled,
+    react: _React,
+    '@emotion/css': EmotionCss,
+    '@emotion/react': EmotionReact,
+    '@emotion/styled': hijackedStyled,
+    '@emotion/is-prop-valid': isPropValid,
   },
 }