From 195eae8b3889fab568ee941918e5edbda342b355 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Wed, 2 Jul 2025 12:46:06 +0200 Subject: [PATCH 1/3] Emotion cache added --- apps/website/package.json | 1 + apps/website/pages/_app.tsx | 6 +- apps/website/pages/_document.tsx | 32 +++ .../pages/utilities/createEmotionCache.tsx | 5 + package-lock.json | 194 +++++++++++++++++- 5 files changed, 233 insertions(+), 5 deletions(-) create mode 100644 apps/website/pages/utilities/createEmotionCache.tsx diff --git a/apps/website/package.json b/apps/website/package.json index aee69b5452..8011c169c7 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -11,6 +11,7 @@ "@cloudscape-design/components": "^3.0.706", "@dxc-technology/halstack-react": "*", "@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 index e65b595ca0..f45a632f78 100644 --- 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 createEmotionCache from "./utilities/createEmotionCache"; +import { CacheProvider } from "@emotion/react"; type NextPageWithLayout = NextPage & { getLayout?: (_page: ReactElement) => ReactNode; @@ -43,7 +45,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) { }; return ( - <> + @@ -96,6 +98,6 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) { - + ); } diff --git a/apps/website/pages/_document.tsx b/apps/website/pages/_document.tsx index 7253fe4274..b3328436dc 100644 --- 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 createEmotionCache from "./utilities/createEmotionCache"; // You'll create this +import React from "react"; export default class MyDocument extends Document { + static async getInitialProps(ctx: any) { + const originalRenderPage = ctx.renderPage; + + const cache = createEmotionCache(); + const { extractCriticalToChunks } = createEmotionServer(cache); + + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App: any) => + function EnhanceApp(props: any) { + return ; + }, + }); + + const initialProps = await Document.getInitialProps(ctx); + const emotionStyles = extractCriticalToChunks(initialProps.html); + const emotionStyleTags = emotionStyles.styles.map((style) => ( +