@lovrozagar/flare 0.2.0 → 0.3.0

package/README.md

@@ -744,6 +744,8 @@ import { styles, cn } from "@lovrozagar/flare/styles";
 <div class={cn("base", on() && "active")} />
 ```
 
+`cn` merges Tailwind conflicts: the last utility in a group wins. A static `class="px-2 px-4"` compiles to `px-4`. Runtime `cn` is tree-shaken unless a dynamic class list exists.
+
 `tw=` on `styles()` or as a JSX attribute is **dropped**. Put utilities in `class=`. `css=` compiles through the same plugin (not a `data-c` hash).
 
 ## Fonts and images

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lovrozagar/flare",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"description": "Solid meta-framework. Server-driven, NDJSON streaming, renderToStream.",
 	"keywords": [
 		"flare",

package/src/head-client/index.ts

@@ -17,6 +17,7 @@ const managedHreflangTags = new Set<string>();
 /* CSS lifecycle: per-route elements + refcounted dedup for shared stylesheets */
 const cssElementsByRoute = new Map<string, HTMLElement[]>();
 const cssRefCount = new Map<string, { element: HTMLElement; refCount: number }>();
+const styleRefCount = new Map<string, { element: HTMLElement; refCount: number }>();
 
 export function clearRouteTracking(): void {
 	baseTitle = "";
@@ -26,6 +27,7 @@ export function clearRouteTracking(): void {
 	managedHreflangTags.clear();
 	cssElementsByRoute.clear();
 	cssRefCount.clear();
+	styleRefCount.clear();
 }
 
 export function initRouteHierarchy(matchIds: string[], rootTitle?: string): void {
@@ -561,24 +563,72 @@ function addCssLinkForRoute(matchId: string, href: string): void {
 	cssElementsByRoute.set(matchId, list);
 }
 
-function addCssStyleForRoute(matchId: string, children: string): void {
-	if (typeof document === "undefined") return;
-	const el = document.createElement("style");
+function stampStyleNonce(el: HTMLElement): void {
+	if (el.getAttribute("nonce") || el.nonce) return;
 	const meta = document.querySelector?.('meta[name="csp-nonce"]');
 	const tagged = document.querySelector?.("script[nonce], style[nonce]") as HTMLElement | null;
 	const nonce = meta?.getAttribute("content") || tagged?.nonce || tagged?.getAttribute("nonce") || "";
-	if (nonce) {
-		el.setAttribute("nonce", nonce);
-		el.nonce = nonce;
+	if (!nonce) return;
+	el.setAttribute("nonce", nonce);
+	el.nonce = nonce;
+}
+
+function isInfraStyle(el: HTMLElement): boolean {
+	const id = el.getAttribute("id");
+	return id === "flare-runtime" || id === "flare-critical";
+}
+
+function isStyleTracked(el: HTMLElement): boolean {
+	for (const ref of styleRefCount.values()) {
+		if (ref.element === el) return true;
 	}
-	el.setAttribute("data-flare-route", matchId);
-	el.textContent = children;
-	document.head.appendChild(el);
+	return false;
+}
+
+function findAdoptableStyle(children: string): HTMLElement | null {
+	const nodes = document.head?.querySelectorAll("style");
+	if (!nodes) return null;
+	for (const node of nodes) {
+		const el = node as HTMLElement;
+		if (isInfraStyle(el) || isStyleTracked(el)) continue;
+		if (el.textContent === children) return el;
+	}
+	return null;
+}
+
+function trackStyleForRoute(matchId: string, el: HTMLElement): void {
 	const list = cssElementsByRoute.get(matchId) ?? [];
 	list.push(el);
 	cssElementsByRoute.set(matchId, list);
 }
 
+function addCssStyleForRoute(matchId: string, children: string): void {
+	if (typeof document === "undefined") return;
+	const ref = styleRefCount.get(children);
+	if (ref) {
+		ref.refCount++;
+		trackStyleForRoute(matchId, ref.element);
+		return;
+	}
+
+	const existing = findAdoptableStyle(children);
+	if (existing) {
+		existing.setAttribute("data-flare-route", matchId);
+		stampStyleNonce(existing);
+		styleRefCount.set(children, { element: existing, refCount: 1 });
+		trackStyleForRoute(matchId, existing);
+		return;
+	}
+
+	const el = document.createElement("style");
+	stampStyleNonce(el);
+	el.setAttribute("data-flare-route", matchId);
+	el.textContent = children;
+	document.head.appendChild(el);
+	styleRefCount.set(children, { element: el, refCount: 1 });
+	trackStyleForRoute(matchId, el);
+}
+
 function applyCssForRoute(matchId: string, config: HeadConfig): void {
 	/* Snapshot old elements before adding new ones */
 	const oldElements = cssElementsByRoute.get(matchId) ?? [];
@@ -608,20 +658,34 @@ function applyCssForRoute(matchId: string, config: HeadConfig): void {
 
 	/* THEN decrement old refcounts — shared elements stay because new refs were added above */
 	for (const el of oldElements) {
-		const href = el.getAttribute("href");
-		if (href && el.getAttribute("rel") === "stylesheet") {
-			const ref = cssRefCount.get(href);
-			if (ref) {
-				ref.refCount--;
-				if (ref.refCount <= 0) {
-					ref.element.remove();
-					cssRefCount.delete(href);
-				}
-				continue;
+		releaseCssElement(el);
+	}
+}
+
+function releaseCssElement(el: HTMLElement): void {
+	const href = el.getAttribute("href");
+	if (href && el.getAttribute("rel") === "stylesheet") {
+		const ref = cssRefCount.get(href);
+		if (ref) {
+			ref.refCount--;
+			if (ref.refCount <= 0) {
+				ref.element.remove();
+				cssRefCount.delete(href);
 			}
+			return;
 		}
-		el.remove();
 	}
+	const content = el.textContent ?? "";
+	const styleRef = styleRefCount.get(content);
+	if (styleRef && styleRef.element === el) {
+		styleRef.refCount--;
+		if (styleRef.refCount <= 0) {
+			styleRef.element.remove();
+			styleRefCount.delete(content);
+		}
+		return;
+	}
+	el.remove();
 }
 
 function removeCssForRoute(routeId: string): void {
@@ -629,21 +693,7 @@ function removeCssForRoute(routeId: string): void {
 	if (!elements) return;
 
 	for (const el of elements) {
-		const href = el.getAttribute("href");
-		/* Refcounted stylesheet links */
-		if (href && el.getAttribute("rel") === "stylesheet") {
-			const ref = cssRefCount.get(href);
-			if (ref) {
-				ref.refCount--;
-				if (ref.refCount <= 0) {
-					ref.element.remove();
-					cssRefCount.delete(href);
-				}
-				continue;
-			}
-		}
-		/* <style> elements or untracked links — just remove */
-		el.remove();
+		releaseCssElement(el);
 	}
 	cssElementsByRoute.delete(routeId);
 }

package/src/loader-pipeline/index.ts

@@ -96,6 +96,8 @@ export interface PipelineResult {
 	auth: unknown | null;
 	deferContexts: Map<string, DeferContext>;
 	matches: PipelineMatch[];
+	/** Accumulated merge (root → page) for SSR `resolvedHead`. */
+	mergedHead?: HeadConfig;
 }
 
 export interface PipelineMatch {
@@ -237,6 +239,23 @@ async function buildInternalRoutes(
 	return result;
 }
 
+/**
+ * Per-match head for client apply (`ph`, NDJSON, match cache).
+ * Scalars / objects / images / jsonLd stay merged so upsert and
+ * remove-all-then-append fields still see the full set. Concatenate
+ * `custom.*` arrays stay on the declaring route so descendants do not replay them.
+ */
+function toClientHeadConfig(merged: HeadConfig | undefined, own: HeadConfig | undefined): HeadConfig | undefined {
+	if (!merged) return undefined;
+	const client: HeadConfig = { ...merged };
+	if (own?.custom !== undefined) {
+		client.custom = own.custom;
+	} else {
+		delete client.custom;
+	}
+	return client;
+}
+
 export async function runPipeline<TEnv = unknown>(config: PipelineConfig<TEnv>): Promise<PipelineResult> {
 	const { abortController, cause, env, localeConfig, prefetch, request, routes, ssrCacheDefaults, url } = config;
 	const tracer = config.tracer ?? noopTracer;
@@ -605,11 +624,12 @@ export async function runPipeline<TEnv = unknown>(config: PipelineConfig<TEnv>):
 	let mergedHead: HeadConfig | undefined;
 
 	for (const match of matches) {
+		let routeHead: HeadConfig | undefined;
 		if (match.route.head && match.status === "success") {
 			const location = routeLocationMap.get(match.route);
 			if (location) {
 				try {
-					const routeHead = match.route.head({
+					routeHead = match.route.head({
 						...urlHelpers,
 						cause,
 						loaderData: match.loaderData,
@@ -631,10 +651,13 @@ export async function runPipeline<TEnv = unknown>(config: PipelineConfig<TEnv>):
 					}
 				} catch (e: unknown) {
 					match.headError = e instanceof Error ? e : new Error(String(e));
+					routeHead = undefined;
 				}
 			}
 		}
-		match.headConfig = mergedHead;
+		/* Client apply uses this match's own custom.* so concatenate fields
+		 * are not replayed once per descendant. SSR uses `mergedHead`. */
+		match.headConfig = toClientHeadConfig(mergedHead, routeHead);
 	}
 	headSpan.end();
 
@@ -693,5 +716,5 @@ export async function runPipeline<TEnv = unknown>(config: PipelineConfig<TEnv>):
 	}
 	headersSpan.end();
 
-	return { auth, deferContexts, matches };
+	return { auth, deferContexts, matches, mergedHead };
 }

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

@@ -1,5 +1,6 @@
 import MagicString from "magic-string";
 import type { Expression, JSXAttribute, JSXOpeningElement, Node, ObjectExpression, Program } from "oxc-parser";
+import { mergeClassList } from "../../styles/cn.ts";
 import { parseSource } from "./parser.ts";
 import { evaluateSxObject } from "./evaluator.ts";
 import { emitAtomic } from "./atomic.ts";
@@ -82,7 +83,13 @@ function isDOMElement(tag: string): boolean {
 	return tag.length > 0 && tag[0] !== "" && tag[0] === tag[0].toLowerCase();
 }
 
-function isCnCall(expr: Expression): boolean {
+function isCnCall(expr: unknown): expr is {
+	type: "CallExpression";
+	callee: { type: "Identifier"; name: string };
+	arguments: Expression[];
+	start: number;
+	end: number;
+} {
 	if (!isCallExpression(expr)) return false;
 	return expr.callee.type === "Identifier" && expr.callee.name === "cn";
 }
@@ -236,67 +243,91 @@ function buildTwRule(token: string, body: string): string {
 	return `.${escaped} { ${body} }`;
 }
 
-function allStaticStrings(elements: Array<Expression | null>): string[] | null {
-	const result: string[] = [];
-	for (const el of elements) {
-		if (el === null) continue;
-		if (!isStringLiteral(el)) return null;
-		result.push(el.value);
+function isIgnorableClassNode(el: unknown): boolean {
+	if (isIdentifier(el) && el.name === "undefined") return true;
+	if (typeof el !== "object" || el === null) return false;
+	const node = el as { type?: string; value?: unknown };
+	return node.type === "Literal" && (node.value === null || node.value === false);
+}
+
+/*
+ * Fully static cn() arguments become one class string (before conflict merge).
+ * Any dynamic argument returns null so the call stays at runtime.
+ */
+function staticCnParts(args: readonly unknown[]): string[] | null {
+	const parts: string[] = [];
+	for (const arg of args) {
+		if (arg === null) continue;
+		if (isStringLiteral(arg)) {
+			if (arg.value) parts.push(arg.value);
+			continue;
+		}
+		if (isIgnorableClassNode(arg)) continue;
+		if (isArrayExpression(arg)) {
+			const inner = staticCnParts(arg.elements);
+			if (inner === null) return null;
+			parts.push(...inner);
+			continue;
+		}
+		if (isCnCall(arg)) {
+			const inner = staticCnParts(arg.arguments);
+			if (inner === null) return null;
+			parts.push(...inner);
+			continue;
+		}
+		return null;
 	}
-	return result;
+	return parts;
 }
 
 /*
- * Resolve a mixed-type class array to either a literal string or a template expr string.
- * LogicalExpression `cond && "str"` → ternary guard in template.
+ * Static arrays become a literal. Mixed arrays become a cn() call so runtime
+ * merge sees every token, including ones hidden behind a conditional.
  */
 function resolveClassArray(
 	source: string,
 	elements: Array<Expression | null>,
-): { kind: "literal"; value: string } | { kind: "template"; expr: string } {
-	const allStatic = allStaticStrings(elements);
-	if (allStatic !== null) {
-		return { kind: "literal", value: allStatic.filter(Boolean).join(" ") };
-	}
-
-	const parts: string[] = [];
-	let first = true;
+): { kind: "literal"; value: string } | { kind: "cn"; expr: string } {
+	const args: string[] = [];
+	let dynamic = false;
 	for (const el of elements) {
-		if (el === null) continue;
+		if (el === null || isIgnorableClassNode(el)) continue;
 		if (isStringLiteral(el)) {
-			parts.push(first ? el.value : ` ${el.value}`);
-			first = false;
-		} else if (
-			typeof el === "object" &&
-			el !== null &&
-			(el as { type: string }).type === "LogicalExpression" &&
-			(el as { operator?: string }).operator === "&&"
-		) {
-			const logic = el as { left: Expression; right: Expression };
-			const leftSrc = srcOf(source, logic.left as { start: number; end: number });
-			const rightEl = logic.right;
-			if (isStringLiteral(rightEl)) {
-				const sep = first ? "" : " ";
-				parts.push(`\${${leftSrc} ? "${sep}${rightEl.value}" : ""}`);
-			} else {
-				const sep = first ? "" : " ";
-				const rightSrc = srcOf(source, rightEl as { start: number; end: number });
-				parts.push(`\${${leftSrc} ? \`${sep}\${${rightSrc}}\` : ""}`);
-			}
-			first = false;
-		} else {
-			/* Skip null/false literals and the `undefined` identifier — they contribute nothing. */
-			const isNullLit = (el as { type: string }).type === "Literal" && (el as { value: unknown }).value === null;
-			const isFalseLit = (el as { type: string }).type === "Literal" && (el as { value: unknown }).value === false;
-			const isUndefined = isIdentifier(el) && el.name === "undefined";
-			if (isNullLit || isFalseLit || isUndefined) continue;
-			const sep = first ? "" : " ";
-			parts.push(`${sep}\${${srcOf(source, el as { start: number; end: number })}}`);
-			first = false;
+			if (el.value) args.push(JSON.stringify(el.value));
+			continue;
 		}
+		dynamic = true;
+		args.push(srcOf(source, el as { start: number; end: number }));
+	}
+	if (!dynamic) {
+		return { kind: "literal", value: args.map((part) => JSON.parse(part) as string).join(" ") };
 	}
+	return { expr: `cn(${args.join(", ")})`, kind: "cn" };
+}
 
-	return { expr: parts.join(""), kind: "template" };
+function dropUnusedCnImport(code: string): string {
+	const withoutImports = code.replace(/import\s*\{[^}]*\}\s*from\s*["'][^"']+["']\s*;?/g, "");
+	if (/\bcn\b/.test(withoutImports)) return code;
+	return code.replace(
+		/import\s*\{([^}]*)\}\s*from\s*(["'](?:@lovrozagar\/flare\/styles|flare\/styles)["'])\s*;?/g,
+		(full, specifiers: string, from: string) => {
+			const parts = specifiers
+				.split(",")
+				.map((part) => part.trim())
+				.filter(Boolean);
+			const kept = parts.filter(
+				(part) =>
+					(part
+						.split(/\s+as\s+/)
+						.pop()
+						?.trim() ?? part) !== "cn",
+			);
+			if (kept.length === parts.length) return full;
+			if (kept.length === 0) return "";
+			const semicolon = full.trimEnd().endsWith(";") ? ";" : "";
+			return `import { ${kept.join(", ")} } from ${from}${semicolon}`;
+		},
+	);
 }
 
 function findAttr(opening: JSXOpeningElement, name: string): JSXAttribute | null {
@@ -327,7 +358,9 @@ function hasSpread(opening: JSXOpeningElement): { identName: string } | null {
 function resolveClassAttr(
 	source: string,
 	classAttr: JSXAttribute,
-): { kind: "literal"; value: string } | { kind: "expr"; expr: string; wasArray: boolean; wasDynamic: boolean } {
+):
+	| { kind: "literal"; value: string; rewrite?: boolean }
+	| { kind: "expr"; expr: string; wasArray: boolean; wasDynamic: boolean } {
 	const cv = classAttr.value;
 	if (cv === null) return { kind: "literal", value: "" };
 
@@ -339,15 +372,18 @@ function resolveClassAttr(
 		if (isArrayExpression(expr)) {
 			const resolved = resolveClassArray(source, expr.elements);
 			if (resolved.kind === "literal") return { kind: "literal", value: resolved.value };
-			return { expr: `\`${resolved.expr}\``, kind: "expr", wasArray: true, wasDynamic: false };
+			return { expr: resolved.expr, kind: "expr", wasArray: true, wasDynamic: true };
 		}
 		if (isCnCall(expr)) {
-			/* Explicit cn() — preserve as-is */
+			const parts = staticCnParts(expr.arguments);
+			if (parts !== null) {
+				return { kind: "literal", rewrite: true, value: parts.join(" ") };
+			}
 			return {
 				expr: srcOf(source, expr as { start: number; end: number }),
 				kind: "expr",
 				wasArray: false,
-				wasDynamic: false,
+				wasDynamic: true,
 			};
 		}
 		/* Dynamic expression → wrap in cn() */
@@ -379,6 +415,7 @@ export function rewriteModule(source: string, ctx: RewriteCtx): RewriteResult |
 	const insertsBefore: Array<{ pos: number; text: string }> = [];
 
 	const neededImports = new Set<FlareImport>();
+	let foldedStaticCn = false;
 	const emittedClasses = new Set<string>();
 	let changed = false;
 
@@ -451,26 +488,19 @@ export function rewriteModule(source: string, ctx: RewriteCtx): RewriteResult |
 		if (classAttr) {
 			const resolved = resolveClassAttr(source, classAttr);
 			if (resolved.kind === "literal") {
-				classLiteral = resolved.value;
+				const merged = mergeClassList(resolved.value);
+				classLiteral = merged;
+				if (resolved.rewrite || merged !== resolved.value) classNeedsRewrite = true;
+				if (resolved.rewrite) foldedStaticCn = true;
+				compileTwFromString(merged, ctx);
 			} else {
 				classExpr = resolved.expr;
 				classWasArray = resolved.wasArray;
 				classWasDynamic = resolved.wasDynamic;
 				if (classWasDynamic) neededImports.add("cn");
-			}
-
-			/* Compile Tailwind utilities found in class= string literals */
-			const cv = classAttr.value;
-			if (cv === null) {
-				/* boolean attr — nothing to compile */
-			} else if (isStringLiteral(cv)) {
-				compileTwFromString(cv.value, ctx);
-			} else if (isJSXExpressionContainer(cv)) {
-				const expr = cv.expression;
-				if (isStringLiteral(expr)) {
-					compileTwFromString(expr.value, ctx);
-				} else {
-					compileTwFromExpr(expr, ctx);
+				const cv = classAttr.value;
+				if (cv !== null && isJSXExpressionContainer(cv)) {
+					compileTwFromExpr(cv.expression, ctx);
 				}
 			}
 		}
@@ -601,7 +631,12 @@ export function rewriteModule(source: string, ctx: RewriteCtx): RewriteResult |
 					return isArrayExpression((cv as { expression: unknown }).expression);
 				})()
 			: false;
-		if (classAttr && (classAttrWasArray || classWasArray || classWasDynamic || classNeedsRewrite)) {
+		const cssRewritesClass = cssAttr !== null && cssAttr.value !== null;
+		if (
+			classAttr &&
+			!cssRewritesClass &&
+			(classAttrWasArray || classWasArray || classWasDynamic || classNeedsRewrite)
+		) {
 			emitClassAttr(classAttr, classAttr.start, classLiteral, classExpr);
 		} else if (!classAttr && spread && dom) {
 			/* Spread on DOM with no class attr — don't inject anything */
@@ -672,8 +707,9 @@ export function rewriteModule(source: string, ctx: RewriteCtx): RewriteResult |
 		} else if (classAttr) {
 			const existing = resolveClassAttr(source, classAttr);
 			if (existing.kind === "literal") {
-				if (existing.value) {
-					replace(classAttr.start, classAttr.end, `class={cn("${existing.value}", ${compileCssCall})}`);
+				const merged = mergeClassList(existing.value);
+				if (merged) {
+					replace(classAttr.start, classAttr.end, `class={cn("${merged}", ${compileCssCall})}`);
 					neededImports.add("cn");
 				} else {
 					replace(classAttr.start, classAttr.end, `class={${compileCssCall}}`);
@@ -759,5 +795,6 @@ export function rewriteModule(source: string, ctx: RewriteCtx): RewriteResult |
 		}
 	}
 
-	return { code: ms.toString(), emittedClasses, map: null };
+	const code = foldedStaticCn ? dropUnusedCnImport(ms.toString()) : ms.toString();
+	return { code, emittedClasses, map: null };
 }

package/src/server-handler/index.ts

@@ -1214,7 +1214,7 @@ export function createServerHandler<
 										});
 									}
 
-									const resolvedHead = pipelineResult.matches.findLast((m) => m.headConfig)?.headConfig ?? {};
+									const resolvedHead = pipelineResult.mergedHead ?? {};
 
 									const fuzzyLogs = enableServerLogs ? getServerLogs() : undefined;
 									if (request.headers.get(HEADER_DATA) === HEADER_FLAG) {
@@ -1517,7 +1517,7 @@ export function createServerHandler<
 						const logsForTransport = collectedLogs && collectedLogs.length > 0 ? collectedLogs : undefined;
 
 						if (!isDataRequest) {
-							const resolvedHead = pipelineResult.matches.findLast((m) => m.headConfig)?.headConfig ?? {};
+							const resolvedHead = pipelineResult.mergedHead ?? {};
 
 							let ssrResult: ReturnType<typeof renderToStream>;
 							setRewrite(composedRewrite);

package/src/styles/cn-vendor/NOTICE.md

@@ -0,0 +1,18 @@
+# Vendored from shadcn-ui/cn
+
+MIT License
+
+Copyright (c) 2026 shadcn
+
+https://github.com/shadcn-ui/cn
+
+- tag: `cn@0.4.0`
+- commit: `84db83298f69a229d6f1ffc5d8c8d99ef451fb49`
+
+Copied files (runtime slice only):
+
+- `engine.ts`
+- `tables.generated.ts`
+- `types.ts`
+
+Not copied: `compiler.ts`, `build.ts`, `config.ts`, `default-config.generated.ts`, `vite.ts`, `next.ts`, `lite.ts`, `theme-css.ts`, `validators.ts`, `index.ts`.