@akanjs/devkit 3.0.0-alpha.11 → 3.0.0-alpha.110

package/frontendBuild/buildRouteClient.test.ts

@@ -82,16 +82,42 @@ describe("route client store bootstrap", () => {
   });
 
   test("bundles akan fetch into production SSR client chunks", () => {
-    expect(RouteClientBuilder.resolveSsrClientExternalOptions("start")).toMatchObject({
+    expect(RouteClientBuilder.resolveSsrClientBundleOptions("start")).toMatchObject({
       external: expect.arrayContaining(["akanjs/fetch"]),
       externalSubpaths: ["akanjs/fetch"],
     });
 
-    expect(RouteClientBuilder.resolveSsrClientExternalOptions("build")).toEqual({
+    expect(RouteClientBuilder.resolveSsrClientBundleOptions("build")).toEqual({
+      target: "bun",
       external: ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "react/jsx-dev-runtime"],
     });
   });
 
+  test("targets the server so SSR client chunks never resolve a browser export condition", async () => {
+    const root = await makeTempRoot();
+    const pkgDir = path.join(root, "node_modules/dom-conditioned-pkg");
+    await write(
+      path.join(pkgDir, "package.json"),
+      JSON.stringify({
+        name: "dom-conditioned-pkg",
+        type: "module",
+        exports: { ".": { browser: "./index.dom.js", default: "./index.js" } },
+      }),
+    );
+    await write(path.join(pkgDir, "index.dom.js"), 'export const element = document.createElement("i");\n');
+    await write(path.join(pkgDir, "index.js"), "export const element = null;\n");
+    const entry = path.join(root, "entry.ts");
+    await write(entry, 'export { element } from "dom-conditioned-pkg";\n');
+
+    for (const command of ["start", "build"] as const) {
+      const { target } = RouteClientBuilder.resolveSsrClientBundleOptions(command);
+      const built = await Bun.build({ entrypoints: [entry], target, format: "esm" });
+
+      expect(built.success).toBe(true);
+      expect(await built.outputs[0].text()).not.toContain("document.createElement");
+    }
+  });
+
   test("rewrites SSR external imports to runtime aliases", () => {
     const source = [
       'import React, { useState } from "react";',
@@ -133,28 +159,25 @@ describe("route client store bootstrap", () => {
     await write(uiEntry, 'export { ClientPathWrapper } from "./System/Client";\n');
     await write(clientEntry, '"use client";\nexport const ClientPathWrapper = () => null;\n');
 
-    const discovery = new GraphClientEntryDiscovery(
-      { barrelImports: ["akanjs/ui"], externalLibs: [], optimizeImports: true },
-      async (specifier) => {
-        if (specifier === "akanjs/ui") {
-          return {
-            pkgName: "akanjs/ui",
-            entryFile: uiEntry,
-            pkgDir: path.dirname(uiEntry),
-            preserveFilePath: true,
-          };
-        }
-        if (specifier === "akanjs/ui/System/Client.tsx") {
-          return {
-            pkgName: "akanjs/ui/System/Client.tsx",
-            entryFile: clientEntry,
-            pkgDir: path.dirname(clientEntry),
-            preserveFilePath: true,
-          };
-        }
-        return null;
-      },
-    );
+    const discovery = new GraphClientEntryDiscovery({ barrelImports: ["akanjs/ui"] }, async (specifier) => {
+      if (specifier === "akanjs/ui") {
+        return {
+          pkgName: "akanjs/ui",
+          entryFile: uiEntry,
+          pkgDir: path.dirname(uiEntry),
+          preserveFilePath: true,
+        };
+      }
+      if (specifier === "akanjs/ui/System/Client.tsx") {
+        return {
+          pkgName: "akanjs/ui/System/Client.tsx",
+          entryFile: clientEntry,
+          pkgDir: path.dirname(clientEntry),
+          preserveFilePath: true,
+        };
+      }
+      return null;
+    });
 
     expect(await discovery.discover([seed])).toEqual([clientEntry]);
   });

package/frontendBuild/clientBuildTypes.ts

@@ -55,6 +55,8 @@ export interface BuildClientResult {
   rscClientUrl: string;
 }
 
+export type ClientBundleTarget = "browser" | "bun";
+
 export const CLIENT_BUNDLE_NAMING = {
   entry: "[name]-[hash].[ext]",
   chunk: "chunks/[hash].[ext]",
@@ -79,6 +81,8 @@ export interface BundleClientEntriesOptions {
 }
 
 export interface BundleClientEntriesInternalOptions extends BundleClientEntriesOptions {
+  /** Module-resolution target. `"bun"` for the server-executed `client-ssr` bundle, `"browser"` otherwise. */
+  target?: ClientBundleTarget;
   external?: readonly string[];
   externalSubpaths?: readonly string[];
   externalAliases?: Partial<Record<string, string>>;

package/frontendBuild/clientEntriesBundler.ts

@@ -7,6 +7,7 @@ import {
   type BundleClientEntriesInternalOptions,
   type BundleClientEntriesResult,
   CLIENT_BUNDLE_NAMING,
+  type ClientBundleTarget,
   type ClientManifest,
   type MetafileOutput,
   type OpaqueEntryAliases,
@@ -25,6 +26,7 @@ export class ClientEntriesBundler {
   #externalSubpaths: readonly string[];
   #externalAliases: Partial<Record<string, string>>;
   #command: "build" | "start";
+  #target: ClientBundleTarget;
   #outputSubdir: string;
   #reactFastRefresh: boolean;
   #artifactDir: string;
@@ -47,6 +49,7 @@ export class ClientEntriesBundler {
     this.#externalSubpaths = options.externalSubpaths ?? [];
     this.#externalAliases = options.externalAliases ?? {};
     this.#command = options.command ?? "start";
+    this.#target = options.target ?? "browser";
     this.#outputSubdir = options.outputSubdir ?? "client";
     this.#reactFastRefresh = options.reactFastRefresh ?? false;
     this.#artifactDir = `${this.#command === "build" ? this.#app.dist.cwdPath : this.#app.cwdPath}/.akan/artifact`;
@@ -61,7 +64,7 @@ export class ClientEntriesBundler {
       entrypoints: this.#opaqueEntries.entries,
       outdir: this.#outdir,
       splitting: true,
-      target: "browser",
+      target: this.#target,
       format: "esm",
       naming: CLIENT_BUNDLE_NAMING,
       metafile: true,

package/frontendBuild/clientEntryDiscovery.ts

@@ -34,7 +34,7 @@ const shouldSkipNodeModule = (absPath: string) => NODE_MODULES_RE.test(absPath)
  * the traversal matches the module graph the bundler will actually see.
  */
 export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
-  #akanConfig: AkanConfig;
+  #akanConfig: Pick<AkanConfig, "barrelImports">;
   #resolvePackage: PackageResolver;
   #analyzer: BarrelAnalyzer;
   #tsTranspiler = new Bun.Transpiler({ loader: "tsx" });
@@ -57,7 +57,7 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
   #unresolvedPaths = new Set<string>();
   #unresolvedSpecifiers = new Set<string>();
 
-  constructor(akanConfig: AkanConfig, resolvePackage: PackageResolver) {
+  constructor(akanConfig: Pick<AkanConfig, "barrelImports">, resolvePackage: PackageResolver) {
     this.#akanConfig = akanConfig;
     this.#resolvePackage = resolvePackage;
     this.#analyzer = new BarrelAnalyzer({ resolvePackage });

package/frontendBuild/csrArtifactBuilder.ts

@@ -1,14 +1,18 @@
 import { mkdir, rm, unlink } from "node:fs/promises";
 import path from "node:path";
 import type { BaseBuildArtifact } from "akanjs/server";
-import { resolveSsrPageEntriesForApp } from "../artifact/implicitRootLayout";
+import { type PageEntry, resolveSsrPageEntriesForApp } from "../artifact/implicitRootLayout";
 import type { App } from "../commandDecorators";
+import { getPageKeyBasePath } from "./cssCompiler";
+import { PagesBundleBuilder } from "./pagesBundleBuilder";
 import { PagesEntrySourceGenerator } from "./pagesEntrySourceGenerator";
 
 export interface BuildCsrArtifactResult {
   outputDir: string;
 }
 
+type CssAsset = NonNullable<BaseBuildArtifact["cssAssets"]>[string];
+
 export class CsrArtifactBuilder {
   #app: App;
   #command: "build" | "start";
@@ -29,31 +33,39 @@ export class CsrArtifactBuilder {
 
     const pageEntries = await resolveSsrPageEntriesForApp(this.#app, pageKeys);
     const akanConfig = await this.#app.getConfig();
-    const artifact = await this.#loadCsrArtifact();
-    const csrBasePaths = [...akanConfig.basePaths];
-    const htmlEntries = csrBasePaths.length > 0 ? csrBasePaths : ["index"];
+    const cssAssets = await this.#loadCssAssets();
+    const basePaths = [...akanConfig.basePaths];
+    const htmlBasePaths = basePaths.length > 0 ? basePaths : [""];
     await rm(this.#outputDir, { recursive: true, force: true });
-    await mkdir(path.join(this.#app.cwdPath, ".akan/generated/csr"), { recursive: true });
-    const generatedHtmlFiles = Object.fromEntries(htmlEntries.map((basePath) => this.#createHtmlFile(basePath)));
+    await mkdir(this.#generatedDir, { recursive: true });
+    const generatedFiles = Object.fromEntries(
+      (
+        await Promise.all(
+          htmlBasePaths.map(async (basePath) => [
+            this.#createHtmlFile(basePath),
+            await this.#createEntryFile(
+              basePath,
+              CsrArtifactBuilder.pageEntriesForBasePath(pageEntries, basePath, basePaths),
+            ),
+          ]),
+        )
+      ).flat(),
+    );
 
     const result = await Bun.build({
       target: "browser",
-      entrypoints: Object.keys(generatedHtmlFiles),
-      files: {
-        ...generatedHtmlFiles,
-        [`${this.#app.cwdPath}/.akan/generated/csr/csr.tsx`]: `
-import { bootCsr } from "akanjs/webkit";
-${PagesEntrySourceGenerator.generateStatic(pageEntries)}
-void bootCsr(pages);
-  `,
-      },
-      root: `${this.#app.cwdPath}/.akan/generated/csr`,
+      entrypoints: htmlBasePaths.map((basePath) => this.#generatedPath(CsrArtifactBuilder.htmlFilename(basePath))),
+      files: generatedFiles,
+      root: this.#generatedDir,
       outdir: this.#outputDir,
       splitting: false,
       minify: true,
       env: "AKAN_PUBLIC_*",
       define: this.#define(),
       optimizeImports: akanConfig.optimizeImports,
+      // The base artifact's compiled sheet is the only stylesheet, as it is for SSR: a raw `.css` reached through
+      // the route graph is Tailwind source, and every root layout stylesheet in the graph would land in every HTML.
+      plugins: [PagesBundleBuilder.createCssStubPlugin()],
     });
 
     if (!result.success) {
@@ -61,11 +73,32 @@ void bootCsr(pages);
       throw new Error(`[csr-build] failed${logs ? `\n${logs}` : ""}`);
     }
 
-    await this.#inlineCsrArtifacts(artifact.cssAssets ?? {});
+    await this.#inlineCsrArtifacts(cssAssets);
     this.#app.verbose(`[csr-build] output -> ${this.#outputDir}`);
     return { outputDir: this.#outputDir };
   }
 
+  /** The routes one basePath's HTML boots: its own plus every route outside any basePath, matching `bootCsr`. */
+  static pageEntriesForBasePath(pageEntries: PageEntry[], basePath: string, basePaths: string[]): PageEntry[] {
+    return pageEntries.filter((entry) => {
+      const entryBasePath = getPageKeyBasePath(entry.key, basePaths);
+      return entryBasePath === null || entryBasePath === basePath;
+    });
+  }
+
+  static htmlFilename(basePath: string): string {
+    return `${basePath || "index"}.html`;
+  }
+
+  static entryFilename(basePath: string): string {
+    return `${basePath || "index"}.csr.tsx`;
+  }
+
+  static basePathOfHtml(htmlPath: string): string {
+    const name = path.basename(htmlPath, ".html");
+    return name === "index" ? "" : name;
+  }
+
   get #outputDir(): string {
     return path.join(
       this.#command === "build" ? this.#app.dist.cwdPath : this.#app.cwdPath,
@@ -73,6 +106,18 @@ void bootCsr(pages);
     );
   }
 
+  get #generatedDir(): string {
+    return path.join(this.#app.cwdPath, ".akan/generated/csr");
+  }
+
+  get #artifactDir(): string {
+    return path.join(this.#command === "build" ? this.#app.dist.cwdPath : this.#app.cwdPath, ".akan/artifact");
+  }
+
+  #generatedPath(filename: string): string {
+    return path.join(this.#generatedDir, filename);
+  }
+
   #define(): Record<string, string> {
     const nodeEnv = this.#command === "build" ? "production" : (process.env.NODE_ENV ?? "development");
     return {
@@ -84,10 +129,19 @@ void bootCsr(pages);
     };
   }
 
+  async #createEntryFile(basePath: string, pageEntries: PageEntry[]): Promise<readonly [string, string]> {
+    return [
+      this.#generatedPath(CsrArtifactBuilder.entryFilename(basePath)),
+      `import { bootCsr } from "akanjs/webkit";
+${await PagesEntrySourceGenerator.generateStatic(pageEntries)}
+void bootCsr(pages);
+`,
+    ] as const;
+  }
+
   #createHtmlFile(basePath: string): readonly [string, string] {
-    const filename = `${basePath}.html`;
     return [
-      `${this.#app.cwdPath}/.akan/generated/csr/${filename}`,
+      this.#generatedPath(CsrArtifactBuilder.htmlFilename(basePath)),
       `<!doctype html>
 <html lang="${this.#lang}">
   <head>
@@ -98,41 +152,40 @@ void bootCsr(pages);
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./csr.tsx"></script>
+    <script type="module" src="./${CsrArtifactBuilder.entryFilename(basePath)}"></script>
   </body>
 </html>
   `,
     ] as const;
   }
 
-  async #loadCsrArtifact(): Promise<Pick<BaseBuildArtifact, "cssAssets">> {
-    const artifactDir = path.join(
-      this.#command === "build" ? this.#app.dist.cwdPath : this.#app.cwdPath,
-      ".akan/artifact",
-    );
-    const artifactFile = Bun.file(path.join(artifactDir, "base-artifact.json"));
-    if (!(await artifactFile.exists())) return { cssAssets: {} };
-    const artifact = (await artifactFile.json()) as Pick<BaseBuildArtifact, "cssAssets">;
-    return { cssAssets: artifact.cssAssets ?? {} };
+  async #loadCssAssets(): Promise<Record<string, CssAsset>> {
+    const artifactFile = Bun.file(path.join(this.#artifactDir, "base-artifact.json"));
+    if (!(await artifactFile.exists())) return {};
+    const artifact = (await artifactFile.json()) as Partial<Pick<BaseBuildArtifact, "cssAssets">>;
+    return artifact.cssAssets ?? {};
   }
 
-  async #inlineCsrArtifacts(cssAssets: Record<string, { cssUrl: string; cssRelPath: string }>): Promise<void> {
+  async #inlineCsrArtifacts(cssAssets: Record<string, CssAsset>): Promise<void> {
     const jsFiles = new Set<string>();
-    const cssFiles = new Set<string>();
     for (const htmlPath of await this.#htmlOutputPaths()) {
       const htmlFile = Bun.file(htmlPath);
       if (!(await htmlFile.exists())) continue;
-      const basePath = path.basename(htmlPath, ".html") === "index" ? "" : path.basename(htmlPath, ".html");
-      const inlined = await this.#inlineHtmlAssets(await htmlFile.text(), htmlPath, cssAssets[basePath]);
+      const basePath = CsrArtifactBuilder.basePathOfHtml(htmlPath);
+      const cssAsset = cssAssets[basePath];
+      if (!cssAsset) {
+        this.#app.logger.warn(
+          `[csr-build] base-artifact.json has no compiled stylesheet for ${basePath || "root"}; ${path.basename(htmlPath)} ships without CSS`,
+        );
+      }
+      const inlined = await this.#inlineHtmlAssets(await htmlFile.text(), htmlPath, cssAsset);
       for (const filePath of inlined.jsFiles) jsFiles.add(filePath);
-      for (const filePath of inlined.cssFiles) cssFiles.add(filePath);
       await Bun.write(htmlPath, inlined.html);
     }
     for (const filePath of jsFiles) await unlink(filePath).catch(() => undefined);
-    for (const filePath of cssFiles) await unlink(filePath).catch(() => undefined);
-    const remainingJs = await this.#listOutputFiles((filePath) => filePath.endsWith(".js"));
-    const remainingCss = await this.#listOutputFiles((filePath) => filePath.endsWith(".css"));
-    const remainingAssets = [...remainingJs, ...remainingCss];
+    const remainingAssets = await this.#listOutputFiles(
+      (filePath) => filePath.endsWith(".js") || filePath.endsWith(".css"),
+    );
     if (remainingAssets.length > 0) {
       throw new Error(`[csr-build] expected single-file HTML, but CSR assets remain:\n${remainingAssets.join("\n")}`);
     }
@@ -141,44 +194,20 @@ void bootCsr(pages);
   async #inlineHtmlAssets(
     html: string,
     htmlPath: string,
-    cssAsset?: { cssUrl: string; cssRelPath: string },
-  ): Promise<{ html: string; jsFiles: string[]; cssFiles: string[] }> {
+    cssAsset?: CssAsset,
+  ): Promise<{ html: string; jsFiles: string[] }> {
+    let next = html;
+    if (cssAsset) {
+      const css = await Bun.file(path.join(this.#artifactDir, cssAsset.cssRelPath)).text();
+      next = CsrArtifactBuilder.injectBeforeHeadEnd(next, CsrArtifactBuilder.createInlineStyle(css));
+    }
     const jsFiles: string[] = [];
-    const cssFiles = CsrArtifactBuilder.collectStylesheetHrefs(html).map((href) =>
-      CsrArtifactBuilder.resolveHtmlAssetPath(htmlPath, href),
-    );
-    let next = CsrArtifactBuilder.stripBundledStylesheetLinks(html);
     next = await CsrArtifactBuilder.replaceModuleScriptSrc(next, async (src) => {
       const jsPath = CsrArtifactBuilder.resolveHtmlAssetPath(htmlPath, src);
       jsFiles.push(jsPath);
       return await Bun.file(jsPath).text();
     });
-    const bundledCss = (
-      await Promise.all(
-        cssFiles.map((cssFile) =>
-          Bun.file(cssFile)
-            .text()
-            .catch(() => ""),
-        ),
-      )
-    )
-      .filter(Boolean)
-      .join("\n");
-    if (bundledCss) {
-      const style = CsrArtifactBuilder.createInlineStyle(bundledCss);
-      if (!next.includes(style)) next = CsrArtifactBuilder.injectBeforeHeadEnd(next, style);
-    }
-    if (cssAsset) {
-      const cssPath = path.join(
-        this.#command === "build" ? this.#app.dist.cwdPath : this.#app.cwdPath,
-        ".akan/artifact",
-        cssAsset.cssRelPath,
-      );
-      const css = await Bun.file(cssPath).text();
-      const style = CsrArtifactBuilder.createInlineStyle(css);
-      if (!next.includes(style)) next = CsrArtifactBuilder.injectBeforeHeadEnd(next, style);
-    }
-    return { html: next, jsFiles, cssFiles };
+    return { html: next, jsFiles };
   }
 
   async #htmlOutputPaths(): Promise<string[]> {
@@ -194,23 +223,26 @@ void bootCsr(pages);
     return files.sort();
   }
 
+  /**
+   * Bun's HTML bundler hoists the module script into `<head>`, so once that script is inline its source is part
+   * of the text being searched — and a React bundle contains `<body` and `</head>` as strings. Positions are
+   * taken on a copy with script, style and comment bodies blanked, and the snippet always lands after whatever
+   * was injected before it: prepending would reverse the cascade order the caller chose.
+   */
   static injectBeforeHeadEnd(html: string, snippet: string): string {
-    const matches = [...html.matchAll(/<\/head\s*>/gi)];
-    const bodyStart = html.search(/<body(?:\s|>)/i);
-    const headEnd = matches
-      .filter((match) => match.index !== undefined && (bodyStart === -1 || match.index < bodyStart))
-      .at(-1);
-    if (!headEnd || headEnd.index === undefined) return `${snippet}\n${html}`;
-    return `${html.slice(0, headEnd.index)}${snippet}\n${html.slice(headEnd.index)}`;
-  }
-
-  static stripBundledStylesheetLinks(html: string): string {
-    return html.replace(/<link\b(?=[^>]*\brel=["']stylesheet["'])[^>]*>\s*/gi, "");
+    const scannable = CsrArtifactBuilder.blankEmbeddedContent(html);
+    const headEnd = scannable.search(/<\/head\s*>/i);
+    if (headEnd !== -1) return `${html.slice(0, headEnd)}${snippet}\n${html.slice(headEnd)}`;
+    const bodyStart = scannable.search(/<body(?:\s|>)/i);
+    if (bodyStart !== -1) return `${html.slice(0, bodyStart)}${snippet}\n${html.slice(bodyStart)}`;
+    return `${html}\n${snippet}`;
   }
 
-  static collectStylesheetHrefs(html: string): string[] {
-    const linkRe = /<link\b(?=[^>]*\brel=["']stylesheet["'])(?=[^>]*\bhref=["']([^"']+)["'])[^>]*>/gi;
-    return [...html.matchAll(linkRe)].map((match) => match[1]).filter((href): href is string => !!href);
+  static blankEmbeddedContent(html: string): string {
+    return html.replace(
+      /<script\b[^>]*>[\s\S]*?<\/script\s*>|<style\b[^>]*>[\s\S]*?<\/style\s*>|<!--[\s\S]*?-->/gi,
+      (match) => " ".repeat(match.length),
+    );
   }
 
   static createInlineStyle(css: string): string {

package/frontendBuild/cssCompiler.ts

@@ -17,6 +17,12 @@ interface CssDiscovery {
   sourcePaths: string[];
 }
 
+/** One `@import` target and the custom properties it declares, which is what proves it arrived downstream. */
+export interface ImportedStylesheet {
+  cssPath: string;
+  declaredNames: string[];
+}
+
 export class CssCompiler {
   #logger = new Logger("CssCompiler");
   #transpiler = new Bun.Transpiler({ loader: "tsx" });
@@ -48,6 +54,11 @@ export class CssCompiler {
   #resolvedSpecifierCache = new Map<string, Promise<string | null>>();
   /** Every stylesheet this compile reached, entry points and `@import` targets alike. */
   #discoveredCssPaths = new Set<string>();
+  /**
+   * `@import` targets per base path, so whoever writes the asset can check the file it actually wrote — the
+   * compiled text and the written artifact are two different places a declaration can go missing.
+   */
+  importedStylesheetsByBasePath: Record<string, ImportedStylesheet[]> = {};
 
   #fileExists(absPath: string): Promise<boolean> {
     let cached = this.#fileExistsCache.get(absPath);
@@ -79,8 +90,11 @@ export class CssCompiler {
   async getCss({ refresh }: { refresh?: boolean } = {}) {
     if (this.#cssText !== null && !refresh) return this.#cssText;
     this.#discoveredCssPaths.clear();
+    this.importedStylesheetsByBasePath = {};
     const { cssPaths, sourcePaths } = await this.discoverCssAndSources({ refresh });
-    this.#cssText = await this.compileCss(cssPaths, sourcePaths);
+    const { css, imported } = await this.#compileWithImports(cssPaths, sourcePaths);
+    this.#cssText = css;
+    this.importedStylesheetsByBasePath = { "": imported };
     await this.#warnUnreachableStylesheets();
     return this.#cssText;
   }
@@ -88,6 +102,7 @@ export class CssCompiler {
   async getCssByBasePath({ refresh }: { refresh?: boolean } = {}): Promise<Record<string, string>> {
     if (this.#cssTextByBasePath !== null && !refresh) return this.#cssTextByBasePath;
     this.#discoveredCssPaths.clear();
+    this.importedStylesheetsByBasePath = {};
     const akanConfig = await this.#app.getConfig({ refresh });
     const pageKeys = await this.#app.getPageKeys({ refresh });
     const basePaths = [...akanConfig.basePaths];
@@ -97,7 +112,8 @@ export class CssCompiler {
         if (rootPageKeys.length === 0) return ["", ""] as const;
         const started = Date.now();
         const { cssPaths, sourcePaths } = await this.discoverCssAndSources({ refresh, pageKeys: rootPageKeys });
-        const css = await this.compileCss(cssPaths, sourcePaths);
+        const { css, imported } = await this.#compileWithImports(cssPaths, sourcePaths);
+        this.importedStylesheetsByBasePath[""] = imported;
         this.#logger.verbose(
           `css base=root paths=${cssPaths.length} sources=${sourcePaths.length} in ${Date.now() - started}ms`,
         );
@@ -108,7 +124,8 @@ export class CssCompiler {
         if (basePathPageKeys.length === 0) return [basePath, ""] as const;
         const started = Date.now();
         const { cssPaths, sourcePaths } = await this.discoverCssAndSources({ refresh, pageKeys: basePathPageKeys });
-        const css = await this.compileCss(cssPaths, sourcePaths);
+        const { css, imported } = await this.#compileWithImports(cssPaths, sourcePaths);
+        this.importedStylesheetsByBasePath[basePath] = imported;
         this.#logger.verbose(
           `css base=${basePath} paths=${cssPaths.length} sources=${sourcePaths.length} in ${Date.now() - started}ms`,
         );
@@ -231,19 +248,32 @@ export class CssCompiler {
     return tokenPaths.filter((tokensPath): tokensPath is string => !!tokensPath);
   }
   async compileCss(cssPaths: string[], sourcePaths: string[]): Promise<string> {
-    if (cssPaths.length === 0) return "";
+    const { css } = await this.#compileWithImports(cssPaths, sourcePaths);
+    return css;
+  }
+
+  /**
+   * The collector is per compile rather than per compiler instance: `getCssByBasePath` compiles every base path
+   * concurrently, so instance state would mix one base path's imports into another's check.
+   */
+  async #compileWithImports(
+    cssPaths: string[],
+    sourcePaths: string[],
+  ): Promise<{ css: string; imported: ImportedStylesheet[] }> {
+    if (cssPaths.length === 0) return { css: "", imported: [] };
 
     const compileStarted = Date.now();
     const compilers = await Promise.all(
       cssPaths.map(async (cssPath) => {
         const css = await Bun.file(cssPath).text();
         const base = path.dirname(cssPath);
+        const imported = new Map<string, string>();
         const compiler = await compile(css, {
           base,
-          loadStylesheet: (id, fromBase) => this.#loadStylesheet(id, fromBase),
+          loadStylesheet: (id, fromBase) => this.#loadStylesheet(id, fromBase, imported),
           loadModule: (id, fromBase) => this.#loadModule(id, fromBase),
         });
-        return { cssPath, compiler };
+        return { cssPath, compiler, imported };
       }),
     );
 
@@ -258,20 +288,32 @@ export class CssCompiler {
       `css candidates scanned count=${candidates.length} sources=${sourcePaths.length} dirs=${sourceDirs.size} in ${Date.now() - scanStarted}ms`,
     );
     const parts: string[] = [];
+    const imported: ImportedStylesheet[] = [];
     for (const entry of compilers) {
       if (!entry) continue;
-      parts.push(entry.compiler.build(candidates));
+      const part = entry.compiler.build(candidates);
+      parts.push(part);
+      for (const [cssPath, content] of entry.imported) {
+        const declaredNames = declaredCustomProperties(content);
+        imported.push({ cssPath, declaredNames });
+        if (declaredNames.length === 0 || declaredNames.some((name) => part.includes(`${name}:`))) continue;
+        this.#logger.warn(
+          `css @import ${cssPath} was loaded by ${entry.cssPath} but none of its ${declaredNames.length} declaration(s) reached the compiled CSS`,
+        );
+      }
     }
     this.#logger.verbose(
       `css compiled paths=${cssPaths.length} candidates=${candidates.length} in ${Date.now() - compileStarted}ms`,
     );
-    return parts.join("\n");
+    return { css: parts.join("\n"), imported };
   }
 
-  async #loadStylesheet(id: string, fromBase: string) {
+  async #loadStylesheet(id: string, fromBase: string, imported?: Map<string, string>) {
     const p = await this.#resolveCssImport(id, fromBase);
     this.#discoveredCssPaths.add(p);
     const content = await Bun.file(p).text();
+    imported?.set(p, content);
+    this.#logger.verbose(`css import "${id}" from ${fromBase} -> ${p} (${content.length} bytes)`);
     return { path: p, base: path.dirname(p), content };
   }
 
@@ -388,7 +430,18 @@ export function isIgnoredNodeModuleSource(filePath: string): boolean {
   return NODE_MODULES_RE.test(filePath) && !AKANJS_NODE_MODULE_RE.test(filePath);
 }
 
-function getPageKeyBasePath(pageKey: string, basePaths: string[]): string | null {
+/**
+ * `@theme` blocks are stripped first: those variables are emitted only when a utility uses one, so their
+ * absence from a build says nothing about whether the stylesheet arrived.
+ */
+export function declaredCustomProperties(css: string): string[] {
+  const withoutThemeBlocks = css.replace(/@theme[^{]*\{[^}]*\}/g, "");
+  return [...new Set([...withoutThemeBlocks.matchAll(/(?:^|[\s;{])(--[\w-]+)\s*:/g)].map(([, name]) => name))].filter(
+    (name): name is string => !!name,
+  );
+}
+
+export function getPageKeyBasePath(pageKey: string, basePaths: string[]): string | null {
   const normalized = pageKey.split(path.sep).join("/").replace(/^\.\//, "");
   const segments = normalized.split("/");
   const firstPublicSegment = segments.find((segment) => segment !== "[lang]" && !/^\(.+\)$/.test(segment));

package/frontendBuild/devGeneratedIndexSync.ts

@@ -1,5 +1,6 @@
-import { mkdir, readdir, readFile, rm, stat, writeFile } from "node:fs/promises";
+import { mkdir, readdir, readFile, rm, stat } from "node:fs/promises";
 import path from "node:path";
+import { FileSys } from "../fileSys";
 
 const BARREL_FACETS = new Set(["common", "srvkit", "ui", "webkit", "plugin"]);
 const FACET_SOURCE_FILE_RE = /\.(ts|tsx)$/;
@@ -101,7 +102,7 @@ export class DevGeneratedIndexSync {
     const current = await readFile(indexPath, "utf8").catch(() => null);
     if (current === content) return false;
     await mkdir(dir, { recursive: true });
-    await writeFile(indexPath, content);
+    await FileSys.writeTextAtomic(indexPath, content);
     return true;
   }