From c2591194efb4ebcd64b46ac13a061c99dd9046b8 Mon Sep 17 00:00:00 2001 From: Cody Olsen <81981+stipsan@users.noreply.github.com> Date: Fri, 30 Aug 2024 06:58:25 +0200 Subject: [PATCH] fix: significantly speed up styled-components in dev mode (#7440) --- dev/starter-next-studio/next.config.js | 4 ++++ dev/test-next-studio/next.config.mjs | 2 ++ .../sanity/src/_internal/cli/server/getViteConfig.ts | 10 ++++++++++ 3 files changed, 16 insertions(+) diff --git a/dev/starter-next-studio/next.config.js b/dev/starter-next-studio/next.config.js index 81a7f85729e..5b6982f8a8d 100644 --- a/dev/starter-next-studio/next.config.js +++ b/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 [ { diff --git a/dev/test-next-studio/next.config.mjs b/dev/test-next-studio/next.config.mjs index c6fba39761b..e209564d298 100644 --- a/dev/test-next-studio/next.config.mjs +++ b/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', diff --git a/packages/sanity/src/_internal/cli/server/getViteConfig.ts b/packages/sanity/src/_internal/cli/server/getViteConfig.ts index 626f0adce50..3e27aaa03b6 100644 --- a/packages/sanity/src/_internal/cli/server/getViteConfig.ts +++ b/packages/sanity/src/_internal/cli/server/getViteConfig.ts @@ -120,6 +120,16 @@ export async function getViteConfig(options: ViteOptions): Promise // 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 `