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

package/frontendBuild/cssCompiler.ts

@@ -48,6 +48,8 @@ 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 of the compile in progress, by path, so the output can be checked against them. */
+  #importedStylesheets = new Map<string, string>();
 
   #fileExists(absPath: string): Promise<boolean> {
     let cached = this.#fileExistsCache.get(absPath);
@@ -233,6 +235,7 @@ export class CssCompiler {
   async compileCss(cssPaths: string[], sourcePaths: string[]): Promise<string> {
     if (cssPaths.length === 0) return "";
 
+    this.#importedStylesheets.clear();
     const compileStarted = Date.now();
     const compilers = await Promise.all(
       cssPaths.map(async (cssPath) => {
@@ -265,13 +268,33 @@ export class CssCompiler {
     this.#logger.verbose(
       `css compiled paths=${cssPaths.length} candidates=${candidates.length} in ${Date.now() - compileStarted}ms`,
     );
-    return parts.join("\n");
+    const css = parts.join("\n");
+    this.#warnDroppedImports(css);
+    return css;
+  }
+
+  /**
+   * An `@import` can resolve, be read, and still contribute nothing — the one failure the existence check
+   * cannot see, and the one that reads as an unstyled component rather than as an error. Custom properties
+   * declared outside `@theme` are the tell: those pass through verbatim, so a stylesheet whose every
+   * declaration is missing from the build did not make it in.
+   */
+  #warnDroppedImports(css: string) {
+    for (const [cssPath, content] of this.#importedStylesheets) {
+      const names = declaredCustomProperties(content);
+      if (names.length === 0 || names.some((name) => css.includes(`${name}:`))) continue;
+      this.#logger.warn(
+        `css @import ${cssPath} was loaded but none of its ${names.length} declaration(s) reached the compiled CSS`,
+      );
+    }
   }
 
   async #loadStylesheet(id: string, fromBase: string) {
     const p = await this.#resolveCssImport(id, fromBase);
     this.#discoveredCssPaths.add(p);
     const content = await Bun.file(p).text();
+    this.#importedStylesheets.set(p, content);
+    this.#logger.verbose(`css import "${id}" from ${fromBase} -> ${p} (${content.length} bytes)`);
     return { path: p, base: path.dirname(p), content };
   }
 
@@ -388,6 +411,17 @@ export function isIgnoredNodeModuleSource(filePath: string): boolean {
   return NODE_MODULES_RE.test(filePath) && !AKANJS_NODE_MODULE_RE.test(filePath);
 }
 
+/**
+ * `@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,
+  );
+}
+
 function getPageKeyBasePath(pageKey: string, basePaths: string[]): string | null {
   const normalized = pageKey.split(path.sep).join("/").replace(/^\.\//, "");
   const segments = normalized.split("/");

package/frontendBuild/frontendBuild.test.ts

@@ -5,7 +5,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import type { RoutesManifest } from "akanjs/server";
 import { CsrArtifactBuilder } from "./csrArtifactBuilder";
-import { CssCompiler, isIgnoredNodeModuleSource } from "./cssCompiler";
+import { CssCompiler, declaredCustomProperties, isIgnoredNodeModuleSource } from "./cssCompiler";
 import { CssImportResolver } from "./cssImportResolver";
 import { DevChangePlanner } from "./devChangePlanner";
 import { DevGeneratedIndexSync } from "./devGeneratedIndexSync";
@@ -443,6 +443,17 @@ describe("CssCompiler", () => {
     expect(css).toContain(".text-fuchsia-500");
   });
 
+  test("reads declarations that prove a stylesheet arrived, ignoring theme variables that may not", () => {
+    expect(declaredCustomProperties(":root { --kakao: #fee500; --naver: #1ec800; }")).toEqual(["--kakao", "--naver"]);
+    expect(declaredCustomProperties("@theme inline {\n  --color-brand: var(--brand);\n}\n")).toEqual([]);
+    expect(declaredCustomProperties("@theme { --color-x: initial; }\n:root { --brand: #111; }")).toEqual(["--brand"]);
+    expect(declaredCustomProperties(".a { color: var(--kakao); }")).toEqual([]);
+    expect(declaredCustomProperties(":root{--a:#111}\n@media (min-width:1px){:root{--a:#222;--b:#333}}")).toEqual([
+      "--a",
+      "--b",
+    ]);
+  });
+
   test("fails loudly on a stylesheet import that resolves to nothing", async () => {
     const root = await makeTempRoot();
     const cssPath = path.join(root, "apps/demo/page/styles.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/devkit",
-  "version": "3.0.0-alpha.11",
+  "version": "3.0.0-alpha.12",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -45,7 +45,7 @@
     "@langchain/openai": "^1.4.6",
     "@tailwindcss/node": "^4.3.0",
     "@trapezedev/project": "^7.1.4",
-    "akanjs": "3.0.0-alpha.11",
+    "akanjs": "3.0.0-alpha.12",
     "chalk": "^5.6.2",
     "commander": "^14.0.3",
     "dayjs": "^1.11.20",