[Beta] Disable runtime CSS-in-JS (#5122)

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 <Component {...pageProps} />;
 }
+
+// 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 <style> tag defined in _document.tsx.
+// This is obviously quite fragile but hopefully it'll be solved upstream.
+let didWarn = false;
+function disableAllRuntimeStyleInjection() {
+  // Prevent Stitches from finding the <style> tag from the server:
+  Object.defineProperty(document, 'styleSheets', {
+    get() {
+      return [];
+    },
+  });
+  // It will try to create a new <style> tag and insert stuff there...
+  const realInsertRule = CSSStyleSheet.prototype.insertRule;
+  CSSStyleSheet.prototype.insertRule = function () {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!didWarn) {
+        console.warn(
+          'Something is trying to inject runtime CSS-in-JS.\n' +
+            'All <style> insertions will be ignored.',
+          arguments
+        );
+      }
+      didWarn = true;
+    }
+    // ... but we'll prevent it from affecting the document:
+    this.disabled = true;
+    // @ts-ignore
+    return realInsertRule.apply(this, arguments);
+  };
+  // We're not supposed to use any other library that inserts <style> tags.
+  // In longer term, ideally, Sandpack should offer a zero-runtime option.
+}