refactor: unify theme (#1303)

2026-07-19 02:56:23 +08:00 · 2023-03-04 01:36:20 -06:00
parent fe0d78b2d6
commit 4e9f0c97a1
43 changed files with 779 additions and 543 deletions
@@ -1,7 +1,48 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document';
+import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
+import createEmotionServer from '@emotion/server/create-instance';
+import Document, {
+  DocumentContext,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document';
 import * as React from 'react';

-export default class AppDocument extends Document {
+import createEmotionCache from '../utils/create-emotion-cache';
+
+export default class AppDocument extends Document<{
+  emotionStyleTags: EmotionJSX.Element[];
+}> {
+  static getInitialProps = async (ctx: DocumentContext) => {
+    const originalRenderPage = ctx.renderPage;
+
+    const cache = createEmotionCache();
+    const { extractCriticalToChunks } = createEmotionServer(cache);
+
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App: any) =>
+          function EnhanceApp(props) {
+            return <App emotionCache={cache} {...props} />;
+          },
+      });
+
+    const initialProps = await Document.getInitialProps(ctx);
+    const emotionStyles = extractCriticalToChunks(initialProps.html);
+    const emotionStyleTags = emotionStyles.styles.map(style => (
+      <style
+        data-emotion={`${style.key} ${style.ids.join(' ')}`}
+        key={style.key}
+        dangerouslySetInnerHTML={{ __html: style.css }}
+      />
+    ));
+
+    return {
+      ...initialProps,
+      emotionStyleTags,
+    };
+  };
  render() {
    return (
      <Html>
@@ -14,6 +55,8 @@ export default class AppDocument extends Document {
            href="/apple-touch-icon.png"
          />
          <link rel="icon" sizes="192x192" href="/chrome-192x192.png" />
+          <meta name="emotion-insertion-point" content="" />
+          {this.props.emotionStyleTags}
        </Head>
        <body>
          <Main />