fix: significantly speed up styled-components in dev mode (#7440)

Author: stipsan

dev/starter-next-studio/next.config.js

@@ -1,4 +1,8 @@
 module.exports = {
+  env: {
+    // Matches the behavior of `sanity dev` which sets styled-components to use the fastest way of inserting CSS rules in both dev and production. It's default behavior is to disable it in dev mode.
+    SC_DISABLE_SPEEDY: 'false',
+  },
   async redirects() {
     return [
       {

dev/test-next-studio/next.config.mjs

@@ -21,6 +21,8 @@ const config = {
   env: {
     // Support the ability to debug log the studio, for example `DEBUG="sanity:pte:* pnpm dev:next-studio"`
     DEBUG: process.env.DEBUG,
+    // Matches the behavior of `sanity dev` which sets styled-components to use the fastest way of inserting CSS rules in both dev and production. It's default behavior is to disable it in dev mode.
+    SC_DISABLE_SPEEDY: 'false',
   },
   transpilePackages: [
     '@sanity/block-tools',

packages/sanity/src/_internal/cli/server/getViteConfig.ts

@@ -120,6 +120,16 @@ export async function getViteConfig(options: ViteOptions): Promise<InlineConfig>
       // eslint-disable-next-line no-process-env
       '__SANITY_STAGING__': process.env.SANITY_INTERNAL_ENV === 'staging',
       'process.env.MODE': JSON.stringify(mode),
+      /**
+       * Yes, double negatives are confusing.
+       * The default value of `SC_DISABLE_SPEEDY` is `process.env.NODE_ENV === 'production'`: https://github.com/styled-components/styled-components/blob/99c02f52d69e8e509c0bf012cadee7f8e819a6dd/packages/styled-components/src/constants.ts#L34
+       * Which means that in production, use the much faster way of inserting CSS rules, based on the CSSStyleSheet API (https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule)
+       * while in dev mode, use the slower way of inserting CSS rules, which appends text nodes to the `<style>` tag: https://github.com/styled-components/styled-components/blob/99c02f52d69e8e509c0bf012cadee7f8e819a6dd/packages/styled-components/src/sheet/Tag.ts#L74-L76
+       * There are historical reasons for this, primarily that browsers initially did not support editing CSS rules in the DevTools inspector if `CSSStyleSheet.insetRule` were used.
+       * However, that's no longer the case (since Chrome 81 back in April 2020: https://developer.chrome.com/docs/css-ui/css-in-js), the latest version of FireFox also supports it,
+       * and there is no longer any reason to use the much slower method in dev mode.
+       */
+      'process.env.SC_DISABLE_SPEEDY': JSON.stringify('false'),
       ...getStudioEnvironmentVariables({prefix: 'process.env.', jsonEncode: true}),
     },
   }