1import { Global } from '@emotion/react'; 2import { BlockingSetInitialColorMode } from '@expo/styleguide'; 3import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; 4import React from 'react'; 5 6import { globalExtras } from '~/global-styles/extras'; 7import { globalFonts } from '~/global-styles/fonts'; 8import { globalNProgress } from '~/global-styles/nprogress'; 9import { globalPrism } from '~/global-styles/prism'; 10import { globalReset } from '~/global-styles/reset'; 11import { globalTables } from '~/global-styles/tables'; 12import { globalTippy } from '~/global-styles/tippy'; 13 14export default class MyDocument extends Document<{ css?: string }> { 15 static async getInitialProps(ctx: DocumentContext) { 16 const initialProps = await Document.getInitialProps(ctx); 17 return { 18 ...initialProps, 19 styles: <>{initialProps.styles}</>, 20 }; 21 } 22 23 render() { 24 return ( 25 <Html lang="en"> 26 <Head> 27 <Global 28 styles={[ 29 globalFonts, 30 globalReset, 31 globalNProgress, 32 globalTables, 33 globalPrism, 34 globalTippy, 35 globalExtras, 36 ]} 37 /> 38 39 <link 40 rel="preload" 41 href="/static/fonts/Inter-Regular.woff2?v=3.15" 42 as="font" 43 type="font/woff2" 44 crossOrigin="anonymous" 45 /> 46 </Head> 47 <body> 48 <BlockingSetInitialColorMode /> 49 <Main /> 50 <NextScript /> 51 </body> 52 </Html> 53 ); 54 } 55} 56