From 034584cbac029c197c00ba38101bc09d8abfd50b Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin@webstackbuilders.com>
Date: Sun, 5 Jul 2026 01:58:48 +0300
Subject: [PATCH] Harden inline theme bootstrap

---
 package.json                                  |  8 ++++++++
 src/components/Head/ThemeInit.astro           | 19 ++++++-------------
 .../Head/server/__tests__/themeData.spec.ts   |  8 ++++----
 src/components/Head/server/themeData.ts       | 12 ++++++------
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 9c2bedd3f..3b5a23965 100644
--- a/package.json
+++ b/package.json
@@ -259,5 +259,13 @@
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.62.2"
+  },
+  "allowScripts": {
+    "@playwright/browser-chromium@1.61.1": true,
+    "@sentry/cli@2.58.6": true,
+    "esbuild@0.27.0": true,
+    "esbuild@0.28.1": true,
+    "esbuild@0.27.7": true,
+    "puppeteer@25.3.0": true
   }
 }
diff --git a/src/components/Head/ThemeInit.astro b/src/components/Head/ThemeInit.astro
index a8dd76684..f77279722 100644
--- a/src/components/Head/ThemeInit.astro
+++ b/src/components/Head/ThemeInit.astro
@@ -12,15 +12,15 @@
  */
 import { themeData } from './server/themeData'
 
-const { defaultThemeIdJson, darkThemeIdJson, metaColorsJson } = themeData()
+const { defaultThemeId, darkThemeId, metaColors } = themeData()
 ---
 
 <script
   is:inline
   define:vars={{
-    defaultThemeIdJson,
-    darkThemeIdJson,
-    metaColorsJson,
+    defaultThemeId,
+    darkThemeId,
+    metaColors,
   }}
 >
   // @ts-nocheck
@@ -48,10 +48,6 @@ const { defaultThemeIdJson, darkThemeIdJson, metaColorsJson } = themeData()
 
   const runThemeInit = () => {
     try {
-      const defaultThemeId = JSON.parse(defaultThemeIdJson)
-      const darkThemeId = JSON.parse(darkThemeIdJson)
-      const themeMetaColors = JSON.parse(metaColorsJson)
-
       const stored = localStorage.getItem('theme')
       const resolvedThemeId = getResolvedThemeId({ defaultThemeId, darkThemeId })
       const activeThemeId = stored && stored !== defaultThemeId ? stored : resolvedThemeId
@@ -59,7 +55,7 @@ const { defaultThemeIdJson, darkThemeIdJson, metaColorsJson } = themeData()
       applyThemeToDocument(document, activeThemeId)
 
       window.metaColors = window.metaColors || {}
-      Object.assign(window.metaColors, themeMetaColors)
+      Object.assign(window.metaColors, metaColors)
 
       applyThemeMetaColor(document, activeThemeId)
 
@@ -78,13 +74,10 @@ const { defaultThemeIdJson, darkThemeIdJson, metaColorsJson } = themeData()
    */
   document.addEventListener('astro:before-swap', event => {
     try {
-      const defaultThemeId = JSON.parse(defaultThemeIdJson)
-      const darkThemeId = JSON.parse(darkThemeIdJson)
-      const themeMetaColors = JSON.parse(metaColorsJson)
       const resolvedThemeId = getResolvedThemeId({ defaultThemeId, darkThemeId })
 
       window.metaColors = window.metaColors || {}
-      Object.assign(window.metaColors, themeMetaColors)
+      Object.assign(window.metaColors, metaColors)
 
       applyThemeToDocument(event.newDocument, resolvedThemeId)
       applyThemeMetaColor(event.newDocument, resolvedThemeId)
diff --git a/src/components/Head/server/__tests__/themeData.spec.ts b/src/components/Head/server/__tests__/themeData.spec.ts
index ced75a999..571cd7716 100644
--- a/src/components/Head/server/__tests__/themeData.spec.ts
+++ b/src/components/Head/server/__tests__/themeData.spec.ts
@@ -14,19 +14,19 @@ describe('themeData', () => {
     vi.restoreAllMocks()
   })
 
-  it('serializes configured theme ids and colors into JSON-safe strings', async () => {
+  it('returns configured theme ids and colors for the inline theme bootstrap', async () => {
     const themeData = await loadThemeData()
     const data = themeData()
 
-    const defaultThemeId = JSON.parse(data.defaultThemeIdJson)
+    const defaultThemeId = data.defaultThemeId
     expect(typeof defaultThemeId).toBe('string')
     expect(defaultThemeId.length).toBeGreaterThan(0)
 
-    const darkThemeId = JSON.parse(data.darkThemeIdJson)
+    const darkThemeId = data.darkThemeId
     expect(typeof darkThemeId).toBe('string')
     expect(darkThemeId.length).toBeGreaterThan(0)
 
-    const colors = JSON.parse(data.metaColorsJson) as Record<string, string>
+    const colors = data.metaColors
     const configuredIds = themeConfig.themes.map(theme => theme.id)
 
     configuredIds.forEach(id => {
diff --git a/src/components/Head/server/themeData.ts b/src/components/Head/server/themeData.ts
index 6f2945098..b5d14feb3 100644
--- a/src/components/Head/server/themeData.ts
+++ b/src/components/Head/server/themeData.ts
@@ -2,9 +2,9 @@ import themeConfig from '@content/themes.json'
 import { BuildError } from '@lib/errors/BuildError'
 
 interface ThemeInitScriptData {
-  defaultThemeIdJson: string
-  darkThemeIdJson: string
-  metaColorsJson: string
+  defaultThemeId: string
+  darkThemeId: string
+  metaColors: Record<string, string>
 }
 
 type ThemeDataFunction = () => ThemeInitScriptData
@@ -39,9 +39,9 @@ export const themeData: ThemeDataFunction = () => {
     const darkThemeId = hasDarkTheme ? 'dark' : defaultThemeId
 
     return {
-      defaultThemeIdJson: JSON.stringify(defaultThemeId),
-      darkThemeIdJson: JSON.stringify(darkThemeId),
-      metaColorsJson: JSON.stringify(metaColors),
+      defaultThemeId,
+      darkThemeId,
+      metaColors,
     }
   } catch (error) {
     throw new BuildError('Failed to prepare theme initialization data.', {