@graphcommerce/next-ui 7.1.0-canary.56 → 7.1.0-canary.58

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 7.1.0-canary.58
+
+### Patch Changes
+
+- [#2121](https://github.com/graphcommerce-org/graphcommerce/pull/2121) [`a5da6ffc8`](https://github.com/graphcommerce-org/graphcommerce/commit/a5da6ffc8be359e93c7bde986134f7162aae13b9) - Change the critical css injection location to be in the head instead of `<style>` tags in the body. It has a number of negative consequences, such as the famous "flash of unstyled content" (FOUC) and the re-paint and re-layout required. ([@paales](https://github.com/paales))
+
+## 7.1.0-canary.57
+
 ## 7.1.0-canary.56
 
 ### Patch Changes

package/Page/CssAndFramerMotionProvider.tsx

@@ -1,9 +1,8 @@
 import { GlobalStyles } from '@mui/material'
 import { LazyMotion } from 'framer-motion'
+import { EmotionProvider, EmotionProviderProps } from '../Styles/EmotionProvider'
 
-export type GraphCommerceProviderProps = {
-  children: React.ReactNode
-}
+export type CssAndFramerMotionProviderProps = EmotionProviderProps
 
 /**
  * For [@emotion/core](https://emotion.sh/docs/introduction) and
@@ -12,22 +11,25 @@ export type GraphCommerceProviderProps = {
  * - Wrapps the app to lazily load framer-motion.
  * - Wrapps the app to have Emotion CSS styles
  */
-export function CssAndFramerMotionProvider({ children }: GraphCommerceProviderProps) {
+export function CssAndFramerMotionProvider(props: CssAndFramerMotionProviderProps) {
+  const { children, emotionCache } = props
   return (
-    <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
-      {children}
-      <GlobalStyles
-        styles={{
-          ':root': {
-            '--client-size-y': '100vh',
-            '--client-size-x': '100vw',
-            '@supports(height: 100dvh)': {
-              '--client-size-y': '100dvh',
-              '--client-size-x': '100dvw',
+    <EmotionProvider emotionCache={emotionCache}>
+      <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
+        {children}
+        <GlobalStyles
+          styles={{
+            ':root': {
+              '--client-size-y': '100vh',
+              '--client-size-x': '100vw',
+              '@supports(height: 100dvh)': {
+                '--client-size-y': '100dvh',
+                '--client-size-x': '100dvw',
+              },
             },
-          },
-        }}
-      />
-    </LazyMotion>
+          }}
+        />
+      </LazyMotion>
+    </EmotionProvider>
   )
 }

package/Styles/EmotionProvider.tsx

@@ -1,14 +1,14 @@
-import createCache from '@emotion/cache'
 import type { EmotionCache } from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
+import { createEmotionCache } from './createEmotionCache'
 
-let muiCache: EmotionCache | undefined
-export const createMuiCache = () => {
-  muiCache = createCache({ key: 'mui' })
-  return muiCache
-}
+export type EmotionProviderProps = { children?: React.ReactNode; emotionCache?: EmotionCache }
+
+const clientSideEmotionCache = createEmotionCache()
 
 /** Provider that is supposed to be used in your `pages/_app.tsx` */
-export function EmotionProvider({ children }: { children: React.ReactNode }) {
-  return <CacheProvider value={muiCache ?? createMuiCache()}>{children}</CacheProvider>
+export function EmotionProvider(props: EmotionProviderProps) {
+  const { children, emotionCache = clientSideEmotionCache } = props
+
+  return <CacheProvider value={emotionCache}>{children}</CacheProvider>
 }

package/Styles/createEmotionCache.ts

@@ -0,0 +1,14 @@
+import createCache from '@emotion/cache'
+
+export const createEmotionCache = () => {
+  let insertionPoint: HTMLElement | undefined
+
+  if (typeof window !== 'undefined') {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]',
+    )
+    insertionPoint = emotionInsertionPoint ?? undefined
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint })
+}

package/Styles/withEmotionCache.tsx

@@ -1,36 +1,46 @@
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
 // eslint-disable-next-line @next/next/no-document-import-in-page
+import { AppType } from 'next/app'
 import type NextDocument from 'next/document'
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import type { DocumentContext, DocumentInitialProps } from 'next/document'
-import { createMuiCache } from './EmotionProvider'
+import { EmotionProviderProps } from './EmotionProvider'
+import { createEmotionCache } from './createEmotionCache'
 
 export type EmotionCacheProps = { emotionStyleTags: EmotionJSX.Element[] }
 
 export function withEmotionCache(Document: typeof NextDocument): typeof NextDocument {
   return class DocumentWithEmotionCache extends Document {
     static async getInitialProps(ctx: DocumentContext) {
-      const emotionServer = createEmotionServer(createMuiCache())
-      const initialProps = await Document.getInitialProps(ctx)
+      const cache = createEmotionCache()
+      const emotionServer = createEmotionServer(cache)
+
+      const originalRenderPage = ctx.renderPage
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp:
+            (App: React.ComponentType<React.ComponentProps<AppType> & EmotionProviderProps>) =>
+            (props) => <App emotionCache={cache} {...props} />,
+        })
 
-      const emotionStyleTags = emotionServer
-        .extractCriticalToChunks(initialProps.html)
-        .styles.filter(({ css }) => css !== '')
-        .map((style) => (
-          <style
-            data-emotion={`${style.key} ${style.ids.join(' ')}`}
-            key={style.key}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: style.css }}
-          />
-        ))
+      const initialProps = await Document.getInitialProps(ctx)
+      // This is important. It prevents Emotion to render invalid HTML.
+      // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
+      const emotionStyles = emotionServer.extractCriticalToChunks(initialProps.html)
+      const emotionStyleTags = emotionStyles.styles.map((style) => (
+        <style
+          data-emotion={`${style.key} ${style.ids.join(' ')}`}
+          key={style.key}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: style.css }}
+        />
+      ))
 
-      const props: DocumentInitialProps & EmotionCacheProps = {
+      return {
         ...initialProps,
         emotionStyleTags,
       }
-      return props
     }
   }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.1.0-canary.56",
+  "version": "7.1.0-canary.58",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -26,13 +26,13 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^7.1.0-canary.56",
-    "@graphcommerce/framer-next-pages": "^7.1.0-canary.56",
-    "@graphcommerce/framer-scroller": "^7.1.0-canary.56",
-    "@graphcommerce/framer-utils": "^7.1.0-canary.56",
-    "@graphcommerce/image": "^7.1.0-canary.56",
-    "@graphcommerce/prettier-config-pwa": "^7.1.0-canary.56",
-    "@graphcommerce/typescript-config-pwa": "^7.1.0-canary.56",
+    "@graphcommerce/eslint-config-pwa": "^7.1.0-canary.58",
+    "@graphcommerce/framer-next-pages": "^7.1.0-canary.58",
+    "@graphcommerce/framer-scroller": "^7.1.0-canary.58",
+    "@graphcommerce/framer-utils": "^7.1.0-canary.58",
+    "@graphcommerce/image": "^7.1.0-canary.58",
+    "@graphcommerce/prettier-config-pwa": "^7.1.0-canary.58",
+    "@graphcommerce/typescript-config-pwa": "^7.1.0-canary.58",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",