chore(website): support emotion imports

Author: nihgwu

website/package.json

@@ -10,6 +10,10 @@
     "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/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

@@ -2,18 +2,43 @@ 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 { 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${tag}-${counter++}`,
+      })
+    },
+  })
+})
+
+const imports = {
+  react: React,
+  'styled-components': Styled,
+  '@emotion/css': EmotionCss,
+  '@emotion/react': EmotionReact,
+  '@emotion/styled': EmotionSytled,
+  '@emotion/is-prop-valid': EmotionIsPropValid,
+}
 export const scope = {
   ...React,
   styled,
   css,
   keyframes,
   createGlobalStyle,
   require: createRequire(imports),
+  jsxPragma: EmotionReact.jsx,
 }
 
 export const examples = [