Skip to content
This repository was archived by the owner on Oct 16, 2026. It is now read-only.

fix(dev): keep error overlay CSS in adoptedStyleSheets #68

Merged
kody-bot merged 1 commit into from
Oct 15, 2026
Merged

fix(dev): keep error overlay CSS in adoptedStyleSheets #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/dev/live-reload.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,9 @@ function showOverlay(view) {
const host = document.createElement('kody-dev-overlay');
const root = host.attachShadow({ mode: 'open' });
const label = view.kind === 'build' ? 'Build error' : 'Runtime error';
root.innerHTML = \`
<style>
// Keep CSS out of the text tree (page-text readers / textContent walkers).
const sheet = new CSSStyleSheet();
sheet.replaceSync(\`
.backdrop { position: fixed; inset: 0; z-index: 2147483647; background: rgba(10, 4, 7, .82); display: flex; align-items: flex-start; justify-content: center; overflow: auto; font: 14px/1.5 ui-sans-serif, system-ui, sans-serif; }
.panel { margin: 48px 16px; max-width: 960px; width: 100%; background: #1a1015; color: #f5e9ee; border: 1px solid #3a2530; border-radius: 10px; padding: 20px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
Expand All @@ -123,7 +124,9 @@ function showOverlay(view) {
.request { color: #bfa9b3; font-size: 13px; margin: 0 0 12px; }
pre { margin: 12px 0 0; padding: 14px; overflow: auto; background: #0e080b; border: 1px solid #3a2530; border-radius: 8px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.hint { color: #bfa9b3; font-size: 12px; margin-top: 12px; }
</style>
\`);
root.adoptedStyleSheets = [sheet];
root.innerHTML = \`
<div class="backdrop" role="alertdialog" aria-modal="true" aria-labelledby="kody-dev-title">
<div class="panel">
<div class="top"><span class="label"></span><button type="button" aria-label="Dismiss">×</button></div>
Expand Down
9 changes: 9 additions & 0 deletions test/dev-live-reload.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,20 @@ import { request } from 'node:http'
import { test } from 'node:test'
import {
injectLiveReloadScript,
liveReloadClientSource,
liveReloadScriptTag,
shouldInjectLiveReload,
} from '../src/dev/live-reload.js'
import { waitFor, withDevServer } from './dev-server-harness.js'

test('error overlay CSS uses adoptedStyleSheets, not a light-DOM <style> text node', () => {
assert.match(liveReloadClientSource, /adoptedStyleSheets/)
assert.match(liveReloadClientSource, /CSSStyleSheet/)
assert.match(liveReloadClientSource, /replaceSync/)
assert.doesNotMatch(liveReloadClientSource, /<style>/)
assert.doesNotMatch(liveReloadClientSource, /<\/style>/)
})

test('injectLiveReloadScript prefers </head>, then </body>, then appends once', () => {
assert.equal(
injectLiveReloadScript('<html><head><title>x</title></head><body></body></html>'),
Expand Down
Loading