@lovrozagar/flare 0.1.1 → 0.2.0

package/src/plugins/sx-ast/index.ts

@@ -149,6 +149,15 @@ function composeCss(
 		else appRules.push(rule);
 	}
 
+	/* At-rules last so @media utilities beat earlier base utilities of equal
+	 * specificity. classPool insertion order is first-seen across the whole
+	 * build, so a later page's `fontSize: 12px` would otherwise override an
+	 * earlier `@media (min-width: 1px) { fontSize: 24px }`. */
+	const atLast = (a: string, b: string) =>
+		Number(a.trimStart().startsWith("@")) - Number(b.trimStart().startsWith("@"));
+	sxRules.sort(atLast);
+	appRules.sort(atLast);
+
 	const parts: string[] = [];
 	if (twPrefaceCss) parts.push(twPrefaceCss);
 	parts.push(LAYER_PRELUDE);

package/src/plugins/sx.d.ts

@@ -1,14 +1,13 @@
-import type { ClassValue, Sx } from "../styles/sx-types";
+import "@solidjs/web";
+import type { Sx } from "../styles/sx-types";
 
-declare module "solid-js" {
+declare module "@solidjs/web" {
 	namespace JSX {
 		interface HTMLAttributes<T> {
 			sx?: Sx;
-			class?: string | ClassValue[];
 		}
-		interface CoreSVGAttributes<T> {
+		interface SVGAttributes<T> {
 			sx?: Sx;
-			class?: string | ClassValue[];
 		}
 	}
 }

package/src/plugins/virtual.ts

@@ -11,12 +11,17 @@ import type { ResolvedEntries, VitePlugin } from "./types.ts";
  * when the SSR build loads this virtual module.
  */
 function readClientManifest(root: string): ViteManifest | undefined {
-	const manifestPath = join(root, "dist/client/.vite/manifest.json");
-	try {
-		const raw = readFileSync(manifestPath, "utf-8");
-		return JSON.parse(raw) as ViteManifest;
-	} catch {
-		/* manifest doesn't exist yet (dev mode) — caller uses dev fallback */
+	const candidates = [
+		join(root, "dist/client/.vite/manifest.json"),
+		/* Nitro writes the client build under `.output/public`. */
+		join(root, ".output/public/.vite/manifest.json"),
+	];
+	for (const manifestPath of candidates) {
+		try {
+			return JSON.parse(readFileSync(manifestPath, "utf-8")) as ViteManifest;
+		} catch {
+			/* try next location */
+		}
 	}
 	return undefined;
 }

package/src/prerender/index.ts

@@ -5,7 +5,7 @@
  * For each route:
  *   1. Create synthetic GET request
  *   2. Call handler.fetch() → collect HTML response
- *   3. Call handler.fetch() with x-d:1 header → collect NDJSON response
+ *   3. Call handler.fetch() with flare-data:1 header → collect NDJSON response
  *   4. Replace CSP nonce with __FLARE_NONCE__ placeholder
  *   5. Store entry with headers, html, ndjson
  *   6. Generate manifest entry
@@ -15,13 +15,23 @@ import { existsSync, readFileSync } from "node:fs";
 import { join } from "node:path";
 import type { ExtractedStaticDeferMode, RouteDefinition } from "../generators/index.ts";
 import type { StaticDeferMode } from "../route-builder/types.ts";
+import { HEADER_DATA, HEADER_FLAG, HEADER_PRERENDER } from "../protocol.ts";
 import type { ServerHandler } from "../server-handler/index.ts";
+import type { FlareStore, FlareStoreEntry } from "../store/index.ts";
 import { resolvePathParams } from "../url/index.ts";
 
 export const NONCE_PLACEHOLDER = "__FLARE_NONCE__";
 
+/** Parse `Surrogate-Key` into store tags. Empty / missing → undefined. */
+export function tagsFromSurrogateKey(headers: Record<string, string>): string[] | undefined {
+	const raw = headers["surrogate-key"];
+	if (!raw) return undefined;
+	const tags = raw.split(" ").filter(Boolean);
+	return tags.length > 0 ? tags : undefined;
+}
+
 /** Build-time prerender fetch — skips ISR `dynamicParams: false` store-miss 404. */
-export const PRERENDER_HEADER = "x-flare-prerender";
+export const PRERENDER_HEADER = HEADER_PRERENDER;
 
 export interface PrerenderRoute {
 	defer?: StaticDeferMode;
@@ -82,11 +92,20 @@ export function replaceNonce(text: string, nonce: string): string {
 /**
  * Convert Response headers to a plain object, excluding hop-by-hop headers.
  */
+const SKIP_PRERENDER_HEADERS = new Set([
+	"connection",
+	"content-encoding",
+	"content-length",
+	"keep-alive",
+	"set-cookie",
+	"set-cookie2",
+	"transfer-encoding",
+]);
+
 function headersToRecord(headers: Headers): Record<string, string> {
 	const result: Record<string, string> = {};
 	headers.forEach((value, key) => {
-		/* Skip transfer-encoding and connection headers */
-		if (key === "transfer-encoding" || key === "connection") return;
+		if (SKIP_PRERENDER_HEADERS.has(key)) return;
 		result[key] = value;
 	});
 	return result;
@@ -106,7 +125,10 @@ async function renderRoute(
 	/* 1. Fetch HTML */
 	let htmlResponse: Response;
 	try {
-		htmlResponse = await handler.fetch(new Request(url, { headers: { [PRERENDER_HEADER]: "1" }, method: "GET" }), env);
+		htmlResponse = await handler.fetch(
+			new Request(url, { headers: { [PRERENDER_HEADER]: HEADER_FLAG }, method: "GET" }),
+			env,
+		);
 	} catch (e: unknown) {
 		const msg = e instanceof Error ? e.message : String(e);
 		return { error: { message: msg, pathname: route.pathname } };
@@ -129,7 +151,7 @@ async function renderRoute(
 	try {
 		const dataResponse = await handler.fetch(
 			new Request(url, {
-				headers: { "x-d": "1", [PRERENDER_HEADER]: "1" },
+				headers: { [HEADER_DATA]: HEADER_FLAG, [PRERENDER_HEADER]: HEADER_FLAG },
 				method: "GET",
 			}),
 			env,
@@ -163,7 +185,9 @@ async function renderRoute(
 	if (route.defer !== undefined) entry.defer = route.defer;
 	if (route.dynamicParams !== undefined) entry.dynamicParams = route.dynamicParams;
 	if (route.revalidate !== undefined) entry.revalidate = route.revalidate;
-	if (route.tags !== undefined) entry.tags = route.tags;
+	const headerTags = tagsFromSurrogateKey(htmlHeaders);
+	if (headerTags) entry.tags = headerTags;
+	else if (route.tags !== undefined) entry.tags = route.tags;
 
 	return { entry };
 }
@@ -270,6 +294,19 @@ function mapDefer(extracted: ExtractedStaticDeferMode | undefined): StaticDeferM
 	return extracted;
 }
 
+function applyExtractedCache(route: PrerenderRoute, def: RouteDefinition): void {
+	if (def.cache.isrRevalidate !== undefined) {
+		route.revalidate = def.cache.isrRevalidate;
+	}
+	const defer = mapDefer(def.cache.isrDefer ?? def.cache.ssgDefer);
+	if (defer !== undefined) route.defer = defer;
+	const dp = mapDynamicParams(def.cache.isrDynamicParams);
+	if (dp !== undefined) route.dynamicParams = dp;
+	if (def.cache.cdnTags && def.cache.cdnTags.length > 0) {
+		route.tags = def.cache.cdnTags;
+	}
+}
+
 /**
  * Convert generator RouteDefinitions to PrerenderRoutes.
  * Filters to pages with static config, validates auth constraints.
@@ -290,16 +327,24 @@ export function buildPrerenderRoutes(
 		const hasPrerenderConfig = def.cache.ssg || def.cache.isr;
 		if (!hasPrerenderConfig) continue;
 
-		/* isr without revalidate = on-demand only, skip build-time prerender */
-		if (def.cache.isr && def.cache.isrRevalidate === undefined) continue;
-
-		/* Auth + static = build error (authenticateOptional is allowed) */
+		/* Auth + static = build error (authenticateOptional is allowed).
+		   Check before the on-demand-ISR skip so `.authenticate().isr()` without
+		   revalidate cannot populate the store as a public page. */
 		if (def.authenticateMode === true) {
 			throw new Error(
 				`Route "${def.virtualPath}" has both authenticate and static config. ` +
 					"Authenticated routes cannot be pre-rendered.",
 			);
 		}
+		if (def.hasAuthorize) {
+			throw new Error(
+				`Route "${def.virtualPath}" has both authorize and static config. ` +
+					"Authorized routes cannot be pre-rendered.",
+			);
+		}
+
+		/* isr without revalidate = on-demand only, skip build-time prerender */
+		if (def.cache.isr && def.cache.isrRevalidate === undefined) continue;
 
 		const pathname = virtualPathToPathname(def.virtualPath);
 		const mode: "isr" | "static" = def.cache.isr ? "isr" : "static";
@@ -312,30 +357,14 @@ export function buildPrerenderRoutes(
 			for (const params of paramSets) {
 				const resolved = resolvePathParams(pathname, params);
 				const route: PrerenderRoute = { mode, pathname: resolved };
-
-				if (def.cache.isrRevalidate !== undefined) {
-					route.revalidate = def.cache.isrRevalidate;
-				}
-				const defer = mapDefer(def.cache.isrDefer ?? def.cache.ssgDefer);
-				if (defer !== undefined) route.defer = defer;
-				const dp = mapDynamicParams(def.cache.isrDynamicParams);
-				if (dp !== undefined) route.dynamicParams = dp;
-
+				applyExtractedCache(route, def);
 				routes.push(route);
 			}
 			continue;
 		}
 
 		const route: PrerenderRoute = { mode, pathname };
-
-		if (def.cache.isrRevalidate !== undefined) {
-			route.revalidate = def.cache.isrRevalidate;
-		}
-		const defer = mapDefer(def.cache.isrDefer ?? def.cache.ssgDefer);
-		if (defer !== undefined) route.defer = defer;
-		const dp2 = mapDynamicParams(def.cache.isrDynamicParams);
-		if (dp2 !== undefined) route.dynamicParams = dp2;
-
+		applyExtractedCache(route, def);
 		routes.push(route);
 	}
 
@@ -404,11 +433,12 @@ export function writePrerenderOutput(entries: PrerenderManifestEntry[]): Prerend
  * Reads manifest.json + .html/.ndjson/.headers.json files from `staticDir`.
  * Silently no-ops if manifest doesn't exist (e.g. dev mode without prerender).
  */
-export function loadPrerenderArtifacts(staticDir: string, store: import("../store").FlareStore): void {
+export async function loadPrerenderArtifacts(staticDir: string, store: FlareStore): Promise<void> {
 	const manifestPath = join(staticDir, "manifest.json");
 	if (!existsSync(manifestPath)) return;
 
 	const manifest: PrerenderManifestRecord[] = JSON.parse(readFileSync(manifestPath, "utf-8"));
+	const writes: Promise<void>[] = [];
 
 	for (const record of manifest) {
 		const base = record.pathname === "/" ? "/index" : record.pathname;
@@ -423,9 +453,15 @@ export function loadPrerenderArtifacts(staticDir: string, store: import("../stor
 			? JSON.parse(readFileSync(headersPath, "utf-8"))
 			: {};
 
-		store.set(`static:${record.pathname}`, {
+		const tags = record.tags ?? tagsFromSurrogateKey(headers);
+		const entry: FlareStoreEntry = {
 			data: { headers, html, ndjson },
 			storedAt: Date.now(),
-		});
+		};
+		if (tags && tags.length > 0) entry.tags = tags;
+
+		writes.push(store.set(`static:${record.pathname}`, entry));
 	}
+
+	await Promise.all(writes);
 }

package/src/protocol.ts

@@ -0,0 +1,65 @@
+/**
+ * Flare wire protocol identifiers.
+ *
+ * Headers, URL prefixes, HTML attrs, and window queues are spelled out.
+ * NDJSON `t` codes and FlareState keys stay short (bandwidth).
+ */
+
+/** Request: CSR data / NDJSON. Flag value is always `"1"`. */
+export const HEADER_DATA = "flare-data";
+/** Request: prefetch (no cookie commit, cause = prefetch). */
+export const HEADER_PREFETCH = "flare-prefetch";
+/** Request: comma-separated match ids the client already has. */
+export const HEADER_STALE = "flare-stale";
+/** Internal: ISR background re-render (prevents recursion). */
+export const HEADER_ISR = "flare-isr";
+/** Internal: build-time prerender fetch. */
+export const HEADER_PRERENDER = "flare-prerender";
+/** Shared flag for boolean protocol headers. */
+export const HEADER_FLAG = "1";
+
+/** Response diagnostic: HIT | MISS | STALE. Lowercase to match HTTP/2 / Node. */
+export const FLARE_CACHE_HEADER = "flare-cache";
+/** Response diagnostic: ISR | SSG | SSR. */
+export const FLARE_RENDER_HEADER = "flare-render";
+
+/** Reserved prefix for Flare-owned endpoints (keepalive, image, revalidate, server-fn). */
+export const INTERNAL_PATH_PREFIX = "/_flare/";
+/** Keepalive ping path. */
+export const KEEPALIVE_PATH = `${INTERNAL_PATH_PREFIX}keepalive`;
+/** Server function HTTP path prefix: `/_flare/server-fn/{id}/{name}`. */
+export const SERVER_FN_PREFIX = "/_flare/server-fn";
+
+/** Hidden `<form>` field for progressive-enhancement POST. */
+export const FORM_FN_FIELD = "flare_fn";
+/** Set on `<html>` after `solidHydrate` completes. */
+export const ATTR_HYDRATED = "data-flare-hydrated";
+
+/** Window queue: SSR deferred chunks. `__` so stream scripts survive `self.flare = {}`. */
+export const GLOBAL_DEFER = "__flare_defer";
+/** Window queue: SSR query-cache dehydrate. */
+export const GLOBAL_QUERIES = "__flare_queries";
+/** Test/runtime: in-flight lazy imports. */
+export const GLOBAL_LAZY_PENDING = "__flare_lazy_pending";
+/** Test/runtime: resolved lazy imports. */
+export const GLOBAL_LAZY_LOADED = "__flare_lazy_loaded";
+/** sessionStorage: chunk-load reload guard. */
+export const STORAGE_CHUNK_RELOAD = "flare_chunk_reload";
+
+export function isServerFnPathname(pathname: string): boolean {
+	return pathname === SERVER_FN_PREFIX || pathname.startsWith(`${SERVER_FN_PREFIX}/`);
+}
+
+export function serverFnPath(id: string, name: string): string {
+	return `${SERVER_FN_PREFIX}/${id}/${name}`;
+}
+
+export function parseServerFnPathname(pathname: string): { id: string; name: string } | undefined {
+	if (!isServerFnPathname(pathname)) return undefined;
+	const rest = pathname.slice(SERVER_FN_PREFIX.length);
+	const segments = rest.split("/").filter(Boolean);
+	const id = segments[0];
+	const name = segments[1];
+	if (!id || !name) return undefined;
+	return { id, name };
+}

package/src/query-client/index.tsx

@@ -1,7 +1,19 @@
-import { QueryClient, QueryClientProvider, type QueryKey, useQuery } from "@tanstack/solid-query";
-import type { Accessor } from "solid-js";
+import { QueryClient, QueryClientContext, type QueryKey, useQuery } from "@tanstack/solid-query";
+import { onCleanup, type Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 
-export { QueryClientProvider };
+/**
+ * Same tree on server and client. TanStack's provider also mounts a Solid
+ * dehydration channel + HydrationCoordinator that waits for a channel `done`
+ * Flare never yields (we stream `flare.q` / `__flare_queries` instead). Without
+ * that coordinator, `useQuery` attaches its cache subscriber on a microtask
+ * after hydrate; `hydrate()` drains `__flare_queries` after that attach.
+ */
+export function QueryClientProvider(props: { children?: JSX.Element; client: QueryClient }): JSX.Element {
+	props.client.mount();
+	onCleanup(() => props.client.unmount());
+	return <QueryClientContext value={() => props.client}>{props.children}</QueryClientContext>;
+}
 
 /* ── useSuspenseQuery ────────────────────────────────────────────────── */
 
@@ -41,8 +53,7 @@ function resolveQueryKey<T extends QueryKey>(v: Accessor<T> | T): T {
 
 /**
  * Thin wrapper over TanStack's `useQuery` with suspense semantics.
- * Delegates entirely to TanStack's SSR-aware implementation which uses
- * `createResource` for proper Solid SSR streaming integration.
+ * Delegates to TanStack's SSR-aware Solid Query implementation.
  */
 export function useSuspenseQuery<TData = unknown, TError = Error, TQueryKey extends QueryKey = QueryKey>(
 	options: UseSuspenseQueryOptions<TData, TError, TQueryKey>,
@@ -104,7 +115,7 @@ export function createQueryClientGetter(options?: QueryClientGetterOptions): ()
 					.then(({ broadcastQueryClient }) => {
 						broadcastQueryClient({
 							broadcastChannel: channelName,
-							queryClient: clientInstance as QueryClient,
+							queryClient: clientInstance as never,
 						});
 					})
 					.catch(() => {});
@@ -126,16 +137,41 @@ export interface TrackedQueryClient {
 	client: QueryClient;
 	drain(): QueryState[];
 	getTrackedQueries(): QueryState[];
+	release(): void;
 }
 
-export function createTrackedQueryClient(client: QueryClient): TrackedQueryClient {
-	const tracked: QueryState[] = [];
+type SetQueryDataFn = QueryClient["setQueryData"];
+
+interface QueryClientPatch {
+	listeners: Set<(args: Parameters<SetQueryDataFn>, result: unknown) => void>;
+	original: SetQueryDataFn;
+}
+
+const patches = new WeakMap<QueryClient, QueryClientPatch>();
+
+function ensurePatch(client: QueryClient): QueryClientPatch {
+	const existing = patches.get(client);
+	if (existing) return existing;
 
-	const originalSetQueryData = client.setQueryData.bind(client);
+	const original = client.setQueryData.bind(client) as SetQueryDataFn;
+	const listeners = new Set<(args: Parameters<SetQueryDataFn>, result: unknown) => void>();
 	/* TS 7: QueryClient.setQueryData identities from query-core vs solid-query do not unify. */
-	client.setQueryData = ((...args: Parameters<QueryClient["setQueryData"]>) => {
-		const result = originalSetQueryData(...args);
+	client.setQueryData = ((...args: Parameters<SetQueryDataFn>) => {
+		const result = original(...args);
+		for (const listener of listeners) listener(args, result);
+		return result;
+	}) as SetQueryDataFn;
+
+	const patch: QueryClientPatch = { listeners, original };
+	patches.set(client, patch);
+	return patch;
+}
 
+export function createTrackedQueryClient(client: QueryClient): TrackedQueryClient {
+	const tracked: QueryState[] = [];
+	const patch = ensurePatch(client);
+
+	const listener = (args: Parameters<SetQueryDataFn>, result: unknown) => {
 		const defaults = client.getQueryDefaults(args[0]);
 		const rawStaleTime = defaults?.staleTime;
 		tracked.push({
@@ -143,17 +179,40 @@ export function createTrackedQueryClient(client: QueryClient): TrackedQueryClien
 			key: [...args[0]],
 			staleTime: typeof rawStaleTime === "number" ? rawStaleTime : undefined,
 		});
-
-		return result;
-	}) as QueryClient["setQueryData"];
+	};
+	patch.listeners.add(listener);
+
+	let released = false;
+	const release = () => {
+		if (released) return;
+		released = true;
+		patch.listeners.delete(listener);
+		if (patch.listeners.size === 0) {
+			client.setQueryData = patch.original;
+			patches.delete(client);
+		}
+	};
 
 	return {
 		client,
 		drain: () => tracked.splice(0),
 		getTrackedQueries: () => tracked,
+		release,
 	};
 }
 
+export async function withTrackedQueryClient<T>(
+	client: QueryClient,
+	fn: (tracked: TrackedQueryClient) => Promise<T>,
+): Promise<T> {
+	const tracked = createTrackedQueryClient(client);
+	try {
+		return await fn(tracked);
+	} finally {
+		tracked.release();
+	}
+}
+
 /* ── hydrateQueryCache (client-side query hydration) ─────────────────── */
 
 export function hydrateQueryCache(client: QueryClient, queries: QueryState[]): void {

package/src/rewrite/index.ts

@@ -5,12 +5,18 @@ export interface LocationRewrite {
 	output?: RewriteFn;
 }
 
+function keepSameOrigin(next: URL, original: URL): URL {
+	if (next.origin !== original.origin) return original;
+	if (next.pathname.startsWith("//") || next.pathname.includes("\\")) return original;
+	return next;
+}
+
 export function executeRewriteInput(rewrite: LocationRewrite | undefined, url: URL): URL {
 	try {
 		const result = rewrite?.input?.({ url });
 		if (result === undefined) return url;
-		if (typeof result === "string") return new URL(result, url);
-		return result;
+		const next = typeof result === "string" ? new URL(result, url) : result;
+		return keepSameOrigin(next, url);
 	} catch {
 		return url;
 	}
@@ -20,8 +26,8 @@ export function executeRewriteOutput(rewrite: LocationRewrite | undefined, url:
 	try {
 		const result = rewrite?.output?.({ url });
 		if (result === undefined) return url;
-		if (typeof result === "string") return new URL(result, url);
-		return result;
+		const next = typeof result === "string" ? new URL(result, url) : result;
+		return keepSameOrigin(next, url);
 	} catch {
 		return url;
 	}

package/src/route-builder/create-layout.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { FlareRouter } from "../outlet/types.ts";
 import type { Location } from "../router-primitives/index.ts";
 import type {

package/src/route-builder/create-root-layout.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { FlareRouter } from "../outlet/types.ts";
 import type { Location } from "../router-primitives/index.ts";
 import type { ResolvedAuth, ResolvedEnv, ResolvedQueryClient, ResolvedServerContext } from "./register.ts";

package/src/route-builder/types.ts

@@ -36,7 +36,11 @@ export interface ClientCacheConfig {
 }
 
 export interface SsrCacheConfig {
-	key?: (ctx: { params: Record<string, string | string[]> }) => string;
+	key?: (ctx: {
+		auth?: unknown;
+		params: Record<string, string | string[]>;
+		search: Record<string, string | string[]>;
+	}) => string;
 	staleTime?: Duration;
 	tags?: string[] | ((ctx: { params: Record<string, string | string[]> }) => string[]);
 	ttl?: Duration;

package/src/router-primitives/types.ts

@@ -20,9 +20,11 @@ export type RouteMetaStatic = {
 
 export type RouteMeta = {
 	authenticate?: boolean;
+	authorize?: boolean;
 	client?: RouteMetaClient;
 	intercept?: { from: readonly string[]; render: string };
 	static?: RouteMetaStatic;
+	tags?: readonly string[];
 };
 
 export type RouteData = {

package/src/security/index.ts

@@ -45,6 +45,12 @@ export const DEFAULT_CSP: Record<string, string[] | boolean> = {
 	"object-src": ["'none'"],
 	"script-src": ["'self'"],
 	"style-src": ["'self'"],
+	/* Solid 2 applies JSX `style={}` via CSSOM (`setProperty`). A nonce on
+	 * `style-src` is the fallback for both elements and attributes, and Chrome
+	 * then blocks CSSOM even when `style-src-attr` allows it. Put the nonce on
+	 * `style-src-elem` only; keep `style-src` host-only. */
+	"style-src-attr": ["'unsafe-inline'"],
+	"style-src-elem": ["'self'"],
 	"upgrade-insecure-requests": true,
 	"worker-src": ["'self'"],
 };
@@ -78,7 +84,16 @@ const DEV_SKIP_HEADERS = new Set(["Strict-Transport-Security", "Cross-Origin-Ope
 
 /* ── CSP builder ───────────────────────────────────────────────────────── */
 
-export function buildCspHeader(nonce: string, overrides?: CspDirectives, isDev?: boolean): string {
+function requestIsHttp(url?: string): boolean {
+	if (!url) return false;
+	try {
+		return new URL(url).protocol === "http:";
+	} catch {
+		return false;
+	}
+}
+
+export function buildCspHeader(nonce: string, overrides?: CspDirectives, isDev?: boolean, url?: string): string {
 	const directives: Record<string, string[] | boolean> = {};
 
 	for (const [key, value] of Object.entries(DEFAULT_CSP)) {
@@ -94,10 +109,18 @@ export function buildCspHeader(nonce: string, overrides?: CspDirectives, isDev?:
 		   do not apply to attribute styles, so 'unsafe-inline' is the only knob for dev parity. */
 		const styleSrc = directives["style-src"] as string[];
 		styleSrc.push("'unsafe-inline'");
+		const styleSrcElem = directives["style-src-elem"] as string[];
+		styleSrcElem.push("'unsafe-inline'");
 		const workerSrc = directives["worker-src"] as string[];
 		workerSrc.push("blob:");
 	}
 
+	/* HTTP (localhost preview included) + this directive makes Chrome follow
+	   redirects as https://. Dev is always HTTP. HTTPS production keeps it. */
+	if (isDev || requestIsHttp(url)) {
+		directives["upgrade-insecure-requests"] = false;
+	}
+
 	if (overrides) {
 		for (const [key, value] of Object.entries(overrides)) {
 			if (value === undefined) continue;
@@ -124,9 +147,19 @@ export function buildCspHeader(nonce: string, overrides?: CspDirectives, isDev?:
 		scriptSrc.push(`'nonce-${nonce}'`);
 	}
 
-	const styleSrc = directives["style-src"];
-	if (Array.isArray(styleSrc) && !styleSrc.includes("'unsafe-inline'")) {
-		styleSrc.push(`'nonce-${nonce}'`);
+	/* Never nonce `style-src`: Chromium treats that as the CSSOM policy and
+	 * ignores `style-src-attr 'unsafe-inline'`. `<style nonce>` / `<link>` are
+	 * `style-src-elem`. */
+	if (!directives["style-src-elem"]) {
+		directives["style-src-elem"] = ["'self'"];
+	}
+	const styleSrcElem = directives["style-src-elem"];
+	if (Array.isArray(styleSrcElem) && !styleSrcElem.includes("'unsafe-inline'")) {
+		styleSrcElem.push(`'nonce-${nonce}'`);
+	}
+
+	if (!directives["style-src-attr"]) {
+		directives["style-src-attr"] = ["'unsafe-inline'"];
 	}
 
 	const parts: string[] = [];
@@ -177,10 +210,12 @@ export interface BuildSecurityHeadersOptions {
 	config?: SecurityConfig;
 	isDev?: boolean;
 	nonce: string;
+	/** Request URL. HTTP (e.g. localhost preview) must not send upgrade-insecure-requests. */
+	url?: string;
 }
 
 export function buildSecurityHeaders(options: BuildSecurityHeadersOptions): Record<string, string> {
-	const { config, isDev, nonce } = options;
+	const { config, isDev, nonce, url } = options;
 	const result: Record<string, string> = {};
 
 	/* CSP */
@@ -193,6 +228,7 @@ export function buildSecurityHeaders(options: BuildSecurityHeadersOptions): Reco
 				nonce,
 				typeof cspConfig === "object" ? cspConfig : undefined,
 				isDev,
+				url,
 			);
 		}
 	}

package/src/server/index.ts

@@ -6,6 +6,7 @@ import {
 	type PathMatcher,
 } from "../middleware/index.ts";
 import type { MountConfig } from "../mount/index.ts";
+import { KEEPALIVE_PATH } from "../protocol.ts";
 import type { MarkedRouterConfig } from "../router-config/index.ts";
 import type { SecurityConfig } from "../security/index.ts";
 import type {
@@ -107,8 +108,6 @@ interface ServerBuilderImpl {
 
 /* ── Builder ───────────────────────────────────────────────────────────── */
 
-const KEEPALIVE_PATH = "/_flare/keepalive";
-
 /*
  * server-handler/index.ts imports virtual modules (virtual:flare-client-entry, etc.)
  * that only exist inside Vite's module graph. Lazy-importing it in fetch() keeps the