Merge pull request #2250 from dxc-technology/jialecl-emotion

Mil4n0r · web-flow · commit 7d64b67b3eec · 2025-07-03T10:36:32.000+02:00
Emotion cache added
diff --git a/apps/website/next.config.js b/apps/website/next.config.js
@@ -25,5 +25,6 @@ module.exports = {
     "@cloudscape-design/components",
     "@cloudscape-design/component-toolkit",
     "@cloudscape-design/theming-runtime",
+    "react-data-grid",
   ],
 };
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -10,7 +10,9 @@
   "dependencies": {
     "@cloudscape-design/components": "^3.0.706",
     "@dxc-technology/halstack-react": "*",
+    "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
+    "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.0",
     "@radix-ui/react-popover": "^1.0.7",
     "cross-env": "^7.0.3",
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
@@ -10,6 +10,8 @@ import { LinksSectionDetails, LinksSections } from "@/common/pagesList";
 import Link from "next/link";
 import StatusBadge from "@/common/StatusBadge";
 import "../global-styles.css";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
 
 type NextPageWithLayout = NextPage & {
   getLayout?: (_page: ReactElement) => ReactNode;
@@ -18,6 +20,8 @@ type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 
+const clientSideEmotionCache = createCache({ key: "css", prepend: true });
+
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout || ((page) => page);
   const componentWithLayout = getLayout(<Component {...pageProps} />);
@@ -43,7 +47,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
   };
 
   return (
-    <>
+    <CacheProvider value={clientSideEmotionCache}>
       <Head>
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
       </Head>
@@ -96,6 +100,6 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
           </DxcToastsQueue>
         </DxcApplicationLayout.Main>
       </DxcApplicationLayout>
-    </>
+    </CacheProvider>
   );
 }
diff --git a/apps/website/pages/_document.tsx b/apps/website/pages/_document.tsx
@@ -1,6 +1,38 @@
 import Document, { Head, Html, Main, NextScript } from "next/document";
+import createEmotionServer from "@emotion/server/create-instance";
+import React from "react";
+import createCache from "@emotion/cache";
 
 export default class MyDocument extends Document {
+  static async getInitialProps(ctx: any) {
+    const originalRenderPage = ctx.renderPage;
+
+    const cache = createCache({ key: "css", prepend: true });
+    const { extractCriticalToChunks } = createEmotionServer(cache);
+
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App: any) =>
+          function EnhanceApp(props: any) {
+            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,
+      styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
+    };
+  }
   render() {
     return (
       <Html lang="en">
diff --git a/package-lock.json b/package-lock.json
