@lovrozagar/flare 0.1.2 → 0.2.0

package/src/styles/index.ts

@@ -47,6 +47,10 @@ export function __setMaxRegistrySize(size: number): void {
 const registry = new Map<string, string>();
 let domInjectionEnabled = false;
 let ssrSheetPresent = false;
+/* Names whose scoped rules are in the live `#flare-runtime` sheet. Distinct
+ * from `registry`: a name can be registered while the SSR sheet gate is up
+ * (lazy `styles()` during hydrate) and never inserted. */
+const injected = new Set<string>();
 
 export function enableDomInjection(): void {
 	domInjectionEnabled = true;
@@ -58,6 +62,14 @@ export function enableDomInjection(): void {
 
 export function finishHydration(): void {
 	ssrSheetPresent = false;
+	/* Flush CSS registered while the SSR sheet blocked insertRule — otherwise
+	 * a later styles() call sees registry.has and never injects. */
+	for (const [name, scoped] of registry) {
+		ensureInjected(name, scoped, "attr");
+	}
+	for (const [name, scoped] of classRegistry) {
+		ensureInjected(name, scoped, "class");
+	}
 }
 
 function hashString(str: string): string {
@@ -892,11 +904,16 @@ export function registerCSS(css: string): string {
 }
 
 export function registerCSSByName(name: string, css: string): string {
-	if (registry.has(name)) return name;
+	const existing = registry.get(name);
+	if (existing !== undefined) {
+		ensureInjected(name, existing, "attr");
+		return name;
+	}
 	if (isDev) validateCSS(name, css);
 	const scoped = minifyCSS(scopeCSS(name, css));
 	registry.set(name, scoped);
 	injectStyleToDOM(scoped);
+	markInjected(name);
 	/* FIFO eviction: remove oldest entries when over limit */
 	if (registry.size > maxRegistrySize) {
 		const iter = registry.keys();
@@ -904,6 +921,7 @@ export function registerCSSByName(name: string, css: string): string {
 			const oldest = iter.next();
 			if (oldest.done) break;
 			registry.delete(oldest.value);
+			injected.delete(oldest.value);
 		}
 		rebuildSheet();
 	}
@@ -917,81 +935,85 @@ export function registerCSSByName(name: string, css: string): string {
  */
 export function forceRegisterCSSByName(name: string, css: string): void {
 	registry.delete(name);
+	injected.delete(name);
 	registerCSSByName(name, css);
 }
 
+function readDocumentNonce(): string {
+	if (typeof document === "undefined") return "";
+	const meta = document.querySelector('meta[name="csp-nonce"]');
+	const fromContent = meta?.getAttribute("content");
+	if (fromContent) return fromContent;
+	const tagged = document.querySelector("script[nonce], style[nonce]") as HTMLElement | null;
+	return tagged?.nonce || tagged?.getAttribute("nonce") || "";
+}
+
 /**
- * Split minified CSS into individual rules by tracking brace depth.
- * Handles nested @media / @supports blocks correctly.
+ * Insert a complete nonce'd `<style id="flare-runtime">`. CSP checks nonce at
+ * insertion; mutating an in-document sheet is not covered by that nonce.
  */
-function splitCSSRules(css: string): string[] {
-	const rules: string[] = [];
-	let depth = 0;
-	let start = 0;
-	for (let i = 0; i < css.length; i++) {
-		if (css[i] === "{") depth++;
-		else if (css[i] === "}") {
-			depth--;
-			if (depth === 0) {
-				const rule = css.slice(start, i + 1).trim();
-				if (rule.length > 0) rules.push(rule);
-				start = i + 1;
-			}
-		}
+function writeRuntimeSheet(css: string): void {
+	const el = document.createElement("style");
+	el.id = RUNTIME_SHEET_ID;
+	const nonce = readDocumentNonce();
+	if (nonce) {
+		el.setAttribute("nonce", nonce);
+		el.nonce = nonce;
 	}
-	return rules;
+	el.textContent = css;
+	const old = document.getElementById(RUNTIME_SHEET_ID);
+	if (old) old.replaceWith(el);
+	else document.head.appendChild(el);
 }
 
-function getStyleEl(): HTMLStyleElement {
-	let styleEl = document.getElementById(RUNTIME_SHEET_ID) as HTMLStyleElement | null;
-	if (!styleEl) {
-		styleEl = document.createElement("style");
-		styleEl.id = RUNTIME_SHEET_ID;
-		document.head.appendChild(styleEl);
+function liveSheetText(): string {
+	if (typeof document === "undefined") return "";
+	const el = document.getElementById(RUNTIME_SHEET_ID) as HTMLStyleElement | null;
+	if (!el) return "";
+	if (el.sheet) {
+		return Array.from(el.sheet.cssRules)
+			.map((r) => r.cssText)
+			.join("");
 	}
-	return styleEl;
+	return el.textContent ?? "";
+}
+
+function sheetHasName(name: string, kind: "attr" | "class"): boolean {
+	const text = liveSheetText();
+	if (!text) return false;
+	if (kind === "class") return text.includes(`.${name}`);
+	const esc = escapeCSSAttrValue(name);
+	return text.includes(`[data-c="${esc}"]`) || text.includes(`[data-c=${esc}]`);
+}
+
+function markInjected(name: string): void {
+	if (domInjectionEnabled && !ssrSheetPresent) injected.add(name);
+}
+
+function ensureInjected(name: string, scoped: string, kind: "attr" | "class"): void {
+	if (!domInjectionEnabled || ssrSheetPresent || typeof document === "undefined") {
+		return;
+	}
+	if (sheetHasName(name, kind)) {
+		injected.add(name);
+		return;
+	}
+	injectStyleToDOM(scoped);
+	injected.add(name);
 }
 
-/**
- * Inject scoped CSS into the DOM via CSSOM insertRule (CSP-safe).
- * Falls back to textContent append for environments without CSSOM (jsdom).
- */
 function injectStyleToDOM(scoped: string): void {
 	if (!domInjectionEnabled || ssrSheetPresent || typeof document === "undefined") return;
-	const styleEl = getStyleEl();
-	const sheet = styleEl.sheet;
-	if (sheet) {
-		for (const rule of splitCSSRules(scoped)) {
-			try {
-				sheet.insertRule(rule, sheet.cssRules.length);
-			} catch {
-				/* Invalid rule — dev validator catches these separately */
-			}
-		}
-	} else {
-		styleEl.appendChild(document.createTextNode(scoped));
-	}
+	const current = document.getElementById(RUNTIME_SHEET_ID)?.textContent ?? "";
+	writeRuntimeSheet(current + scoped);
 }
 
-/**
- * Rebuild the sheet from current registry after eviction.
- */
 function rebuildSheet(): void {
 	if (!domInjectionEnabled || typeof document === "undefined") return;
-	const styleEl = getStyleEl();
-	const sheet = styleEl.sheet;
-	if (sheet) {
-		while (sheet.cssRules.length > 0) sheet.deleteRule(0);
-		for (const scoped of registry.values()) {
-			for (const rule of splitCSSRules(scoped)) {
-				try {
-					sheet.insertRule(rule, sheet.cssRules.length);
-				} catch {}
-			}
-		}
-	} else {
-		styleEl.textContent = Array.from(registry.values()).join("");
-	}
+	injected.clear();
+	writeRuntimeSheet(Array.from(registry.values()).join("") + Array.from(classRegistry.values()).join(""));
+	for (const name of registry.keys()) injected.add(name);
+	for (const name of classRegistry.keys()) injected.add(name);
 }
 
 export function getScopedStyles(): string {
@@ -1020,9 +1042,14 @@ function scopeCssToClass(className: string, css: string): string {
  * Mirrors registerCSSByName but keys by class name and uses class selectors.
  */
 export function registerCSSAsClass(className: string, scopedCssInLayer: string): string {
-	if (classRegistry.has(className)) return className;
+	const existing = classRegistry.get(className);
+	if (existing !== undefined) {
+		ensureInjected(className, existing, "class");
+		return className;
+	}
 	classRegistry.set(className, scopedCssInLayer);
 	injectStyleToDOM(scopedCssInLayer);
+	markInjected(className);
 	/* FIFO eviction mirrors main registry */
 	if (classRegistry.size > maxRegistrySize) {
 		const iter = classRegistry.keys();
@@ -1030,6 +1057,7 @@ export function registerCSSAsClass(className: string, scopedCssInLayer: string):
 			const oldest = iter.next();
 			if (oldest.done) break;
 			classRegistry.delete(oldest.value);
+			injected.delete(oldest.value);
 		}
 	}
 	return className;
@@ -1185,6 +1213,7 @@ export function cn(...inputs: CnValue[]): string {
 export function clearScopedStyles(): void {
 	registry.clear();
 	classRegistry.clear();
+	injected.clear();
 	domInjectionEnabled = false;
 	ssrSheetPresent = false;
 	if (typeof document !== "undefined") {

package/src/testing/index.ts

@@ -1,4 +1,5 @@
 import { EMPTY_ARR } from "../internal/index.ts";
+import { ATTR_HYDRATED } from "../protocol.ts";
 
 const HYDRATION_PATTERNS = [/hydration/i, /mismatch/i, /unable to find dom nodes/i];
 
@@ -148,9 +149,13 @@ export class FlarePage {
 	/* ── Hydration ──────────────────────────────────────────────────── */
 
 	async waitForHydration(timeout = 15_000): Promise<void> {
-		await this.page.waitForFunction("document.documentElement.hasAttribute('data-hydrated')", undefined, {
-			timeout,
-		});
+		await this.page.waitForFunction(
+			`document.documentElement.hasAttribute(${JSON.stringify(ATTR_HYDRATED)})`,
+			undefined,
+			{
+				timeout,
+			},
+		);
 	}
 
 	/* ── State ──────────────────────────────────────────────────────── */

package/src/theme/index.tsx

@@ -1,14 +1,14 @@
 import {
 	createContext,
 	createEffect,
+	createMemo,
 	createSignal,
-	type JSX,
-	on,
-	onCleanup,
-	onMount,
+	onSettled,
 	sharedConfig,
+	untrack,
 	useContext,
 } from "solid-js";
+import { isServer, type JSX } from "@solidjs/web";
 
 export type Theme = "light" | "dark" | "system";
 export type ResolvedTheme = "light" | "dark";
@@ -57,7 +57,7 @@ export interface ThemeContextValue {
 	toggleTheme: () => void;
 }
 
-const ThemeCtx = createContext<ThemeContextValue>();
+const ThemeCtx = createContext<ThemeContextValue | null>(null);
 
 export function ThemeProvider(props: { children: JSX.Element; config?: ThemeConfig }): JSX.Element {
 	const cfg: Required<ThemeConfig> = {
@@ -68,7 +68,7 @@ export function ThemeProvider(props: { children: JSX.Element; config?: ThemeConf
 		themes: props.config?.themes ?? DEFAULT_CONFIG.themes,
 	};
 
-	const hydrating = !!sharedConfig.context;
+	const hydrating = isServer || !!sharedConfig.hydrating;
 
 	/* During SSR + hydration, always start from defaultTheme so the tree matches.
 	   ThemeScript already applied localStorage to <html> before first paint.
@@ -95,10 +95,10 @@ export function ThemeProvider(props: { children: JSX.Element; config?: ThemeConf
 	}
 	const [systemTheme, setSystemTheme] = createSignal<ResolvedTheme>(initialSystem);
 
-	const resolvedTheme = (): ResolvedTheme => {
+	const resolvedTheme = createMemo((): ResolvedTheme => {
 		const t = theme();
 		return t === "system" ? systemTheme() : t;
-	};
+	});
 
 	const applyToDocument = (resolved: ResolvedTheme): void => {
 		if (typeof document === "undefined") return;
@@ -114,36 +114,36 @@ export function ThemeProvider(props: { children: JSX.Element; config?: ThemeConf
 	/* Client remount / CSR: apply immediately. During hydration, ThemeScript owns
 	   first paint — applying here would overwrite a stored theme with "system". */
 	if (!hydrating) {
-		applyToDocument(resolvedTheme());
+		applyToDocument(untrack(resolvedTheme));
 	}
 
 	/* After hydrate, sync from localStorage so useTheme() matches ThemeScript. */
-	onMount(() => {
+	onSettled(() => {
 		if (typeof localStorage === "undefined") return;
 		try {
 			const stored = localStorage.getItem(cfg.storageKey);
-			if (stored && cfg.themes.includes(stored as Theme) && stored !== theme()) {
+			if (stored && cfg.themes.includes(stored as Theme) && stored !== untrack(theme)) {
 				setThemeSignal(stored as Theme);
 			}
 		} catch {
 			/* noop */
 		}
-		applyToDocument(resolvedTheme());
+		applyToDocument(untrack(resolvedTheme));
 	});
 
 	/* Listen for OS preference changes */
-	onMount(() => {
+	onSettled(() => {
 		if (typeof matchMedia === "undefined") return;
 		const mq = matchMedia("(prefers-color-scheme: dark)");
 		const handler = (e: MediaQueryListEvent) => {
 			setSystemTheme(e.matches ? "dark" : "light");
 		};
 		mq.addEventListener("change", handler);
-		onCleanup(() => mq.removeEventListener("change", handler));
+		return () => mq.removeEventListener("change", handler);
 	});
 
 	/* Cross-tab sync: StorageEvent fires in OTHER tabs only */
-	onMount(() => {
+	onSettled(() => {
 		const handler = (e: StorageEvent) => {
 			if (e.key !== cfg.storageKey || e.storageArea !== localStorage) return;
 			const v = e.newValue;
@@ -152,19 +152,18 @@ export function ThemeProvider(props: { children: JSX.Element; config?: ThemeConf
 			}
 		};
 		window.addEventListener("storage", handler);
-		onCleanup(() => window.removeEventListener("storage", handler));
+		return () => window.removeEventListener("storage", handler);
 	});
 
 	/* Sync resolved theme to DOM (skip transition-disable on first run) */
 	let skipFirst = true;
-	createEffect(() => {
-		const resolved = resolvedTheme();
+	createEffect(resolvedTheme, (resolved) => {
 		if (typeof document === "undefined") return;
 
 		if (skipFirst) {
 			skipFirst = false;
 			/* After Solid hydrates <html> it drops ThemeScript's data-theme.
-			   Re-apply the visual value (storage or system) without waiting for onMount. */
+			   Re-apply the visual value (storage or system) without waiting for onSettled. */
 			let visual: ResolvedTheme = resolved;
 			if (typeof localStorage !== "undefined") {
 				try {
@@ -180,6 +179,12 @@ export function ThemeProvider(props: { children: JSX.Element; config?: ThemeConf
 
 		if (cfg.disableTransitionOnChange) {
 			const style = document.createElement("style");
+			const script = document.querySelector("script[nonce]") as HTMLElement | null;
+			const nonce = script?.nonce || script?.getAttribute("nonce");
+			if (nonce) {
+				style.setAttribute("nonce", nonce);
+				style.nonce = nonce;
+			}
 			style.textContent = "* { transition: none !important }";
 			document.head.appendChild(style);
 			applyToDocument(resolved);
@@ -192,17 +197,15 @@ export function ThemeProvider(props: { children: JSX.Element; config?: ThemeConf
 
 	/* Persist to localStorage on changes (not initial — it was read from there) */
 	createEffect(
-		on(
-			theme,
-			(t) => {
-				try {
-					localStorage.setItem(cfg.storageKey, t);
-				} catch {
-					/* noop */
-				}
-			},
-			{ defer: true },
-		),
+		theme,
+		(t) => {
+			try {
+				localStorage.setItem(cfg.storageKey, t);
+			} catch {
+				/* noop */
+			}
+		},
+		{ defer: true },
 	);
 
 	const setTheme = (t: Theme): void => {
@@ -211,7 +214,7 @@ export function ThemeProvider(props: { children: JSX.Element; config?: ThemeConf
 	};
 
 	const toggleTheme = (): void => {
-		const current = resolvedTheme();
+		const current = untrack(resolvedTheme);
 		setTheme(current === "light" ? "dark" : "light");
 	};
 
@@ -222,7 +225,7 @@ export function ThemeProvider(props: { children: JSX.Element; config?: ThemeConf
 		toggleTheme,
 	};
 
-	return <ThemeCtx.Provider value={value}>{props.children}</ThemeCtx.Provider>;
+	return <ThemeCtx value={value}>{props.children}</ThemeCtx>;
 }
 
 export function useTheme(): ThemeContextValue {

package/src/tracing/timing.ts

@@ -29,6 +29,11 @@ export function createTimingTracer(): TimingTracer {
 	};
 }
 
+/* Server-Timing `name` is an RFC 7230 token — no `:`, `/`, or spaces. */
+function timingToken(name: string): string {
+	return name.replace(/[^0-9A-Za-z!#$%&'*+\-.^_`|~]/g, ".");
+}
+
 export function buildServerTimingHeader(entries: TimingEntry[]): string {
-	return entries.map((e) => `${e.name};dur=${e.dur.toFixed(1)}`).join(", ");
+	return entries.map((e) => `${timingToken(e.name)};dur=${e.dur.toFixed(1)}`).join(", ");
 }

package/src/url/index.ts

@@ -138,3 +138,12 @@ export function buildUrl(options: BuildUrlOptions): string {
 
 	return result;
 }
+
+/** Path+search for a same-origin 3xx. Protocol-relative `//host` is not a path. */
+export function sameOriginRedirectPath(url: URL): string {
+	const path = url.pathname;
+	if (!path.startsWith("/") || path.startsWith("//") || /[\0\r\n]/.test(path) || /[\0\r\n]/.test(url.search)) {
+		return "/";
+	}
+	return `${path}${url.search}`;
+}