npm - brustjs - Versions diffs - 0.1.36-alpha → 0.1.37-alpha - Mend

brustjs 0.1.36-alpha → 0.1.37-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/example/pokedex/app.css +11 -0
package/example/pokedex/components/AppLayout.tsx +3 -1
package/example/pokedex/components/TeamBuilder.module.css +47 -0
package/example/pokedex/components/TeamBuilder.tsx +11 -2
package/example/pokedex/components/ThemeToggle.tsx +7 -5
package/example/pokedex/lib/loaders.ts +26 -11
package/example/pokedex/lib/types.ts +1 -0
package/example/pokedex/pages/TypeChart.tsx +17 -13
package/package.json +7 -7
package/runtime/cli/build.ts +65 -35
package/runtime/cli/templates/minimal/package.json.tmpl +1 -0
package/runtime/cli/templates.ts +1 -0
package/runtime/css/component-build.ts +13 -5
package/runtime/css/route-deps.ts +26 -11
package/runtime/css-modules.d.ts +17 -0
package/runtime/index.js +52 -52
package/runtime/index.ts +38 -12
package/runtime/islands/bootstrap.ts +16 -1
package/runtime/islands/build.ts +46 -5
package/runtime/routes.ts +16 -0

package/example/pokedex/app.css CHANGED Viewed

@@ -1,9 +1,20 @@
 @import "tailwindcss";
 @source "./**/*.{tsx,ts}";
 @custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
+/* Theme-toggle icons: hide the wrong icon at SSR time via the server-rendered
+   <html data-mode> ancestor, so there's no flash before x-show hydrates. After
+   mount, x-show sets inline display (which wins over these stylesheet rules). */
+[data-mode="light"] .theme-icon-dark { display: none; }
+[data-mode="dark"] .theme-icon-light { display: none; }
 @theme {
   --color-brand-50:  oklch(0.97 0.02 264);
   --color-brand-500: oklch(0.55 0.20 264);
   --color-brand-600: oklch(0.49 0.20 264);
   --color-brand-700: oklch(0.43 0.19 264);
 }
+button {
+  cursor: pointer;
+}

package/example/pokedex/components/AppLayout.tsx CHANGED Viewed

@@ -21,10 +21,12 @@ export default function AppLayout({
   title,
   teamProps,
   mode,
+  themeLabel,
 }: {
   title: string
   teamProps: { teamInitial: TeamMember[] }
   mode: 'dark' | 'light'
+  themeLabel: string
 }) {
   return (
     <BrustPage
@@ -48,7 +50,7 @@ export default function AppLayout({
             <NavLink native href="/pokedex" label="Pokédex" />
             <NavLink native href="/type-chart" label="Type chart" />
             <div className="ml-auto flex items-center gap-2">
-              <ThemeToggle native />
+              <ThemeToggle native themeLabel={themeLabel} />
               {/* Team dock opens via the TeamBuilder island's own floating trigger
                   (the island owns its open state). A navbar button here would be a
                   dead affordance — cross-chunk toggle wiring is out of scope. */}

package/example/pokedex/components/TeamBuilder.module.css ADDED Viewed

@@ -0,0 +1,47 @@
+/* CSS Modules use-case (dogfood).
+ *
+ * brust runs every co-located `.module.css` through Lightning CSS at build:
+ * class + @keyframes names are scoped to `<name>_<hash>` and emitted as a
+ * per-component chunk under `dist/css/components/<sha8>.css`. The chunk is
+ * linked into the page <head> via the component-CSS manifest (route → chunks),
+ * and `import styles from './TeamBuilder.module.css'` resolves to the
+ * original→hashed name map through brust's Bun.plugin — so `styles.panel`
+ * is the scoped class string at runtime.
+ *
+ * This is for things Tailwind utilities express awkwardly: keyframe entrance
+ * animations + pseudo-elements, scoped to this island. Plain CSS only — the
+ * component-CSS pass runs without Tailwind, so no `@apply` here. */
+/* Roster panel: rise + fade in when the dock opens. */
+.panel {
+  animation: rise 0.18s ease-out;
+  transform-origin: bottom right;
+}
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+/* Count badge on the floating trigger: a quick pop on (re)mount. */
+.badge {
+  animation: pop 0.22s ease-out;
+}
+@keyframes pop {
+  0% {
+    transform: scale(0.6);
+  }
+  60% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

package/example/pokedex/components/TeamBuilder.tsx CHANGED Viewed

@@ -10,6 +10,10 @@ import { client, useStore } from 'brustjs/client'
 import type { Actions } from '../actions'
 import type { TeamMember } from '../lib/types'
 import { teamStore } from '../stores/team'
+// CSS Modules: scoped class + keyframe names; resolves to the hashed-name map
+// via brust's Bun.plugin. The chunk is linked per-route from the component-CSS
+// manifest (see routes.tsx for the route→chunk linking note).
+import styles from './TeamBuilder.module.css'
 const api = client<Actions>()
 const MAX = 6
@@ -47,7 +51,9 @@ export default function TeamBuilder({ teamInitial }: { teamInitial: TeamMember[]
   return (
     <div className="fixed bottom-5 right-5 z-[200]">
       {open && (
-        <div className="mb-3 w-80 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900">
+        <div
+          className={`mb-3 w-80 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900 ${styles.panel}`}
+        >
           <div className="h-1 bg-brand-500" />
           <div className="flex items-center gap-2 border-b border-slate-100 px-4 py-3 dark:border-slate-800">
             <Users size={16} className="text-brand-500" />
@@ -132,7 +138,10 @@ export default function TeamBuilder({ teamInitial }: { teamInitial: TeamMember[]
       >
         <Users size={16} />
         My team
-        <span className="rounded-full bg-white/25 px-2 py-0.5 text-xs font-extrabold">
+        <span
+          key={team.length}
+          className={`rounded-full bg-white/25 px-2 py-0.5 text-xs font-extrabold ${styles.badge}`}
+        >
           {team.length}
         </span>
       </button>

package/example/pokedex/components/ThemeToggle.tsx CHANGED Viewed

@@ -40,8 +40,10 @@ export const behavior = () => {
 // default → jinja (server). The x-* directives are static string attributes the
 // native compiler passes straight through; the directive runtime binds them to
-// the behavior instance on the client.
-export default function ThemeToggle() {
+// the behavior instance on the client. `themeLabel` is server-stamped (the
+// inverse of the active mode) so the x-text placeholder already shows the right
+// word — no Dark→Light flash before the behavior hydrates.
+export default function ThemeToggle({ themeLabel }: { themeLabel: string }) {
   return (
     <button
       type="button"
@@ -49,13 +51,13 @@ export default function ThemeToggle() {
       aria-label="Toggle theme"
       className="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
     >
-      <span x-show="isDark" className="inline-flex">
+      <span x-show="isDark" className="theme-icon-dark inline-flex">
         <Sun size={16} />
       </span>
-      <span x-show="isLight" className="inline-flex">
+      <span x-show="isLight" className="theme-icon-light inline-flex">
         <Moon size={16} />
       </span>
-      <span x-text="label">Dark</span>
+      <span x-text="label">{themeLabel}</span>
     </button>
   )
 }

package/example/pokedex/lib/loaders.ts CHANGED Viewed

@@ -50,12 +50,17 @@ interface LoaderCtx {
   req: BrustRequest
 }
-const chrome = (req: BrustRequest, title: string, crumb: string) => ({
-  title,
-  crumb,
-  mode: (req.cookies.mode === 'light' ? 'light' : 'dark') as 'light' | 'dark',
-  teamProps: { teamInitial: teamStore.list() },
-})
+const chrome = (req: BrustRequest, title: string, crumb: string) => {
+  const mode = (req.cookies.mode === 'light' ? 'light' : 'dark') as 'light' | 'dark'
+  return {
+    title,
+    crumb,
+    mode,
+    // The toggle button shows what it switches TO — the inverse of the active mode.
+    themeLabel: mode === 'dark' ? 'Light' : 'Dark',
+    teamProps: { teamInitial: teamStore.list() },
+  }
+}
 export async function homeLoader({ req }: LoaderCtx): Promise<HomeData> {
   const featured = FEATURED.map((p) => ({
@@ -251,15 +256,25 @@ const SHORT: Record<string, string> = {
 // Effectiveness → static Tailwind utility class string. These are literals in a
 // .ts file scanned by `@source`, so the scanner sees every class. The header /
 // row-head / corner / data cells share a base sizing class.
+// Effectiveness → static Tailwind utility class string. Every cell gets a solid
+// fill so the `gap-px` over a slate gridline background reads as a continuous
+// grid (the old design left 1× cells transparent → black voids you couldn't
+// trace). `hover:` lifts a cell with an inset brand ring to pinpoint a matchup.
 const CELL_BASE =
-  'flex items-center justify-center text-xs font-semibold tabular-nums aspect-square'
+  'flex items-center justify-center text-xs font-bold tabular-nums aspect-square transition-colors hover:relative hover:z-10 hover:ring-2 hover:ring-inset hover:ring-brand-500'
 const HEAD_BASE =
   'flex items-center justify-center text-[10px] font-bold uppercase tracking-tight text-white aspect-square'
+// Fill hierarchy so the grid reads as FULL (every cell visibly distinct from
+// the slate gridline showing through `gap-px`):
+//   light: card white < gridline slate-200, normal slate-50, 0 slate-800
+//   dark:  card slate-900 < gridline slate-700, normal slate-800, 0 slate-950
+// (normal must NOT equal the card colour or cells vanish; 0 must differ from
+// normal or "no effect" looks like a blank.)
 const CELL_CLASS: Record<string, string> = {
-  super: `${CELL_BASE} bg-green-500/25 text-green-700 dark:text-green-300`,
-  weak: `${CELL_BASE} bg-red-500/20 text-red-700 dark:text-red-300`,
-  none: `${CELL_BASE} bg-slate-800/80 text-slate-200`,
-  normal: `${CELL_BASE} text-slate-300 dark:text-slate-600`,
+  super: `${CELL_BASE} bg-emerald-500 text-white`,
+  weak: `${CELL_BASE} bg-rose-400 text-white dark:bg-rose-500`,
+  none: `${CELL_BASE} bg-slate-800 text-slate-100 dark:bg-slate-950 dark:text-slate-400`,
+  normal: `${CELL_BASE} bg-slate-50 text-slate-300 dark:bg-slate-800 dark:text-slate-600`,
 }
 export async function typeChartLoader({ req }: LoaderCtx): Promise<TypeChartData> {

package/example/pokedex/lib/types.ts CHANGED Viewed

@@ -23,6 +23,7 @@ export interface ChromeData {
   title: string // dynamic <title> + nav header, via AppLayout's <BrustPage title={title}>
   crumb: string // topbar breadcrumb leaf label
   mode: 'dark' | 'light' // theme, read from the `mode` cookie → <html data-mode={mode}>
+  themeLabel: string // server-stamped toggle label ("Light"/"Dark"), the inverse of mode — SSR placeholder for ThemeToggle's x-text so it doesn't flash
   teamProps: { teamInitial: TeamMember[] } // floating team-dock island initial state
 }

package/example/pokedex/pages/TypeChart.tsx CHANGED Viewed

@@ -14,39 +14,43 @@ import type { TypeChartData } from '../lib/types'
 export default function TypeChart({ rows }: TypeChartData) {
   return (
     <section className="py-2">
-      <div className="mb-5">
+      <div className="mb-6">
         <h1 className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
           Type chart
         </h1>
-        <p className="mt-2 max-w-2xl text-slate-500 dark:text-slate-400">
-          Damage relations — rows attack, columns defend. Rendered server-side in Rust from jinja
-          (native:true · no React runtime in the payload).
+        <p className="mt-2 max-w-2xl text-sm leading-relaxed text-slate-500 dark:text-slate-400">
+          Damage relations — read a row (attacker) across to a column (defender). Rendered
+          server-side in Rust from jinja (native:true · no React runtime in the payload).
         </p>
       </div>
-      <div className="mb-4 flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
-        <span className="inline-flex items-center gap-1.5">
-          <span className="flex h-5 w-5 items-center justify-center rounded bg-green-500/25 text-xs font-bold text-green-700 dark:text-green-300">
+      <div className="mb-5 flex flex-wrap items-center gap-2.5 text-sm">
+        <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
+          <span className="flex h-5 w-5 items-center justify-center rounded bg-emerald-500 text-xs font-bold text-white">
             2
           </span>
           super effective
         </span>
-        <span className="inline-flex items-center gap-1.5">
-          <span className="flex h-5 w-5 items-center justify-center rounded bg-red-500/20 text-xs font-bold text-red-700 dark:text-red-300">
+        <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
+          <span className="flex h-5 w-5 items-center justify-center rounded bg-rose-400 text-xs font-bold text-white dark:bg-rose-500">
             ½
           </span>
           not very effective
         </span>
-        <span className="inline-flex items-center gap-1.5">
-          <span className="flex h-5 w-5 items-center justify-center rounded bg-slate-800/80 text-xs font-bold text-slate-200">
+        <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
+          <span className="flex h-5 w-5 items-center justify-center rounded bg-slate-800 text-xs font-bold text-slate-100 dark:bg-slate-950 dark:text-slate-400">
             0
           </span>
           no effect
         </span>
+        <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
+          <span className="h-5 w-5 rounded bg-slate-50 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700" />
+          normal (1×)
+        </span>
       </div>
-      <div className="overflow-x-auto rounded-2xl border border-slate-200 bg-white p-2 shadow-sm dark:border-slate-800 dark:bg-slate-900">
-        <div className="grid w-max grid-cols-[2.75rem_repeat(18,2.25rem)] gap-px">
+      <div className="overflow-x-auto rounded-2xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="grid w-full grid-cols-[2.75rem_repeat(18,minmax(1.75rem,1fr))] gap-px overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-700">
           {rows.map((r) => (
             <div key={r.id} className="contents">
               {r.cells.map((c) => (

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brustjs",
-  "version": "0.1.36-alpha",
+  "version": "0.1.37-alpha",
   "description": "Bun + Rust SSR framework — React on the server, Rust everywhere else (napi cdylib + per-worker SharedArrayBuffer).",
   "license": "MIT",
   "repository": {
@@ -40,12 +40,12 @@
     "typescript": "^6.0.3"
   },
   "optionalDependencies": {
-    "brustjs-darwin-x64": "0.1.36-alpha",
-    "brustjs-darwin-arm64": "0.1.36-alpha",
-    "brustjs-linux-x64-gnu": "0.1.36-alpha",
-    "brustjs-linux-arm64-gnu": "0.1.36-alpha",
-    "brustjs-linux-x64-musl": "0.1.36-alpha",
-    "brustjs-linux-arm64-musl": "0.1.36-alpha"
+    "brustjs-darwin-x64": "0.1.37-alpha",
+    "brustjs-darwin-arm64": "0.1.37-alpha",
+    "brustjs-linux-x64-gnu": "0.1.37-alpha",
+    "brustjs-linux-arm64-gnu": "0.1.37-alpha",
+    "brustjs-linux-x64-musl": "0.1.37-alpha",
+    "brustjs-linux-arm64-musl": "0.1.37-alpha"
   },
   "peerDependencies": {
     "react": "^19.2.6",

package/runtime/cli/build.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { existsSync } from 'node:fs'
 import { copyFile, cp, mkdir, readdir, rm } from 'node:fs/promises'
 import { createRequire } from 'node:module'
 import path, { isAbsolute, resolve } from 'node:path'
+import type { BunPlugin } from 'bun'
 import { emitNativeTemplates } from './native-routes-emit.ts'
 import { nativeShimPlugin } from './native-shim-plugin.ts'
@@ -223,6 +224,60 @@ export async function runBuild(args: string[]): Promise<void> {
   // (S4). Computed once here and reused below.
   const routesFile = path.join(entryDir, 'routes.tsx')
+  // 2.7. Component CSS — Lightning CSS + CSS Modules. MUST run BEFORE the island
+  // and directive bundles: those Bun.build passes bundle components that may
+  // `import styles from './X.module.css'`, and the cssLoaderPlugin registered
+  // here (from the freshly built manifest) resolves that import to the scoped
+  // name map. Without the plugin Bun treats the .module.css as an asset and
+  // collides on the output filename (e.g. X.module.css + X.tsx → both X.js).
+  // Mirrors brust.run's ordering (plugin registered before buildIslands).
+  // Captured here and passed explicitly to buildIslands below (global
+  // Bun.plugin() does NOT reach Bun.build).
+  const cssBuildPlugins: BunPlugin[] = []
+  {
+    const { scanCssImports } = await import('../css/scan-imports.ts')
+    const scan = await scanCssImports(entryDir)
+    if (scan.size > 0) {
+      const { buildComponentCss } = await import('../css/component-build.ts')
+      const { cssLoaderPlugin } = await import('../css/component-loader.ts')
+      let routeForCss: { fullPath: string; componentSources: string[] }[] = []
+      if (existsSync(routesFile)) {
+        try {
+          const { scanImports } = await import('./native-routes-emit.ts')
+          const { routes } = await import(routesFile)
+          // component name → source file (default imports in routes.tsx).
+          const idents = scanImports(routesFile)
+          routeForCss = (routes as any[]).map((r) => ({
+            fullPath: r.fullPath,
+            // Resolve each component in the route's chain (layout → leaf) to its
+            // source; computeRouteChunks BFS-walks each subtree for CSS deps.
+            componentSources: ((r.chain ?? []) as { Component?: { name?: string } }[])
+              .map((node) => node?.Component?.name)
+              .map((name) => (name ? idents.get(name) : undefined))
+              .filter((p): p is string => typeof p === 'string'),
+          }))
+        } catch {
+          /* if routes import fails, skip — manifest still emits modules */
+        }
+      }
+      const cssOutDir = path.join(outDir, 'css')
+      const manifest = await buildComponentCss({
+        scanRoot: entryDir,
+        outDir: cssOutDir,
+        tailwindCompile: null,
+        routes: routeForCss,
+      })
+      const plugin = cssLoaderPlugin(manifest)
+      Bun.plugin(plugin) // runtime/SSR resolution of .module.css in the worker isolate
+      cssBuildPlugins.push(plugin) // explicit Bun.build resolution for island bundling
+      console.log(
+        `[brust build] css-mod: ${Object.keys(manifest.modules).length} chunk(s) → ${cssOutDir}/components/`,
+      )
+    } else {
+      console.log(`[brust build] css-mod: skipped (no component CSS imports)`)
+    }
+  }
   // 3. Build islands (if any <Island> usage is found in the routes graph).
   const { scanIslandChunks, buildIslands } = await import('../islands/build.ts')
   const islandMap = existsSync(routesFile)
@@ -230,7 +285,10 @@ export async function runBuild(args: string[]): Promise<void> {
     : new Map<string, string>()
   if (islandMap.size > 0) {
     const islandsOutDir = path.join(outDir, 'islands')
-    const result = await buildIslands(islandMap, { outDir: islandsOutDir })
+    const result = await buildIslands(islandMap, {
+      outDir: islandsOutDir,
+      plugins: cssBuildPlugins,
+    })
     console.log(`[brust build] islands: ${result.islandCount} chunk(s) → ${islandsOutDir}`)
     // Mirror into cwd/.brust/islands so the NON-prebuilt source runtime
@@ -361,39 +419,8 @@ export async function runBuild(args: string[]): Promise<void> {
     console.log(`[brust build] css:     skipped (no app.css)`)
   }
-  // 4.6. Component CSS — Lightning CSS + Modules.
-  {
-    const { scanCssImports } = await import('../css/scan-imports.ts')
-    const scan = await scanCssImports(entryDir)
-    if (scan.size > 0) {
-      const { buildComponentCss } = await import('../css/component-build.ts')
-      const routesFile = path.join(entryDir, 'routes.tsx')
-      let routeForCss: { fullPath: string; componentSource: string }[] = []
-      if (existsSync(routesFile)) {
-        try {
-          const { routes } = await import(routesFile)
-          routeForCss = (routes as any[]).map((r) => ({
-            fullPath: r.fullPath,
-            componentSource: routesFile,
-          }))
-        } catch {
-          /* if routes import fails, skip — manifest still emits modules */
-        }
-      }
-      const cssOutDir = path.join(outDir, 'css')
-      const manifest = await buildComponentCss({
-        scanRoot: entryDir,
-        outDir: cssOutDir,
-        tailwindCompile: null,
-        routes: routeForCss,
-      })
-      console.log(
-        `[brust build] css-mod: ${Object.keys(manifest.modules).length} chunk(s) → ${cssOutDir}/components/`,
-      )
-    } else {
-      console.log(`[brust build] css-mod: skipped (no component CSS imports)`)
-    }
-  }
+  // (Component CSS — Lightning CSS + CSS Modules — moved up to section 2.7 so the
+  // cssLoaderPlugin is registered before the island/directive bundles.)
   // Static public assets: copy <project>/public → <dist>/public so a deployed
   // dist is self-contained. No .brust mirror — the source/dev runtime reads
@@ -436,7 +463,10 @@ export async function runBuild(args: string[]): Promise<void> {
     // point at non-existent files. Whitespace + syntax minification still apply.
     minify: { whitespace: true, syntax: true, identifiers: false },
     banner,
-    plugins: [nativeShimPlugin(REPO_ROOT)],
+    // cssBuildPlugins resolves any `.module.css` reached from the entry graph
+    // (e.g. routes.tsx → a component's CSS module) to the scoped name map, so
+    // Bun doesn't emit the CSS as an asset and collide on the bundle name.
+    plugins: [nativeShimPlugin(REPO_ROOT), ...cssBuildPlugins],
   })
   if (!result.success) {

package/runtime/cli/templates/minimal/package.json.tmpl CHANGED Viewed

@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "preview": "bun run ./dist/index.js",
     "dev": "brustjs dev",
     "build": "brustjs build"
   },

package/runtime/cli/templates.ts CHANGED Viewed

@@ -71,6 +71,7 @@ function pokedexExtraFiles(ctx: ScaffoldCtx): EmittedFile[] {
     private: true,
     type: 'module',
     scripts: {
+      preview: 'bun run ./dist/index.js',
       dev: 'brustjs dev',
       build: 'brustjs build',
     },

package/runtime/css/component-build.ts CHANGED Viewed

@@ -60,7 +60,14 @@ export async function buildComponentCss(
         lines.push(`  readonly ${k}: string`)
       }
       lines.push('}', 'export default styles', '')
-      await writeFile(absPath + '.d.ts', lines.join('\n'), 'utf-8')
+      // Emit the per-module .d.ts into the BUILD output (under outDir/types,
+      // mirroring the source layout) instead of next to the source .module.css —
+      // generated artifacts belong in .brust/dist, not the project tree. Import
+      // resolution uses the framework-shipped ambient `*.module.css` declaration
+      // (runtime/css-modules.d.ts); these precise files are an inspectable record.
+      const dtsPath = path.join(opts.outDir, 'types', `${rel}.d.ts`)
+      await mkdir(path.dirname(dtsPath), { recursive: true })
+      await writeFile(dtsPath, lines.join('\n'), 'utf-8')
     }
   }
@@ -70,9 +77,10 @@ export async function buildComponentCss(
   const routeChunks = computeRouteChunks(opts.routes, scan, lookup)
   const manifest: ComponentCssManifest = { version: 1, modules, routeChunks }
-  await writeComponentCssManifest(
-    path.join(opts.outDir, 'css', 'component-manifest.json'),
-    manifest,
-  )
+  // opts.outDir is already the css dir (chunks land in opts.outDir/components,
+  // served at /_brust/css/components/). The manifest sits beside it at
+  // opts.outDir/component-manifest.json — where both readers look
+  // (dist/css/component-manifest.json and .brust/css/component-manifest.json).
+  await writeComponentCssManifest(path.join(opts.outDir, 'component-manifest.json'), manifest)
   return manifest
 }

package/runtime/css/route-deps.ts CHANGED Viewed

@@ -1,19 +1,24 @@
+import { existsSync } from 'node:fs'
+import { scanImports } from '../cli/native-routes-emit.ts'
 import type { CssDep } from './scan-imports.ts'
 export interface RouteForCss {
   /** Route.fullPath (e.g. '/' or '/blog/{slug}'). */
   fullPath: string
-  /** Absolute path of the route's Component source file. */
-  componentSource: string
+  /** Absolute source files of the route's component CHAIN (root layout → leaf).
+   * computeRouteChunks walks the local import graph from each and unions the
+   * CSS deps it finds — so a layout's co-located `.module.css` links to every
+   * route under it, and a leaf's links only to that route. */
+  componentSources: string[]
 }
 /** Build the route → CSS chunk hrefs map.
  *
- * MVP: direct lookup only. We collect CSS deps from each route's
- * componentSource file (the file that defines the Component used in
- * defineRoutes). Transitive walking into nested components is a future
- * enhancement — for now, users put @import or @apply or co-locate CSS
- * with the route component. */
+ * For each route, BFS the LOCAL import graph rooted at the route's component
+ * chain (via {@link scanImports}, same default-import walk islands use) and
+ * collect the CSS deps of every reachable file. This means a `.module.css`
+ * co-located with the component that imports it is enough — no need to also
+ * import it in routes.tsx. Chunks are deduplicated and sorted per route. */
 export function computeRouteChunks(
   routes: RouteForCss[],
   scan: Map<string, CssDep[]>,
@@ -21,11 +26,21 @@ export function computeRouteChunks(
 ): Record<string, string[]> {
   const out: Record<string, string[]> = {}
   for (const r of routes) {
-    const deps = scan.get(r.componentSource) ?? []
     const chunks = new Set<string>()
-    for (const d of deps) {
-      const mod = modules[d.path]
-      if (mod) chunks.add(mod.chunk)
+    const seen = new Set<string>()
+    const queue = [...r.componentSources]
+    while (queue.length > 0) {
+      const file = queue.shift()!
+      if (seen.has(file) || !existsSync(file)) continue
+      seen.add(file)
+      for (const d of scan.get(file) ?? []) {
+        const mod = modules[d.path]
+        if (mod) chunks.add(mod.chunk)
+      }
+      // Follow this file's local (relative) default imports transitively.
+      for (const dep of scanImports(file).values()) {
+        if (!seen.has(dep)) queue.push(dep)
+      }
     }
     out[r.fullPath] = Array.from(chunks).sort()
   }

package/runtime/css-modules.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+// Ambient declarations for component CSS imports, so `import styles from
+// './X.module.css'` and side-effect `import './globals.css'` typecheck without a
+// generated per-file .d.ts in the source tree. The precise key map is resolved
+// at runtime by brust's Bun.plugin (built from the component-CSS manifest); the
+// per-module precise .d.ts is emitted into the build output (<outDir>/types) for
+// reference, not for resolution. This file is a global script (no import/export),
+// so the declarations apply across the program.
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+declare module '*.css' {
+  const css: string
+  export default css
+}

package/runtime/index.js CHANGED Viewed

@@ -77,8 +77,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-android-arm64')
         const bindingPackageVersion = require('brustjs-android-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -93,8 +93,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-android-arm-eabi')
         const bindingPackageVersion = require('brustjs-android-arm-eabi/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -114,8 +114,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-x64-gnu')
         const bindingPackageVersion = require('brustjs-win32-x64-gnu/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -130,8 +130,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-x64-msvc')
         const bindingPackageVersion = require('brustjs-win32-x64-msvc/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -147,8 +147,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-ia32-msvc')
         const bindingPackageVersion = require('brustjs-win32-ia32-msvc/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -163,8 +163,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-arm64-msvc')
         const bindingPackageVersion = require('brustjs-win32-arm64-msvc/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -182,8 +182,8 @@ function requireNative() {
     try {
       const binding = require('brustjs-darwin-universal')
       const bindingPackageVersion = require('brustjs-darwin-universal/package.json').version
-      if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-        throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+      if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+        throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
       }
       return binding
     } catch (e) {
@@ -198,8 +198,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-darwin-x64')
         const bindingPackageVersion = require('brustjs-darwin-x64/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -214,8 +214,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-darwin-arm64')
         const bindingPackageVersion = require('brustjs-darwin-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -234,8 +234,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-freebsd-x64')
         const bindingPackageVersion = require('brustjs-freebsd-x64/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -250,8 +250,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-freebsd-arm64')
         const bindingPackageVersion = require('brustjs-freebsd-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -271,8 +271,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-x64-musl')
           const bindingPackageVersion = require('brustjs-linux-x64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -287,8 +287,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-x64-gnu')
           const bindingPackageVersion = require('brustjs-linux-x64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -305,8 +305,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm64-musl')
           const bindingPackageVersion = require('brustjs-linux-arm64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -321,8 +321,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm64-gnu')
           const bindingPackageVersion = require('brustjs-linux-arm64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -339,8 +339,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm-musleabihf')
           const bindingPackageVersion = require('brustjs-linux-arm-musleabihf/package.json').version
-          if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -355,8 +355,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm-gnueabihf')
           const bindingPackageVersion = require('brustjs-linux-arm-gnueabihf/package.json').version
-          if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -373,8 +373,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-loong64-musl')
           const bindingPackageVersion = require('brustjs-linux-loong64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -389,8 +389,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-loong64-gnu')
           const bindingPackageVersion = require('brustjs-linux-loong64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -407,8 +407,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-riscv64-musl')
           const bindingPackageVersion = require('brustjs-linux-riscv64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -423,8 +423,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-riscv64-gnu')
           const bindingPackageVersion = require('brustjs-linux-riscv64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -440,8 +440,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-linux-ppc64-gnu')
         const bindingPackageVersion = require('brustjs-linux-ppc64-gnu/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -456,8 +456,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-linux-s390x-gnu')
         const bindingPackageVersion = require('brustjs-linux-s390x-gnu/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -476,8 +476,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-openharmony-arm64')
         const bindingPackageVersion = require('brustjs-openharmony-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -492,8 +492,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-openharmony-x64')
         const bindingPackageVersion = require('brustjs-openharmony-x64/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -508,8 +508,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-openharmony-arm')
         const bindingPackageVersion = require('brustjs-openharmony-arm/package.json').version
-        if (bindingPackageVersion !== '0.1.36-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.36-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.37-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.37-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {

package/runtime/index.ts CHANGED Viewed

@@ -372,11 +372,13 @@ export const brust = {
       console.log(`[brust] main: spawning ${workers} worker threads`)
       if (cacheMaxEntries !== undefined) this.configureCache({ maxEntries: cacheMaxEntries })
-      // Component CSS pipeline. Must run BEFORE buildIslands so the Bun.plugin
-      // is active during island bundling — otherwise Bun's default loader would
-      // see .module.css imports as separate asset outputs, producing duplicate-
-      // output-path errors when an island and its module share a basename
-      // (e.g. Counter.tsx + Counter.module.css → both want to emit Counter.js).
+      // Component CSS pipeline. Build the manifest + capture the loader plugin
+      // BEFORE buildIslands and pass it EXPLICITLY below (global Bun.plugin()
+      // does NOT reach Bun.build) — otherwise Bun's default loader emits
+      // .module.css as a separate asset and collides when an island and its
+      // module share a basename (Counter.tsx + Counter.module.css → both
+      // want to emit Counter.js).
+      const cssBuildPlugins: import('bun').BunPlugin[] = []
       {
         const { readComponentCssManifest } = await import('./css/manifest.ts')
         const { cssLoaderPlugin } = await import('./css/component-loader.ts')
@@ -390,9 +392,19 @@ export const brust = {
           const scan = await scanCssImports(scanRoot)
           if (scan.size > 0) {
             const { buildComponentCss } = await import('./css/component-build.ts')
+            const { scanImports } = await import('./cli/native-routes-emit.ts')
+            const routesFile = path.join(scanRoot, 'routes.tsx')
+            const idents = existsSync(routesFile)
+              ? scanImports(routesFile)
+              : new Map<string, string>()
             const routeForCss = opts.routes.map((r) => ({
               fullPath: r.fullPath,
-              componentSource: path.join(scanRoot, 'routes.tsx'),
+              // Resolve the route's component chain (layout → leaf) to source
+              // files; computeRouteChunks BFS-walks each subtree for CSS deps.
+              componentSources: r.chain
+                .map((node) => (node as { Component?: { name?: string } }).Component?.name)
+                .map((name) => (name ? idents.get(name) : undefined))
+                .filter((p): p is string => typeof p === 'string'),
             }))
             const cssOutDir = path.join(process.cwd(), '.brust', 'css')
             manifest = await buildComponentCss({
@@ -408,7 +420,9 @@ export const brust = {
         }
         if (manifest) {
-          Bun.plugin(cssLoaderPlugin(manifest))
+          const plugin = cssLoaderPlugin(manifest)
+          Bun.plugin(plugin) // runtime/SSR resolution of .module.css in the worker isolate
+          cssBuildPlugins.push(plugin) // explicit resolution for island Bun.build
           for (const [routePath, hrefs] of Object.entries(manifest.routeChunks)) {
             configureCssHrefsForRoute(routePath, hrefs)
           }
@@ -429,7 +443,7 @@ export const brust = {
           const islandMap = scanIslandChunks(routesPath)
           let islandsDir: string | undefined
           if (islandMap.size > 0) {
-            const islands = await build(islandMap)
+            const islands = await build(islandMap, { plugins: cssBuildPlugins })
             islandsDir = islands.outDir
             console.log(`[brust] main: built ${islands.islandCount} island chunk(s)`)
           }
@@ -640,9 +654,17 @@ export const brust = {
             if (scan.size === 0) return
             const { buildComponentCss } = await import('./css/component-build.ts')
             const { cssLoaderPlugin } = await import('./css/component-loader.ts')
+            const { scanImports } = await import('./cli/native-routes-emit.ts')
+            const routesFile = pathModule.join(scanRoot, 'routes.tsx')
+            const idents = existsSync(routesFile)
+              ? scanImports(routesFile)
+              : new Map<string, string>()
             const routeForCss = opts.routes.map((r) => ({
               fullPath: r.fullPath,
-              componentSource: pathModule.join(scanRoot, 'routes.tsx'),
+              componentSources: r.chain
+                .map((node) => (node as { Component?: { name?: string } }).Component?.name)
+                .map((name) => (name ? idents.get(name) : undefined))
+                .filter((p): p is string => typeof p === 'string'),
             }))
             const cssOutDir = pathModule.join(process.cwd(), '.brust', 'css')
             const manifest = await buildComponentCss({
@@ -744,9 +766,10 @@ export const brust = {
       }
       // Worker: register the component CSS Bun.plugin so .module.css imports
-      // resolve to the same hash map main saw. (Workers don't seed
-      // configureCssHrefsForRoute — that's a renderer concern only on the
-      // main thread.)
+      // resolve to the same hash map main saw, AND seed the per-route CSS hrefs.
+      // The streaming renderer (render/stream.ts) runs HERE in the worker and
+      // reads getCssHrefsForRoute to inject the <link> before </head> — so the
+      // route→chunk map must be configured in the worker, not just on main.
       {
         const { readComponentCssManifest } = await import('./css/manifest.ts')
         const { cssLoaderPlugin } = await import('./css/component-loader.ts')
@@ -756,6 +779,9 @@ export const brust = {
         const manifest = await readComponentCssManifest(manifestPath)
         if (manifest) {
           Bun.plugin(cssLoaderPlugin(manifest))
+          for (const [routePath, hrefs] of Object.entries(manifest.routeChunks)) {
+            configureCssHrefsForRoute(routePath, hrefs)
+          }
         }
       }

package/runtime/islands/bootstrap.ts CHANGED Viewed

@@ -84,6 +84,20 @@ function registerTrigger(el: HTMLElement, trigger: Trigger, fire: () => void): v
 // Exported for unit testing — the public entry is hydrateMarkersIn, but the
 // createRoot/hydrateRoot auto-detect branch is cleanest to assert by driving
 // hydrateOne directly (the `load` trigger fires it as a detached microtask).
+// id → content-addressed chunk URL, emitted by buildIslands as _islands.js.
+// Loaded once (memoized). On any failure the map is empty and resolution falls
+// back to the legacy `/_brust/islands/<id>.js` URL, so an older build still works.
+let chunkMapPromise: Promise<Record<string, string>> | null = null
+function islandChunkMap(): Promise<Record<string, string>> {
+  if (!chunkMapPromise) {
+    const url = '/_brust/islands/_islands.js' // variable specifier → runtime import, not bundled
+    chunkMapPromise = import(url)
+      .then((m) => (m.default ?? {}) as Record<string, string>)
+      .catch(() => ({}))
+  }
+  return chunkMapPromise
+}
 export async function hydrateOne(el: HTMLElement): Promise<void> {
   const id = el.getAttribute('data-brust-island')
   if (!id) return
@@ -96,7 +110,8 @@ export async function hydrateOne(el: HTMLElement): Promise<void> {
     return
   }
   try {
-    const mod = await import(`/_brust/islands/${id}.js`)
+    const url = (await islandChunkMap())[id] ?? `/_brust/islands/${id}.js`
+    const mod = await import(url)
     const Component = (mod.default ?? mod) as React.ComponentType<Record<string, unknown>>
     if (typeof Component !== 'function') {
       console.error(`[brust] island "${id}": chunk has no default-exported component`)

package/runtime/islands/build.ts CHANGED Viewed

@@ -1,6 +1,8 @@
+import { createHash } from 'node:crypto'
 import { readFileSync } from 'node:fs'
-import { mkdir, rm } from 'node:fs/promises'
-import { isAbsolute, resolve } from 'node:path'
+import { mkdir, rm, writeFile } from 'node:fs/promises'
+import { isAbsolute, relative, resolve } from 'node:path'
+import type { BunPlugin } from 'bun'
 import { scanImports } from '../cli/native-routes-emit.ts'
 export interface IslandsBuildResult {
@@ -8,11 +10,20 @@ export interface IslandsBuildResult {
   outDir: string
   /** Number of island chunks emitted (excludes runtime + bootstrap). */
   islandCount: number
+  /** id → content-addressed chunk URL (`/_brust/islands/<id>_<hash>.js`). Also
+   * written to `_islands.js` for the client bootstrap to resolve at runtime. */
+  chunks: Record<string, string>
 }
 export interface BuildIslandsOptions {
   /** Override the output directory. Default: `<cwd>/.brust/islands`. */
   outDir?: string
+  /** Build plugins passed straight to `Bun.build` for the per-island chunks.
+   * Needed for the component-CSS loader: global `Bun.plugin()` registrations do
+   * NOT apply to `Bun.build`, so an island that `import`s a `.module.css` must
+   * get the resolver here or Bun emits the CSS as a separate asset and collides
+   * on the output filename (X.module.css + X.tsx → both X.js). */
+  plugins?: BunPlugin[]
 }
 /** Scan a routes entry file for `<Island component={X} />` usage and derive the
@@ -27,6 +38,16 @@ export interface BuildIslandsOptions {
  * 4. Dedup islands that reuse the same component+path; throw on two different
  *    files whose island components share a name (ids must be app-unique).
  */
+/** Content-addressed island chunk basename = `<Name>_<8hex(sha256 cwd-relative
+ * source path)>`. Stable + app-unique (mirrors the directive chunk scheme) so
+ * the URL is content-busting-stable; the bootstrap resolves the plain marker id
+ * to this via the `_islands.js` map. */
+export function islandChunkBasename(name: string, absSourcePath: string): string {
+  const rel = relative(process.cwd(), absSourcePath).replaceAll('\\', '/')
+  const hash = createHash('sha256').update(rel).digest('hex').slice(0, 8)
+  return `${name}_${hash}`
+}
 export function scanIslandChunks(routesEntryFile: string): Map<string, string> {
   const chunks = new Map<string, string>()
   const visited = new Set<string>()
@@ -109,8 +130,15 @@ export async function buildIslands(
   // 2. react-dom/client (react external; consumes _react.js via importmap).
   await buildOne([`${entriesDir}/react-dom.ts`], outDir, '_react-dom.js', ['react'])
-  // 3. Per-island chunks (all 3 runtime specifiers external).
+  // 3. Per-island chunks (all 3 runtime specifiers external). Island sources may
+  // `import styles from './X.module.css'`, so the component-CSS plugins resolve
+  // those imports to the scoped name map (otherwise Bun emits the CSS as an asset).
   const externals = ['react', 'react/jsx-runtime', 'react-dom/client']
+  const plugins = options.plugins ?? []
+  // id (plain Component name) → content-addressed chunk URL. The chunk filename
+  // is `<Name>_<hash>.js`; the data-brust-island marker stays the plain name, so
+  // the bootstrap resolves it to the hashed chunk via the `_islands.js` map below.
+  const chunks: Record<string, string> = {}
   let count = 0
   for (const [id, entry] of islands) {
     if (!isValidIslandId(id)) {
@@ -119,15 +147,26 @@ export async function buildIslands(
           `allowed: [A-Za-z0-9_-]+ (matches the server's filename safety check)`,
       )
     }
-    await buildOne([entry], outDir, `${id}.js`, externals)
+    const file = `${islandChunkBasename(id, entry)}.js`
+    await buildOne([entry], outDir, file, externals, plugins)
+    chunks[id] = `/_brust/islands/${file}`
     count++
   }
+  // id → chunk URL map, served at /_brust/islands/_islands.js. The bootstrap
+  // loads it once and resolves a marker's plain id to its hashed chunk (with a
+  // legacy `/_brust/islands/<id>.js` fallback). ESM default export.
+  await writeFile(
+    resolve(outDir, '_islands.js'),
+    `export default ${JSON.stringify(chunks)}\n`,
+    'utf-8',
+  )
   // 4. Bootstrap (react + react-dom/client external; uses importmap).
   const bootstrapSrc = resolve(import.meta.dir, 'bootstrap.ts')
   await buildOne([bootstrapSrc], outDir, '_bootstrap.js', externals)
-  return { outDir, islandCount: count }
+  return { outDir, islandCount: count, chunks }
 }
 async function buildOne(
@@ -135,6 +174,7 @@ async function buildOne(
   outdir: string,
   naming: string,
   external: string[],
+  plugins: BunPlugin[] = [],
 ): Promise<void> {
   const result = await Bun.build({
     entrypoints,
@@ -144,6 +184,7 @@ async function buildOne(
     target: 'browser',
     external,
     minify: true,
+    plugins,
     define: {
       'process.env.NODE_ENV': '"production"',
     },

package/runtime/routes.ts CHANGED Viewed

@@ -12,6 +12,7 @@ import * as native from './index.js'
 import { renderBranchStreaming } from './render/stream.ts'
 import { runInStoreContext, collectSnapshot } from './store/server-context.ts'
 import { buildStoreScripts } from './render/inject-store.ts'
+import { getCssHrefsForRoute } from './css.ts'
 import { runInRequestCache } from './loader-cache.ts'
 import { runInRequestScope, __scope } from './request-context.ts'
 import {
@@ -816,6 +817,21 @@ export function makeRenderer(
             )
           }
           ;(data as Record<string, unknown>).__brust_store__ = buildStoreScripts(storeSnapshot)
+          // Component-CSS SSR. Fill the framework-owned
+          // `{{ __brust_component_css__ | safe }}` head slot with the route's
+          // component-CSS chunk <link>s (from the component-CSS manifest, seeded
+          // per-route in the worker). Empty string when the route imports no
+          // .module.css / co-located .css, so the slot always resolves.
+          if (process.env.BRUST_DEV === '1' && '__brust_component_css__' in data) {
+            console.warn(
+              `[brust] native loader for "${flat.nativeTemplate}" returned a reserved "__brust_component_css__" key — overwritten by the component-CSS links`,
+            )
+          }
+          ;(data as Record<string, unknown>).__brust_component_css__ = getCssHrefsForRoute(
+            flat.fullPath,
+          )
+            .map((href) => `<link rel="stylesheet" href="${href}"/>`)
+            .join('')
         }
         const json = JSON.stringify(data)
         // napiRenderJinja has no headers param — any Set-Cookie staged by a