@lovrozagar/flare 0.1.2 → 0.2.0

package/src/plugins/dev-dashboard/client.tsx

@@ -1,5 +1,5 @@
-import { createEffect, createMemo, createSignal, For, Match, onCleanup, Show, Switch } from "solid-js";
-import { render } from "solid-js/web";
+import { createEffect, createMemo, createSignal, For, Match, Show, Switch } from "solid-js";
+import { render } from "@solidjs/web";
 import type { LocaleMatch } from "../../router-primitives/tree.ts";
 import { matchRouteTree } from "./match-route-tree.ts";
 
@@ -1070,12 +1070,15 @@ function VirtualList<T>(props: {
 		}
 	};
 
-	createEffect(() => {
-		if (scrollEl) {
-			setViewHeight(scrollEl.clientHeight);
-			if (props.containerRef) props.containerRef(scrollEl);
-		}
-	});
+	createEffect(
+		() => scrollEl,
+		(el) => {
+			if (el) {
+				setViewHeight(el.clientHeight);
+				if (props.containerRef) props.containerRef(el);
+			}
+		},
+	);
 
 	return (
 		<div
@@ -1142,9 +1145,7 @@ function TreeRow(props: {
 			>
 				{typeBadgeLabel(props.node.type)}
 			</span>
-			<span class="tree-segment" classList={{ "is-group": isGroup(), "is-param": isParam() }}>
-				{label()}
-			</span>
+			<span class={["tree-segment", { "is-group": isGroup(), "is-param": isParam() }]}>{label()}</span>
 			<Show when={props.node.urlPath && props.node.type !== "segment"}>
 				<span class="tree-url">{props.node.urlPath}</span>
 			</Show>
@@ -1228,7 +1229,7 @@ function ListItem(props: {
 				}
 			}}
 			role="button"
-			tabIndex={0}
+			tabindex={0}
 		>
 			<div class="list-item-header">
 				<span class="list-item-url">{props.urlPath}</span>
@@ -1404,16 +1405,16 @@ function ServerFnsTab(props: {
 				<table class="fn-table">
 					<thead>
 						<tr>
-							<th classList={{ sorted: sortCol() === "name" }} onClick={() => handleSort("name")}>
+							<th class={{ sorted: sortCol() === "name" }} onClick={() => handleSort("name")}>
 								Name{sortIndicator("name")}
 							</th>
-							<th classList={{ sorted: sortCol() === "method" }} onClick={() => handleSort("method")}>
+							<th class={{ sorted: sortCol() === "method" }} onClick={() => handleSort("method")}>
 								Method{sortIndicator("method")}
 							</th>
-							<th classList={{ sorted: sortCol() === "authenticate" }} onClick={() => handleSort("authenticate")}>
+							<th class={{ sorted: sortCol() === "authenticate" }} onClick={() => handleSort("authenticate")}>
 								Auth{sortIndicator("authenticate")}
 							</th>
-							<th classList={{ sorted: sortCol() === "stream" }} onClick={() => handleSort("stream")}>
+							<th class={{ sorted: sortCol() === "stream" }} onClick={() => handleSort("stream")}>
 								Stream{sortIndicator("stream")}
 							</th>
 							<th>File</th>
@@ -1531,7 +1532,7 @@ function ChainNode(props: {
 				}
 			}}
 			role="button"
-			tabIndex={0}
+			tabindex={0}
 		>
 			<div class="cur-chain-header">
 				<span
@@ -1543,7 +1544,7 @@ function ChainNode(props: {
 				>
 					{typeBadgeLabel(props.node.type)}
 				</span>
-				<span class="cur-chain-seg" classList={{ "is-group": isGroup(), "is-param": isParam() }}>
+				<span class={["cur-chain-seg", { "is-group": isGroup(), "is-param": isParam() }]}>
 					{props.node.segment || "/"}
 				</span>
 				<Show when={props.node.filePath}>
@@ -1667,61 +1668,67 @@ function CurrentTab(props: {
 	const [docTitle, setDocTitle] = createSignal(document.title);
 
 	/* Watch URL changes */
-	createEffect(() => {
-		const update = () => {
-			setUrl({
-				hash: window.location.hash,
-				pathname: window.location.pathname,
-				search: window.location.search,
-			});
-			setDocTitle(document.title);
-		};
+	createEffect(
+		() => undefined,
+		() => {
+			const update = () => {
+				setUrl({
+					hash: window.location.hash,
+					pathname: window.location.pathname,
+					search: window.location.search,
+				});
+				setDocTitle(document.title);
+			};
 
-		window.addEventListener("popstate", update);
+			window.addEventListener("popstate", update);
 
-		const origPush = history.pushState.bind(history);
-		const origReplace = history.replaceState.bind(history);
-		history.pushState = (...args: Parameters<typeof history.pushState>) => {
-			origPush(...args);
-			update();
-		};
-		history.replaceState = (...args: Parameters<typeof history.replaceState>) => {
-			origReplace(...args);
-			update();
-		};
+			const origPush = history.pushState.bind(history);
+			const origReplace = history.replaceState.bind(history);
+			history.pushState = (...args: Parameters<typeof history.pushState>) => {
+				origPush(...args);
+				update();
+			};
+			history.replaceState = (...args: Parameters<typeof history.replaceState>) => {
+				origReplace(...args);
+				update();
+			};
 
-		onCleanup(() => {
-			window.removeEventListener("popstate", update);
-			history.pushState = origPush;
-			history.replaceState = origReplace;
-		});
-	});
+			return () => {
+				window.removeEventListener("popstate", update);
+				history.pushState = origPush;
+				history.replaceState = origReplace;
+			};
+		},
+	);
 
 	/* Watch <html> attributes + title */
-	createEffect(() => {
-		const observer = new MutationObserver(() => {
-			setHtmlAttrs({
-				dir: document.documentElement.getAttribute("dir") ?? "ltr",
-				lang: document.documentElement.getAttribute("lang") ?? "",
-				theme: document.documentElement.getAttribute("data-theme") ?? "",
+	createEffect(
+		() => undefined,
+		() => {
+			const observer = new MutationObserver(() => {
+				setHtmlAttrs({
+					dir: document.documentElement.getAttribute("dir") ?? "ltr",
+					lang: document.documentElement.getAttribute("lang") ?? "",
+					theme: document.documentElement.getAttribute("data-theme") ?? "",
+				});
+			});
+			observer.observe(document.documentElement, {
+				attributeFilter: ["data-theme", "dir", "lang"],
+				attributes: true,
 			});
-		});
-		observer.observe(document.documentElement, {
-			attributeFilter: ["data-theme", "dir", "lang"],
-			attributes: true,
-		});
 
-		const titleObs = new MutationObserver(() => setDocTitle(document.title));
-		const titleEl = document.querySelector("title");
-		if (titleEl) {
-			titleObs.observe(titleEl, { characterData: true, childList: true, subtree: true });
-		}
+			const titleObs = new MutationObserver(() => setDocTitle(document.title));
+			const titleEl = document.querySelector("title");
+			if (titleEl) {
+				titleObs.observe(titleEl, { characterData: true, childList: true, subtree: true });
+			}
 
-		onCleanup(() => {
-			observer.disconnect();
-			titleObs.disconnect();
-		});
-	});
+			return () => {
+				observer.disconnect();
+				titleObs.disconnect();
+			};
+		},
+	);
 
 	const matched = createMemo(() => matchRouteTree(props.tree, url().pathname, props.localeMatch));
 	const searchParams = createMemo(() => parseSearchParams(url().search));
@@ -1730,20 +1737,20 @@ function CurrentTab(props: {
 	const [runtimeMatches, setRuntimeMatches] = createSignal<RuntimeMatch[]>([]);
 	const [cachedMatches, setCachedMatches] = createSignal<CachedMatchInfo[]>([]);
 
-	createEffect(() => {
-		const read = () => {
-			const matches = window.__flare_devtools_matches__;
-			if (matches) setRuntimeMatches(matches);
-			const cache = window.__flare_devtools_cache__;
-			if (cache) setCachedMatches(cache);
-		};
-		read();
-
-		/* Re-read on navigation (URL signal triggers this effect) */
-		void url();
-		const timer = setTimeout(read, 100);
-		onCleanup(() => clearTimeout(timer));
-	});
+	createEffect(
+		() => url(),
+		() => {
+			const read = () => {
+				const matches = window.__flare_devtools_matches__;
+				if (matches) setRuntimeMatches(matches);
+				const cache = window.__flare_devtools_cache__;
+				if (cache) setCachedMatches(cache);
+			};
+			read();
+			const timer = setTimeout(read, 100);
+			return () => clearTimeout(timer);
+		},
+	);
 
 	const runtimeMatchFor = (node: RouteTreeNode): RuntimeMatch | undefined => {
 		if (!node.virtualPath) return undefined;
@@ -1785,12 +1792,14 @@ function CurrentTab(props: {
 		setHeadTags(tags);
 	};
 
-	createEffect(() => {
-		void url();
-		readHeadTags();
-		const timer = setTimeout(readHeadTags, 200);
-		onCleanup(() => clearTimeout(timer));
-	});
+	createEffect(
+		() => url(),
+		() => {
+			readHeadTags();
+			const timer = setTimeout(readHeadTags, 200);
+			return () => clearTimeout(timer);
+		},
+	);
 
 	const leafMatch = createMemo(() => {
 		const chain = matched().chain;
@@ -2068,7 +2077,7 @@ function CopyButton(props: {
 	};
 
 	return (
-		<button class="act-btn" classList={{ "is-copied": copied() }} onClick={handleCopy} type="button">
+		<button class={["act-btn", { "is-copied": copied() }]} onClick={handleCopy} type="button">
 			{copied() ? "Copied" : props.label}
 		</button>
 	);
@@ -2108,11 +2117,14 @@ function ActionsTab(props: {
 		if (a) setCacheStats(a.getCacheStats());
 	};
 
-	createEffect(() => {
-		refreshStats();
-		const timer = setInterval(refreshStats, 2000);
-		onCleanup(() => clearInterval(timer));
-	});
+	createEffect(
+		() => undefined,
+		() => {
+			refreshStats();
+			const timer = setInterval(refreshStats, 2000);
+			return () => clearInterval(timer);
+		},
+	);
 
 	/* Navigate section */
 	const pageRoutes = createMemo(() =>
@@ -2306,8 +2318,7 @@ function ActionsTab(props: {
 							Forward
 						</button>
 						<button
-							class="act-btn"
-							classList={{ "is-copied": useReplace() }}
+							class={["act-btn", { "is-copied": useReplace() }]}
 							onClick={() => setUseReplace((r) => !r)}
 							style={useReplace() ? { "border-color": "#3b82f6", color: "#3b82f6" } : {}}
 							type="button"
@@ -2409,8 +2420,8 @@ function DevTools(): ReturnType<(typeof import("solid-js"))["createComponent"]>
 	let searchRef: HTMLInputElement | null = null;
 
 	/* Fetch data on open */
-	createEffect(() => {
-		if (isOpen()) {
+	createEffect(isOpen, (open) => {
+		if (open) {
 			fetch("/__flare/api")
 				.then((r) => r.json())
 				.then((d) => setData(d as ApiData));
@@ -2418,9 +2429,9 @@ function DevTools(): ReturnType<(typeof import("solid-js"))["createComponent"]>
 	});
 
 	/* Persist state */
-	createEffect(() => {
+	createEffect(activeTab, (tab) => {
 		saveState({
-			activeTab: activeTab(),
+			activeTab: tab,
 			expandedNodes: [],
 			sortCol: "name",
 			sortDir: "asc",
@@ -2428,23 +2439,26 @@ function DevTools(): ReturnType<(typeof import("solid-js"))["createComponent"]>
 	});
 
 	/* Keyboard shortcuts */
-	createEffect(() => {
-		const handler = (e: KeyboardEvent) => {
-			if (e.ctrlKey && e.shiftKey && e.key === "D") {
-				e.preventDefault();
-				setIsOpen((o) => !o);
-			}
-			if (e.key === "Escape" && isOpen()) {
-				setIsOpen(false);
-			}
-			if (e.key === "/" && isOpen() && document.activeElement !== searchRef) {
-				e.preventDefault();
-				searchRef?.focus();
-			}
-		};
-		window.addEventListener("keydown", handler);
-		onCleanup(() => window.removeEventListener("keydown", handler));
-	});
+	createEffect(
+		() => undefined,
+		() => {
+			const handler = (e: KeyboardEvent) => {
+				if (e.ctrlKey && e.shiftKey && e.key === "D") {
+					e.preventDefault();
+					setIsOpen((o) => !o);
+				}
+				if (e.key === "Escape" && isOpen()) {
+					setIsOpen(false);
+				}
+				if (e.key === "/" && isOpen() && document.activeElement !== searchRef) {
+					e.preventDefault();
+					searchRef?.focus();
+				}
+			};
+			window.addEventListener("keydown", handler);
+			return () => window.removeEventListener("keydown", handler);
+		},
+	);
 
 	const tabCount = (tabId: TabId): number | null => {
 		const d = data();
@@ -2460,8 +2474,7 @@ function DevTools(): ReturnType<(typeof import("solid-js"))["createComponent"]>
 	return (
 		<>
 			<button
-				class="toggle-btn"
-				classList={{ "is-open": isOpen() }}
+				class={["toggle-btn", { "is-open": isOpen() }]}
 				onClick={() => setIsOpen((o) => !o)}
 				title="Flare DevTools (Ctrl+Shift+D)"
 				type="button"
@@ -2483,8 +2496,7 @@ function DevTools(): ReturnType<(typeof import("solid-js"))["createComponent"]>
 								<For each={TABS}>
 									{(tab) => (
 										<button
-											class="tab-btn"
-											classList={{ active: activeTab() === tab.id }}
+											class={["tab-btn", { active: activeTab() === tab.id }]}
 											onClick={() => {
 												setActiveTab(tab.id);
 												setSearch("");

package/src/plugins/dev-prerender.ts

@@ -48,7 +48,11 @@ export function filterDevPrerenderRoutes(defs: RouteDefinition[]): PrerenderRout
 		/* skip dynamic routes — they need params we don't have at dev time */
 		if (pathname.includes("[")) continue;
 
-		routes.push({ mode: "static", pathname });
+		const route: PrerenderRoute = { mode: "static", pathname };
+		if (def.cache.cdnTags && def.cache.cdnTags.length > 0) {
+			route.tags = def.cache.cdnTags;
+		}
+		routes.push(route);
 	}
 
 	return routes;
@@ -103,6 +107,7 @@ export function createDevPrerenderPlugin(config: FlarePluginConfig, entries: Res
 						ndjson: entry.ndjson,
 					},
 					storedAt: Date.now(),
+					tags: entry.tags,
 				});
 			}
 

package/src/plugins/dev-server.ts

@@ -1,5 +1,6 @@
 import { readFileSync } from "node:fs";
 import { join, resolve } from "node:path";
+import { hoistHydrationHeadMarkers } from "../ssr/hoist-head-markers.ts";
 import type { ResolvedEntries, VitePlugin } from "./types.ts";
 
 interface NodeReq {
@@ -200,10 +201,18 @@ export function createDevServerPlugin(entries: ResolvedEntries, _assetsBase: str
 							 */
 							const lastSlash = url.pathname.lastIndexOf("/");
 							const hasFileExt = url.pathname.indexOf(".", lastSlash) !== -1;
+							let htmlPath = "/";
+							if (!hasFileExt) {
+								try {
+									decodeURIComponent(url.pathname);
+									htmlPath = url.pathname;
+								} catch {
+									htmlPath = "/";
+								}
+							}
 							const { html: peeledHtml, tags } = peelInlineTags(html);
-							html = restoreInlineTags(
-								await vite.transformIndexHtml(hasFileExt ? "/" : url.pathname, peeledHtml),
-								tags,
+							html = hoistHydrationHeadMarkers(
+								restoreInlineTags(await vite.transformIndexHtml(htmlPath, peeledHtml), tags),
 							);
 
 							const htmlHeaders: Record<string, string | string[]> = {

package/src/plugins/image-plugin.ts

@@ -1,13 +1,18 @@
 import { createHash } from "node:crypto";
 import { realpathSync } from "node:fs";
-import { basename, dirname, extname, resolve } from "node:path";
+import { basename, dirname, extname, isAbsolute, relative, resolve, sep } from "node:path";
 import type { VitePlugin } from "./types.ts";
 
 const IMAGE_EXTS = new Set([".avif", ".gif", ".jpeg", ".jpg", ".png", ".tiff", ".webp"]);
 const ANIMATED_EXTS = new Set([".gif"]);
 const IMAGE_DEFAULT_WIDTHS = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+export const IMAGE_MAX_WIDTH = 3840;
 const IMAGE_DEFAULT_QUALITY = 75;
 
+export function isAllowedImageWidth(w: number): boolean {
+	return Number.isInteger(w) && w >= 1 && w <= IMAGE_MAX_WIDTH;
+}
+
 interface SharpInstance {
 	metadata: () => Promise<{ height?: number; width?: number }>;
 	resize: (width: number) => SharpInstance;
@@ -17,6 +22,14 @@ interface SharpInstance {
 
 type SharpFactory = (input: string) => SharpInstance;
 
+/** True when `target` is `root` or a descendant. Prefix match is not enough (`/proj/flare-evil` vs `/proj/flare`). */
+export function isPathWithinRoot(target: string, root: string): boolean {
+	const rel = relative(root, target);
+	if (rel === "") return true;
+	if (isAbsolute(rel)) return false;
+	return rel !== ".." && !rel.startsWith(`..${sep}`);
+}
+
 async function importSharp(): Promise<SharpFactory> {
 	try {
 		const mod = await import("sharp");
@@ -64,18 +77,19 @@ export function createImagePlugin(
 					const url = new URL(req.url, "http://localhost");
 					const src = url.searchParams.get("src");
 					const w = Number(url.searchParams.get("w"));
-					if (!src || !w) return next();
+					if (!src || !isAllowedImageWidth(w)) return next();
 
 					/* Guard against path traversal — resolve symlinks then check within cwd */
+					const cwd = process.cwd();
 					const resolvedSrc = resolve(src);
-					if (!resolvedSrc.startsWith(process.cwd())) return next();
+					if (!isPathWithinRoot(resolvedSrc, cwd)) return next();
 					let realSrc: string;
 					try {
 						realSrc = realpathSync(resolvedSrc);
 					} catch {
 						return next();
 					}
-					if (!realSrc.startsWith(process.cwd())) return next();
+					if (!isPathWithinRoot(realSrc, cwd)) return next();
 
 					const sharp = await importSharp();
 					const sourceExt = extname(realSrc).toLowerCase();

package/src/plugins/index.ts

@@ -1,8 +1,8 @@
 import { existsSync, watch } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import type { Options as SolidPluginOptions } from "vite-plugin-solid";
-import solid from "vite-plugin-solid";
+import type { Options as SolidPluginOptions } from "@solidjs/vite-plugin";
+import solid from "@solidjs/vite-plugin";
 import { runGenerate } from "../generators/index.ts";
 import { EMPTY_OBJ } from "../internal/index.ts";
 import type { LogLevel } from "../logger.ts";
@@ -285,11 +285,11 @@ function createSsrBuildPlugin(
 					},
 				},
 				optimizeDeps: {
-					include: ["solid-js", "solid-js/web", "solid-js/store"],
+					include: ["solid-js", "@solidjs/web"],
 				},
 				resolve: {
 					...(config.alias ? { alias: config.alias } : {}),
-					dedupe: ["solid-js", "solid-js/web", "solid-js/store"],
+					dedupe: ["solid-js", "@solidjs/web"],
 				},
 				server: {
 					...(config.port ? { port: config.port } : {}),
@@ -298,7 +298,7 @@ function createSsrBuildPlugin(
 					},
 				},
 				ssr: {
-					noExternal: ["solid-js", "@lovrozagar/flare", "@tanstack/solid-query"],
+					noExternal: ["solid-js", "@solidjs/web", "@lovrozagar/flare", "@tanstack/solid-query"],
 				},
 			};
 		},
@@ -386,16 +386,19 @@ export function flare(config: FlarePluginConfig = EMPTY_OBJ): VitePlugin[] {
 		server: resolveEntry(root, "server", config.entry?.server),
 	};
 
+	if (config.solid && "start" in config.solid && (config.solid as { start?: unknown }).start) {
+		throw new Error("Flare: solid.start is not supported. Flare owns entries, SSR, and server functions.");
+	}
+
 	const solidConfig = {
 		extensions: [".tsx", ".jsx"],
-		hydratable: true,
 		ssr: true,
 		...config.solid,
 	};
 
 	const resolvedSw = normalizeSwConfig(config.serviceWorker);
 
-	/* TS 7: vite + vite-plugin-solid Plugin identities overflow. Keep this list on VitePlugin. */
+	/* TS 7: vite + @solidjs/vite-plugin Plugin identities overflow. Keep this list on VitePlugin. */
 	const plugins: VitePlugin[] = [
 		createTwDeprecatedPlugin(),
 		/* manifest: true always enabled so virtual:flare-sx-manifest is populated at SSR build time */

package/src/plugins/prerender-plugin.ts

@@ -92,13 +92,13 @@ export function createPrerenderPlugin(config: {
 			const mod = (await import(`${serverPath}?t=${Date.now()}`)) as ServerModule;
 
 			/* 4. Resolve static params for dynamic routes */
-			const hasDynamic = defs.some(
-				(d) => d.type === "page" && (d.cache.ssg === "dynamic" || d.cache.isr === "dynamic"),
+			const needsStaticParams = defs.some(
+				(d) => d.type === "page" && Boolean(d.cache.ssg || d.cache.isr) && d.virtualPath.includes("["),
 			);
 			const resolvedHandler = mod.server ?? mod.handler;
 			if (!resolvedHandler) return;
 			const staticParams =
-				hasDynamic && resolvedHandler.getStaticParams ? await resolvedHandler.getStaticParams() : undefined;
+				needsStaticParams && resolvedHandler.getStaticParams ? await resolvedHandler.getStaticParams() : undefined;
 
 			/* 5. Convert to prerender routes */
 			const routes = buildPrerenderRoutes(defs, staticParams);

package/src/plugins/server-fn.ts

@@ -412,34 +412,29 @@ function stripCommentsAndStrings(code: string): string {
  * Preserves _registration (client needs id, name, method for RPC).
  * Uses paren-depth tracking to find matching closing paren.
  */
+const CLIENT_STUB_TOKENS = [".handler(", ".stream(", ".authorize(", ".input("] as const;
+
+function nextClientStub(code: string, from: number): { idx: number; token: string } | null {
+	let best: { idx: number; token: string } | null = null;
+	for (const token of CLIENT_STUB_TOKENS) {
+		const idx = code.indexOf(token, from);
+		if (idx === -1) continue;
+		if (!best || idx < best.idx) best = { idx, token };
+	}
+	return best;
+}
+
 export function stripHandlerBodies(code: string): string {
 	let result = "";
 	let cursor = 0;
 
 	while (cursor < code.length) {
-		const handlerIdx = code.indexOf(".handler(", cursor);
-		const streamIdx = code.indexOf(".stream(", cursor);
-
-		/* pick whichever comes first, skip -1 (not found) */
-		let idx: number;
-		let token: string;
-		if (handlerIdx === -1 && streamIdx === -1) {
+		const found = nextClientStub(code, cursor);
+		if (!found) {
 			result += code.slice(cursor);
 			break;
 		}
-		if (handlerIdx === -1) {
-			idx = streamIdx;
-			token = ".stream(";
-		} else if (streamIdx === -1) {
-			idx = handlerIdx;
-			token = ".handler(";
-		} else if (handlerIdx <= streamIdx) {
-			idx = handlerIdx;
-			token = ".handler(";
-		} else {
-			idx = streamIdx;
-			token = ".stream(";
-		}
+		const { idx, token } = found;
 
 		/* include everything up to and including the token */
 		const handlerStart = idx + token.length;

package/src/plugins/solid-jsx.d.ts

@@ -1,11 +1,11 @@
-import "solid-js";
+import "@solidjs/web";
 
-declare module "solid-js" {
+declare module "@solidjs/web" {
 	namespace JSX {
 		interface HTMLAttributes<T> {
 			css?: string;
 		}
-		interface CoreSVGAttributes<T> {
+		interface SVGAttributes<T> {
 			css?: string;
 		}
 	}

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

@@ -28,12 +28,12 @@ function hash4(s: string): string {
  * Class name triple: selector\0property\0value.
  * Null-byte separators prevent `color:red` ↔ `col:or:red` collisions.
  */
-function tripleKey(selector: string, prop: string, value: string): string {
-	return `${selector}\0${prop}\0${value}`;
+function tripleKey(selector: string, prop: string, value: string, atWrap = ""): string {
+	return `${selector}\0${prop}\0${value}\0${atWrap}`;
 }
 
-function className(selector: string, prop: string, value: string, mode: "dev" | "prod"): string {
-	const key = tripleKey(selector, prop, value);
+function className(selector: string, prop: string, value: string, mode: "dev" | "prod", atWrap = ""): string {
+	const key = tripleKey(selector, prop, value, atWrap);
 	if (mode === "prod") {
 		return `a1-${hash8(key)}`;
 	}
@@ -101,7 +101,7 @@ function emitDeclarations(ctx: EmitCtx, cssSelector: string, base: SxIR["base"],
 		}
 
 		const cssProp = toKebab(prop);
-		const cls = className(cssSelector, cssProp, value, ctx.mode);
+		const cls = className(cssSelector, cssProp, value, ctx.mode, atWrap);
 		ctx.classes.push(cls);
 
 		if (ctx.cssRules.has(cls)) continue;