refactor: unify theme (#1303)

apps/web/src/pages/404.tsx

@@ -7,7 +7,7 @@ import { Helmet } from 'react-helmet-async';
 
 import ErrorImg from '../../public/imgs/invite-error.svg';
 
-export const StyledContainer = styled.div(() => {
+export const StyledContainer = styled('div')(() => {
   return {
     ...displayFlex('center', 'center'),
     flexDirection: 'column',

apps/web/src/pages/_app.tsx

@@ -3,7 +3,7 @@ import '../styles/globals.css';
 
 import { config, setupGlobal } from '@affine/env';
 import { createI18n, I18nextProvider } from '@affine/i18n';
-import createCache from '@emotion/cache';
+import { EmotionCache } from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { Provider } from 'jotai';
 import { useAtomsDebugValue } from 'jotai-devtools';
@@ -21,6 +21,7 @@ import { AffineSWRConfigProvider } from '../providers/AffineSWRConfigProvider';
 import { ModalProvider } from '../providers/ModalProvider';
 import { ThemeProvider } from '../providers/ThemeProvider';
 import { NextPageWithLayout } from '../shared';
+import createEmotionCache from '../utils/create-emotion-cache';
 
 setupGlobal();
 
@@ -35,6 +36,7 @@ const DebugAtoms = memo(function DebugAtoms() {
   return null;
 });
 
+const clientSideEmotionCache = createEmotionCache();
 const helmetContext = {};
 
 const defaultSWRConfig: SWRConfiguration = {
@@ -48,9 +50,13 @@ const defaultSWRConfig: SWRConfiguration = {
   },
 };
 
-const cache = createCache({ key: 'affine' });
-
-const App = function App({ Component, pageProps }: AppPropsWithLayout) {
+const App = function App({
+  Component,
+  pageProps,
+  emotionCache = clientSideEmotionCache,
+}: AppPropsWithLayout & {
+  emotionCache?: EmotionCache;
+}) {
   const getLayout = Component.getLayout || EmptyLayout;
   const i18n = useMemo(() => createI18n(), []);
 
@@ -63,8 +69,8 @@ const App = function App({ Component, pageProps }: AppPropsWithLayout) {
   }
 
   return (
-    <I18nextProvider i18n={i18n}>
-      <CacheProvider value={cache}>
+    <CacheProvider value={emotionCache}>
+      <I18nextProvider i18n={i18n}>
         <DebugAtoms />
         <SWRConfig value={defaultSWRConfig}>
           <AffineErrorBoundary router={useRouter()}>
@@ -83,6 +89,10 @@ const App = function App({ Component, pageProps }: AppPropsWithLayout) {
                 <HelmetProvider key="HelmetProvider" context={helmetContext}>
                   <Helmet>
                     <title>AFFiNE</title>
+                    <meta
+                      name="viewport"
+                      content="initial-scale=1, width=device-width"
+                    />
                   </Helmet>
                   {getLayout(<Component {...pageProps} />)}
                 </HelmetProvider>
@@ -90,8 +100,8 @@ const App = function App({ Component, pageProps }: AppPropsWithLayout) {
             </Suspense>
           </AffineErrorBoundary>
         </SWRConfig>
-      </CacheProvider>
-    </I18nextProvider>
+      </I18nextProvider>
+    </CacheProvider>
   );
 };
 

apps/web/src/pages/_document.tsx

@@ -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 />

apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx

@@ -22,7 +22,7 @@ import { PageLoading } from '../../../components/pure/loading';
 import { WorkspaceLayout } from '../../../layouts';
 import { NextPageWithLayout } from '../../../shared';
 
-export const NavContainer = styled.div(({ theme }) => {
+export const NavContainer = styled('div')(({ theme }) => {
   return {
     width: '100vw',
     padding: '0 12px',