Add prepend css but has unresolved FOUC issues

ShuPink · Feb 10, 2022 · 7d64cc6 · 7d64cc6
1 parent efa9620
commit 7d64cc6
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 31 deletions.
diff --git a/examples/remix-with-typescript/app/entry.server.tsx b/examples/remix-with-typescript/app/entry.server.tsx
@@ -33,22 +33,24 @@ export default function handleRequest(
   // Render the component to a string.
   const html = renderToString(<MuiRemixServer />);
 
-  // Grab the CSS from emotion
-  const { styles } = extractCriticalToChunks(html);
+  // // Grab the CSS from emotion
+  // const { styles } = extractCriticalToChunks(html);
 
-  let stylesHTML = '';
+  // let stylesHTML = '';
 
-  styles.forEach(({ key, ids, css }) => {
-    const emotionKey = `${key} ${ids.join(' ')}`;
-    const newStyleTag = `<style data-emotion="${emotionKey}">${css}</style>`;
-    stylesHTML = `${stylesHTML}${newStyleTag}`;
-  });
+  // styles.forEach(({ key, ids, css }) => {
+  //   const emotionKey = `${key} ${ids.join(' ')}`;
+  //   const newStyleTag = `<style data-emotion="${emotionKey}">${css}</style>`;
+  //   stylesHTML = `${stylesHTML}${newStyleTag}`;
+  // });
 
-  // Add the emotion style tags after the insertion point meta tag
-  const markup = html.replace(
-    /<meta(\s)*name="emotion-insertion-point"(\s)*content="emotion-insertion-point"(\s)*\/>/,
-    `<meta name="emotion-insertion-point" content="emotion-insertion-point"/>${stylesHTML}`,
-  );
+  // // Add the emotion style tags after the insertion point meta tag
+  // const markup = html.replace(
+  //   /<meta(\s)*name="emotion-insertion-point"(\s)*content="emotion-insertion-point"(\s)*\/>/,
+  //   `<meta name="emotion-insertion-point" content="emotion-insertion-point"/>${stylesHTML}`,
+  // );
+
+  const markup = html;
 
   responseHeaders.set('Content-Type', 'text/html');
 

diff --git a/examples/remix-with-typescript/app/root.tsx b/examples/remix-with-typescript/app/root.tsx
@@ -5,34 +5,40 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material';
 import theme from './src/theme';
 import ClientStyleContext from './src/ClientStyleContext';
 import Layout from './src/Layout';
+import styles from './styles/global.css';
 
 interface DocumentProps {
   children: React.ReactNode;
   title?: string;
 }
 
+export function links() {
+  return [{ rel: 'stylesheet', href: styles }];
+}
+
 const Document = withEmotionCache(({ children, title }: DocumentProps, emotionCache) => {
-  const clientStyleData = React.useContext(ClientStyleContext);
+  // const clientStyleData = React.useContext(ClientStyleContext);
 
-  // Only executed on client
-  useEnhancedEffect(() => {
-    // re-link sheet container
-    emotionCache.sheet.container = document.head;
-    // re-inject tags
-    const tags = emotionCache.sheet.tags;
-    emotionCache.sheet.flush();
-    tags.forEach((tag) => {
-      // eslint-disable-next-line no-underscore-dangle
-      (emotionCache.sheet as any)._insertTag(tag);
-    });
-    // reset cache to reapply global styles
-    clientStyleData.reset();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // // Only executed on client
+  // useEnhancedEffect(() => {
+  //   // re-link sheet container
+  //   emotionCache.sheet.container = document.head;
+  //   // re-inject tags
+  //   const tags = emotionCache.sheet.tags;
+  //   emotionCache.sheet.flush();
+  //   tags.forEach((tag) => {
+  //     // eslint-disable-next-line no-underscore-dangle
+  //     (emotionCache.sheet as any)._insertTag(tag);
+  //   });
+  //   // reset cache to reapply global styles
+  //   clientStyleData.reset();
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
 
   return (
     <html lang="en">
       <head>
+        <meta name="emotion-insertion-point" content="emotion-insertion-point" />
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <meta name="theme-color" content={theme.palette.primary.main} />
@@ -43,7 +49,6 @@ const Document = withEmotionCache(({ children, title }: DocumentProps, emotionCa
           rel="stylesheet"
           href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
         />
-        <meta name="emotion-insertion-point" content="emotion-insertion-point" />
       </head>
       <body>
         {children}

diff --git a/examples/remix-with-typescript/app/routes/index.tsx b/examples/remix-with-typescript/app/routes/index.tsx
@@ -2,6 +2,12 @@ import * as React from 'react';
 import type { MetaFunction } from 'remix';
 import { Link } from 'remix';
 import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import styles from '../styles/index.css';
+
+export function links() {
+  return [{ rel: 'stylesheet', href: styles }];
+}
 
 // https://remix.run/api/conventions#meta
 export const meta: MetaFunction = () => {
@@ -21,6 +27,13 @@ export default function Index() {
       <Link to="/about" color="secondary">
         Go to the about page
       </Link>
+      <div>
+        Global css example. If prepend is working I should be monospace font otherwise I will be
+        roboto.
+      </div>
+      <Button className="button" variant="contained">
+        Regular stylesheet example. If prepend is working I should be red, otherwise I will be blue
+      </Button>
     </React.Fragment>
   );
 }
diff --git a/examples/remix-with-typescript/app/src/createEmotionCache.ts b/examples/remix-with-typescript/app/src/createEmotionCache.ts
@@ -1,5 +1,9 @@
 import createCache from '@emotion/cache';
 
 export default function createEmotionCache() {
-  return createCache({ key: 'css' });
+  return createCache({
+    key: 'css',
+    // prepend true to move added styles to top of head
+    prepend: true,
+  });
 }
diff --git a/examples/remix-with-typescript/app/styles/global.css b/examples/remix-with-typescript/app/styles/global.css
@@ -0,0 +1,3 @@
+body {
+  font-family: monospace;
+}
diff --git a/examples/remix-with-typescript/app/styles/index.css b/examples/remix-with-typescript/app/styles/index.css
@@ -0,0 +1,3 @@
+.button {
+  background: red;
+}