From ed37a7d8a65e1d0ea2474c4ec4a15145c2c2ee1c Mon Sep 17 00:00:00 2001 From: dan Date: Tue, 27 Sep 2022 17:41:24 +0100 Subject: [PATCH] [Beta] Disable runtime CSS-in-JS (#5122) --- beta/src/pages/_app.tsx | 36 ++++++++++ beta/src/pages/_document.tsx | 125 ++++++++++++++++++++++++++++++++++- 2 files changed, 159 insertions(+), 2 deletions(-) diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx index 18bd9b2f6..6018c3498 100644 --- a/beta/src/pages/_app.tsx +++ b/beta/src/pages/_app.tsx @@ -20,6 +20,8 @@ if (typeof window !== 'undefined') { window.addEventListener(terminationEvent, function () { ga('send', 'timing', 'JS Dependencies', 'unload'); }); + + disableAllRuntimeStyleInjection(); } export default function MyApp({Component, pageProps}: AppProps) { @@ -53,3 +55,37 @@ export default function MyApp({Component, pageProps}: AppProps) { return ; } + +// HACK(css-in-js): We use Sandpack, which uses Stitches (css-in-js lib). +// This causes style recalc during hydration which is bad for perf. +// Instead, let's rely on the SSR'd +