bosia 0.9.5 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.9.5",
+	"version": "0.9.6",
 	"type": "module",
 	"description": "A fast, batteries-included fullstack framework — SSR · Svelte 5 Runes · Bun · ElysiaJS. File-based routing No Node.js, no Vite, no adapters.",
 	"keywords": [

package/src/core/build.ts

@@ -7,6 +7,7 @@ import { generateRoutesFile } from "./routeFile.ts";
 import { generateRouteTypes, ensureRootDirs } from "./routeTypes.ts";
 import { makeBosiaPlugin } from "./plugin.ts";
 import { makeBosiaSvelteCompiler, svelteMapCache } from "./svelteCompiler.ts";
+import { finalizeComponentCss } from "./componentCss.ts";
 import { prerenderStaticRoutes, generateStaticSite } from "./prerender.ts";
 import { loadEnv, classifyEnvVars } from "./env.ts";
 import { generateEnvModules } from "./envCodegen.ts";
@@ -258,6 +259,17 @@ for (const output of clientResult.outputs) {
 	}
 }
 
+// Scoped component `<style>` blocks, harvested during the client compile and
+// written as one stylesheet the head can link. Before this they rode inside the
+// JS bundle, so every SSR'd page painted unstyled until hydration. Must land
+// before the manifest write below: prerenderStaticRoutes() boots the built
+// server, which reads manifest.json once at startup.
+const componentCssFile = finalizeComponentCss(`${OUT_DIR}/client`);
+if (componentCssFile) {
+	cssFiles.push(componentCssFile);
+	console.log(`✅ Component CSS built: ${OUT_DIR}/client/${componentCssFile}`);
+}
+
 // Entry is always "index.js" due to naming: { entry: "index.[ext]" }
 const serverEntry =
 	serverResult.outputs

package/src/core/componentCss.ts

@@ -0,0 +1,54 @@
+import { writeFileSync } from "fs";
+import { join } from "path";
+import { rebaseCssUrls } from "./basePath.ts";
+import { currentBase } from "./appBase.ts";
+
+/**
+ * Scoped `<style>` blocks harvested from every `.svelte` file the client build
+ * touches, keyed by absolute source path so a recompile of the same file
+ * replaces its rules rather than appending a second copy.
+ *
+ * Why a hand-rolled collector rather than letting Bun emit the CSS: with
+ * `splitting: true` a `css: "external"` compile makes Bun write one CSS sidecar
+ * per dynamic-imported chunk, which is the "Multiple files share the same
+ * output path" failure that 0.4.4 fought (see `test/svelte-build.test.ts`).
+ * Collecting here keeps the client build's CSS-output count at zero — the
+ * invariant that test pins — while still producing a real stylesheet.
+ */
+const collected = new Map<string, string>();
+
+export function collectComponentCss(filePath: string, css: string): void {
+	collected.set(filePath, css);
+}
+
+/**
+ * Concatenate everything collected into one content-hashed stylesheet in
+ * `clientDir`, and return its basename — or `null` when the app has no scoped
+ * styles at all, in which case nothing is written and nothing is linked.
+ *
+ * Mirrors `finalizeTailwindCss` (twHash.ts) deliberately: same rebase-then-hash
+ * order, same hash length, same `-<hash>.css` shape that staticManifest's
+ * HASHED_BASENAME rule reads as immutable.
+ */
+export function finalizeComponentCss(clientDir: string): string | null {
+	if (collected.size === 0) return null;
+
+	// Sorted by path: the bundler visits modules in whatever order resolution
+	// happens to take, and an unstable order means an unstable hash means every
+	// build busts a cache that did not need busting.
+	const css = [...collected.keys()]
+		.sort()
+		.map((k) => collected.get(k)!)
+		.join("\n");
+
+	// Rebase before hashing, so the hash describes the bytes actually served —
+	// same reasoning as twHash: a `url(/img/x.png)` inside a component's
+	// `<style>` resolves against the origin and would land outside the mount.
+	const base = currentBase();
+	const bytes = base ? rebaseCssUrls(base, css) : css;
+
+	const hash = new Bun.CryptoHasher("sha256").update(bytes).digest("hex").slice(0, 10);
+	const name = `bosia-css-${hash}.css`;
+	writeFileSync(join(clientDir, name), bytes);
+	return name;
+}

package/src/core/html.ts

@@ -56,6 +56,19 @@ function twCssLink(): string {
 		: `<link rel="stylesheet" href="${TW_CSS}${cacheBust}">`;
 }
 
+/** The build-time component stylesheet (scoped `<style>` blocks, concatenated).
+ *  Emitted AFTER `twCssLink()` on every path: these rules used to be appended to
+ *  `document.head` at hydration, i.e. last, and the app stylesheets Tailwind
+ *  inlines (`tokens.css`, `components.css`) are unlayered, so a tie between them
+ *  is settled on source order. Linking before Tailwind would silently flip
+ *  which one wins. Each entry carries its own indent and newline, so an app with
+ *  no scoped styles at all contributes nothing rather than a blank line. */
+function componentCssLinks(): string {
+	return (distManifest.css ?? [])
+		.map((f: string) => `  <link rel="stylesheet" href="${DIST}/${f}">\n`)
+		.join("");
+}
+
 /** Inline theme bootstrap — runs before paint to avoid FOUC. theme ∈ light|dark|system (missing = system). */
 const THEME_INIT_JS =
 	"try{var t=localStorage.getItem('theme');" +
@@ -153,10 +166,6 @@ export function buildHtml(
 	body = rebaseHtmlAttrs(B, body);
 	head = rebaseHtmlAttrs(B, head);
 
-	const cssLinks = (distManifest.css ?? [])
-		.map((f: string) => `<link rel="stylesheet" href="${DIST}/${f}">`)
-		.join("\n  ");
-
 	// Metadata goes in before `head`: the first <title> in the document wins, and
 	// the streaming path already puts metadata() ahead of <svelte:head> content
 	// (which arrives later via buildHtmlTail). Same order = same winner on both paths.
@@ -210,8 +219,8 @@ export function buildHtml(
 
 		return (
 			headOpenInterpolated +
-			`\n  ${faviconLine}${cssLinks}\n` +
-			`  ${twCssLink()}\n` +
+			`\n  ${faviconLine}${twCssLink()}\n` +
+			componentCssLinks() +
 			`  <script${n}>${THEME_INIT_JS}</script>\n` +
 			`  ${fallbackTitle}${metaTags}${head}` +
 			headCloseInterpolated +
@@ -229,9 +238,8 @@ export function buildHtml(
   ${fallbackTitle}
   <link rel="icon" type="image/svg+xml" href="${FAVICON}">
 ${metaTags}  ${head}
-  ${cssLinks}
   ${twCssLink()}
-  <script${n}>${THEME_INIT_JS}</script>
+${componentCssLinks()}  <script${n}>${THEME_INIT_JS}</script>
 </head>
 <body>
   <div id="app">${body}</div>${scripts}${bodyEnd}
@@ -249,10 +257,6 @@ export function buildHtmlShellOpen(
 ): string {
 	const key = safeLang(lang);
 	const n = nonceAttr(nonce);
-	const cssLinks = (distManifest.css ?? [])
-		.map((f: string) => `<link rel="stylesheet" href="${DIST}/${f}">`)
-		.join("\n  ");
-
 	if (segments) {
 		const headOpenInterpolated = interpolateSegment(segments.headOpen, { lang: key, nonce });
 		const faviconLine = segments.hasCustomFavicon
@@ -260,8 +264,8 @@ export function buildHtmlShellOpen(
 			: `  <link rel="icon" type="image/svg+xml" href="${FAVICON}">\n`;
 		return (
 			headOpenInterpolated +
-			`\n  ${faviconLine}${cssLinks}\n` +
-			`  ${twCssLink()}\n` +
+			`\n  ${faviconLine}${twCssLink()}\n` +
+			componentCssLinks() +
 			`  <script${n}>${THEME_INIT_JS}</script>\n` +
 			`  <link rel="modulepreload" href="${DIST}/${distManifest.entry}${cacheBust}">`
 		);
@@ -272,8 +276,8 @@ export function buildHtmlShellOpen(
 		`  <meta charset="UTF-8">\n` +
 		`  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n` +
 		`  <link rel="icon" type="image/svg+xml" href="${FAVICON}">\n` +
-		`  ${cssLinks}\n` +
 		`  ${twCssLink()}\n` +
+		componentCssLinks() +
 		`  <script${n}>${THEME_INIT_JS}</script>\n` +
 		`  <link rel="modulepreload" href="${DIST}/${distManifest.entry}${cacheBust}">`
 	);

package/src/core/plugins/inspector/bun-plugin.ts

@@ -4,6 +4,7 @@ import { relative } from "node:path";
 import type { BunPlugin } from "bun";
 import { svelteMapCache } from "../../svelteCompiler.ts";
 import { lineColFromOffset } from "../../sourceLoc.ts";
+import { collectComponentCss } from "../../componentCss.ts";
 
 type AnyNode = {
 	type?: string;
@@ -136,11 +137,12 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 					generate,
 					dev,
 					hmr: dev,
-					// Mirror the prod compiler (svelteCompiler.ts): client injects scoped
-					// CSS into the JS via `append_styles`, server discards it. No CSS
-					// chunks means Bun's `splitting:true` output-path collisions can't
-					// arise, so no runtime-injection workaround is needed.
-					css: generate === "client" ? "injected" : "external",
+					// Mirror the prod compiler (svelteCompiler.ts): external on both
+					// targets, with the client's rules harvested into one stylesheet
+					// that the head links. This plugin registers ahead of the main
+					// compiler and its onLoad wins in dev, so letting the two drift
+					// here is how dev and prod stop agreeing about first paint.
+					css: "external",
 					preserveWhitespace: dev,
 					preserveComments: dev,
 					cssHash: ({ css }) => `svelte-${fnv(css)}`,
@@ -165,6 +167,11 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 					svelteMapCache.set(args.path, m);
 				}
 
+				// Client only — see the same guard in svelteCompiler.ts.
+				if (generate === "client" && result.css?.code) {
+					collectComponentCss(args.path, result.css.code);
+				}
+
 				const js = dev ? fixBindShadow(result.js.code) : result.js.code;
 				return { contents: js, loader: "ts" };
 			});

package/src/core/scanner.ts

@@ -65,6 +65,7 @@ export function scanRoutes(): RouteManifest {
 		layoutServerChain: { path: string; depth: number }[],
 		errorPageChain: { path: string; depth: number }[],
 		inheritedTrailingSlash: TrailingSlash,
+		inheritedLoading: string | null,
 	) {
 		const fullDir = join(ROUTES_DIR, dir);
 		if (!existsSync(fullDir)) return;
@@ -76,6 +77,12 @@ export function scanRoutes(): RouteManifest {
 		const currentLayoutServers = [...layoutServerChain];
 		const currentErrorPages = [...errorPageChain];
 		let currentTrailingSlash = inheritedTrailingSlash;
+		// Cascades to every page below, nearest ancestor winning — the same shape
+		// as the layout chain. Without this a section with 40 routes needed 40
+		// identical +loading.svelte files to cover its navigations.
+		const currentLoading = items.some((i) => i.isFile() && i.name === "+loading.svelte")
+			? join(dir, "+loading.svelte")
+			: inheritedLoading;
 
 		if (items.some((i) => i.isFile() && i.name === "+layout.svelte")) {
 			currentLayouts.push(join(dir, "+layout.svelte"));
@@ -112,10 +119,6 @@ export function scanRoutes(): RouteManifest {
 				? join(dir, "+page.server.ts")
 				: null;
 
-			const loadingFile = items.some((i) => i.isFile() && i.name === "+loading.svelte")
-				? join(dir, "+loading.svelte")
-				: null;
-
 			const pageTs = pageServerFile ? readTrailingSlash(join(ROUTES_DIR, pageServerFile)) : null;
 			const effectiveTs: TrailingSlash = pageTs ?? currentTrailingSlash;
 
@@ -125,7 +128,7 @@ export function scanRoutes(): RouteManifest {
 				page: pageFile,
 				layouts: [...currentLayouts],
 				pageServer: pageServerFile,
-				loading: loadingFile,
+				loading: currentLoading,
 				layoutServers: [...currentLayoutServers],
 				errorPages: [...currentErrorPages],
 				trailingSlash: effectiveTs,
@@ -149,11 +152,12 @@ export function scanRoutes(): RouteManifest {
 				currentLayoutServers,
 				currentErrorPages,
 				currentTrailingSlash,
+				currentLoading,
 			);
 		}
 	}
 
-	walk("", [], [], [], [], "never");
+	walk("", [], [], [], [], "never", null);
 
 	// Warn when a catch-all exists but no exact route covers its prefix.
 	// e.g. "/[...slug]" matches everything EXCEPT "/" (which needs its own +page.svelte).

package/src/core/svelteCompiler.ts

@@ -2,6 +2,7 @@ import { compile, compileModule } from "svelte/compiler";
 import type { BunPlugin } from "bun";
 
 import { auditSvelteSource } from "./svelteAudit.ts";
+import { collectComponentCss } from "./componentCss.ts";
 import { rebaseHtmlAttrs } from "./basePath.ts";
 import { currentBase } from "./appBase.ts";
 import { loadBosiaConfig } from "./config.ts";
@@ -110,7 +111,12 @@ export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 				const source = await Bun.file(args.path).text();
 				const result = compile(rebaseSvelteMarkup(source), {
 					generate,
-					css: target === "browser" ? "injected" : "external",
+					// External on both targets. The browser used to get "injected",
+					// which put every scoped rule inside the JS bundle — so an
+					// SSR'd page painted before its own layout CSS existed and
+					// snapped into place at hydration. `collectComponentCss` below
+					// gathers the rules into one stylesheet the head can link.
+					css: "external",
 					dev,
 					hmr: false,
 					cssHash: ({ css }) => `svelte-${svelteHash(css)}`,
@@ -119,6 +125,12 @@ export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 					// rather than the legacy `html`. The audit walker assumes modern.
 					modernAst: true,
 				});
+				// Browser only: both plugin instances share module state and the
+				// client and server builds run concurrently, so collecting from
+				// each would emit every rule twice.
+				if (target === "browser" && result.css?.code) {
+					collectComponentCss(args.path, result.css.code);
+				}
 				const existing = auditInflight.get(args.path);
 				if (existing) {
 					await existing;