Adapt theme to app directory

app/emotion-cache-provider.js

@@ -0,0 +1,88 @@
+'use client'
+
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import createCache from '@emotion/cache'
+import {useServerInsertedHTML} from 'next/navigation'
+import {CacheProvider as DefaultCacheProvider} from '@emotion/react'
+
+export default function NextAppDirEmotionCacheProvider(props) {
+  const {options, CacheProvider = DefaultCacheProvider, children} = props
+
+  const [registry] = React.useState(() => {
+    const cache = createCache(options)
+    cache.compat = true
+    const prevInsert = cache.insert
+    let inserted = []
+    cache.insert = (...args) => {
+      const [selector, serialized] = args
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push({
+          name: serialized.name,
+          isGlobal: selector === '',
+        })
+      }
+
+      return prevInsert(...args)
+    }
+
+    const flush = () => {
+      const prevInserted = inserted
+      inserted = []
+      return prevInserted
+    }
+
+    return {cache, flush}
+  })
+
+  useServerInsertedHTML(() => {
+    const inserted = registry.flush()
+    if (inserted.length === 0) {
+      return null
+    }
+
+    let styles = ''
+    let dataEmotionAttribute = registry.cache.key
+
+    const globals = []
+
+    for (const {name, isGlobal} of inserted) {
+      const style = registry.cache.inserted[name]
+
+      if (typeof style !== 'boolean') {
+        if (isGlobal) {
+          globals.push({name, style})
+        } else {
+          styles += style
+          dataEmotionAttribute += ` ${name}`
+        }
+      }
+    }
+
+    return (
+      <>
+        {globals.map(({name, style}) => (
+          <style
+            key={name}
+            dangerouslySetInnerHTML={{__html: style}}
+            data-emotion={`${registry.cache.key}-global ${name}`}
+          />
+        ))}
+        {styles !== '' && (
+          <style
+            dangerouslySetInnerHTML={{__html: styles}}
+            data-emotion={dataEmotionAttribute}
+          />
+        )}
+      </>
+    )
+  })
+
+  return <CacheProvider value={registry.cache}>{children}</CacheProvider>
+}
+
+NextAppDirEmotionCacheProvider.propTypes = {
+  options: PropTypes.object.isRequired,
+  CacheProvider: PropTypes.func,
+  children: PropTypes.node.isRequired
+}