Fix theme flash (#3093)

david-crespo · web-flow · commit a777968900f4 · 2026-02-25T04:21:02.000Z
The inline script was being blocked on Vercel by CSP like it would in
prod. Moving it to a separate file fixes this. Ignore the debug-e2e
skill, I just had that in flight and it feels stupid to make a separate
PR.
diff --git a/.claude/skills/debug-e2e/SKILL.md b/.claude/skills/debug-e2e/SKILL.md
@@ -9,6 +9,29 @@ Use this skill when investigating flaky Playwright E2E test failures from CI.
 
 ## Workflow
 
+### 0. Catalogue recent CI flakes (optional)
+
+When asked to survey recent failures rather than debug a specific one, build a
+table of all Playwright flakes across recent CI runs.
+
+```bash
+# List recent failed runs
+gh run list --limit 80 --json databaseId,headBranch,conclusion,displayTitle,createdAt \
+  | jq -r '.[] | select(.conclusion == "failure") | "\(.databaseId)\t\(.headBranch)\t\(.displayTitle)\t\(.createdAt)"'
+
+# For each failed run, find which Playwright jobs failed
+gh run view <RUN_ID> --json jobs \
+  | jq -r '.jobs[] | select(.conclusion == "failure") | "\(.name)\t\(.conclusion)"'
+
+# Extract test names and error summaries from failed runs
+gh run view <RUN_ID> --log-failed 2>&1 | rg '› .*e2e\.ts.*›' | rg -v 'Retry'
+```
+
+Produce a markdown table with columns: Test, Browser, Run ID, Date.
+Sort by most recent first. Distinguish real flakes from bugs that were fixed
+between pushes (a test that fails across all browsers in one run and then
+disappears was likely a real bug, not a flake).
+
 ### 1. Get CI failure details
 
 ```bash
diff --git a/index.html b/index.html
@@ -18,21 +18,7 @@
     <link rel="icon" type="image/svg+xml" href="./app/assets/favicon.svg" />
     <link rel="icon" type="image/png" href="./app/assets/favicon.png" />
 
-    <!-- Set theme before first paint to prevent flash. Mirrors logic in app/stores/theme.ts. -->
-    <script>
-      ;(function () {
-        var p = 'dark'
-        try {
-          var raw = localStorage.getItem('theme-preference')
-          var stored = raw ? JSON.parse(raw) : null
-          // match zustand persist format
-          if (stored && stored.state && stored.state.theme) p = stored.state.theme
-        } catch (e) {}
-        if (p === 'system')
-          p = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
-        document.documentElement.dataset.theme = p
-      })()
-    </script>
+    <!-- theme-init.js injected by vite plugin to avoid Vite trying to bundle it -->
   </head>
   <body>
     <div id="root"></div>
diff --git a/public/theme-init.js b/public/theme-init.js
@@ -0,0 +1,22 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+// Set theme before first paint to prevent flash of wrong color scheme.
+// Mirrors logic in app/stores/theme.ts. Must stay in sync.
+;(function () {
+  var p = 'dark'
+  try {
+    var raw = localStorage.getItem('theme-preference')
+    var stored = raw ? JSON.parse(raw) : null
+    // match zustand persist format
+    if (stored && stored.state && stored.state.theme) p = stored.state.theme
+  } catch (_e) {}
+  if (p === 'system')
+    p = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+  document.documentElement.dataset.theme = p
+})()
diff --git a/vite.config.ts b/vite.config.ts
@@ -5,7 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
-import { randomBytes } from 'crypto'
+import { createHash, randomBytes } from 'crypto'
+import { readFileSync } from 'fs'
 import { resolve } from 'path'
 
 import tailwindcss from '@tailwindcss/vite'
@@ -130,6 +131,27 @@ export default defineConfig(({ mode }) => ({
       name: 'inject-html-tags',
       transformIndexHtml: () => (process.env.VERCEL ? previewTags : []),
     },
+    {
+      // Inject theme-init.js as a classic (non-module) render-blocking script
+      // so it sets data-theme before first paint. It lives in public/ so it
+      // passes CSP default-src 'self'. We inject it here rather than putting
+      // it in index.html because Vite tries to bundle any <script src> it finds
+      // there. Content hash query param handles cache-busting since public/
+      // files aren't fingerprinted by Vite. We cache static assets for a year,
+      // so we need the hash.
+      name: 'theme-init',
+      transformIndexHtml() {
+        const content = readFileSync(resolve(__dirname, 'public/theme-init.js'))
+        const hash = createHash('sha256').update(content).digest('hex').slice(0, 8)
+        return [
+          {
+            injectTo: 'head-prepend',
+            tag: 'script',
+            attrs: { src: `/theme-init.js?v=${hash}` },
+          },
+        ]
+      },
+    },
     react(),
     apiMode === 'remote' && basicSsl(),
   ],
