fix: emotion cache (#298)

* fix: enable emotion cache * fix: update favicon to use new boxed logo as svg
graasp · Jul 21, 2023 · c1acf01 · c1acf01
1 parent 85160d5
commit c1acf01
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 2 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -35,7 +35,9 @@ if (SENTRY_DSN) {
   });
 }
 
+// Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
+
 export interface MyAppProps extends AppProps {
   emotionCache?: EmotionCache;
 }

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -21,6 +21,7 @@ const GraaspLibraryDocument = ({ emotionStyleTags }: MyDocumentProps) => {
   return (
     <Html lang={DEFAULT_LANG}>
       <Head>
+        <link rel="icon" type="image/svg+xml" href="/graasp.svg" />
         <meta name="theme-color" />
         <link rel="stylesheet" />
         {emotionStyleTags}
@@ -71,7 +72,7 @@ GraaspLibraryDocument.getInitialProps = async (ctx: DocumentContext) => {
       ) =>
         function EnhanceApp(props) {
           // eslint-disable-next-line react/jsx-props-no-spreading
-          return <App {...props} />;
+          return <App emotionCache={cache} {...props} />;
         },
     });
 

diff --git a/public/graasp.svg b/public/graasp.svg
diff --git a/src/config/createEmotionCache.ts b/src/config/createEmotionCache.ts
@@ -1,5 +1,19 @@
 import createCache from '@emotion/cache';
 
+const isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 export default function createEmotionCache() {
-  return createCache({ key: 'css', prepend: true });
+  let insertionPoint: HTMLElement | undefined;
+
+  if (isBrowser) {
+    const emotionInsertionPoint: HTMLElement | null = document.querySelector(
+      'meta[name="emotion-insertion-point"]',
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint });
 }