chore(website): support emotion imports

website/package.json

@@ -10,6 +10,11 @@
     "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.7",
     "react": "17.0.2",

website/src/constants.ts

@@ -1,19 +1,42 @@
 import React from 'react'
 import { createRequire } from 'react-live-runner'
-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 * as EmotionSytled from '@emotion/styled'
+import * as EmotionIsPropValid 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'
 
-const imports = { react: React, 'styled-components': Styled }
+let counter = 0
+const emotionStyled = EmotionSytled.default
+Object.getOwnPropertyNames(emotionStyled).forEach((tag) => {
+  if (tag === 'length') return
+  Object.defineProperty(emotionStyled, tag, {
+    get() {
+      return emotionStyled(tag as keyof JSX.IntrinsicElements, {
+        target: `e${hashString('react-runner')}${counter++}`,
+      })
+    },
+  })
+})
+
+const imports = {
+  react: React,
+  '@emotion/css': EmotionCss,
+  '@emotion/react': EmotionReact,
+  '@emotion/styled': EmotionSytled,
+  '@emotion/is-prop-valid': EmotionIsPropValid,
+}
 export const scope = {
   ...React,
-  styled,
-  css,
-  keyframes,
-  createGlobalStyle,
+  styled: EmotionSytled.default,
+  css: EmotionReact.css,
+  keyframes: EmotionReact.keyframes,
+  Global: EmotionReact.Global,
   require: createRequire(imports),
+  jsxPragma: EmotionReact.jsx,
 }
 
 export const examples = [

website/src/pages/examples/hacker-news.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 
 type Item = {
   id: number