@akanjs/devkit 3.0.0-alpha.7 → 3.0.0-alpha.71

package/formSetterScanner.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, test } from "bun:test";
+import ts from "typescript";
+import { FormSetterScanner } from "./formSetterScanner";
+import type { SourceFileInfo } from "./qualityScanner";
+
+const fileOf = (file: string, content: string): SourceFileInfo => ({
+  file,
+  absolutePath: `/tmp/${file}`,
+  content,
+  sourceFile: ts.createSourceFile(file, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX),
+});
+
+const scan = (content: string) =>
+  new FormSetterScanner().scan([fileOf("apps/demo/lib/task/Task.Template.tsx", content)]);
+
+describe("FormSetterScanner", () => {
+  test("a setter passed by reference publishes, so nothing is reported", () => {
+    expect(
+      scan(`export const General = () => (
+  <Field.Text value={taskForm.title} onChange={st.do.setTitleOnTask} />
+);
+`),
+    ).toEqual([]);
+  });
+
+  test("every wrapper shape is counted once per field, whatever the wrapper was for", () => {
+    const warnings = scan(`export const General = () => (
+  <>
+    <Field.Text onChange={st.do.setTitleOnTask} />
+    <Field.ToggleSelect onChange={(type) => { st.do.setTypeOnTask(type); }} />
+    <Field.Phone onChange={(phone) => st.do.setPhoneOnTask(formatPhone(phone))} />
+    <Field.Parent
+      onChange={(project) => {
+        st.do.setProjectOnTask(project);
+        if (project) st.do.addMembersOnTask(project.members ?? []);
+      }}
+    />
+  </>
+);
+`);
+
+    expect(warnings).toHaveLength(1);
+    expect(warnings[0]?.rule).toBe("akan.agent.unpublished-form-setter");
+    expect(warnings[0]?.scope).toBe("agent");
+    expect(warnings[0]?.message).toContain("setPhoneOnTask, setProjectOnTask, setTypeOnTask");
+    expect(warnings[0]?.locations).toHaveLength(3);
+  });
+
+  test("a nested path write is unannotatable by design and is not counted", () => {
+    expect(
+      scan(`export const Rows = ({ idx }: { idx: number }) => (
+  <Field.Text onChange={(title) => st.do.writeOnTask(\`payments.\${idx}.title\`, title)} />
+);
+`),
+    ).toEqual([]);
+  });
+
+  test("a zero-parameter handler is a button setting a constant, not a form control", () => {
+    expect(
+      scan(`export const Actions = () => (
+  <Button onClick={() => st.do.setStatusOnTask("done")}>Done</Button>
+);
+`),
+    ).toEqual([]);
+  });
+
+  test("a non-setter action behind a wrapper is somebody else's rule", () => {
+    expect(
+      scan(`export const Filters = () => (
+  <Select onChange={(ids) => st.do.setQueryArgsOfTaskInSelf(ids)} />
+);
+`),
+    ).toEqual([]);
+  });
+
+  test("only .tsx is scanned", () => {
+    const content = `export const set = (v: string) => <X onChange={(t) => st.do.setTitleOnTask(t)} />;\n`;
+    expect(new FormSetterScanner().scan([fileOf("apps/demo/lib/task/task.store.ts", content)])).toEqual([]);
+  });
+});

package/formSetterScanner.ts

@@ -0,0 +1,92 @@
+import ts from "typescript";
+import type { QualityWarning, SourceFileInfo } from "./qualityScanner";
+
+/**
+ * The inventory of model fields a screen writes but does not publish.
+ *
+ * A control handed `onChange={st.do.setTitleOnTask}` **by reference** names the field it writes, so it emits
+ * `data-akan-action` and `useFieldTool` publishes the field to the in-page agent. Any wrapper around that setter is
+ * an anonymous closure carrying neither, and the field goes quiet — for the agent, for an E2E selector, and for the
+ * accessibility tree.
+ *
+ * `no-unpublished-form-setter.grit` is the per-line enforcement, and it fires only on a pure forwarding wrapper,
+ * because every other shape has a legitimate reading and a lint error would be wrong. This is the other half: the
+ * per-file count of fields that ended up unreachable whatever the reason, which is the number worth watching. A
+ * warning rather than an error for the same reason — the remedy depends on why the wrapper is there.
+ *
+ * Only a handler that takes a parameter is counted. A zero-parameter handler (`onClick={() => st.do.setStatusOnUser
+ * ("active")}`) is a button setting a constant, not a form control, and its remedy is an `st.tool` beside it.
+ */
+export class FormSetterScanner {
+  static #fieldSetter = /^set[A-Za-z0-9_$]*On[A-Za-z0-9_$]*$/;
+
+  scan(sourceFiles: SourceFileInfo[]): QualityWarning[] {
+    return sourceFiles.filter((sourceFile) => sourceFile.file.endsWith(".tsx")).flatMap((f) => this.#scanFile(f));
+  }
+
+  #scanFile({ file, sourceFile }: SourceFileInfo): QualityWarning[] {
+    const wrapped: { setter: string; line: number }[] = [];
+    const visit = (node: ts.Node) => {
+      if (ts.isJsxAttribute(node)) {
+        const setter = FormSetterScanner.#wrappedSetterOf(node);
+        if (setter) wrapped.push({ setter, line: FormSetterScanner.#lineOf(sourceFile, node) });
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    if (!wrapped.length) return [];
+    const setters = [...new Set(wrapped.map((entry) => entry.setter))].sort();
+    return [
+      {
+        rule: "akan.agent.unpublished-form-setter",
+        scope: "agent",
+        severity: "warning",
+        message:
+          setters.length === 1
+            ? `${setters[0]} is reached through a wrapper, so that field publishes no agent tool and carries no data-akan-action.`
+            : `${setters.length} field setters are reached through a wrapper, so those fields publish no agent tool and carry no data-akan-action: ${setters.join(", ")}.`,
+        file,
+        line: wrapped[0]?.line,
+        locations: wrapped.map(({ line }) => ({ file, line })),
+      },
+    ];
+  }
+
+  /** The setter a handler prop writes behind a wrapper, or null when it is passed by reference or absent. */
+  static #wrappedSetterOf(attribute: ts.JsxAttribute): string | null {
+    if (!ts.isIdentifier(attribute.name) || !/^on[A-Z]/.test(attribute.name.text)) return null;
+    const initializer = attribute.initializer;
+    if (!initializer || !ts.isJsxExpression(initializer) || !initializer.expression) return null;
+    const handler = initializer.expression;
+    if (!ts.isArrowFunction(handler) && !ts.isFunctionExpression(handler)) return null;
+    if (!handler.parameters.length) return null;
+    return FormSetterScanner.#setterCallIn(handler.body);
+  }
+
+  static #setterCallIn(node: ts.Node): string | null {
+    let found: string | null = null;
+    const visit = (current: ts.Node) => {
+      if (found) return;
+      if (ts.isCallExpression(current) && ts.isPropertyAccessExpression(current.expression)) {
+        const { expression, name } = current.expression;
+        if (
+          ts.isPropertyAccessExpression(expression) &&
+          ts.isIdentifier(expression.expression) &&
+          expression.expression.text === "st" &&
+          expression.name.text === "do" &&
+          FormSetterScanner.#fieldSetter.test(name.text)
+        ) {
+          found = name.text;
+          return;
+        }
+      }
+      ts.forEachChild(current, visit);
+    };
+    visit(node);
+    return found;
+  }
+
+  static #lineOf(sourceFile: ts.SourceFile, node: ts.Node) {
+    return sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile)).line + 1;
+  }
+}

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";',

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/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" });
@@ -46,6 +52,13 @@ export class CssCompiler {
   #fileExistsCache = new Map<string, Promise<boolean>>();
   #resolvedFileCache = new Map<string, Promise<string | null>>();
   #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);
@@ -76,13 +89,20 @@ 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;
   }
 
   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];
@@ -92,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`,
         );
@@ -103,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`,
         );
@@ -111,9 +133,26 @@ export class CssCompiler {
       }),
     ]);
     this.#cssTextByBasePath = Object.fromEntries(cssEntries);
+    await this.#warnUnreachableStylesheets();
     return this.#cssTextByBasePath;
   }
 
+  /**
+   * A stylesheet under `page/` reaches the build only by being imported from a route source. One that nothing
+   * imports compiles to nothing and reports success, which is indistinguishable from an empty theme — so say it
+   * out loud once per compile rather than leaving it to be noticed as unstyled elements in the browser.
+   */
+  async #warnUnreachableStylesheets() {
+    const pageDir = path.join(this.#app.cwdPath, "page");
+    const glob = new Bun.Glob("**/*.css");
+    for await (const cssPath of glob.scan({ cwd: pageDir, absolute: true })) {
+      // `(libs)` is a link farm: the same file is discovered under its real path in `libs/`, never this one.
+      if (cssPath.includes(`${path.sep}(libs)${path.sep}`)) continue;
+      if (this.#discoveredCssPaths.has(cssPath)) continue;
+      this.#logger.warn(`css ${path.relative(this.#app.cwdPath, cssPath)} is imported by no route and never compiled`);
+    }
+  }
+
   async discoverCss({ refresh }: { refresh?: boolean } = {}): Promise<string[]> {
     const { cssPaths } = await this.discoverCssAndSources({ refresh });
     return cssPaths;
@@ -180,22 +219,61 @@ export class CssCompiler {
       }
     }
 
-    return { cssPaths: [...cssFiles], sourcePaths: [...sourceFiles] };
+    const tokenPaths = await this.#libTokenStylesheets(sourceFiles);
+    const cssPaths = [...new Set([...tokenPaths, ...cssFiles])];
+    for (const cssPath of cssPaths) this.#discoveredCssPaths.add(cssPath);
+    return { cssPaths, sourcePaths: [...sourceFiles] };
+  }
+
+  /**
+   * `libs/<lib>/ui/tokens.css` of every lib the page graph reached, so a lib can own the fixed colours its own
+   * components need instead of each consuming app re-declaring them. Ordered ahead of the app's stylesheets:
+   * the app is the last word on any variable both declare.
+   */
+  async #libTokenStylesheets(sourceFiles: Set<string>): Promise<string[]> {
+    const libsRoot = path.join(this.#app.workspace.workspaceRoot, "libs");
+    const libNames = new Set<string>();
+    for (const filePath of sourceFiles) {
+      const relPath = path.relative(libsRoot, filePath);
+      if (relPath.startsWith("..") || path.isAbsolute(relPath)) continue;
+      const [libName] = relPath.split(path.sep);
+      if (libName) libNames.add(libName);
+    }
+    const tokenPaths = await Promise.all(
+      [...libNames].sort().map(async (libName) => {
+        const tokensPath = path.join(libsRoot, libName, "ui/tokens.css");
+        return (await this.#fileExists(tokensPath)) ? tokensPath : null;
+      }),
+    );
+    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 };
       }),
     );
 
@@ -210,24 +288,46 @@ 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 };
   }
 
+  /**
+   * Every specifier is verified here, path-shaped ones included. An `@import` the pipeline cannot resolve is
+   * a build error and never a no-op: the vocabulary closure means a component whose token declaration failed
+   * to load renders unstyled, which nothing downstream can distinguish from a design choice.
+   */
   async #resolveCssImport(id: string, fromBase: string): Promise<string> {
-    if (id.startsWith(".") || id.startsWith("/")) return path.resolve(fromBase, id);
+    if (id.startsWith(".") || id.startsWith("/")) {
+      const filePath = path.resolve(fromBase, id);
+      if (await this.#fileExists(filePath)) return filePath;
+      throw new Error(`[css] failed to resolve stylesheet import "${id}" from ${fromBase} (no file at ${filePath})`);
+    }
     const resolver = await this.#getCssImportResolver();
     const resolved = await resolver.resolve(id, fromBase);
     if (resolved) return resolved;
@@ -330,6 +430,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/cssImportResolver.ts

@@ -106,14 +106,15 @@ export class CssImportResolver {
       const pkg = await Bun.file(pkgPath).json();
       const subpath = id === pkgName ? "." : `.${id.slice(pkgName.length)}`;
       const exportValue = pkg.exports?.[subpath];
-      const styleEntry =
-        (typeof exportValue === "string"
+      const exportedEntry =
+        typeof exportValue === "string"
           ? exportValue
-          : exportValue?.style || exportValue?.import || exportValue?.default) ||
-        pkg.exports?.["."]?.style ||
-        pkg.style ||
-        "index.css";
-      return await this.#firstExisting(path.resolve(pkgDir, styleEntry));
+          : exportValue?.style || exportValue?.import || exportValue?.default;
+      if (exportedEntry) return await this.#firstExisting(path.resolve(pkgDir, exportedEntry));
+      //* A subpath names a file inside the package, so it resolves literally. Falling back to the package's own
+      //* style entry here would load a different stylesheet than the author asked for and report success.
+      if (subpath !== ".") return await this.#firstExisting(path.resolve(pkgDir, subpath));
+      return await this.#firstExisting(path.resolve(pkgDir, pkg.exports?.["."]?.style || pkg.style || "index.css"));
     } catch {
       return null;
     }