Docs: Sass automatic recompilation in dev mode with Astro (#41574)

Co-authored-by: Julien Déramond <juderamond@gmail.com>

diff --git a/site/src/components/head/Head.astro b/site/src/components/head/Head.astro
index 434ba8359c46f8f7152650e3c5575503799631c2..11bf4fedcd6f8c092fbe0767346b6fac9a820188 100644 (file)
--- 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 fc10fe75ab8ad7868449efbf8434f807d721a5ff..bf6b60ea057167e7f71e5a07c10447fd4b2e88c0 100644 (file)
--- 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 (file)
index 0000000..fc10fe7
--- /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>