From 956644458037b6d4249ceb9b77db9b7081f8092d Mon Sep 17 00:00:00 2001
From: Maxime Lardenois <maxime.lardenois@orange.com>
Date: Wed, 2 Jul 2025 12:58:34 +0200
Subject: [PATCH] Docs: Sass automatic recompilation in dev mode with Astro
 (#41574)
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <juderamond@gmail.com>
---
 site/src/components/head/Head.astro     | 16 +++++++++++++---
 site/src/components/head/Scss.astro     |  1 +
 site/src/components/head/ScssProd.astro |  7 +++++++
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 site/src/components/head/ScssProd.astro

diff --git a/site/src/components/head/Head.astro b/site/src/components/head/Head.astro
index 434ba8359c..11bf4fedcd 100644
--- a/site/src/components/head/Head.astro
+++ b/site/src/components/head/Head.astro
@@ -6,7 +6,6 @@ import Stylesheet from '@components/head/Stylesheet.astro'
 import Favicons from '@components/head/Favicons.astro'
 import Social from '@components/head/Social.astro'
 import Analytics from '@components/head/Analytics.astro'
-import Scss from '@components/head/Scss.astro'
 
 interface Props {
   description: string
@@ -25,6 +24,10 @@ const isHome = Astro.url.pathname === '/'
 const pageTitle = isHome
   ? `${getConfig().title} · ${getConfig().subtitle}`
   : `${title} · ${getConfig().title} v${getConfig().docs_version}`
+
+// Dynamic imports to avoid build-time processing
+const Scss = import.meta.env.PROD ? null : await import('@components/head/Scss.astro')
+const ScssProd = import.meta.env.PROD ? await import('@components/head/ScssProd.astro') : null
 ---
 
 <meta charset="UTF-8" />
@@ -47,8 +50,15 @@ const pageTitle = isHome
 
 <script is:inline src={getVersionedDocsPath('assets/js/color-modes.js')}></script>
 
-<Stylesheet direction={direction} layout={layout} />
-<Scss />
+{import.meta.env.PROD && ScssProd && (
+  <Stylesheet direction={direction} layout={layout} />
+  <ScssProd.default />
+)}
+
+{!import.meta.env.PROD && Scss && (
+  <Scss.default />
+)}
+
 <Favicons />
 <Social description={description} layout={layout} thumbnail={thumbnail} title={title} />
 <Analytics />
diff --git a/site/src/components/head/Scss.astro b/site/src/components/head/Scss.astro
index fc10fe75ab..bf6b60ea05 100644
--- a/site/src/components/head/Scss.astro
+++ b/site/src/components/head/Scss.astro
@@ -2,6 +2,7 @@
 ---
 
 <style is:global lang="scss">
+  @import '../../../../scss/bootstrap.scss';
   @import '../../scss/docs';
   @import '../../scss/docs_search';
 </style>
diff --git a/site/src/components/head/ScssProd.astro b/site/src/components/head/ScssProd.astro
new file mode 100644
index 0000000000..fc10fe75ab
--- /dev/null
+++ b/site/src/components/head/ScssProd.astro
@@ -0,0 +1,7 @@
+---
+---
+
+<style is:global lang="scss">
+  @import '../../scss/docs';
+  @import '../../scss/docs_search';
+</style>
-- 
2.47.2