@akanjs/devkit 3.1.0-rc.2 → 3.1.0-rc.21

package/executors.ts

@@ -54,7 +54,7 @@ import { Spinner } from "./spinner";
 // Type-only: `getTypeChecker` loads it on demand to keep `typescript` out of the resident module graph.
 import type { TypeChecker } from "./typeChecker";
 import { ProjectTypecheck } from "./typecheck/projectTypecheck";
-import type { FileContent, PackageJson, TsConfigJson } from "./types";
+import type { BaseDevEnv, FileContent, PackageJson, TsConfigJson } from "./types";
 import { barrelFacetDirs } from "./workspaceLayout";
 
 export interface PageRoot {
@@ -271,20 +271,20 @@ export class Executor {
     const readPath = this.getPath(dirPath);
     try {
       const glob = new Bun.Glob("*");
-      return Array.from(glob.scanSync({ cwd: readPath, onlyFiles: false }));
+      return Array.from(glob.scanSync({ cwd: readPath, onlyFiles: false })).sort();
     } catch {
       return [];
     }
   }
   async getAllFiles(pattern = "**/*", { cwd }: { cwd?: string } = {}): Promise<string[]> {
     const glob = new Bun.Glob(pattern);
-    return Array.from(glob.scanSync({ cwd: cwd ?? this.cwdPath, onlyFiles: true }));
+    return Array.from(glob.scanSync({ cwd: cwd ?? this.cwdPath, onlyFiles: true })).sort();
   }
   async getFilesAndDirs(dirPath: string): Promise<{ files: string[]; dirs: string[] }> {
     const fullDirPath = this.getPath(dirPath);
     const glob = new Bun.Glob("*");
-    const files = Array.from(glob.scanSync({ cwd: fullDirPath, onlyFiles: true }));
-    const allEntries = Array.from(glob.scanSync({ cwd: fullDirPath, onlyFiles: false }));
+    const files = Array.from(glob.scanSync({ cwd: fullDirPath, onlyFiles: true })).sort();
+    const allEntries = Array.from(glob.scanSync({ cwd: fullDirPath, onlyFiles: false })).sort();
     const dirs = allEntries.filter((entry) => !files.includes(entry));
     return { files, dirs };
   }
@@ -662,6 +662,7 @@ export class WorkspaceExecutor extends Executor {
   }
   /** The public env a native build was told to reproduce (`--public-env`): it outranks `.env`, which outranks the rest. */
   static publicEnvPin: Record<string, string> | null = null;
+  static readonly localServeDomain = "localhost";
   static getBaseDevEnv(envPath?: string) {
     // Bun auto-loads .env, so we use process.env directly
     const sourceEnv = {
@@ -673,11 +674,11 @@ export class WorkspaceExecutor extends Executor {
     const workspaceRoot = sourceEnv.AKAN_WORKSPACE_ROOT;
     const workspaceId = sourceEnv.AKAN_WORKSPACE_ID;
 
-    const repoName = sourceEnv.AKAN_PUBLIC_REPO_NAME;
-    if (!repoName) throw new Error("AKAN_PUBLIC_REPO_NAME is not set");
-
-    const serveDomain = sourceEnv.AKAN_PUBLIC_SERVE_DOMAIN;
-    if (!serveDomain) throw new Error("AKAN_PUBLIC_SERVE_DOMAIN is not set");
+    const repoName =
+      sourceEnv.AKAN_PUBLIC_REPO_NAME ||
+      resolveRepoName(envPath ? path.dirname(envPath) : (workspaceRoot ?? process.cwd()));
+    const serveDomain = sourceEnv.AKAN_PUBLIC_SERVE_DOMAIN || WorkspaceExecutor.localServeDomain;
+    const defaulted = (["AKAN_PUBLIC_REPO_NAME", "AKAN_PUBLIC_SERVE_DOMAIN"] as const).filter((key) => !sourceEnv[key]);
 
     const portOffset = parseInt(sourceEnv.PORT_OFFSET ?? "0");
 
@@ -697,8 +698,20 @@ export class WorkspaceExecutor extends Executor {
       env,
       portOffset,
       workspaceId,
+      defaulted,
     };
   }
+  //? A build or tunnel for a real environment carries these into an image, a bundle or a host name it dials.
+  static assertDeployableEnv(baseDevEnv: BaseDevEnv, environment: string, purpose: string) {
+    const defaulted = environment === "local" ? [] : (baseDevEnv.defaulted ?? []);
+    if (!defaulted.length) return;
+    const values = { AKAN_PUBLIC_REPO_NAME: baseDevEnv.repoName, AKAN_PUBLIC_SERVE_DOMAIN: baseDevEnv.serveDomain };
+    const standIns = defaulted.map((key) => `${key} (would be "${values[key]}")`).join(" and ");
+    throw new Error(
+      `${purpose} for the "${environment}" environment needs ${standIns} set, not a local default. ` +
+        `Set ${defaulted.length > 1 ? "them" : "it"} in the workspace .env or the shell, or use AKAN_PUBLIC_ENV=local.`,
+    );
+  }
   getWorkspaceId<AllowEmpty extends boolean = false>({
     allowEmpty,
   }: {
@@ -1159,10 +1172,12 @@ export class AppExecutor extends SysExecutor {
     return basePort + appIndex + portOffset;
   }
   getCommandEnv(env: Record<string, string> = {}): Record<string, string> {
-    const { portOffset } = WorkspaceExecutor.getBaseDevEnv();
+    const { portOffset, repoName, serveDomain } = WorkspaceExecutor.getBaseDevEnv();
     const PORT = (8282 + portOffset).toString();
     return {
       ...process.env,
+      AKAN_PUBLIC_REPO_NAME: repoName,
+      AKAN_PUBLIC_SERVE_DOMAIN: serveDomain,
       AKAN_PUBLIC_APP_NAME: this.name,
       AKAN_WORKSPACE_ROOT: this.workspace.workspaceRoot,
       NODE_NO_WARNINGS: "1",
@@ -1323,7 +1338,7 @@ export class AppExecutor extends SysExecutor {
         pageKeys.push(key);
       }
     }
-    pageKeys.sort();
+    pageKeys.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
     this.#pageKeys = this.#excludeDevOnlyPages ? this.#dropDevOnlyPages(pageKeys, devOnlyKeys, devOnlyDirs) : pageKeys;
     return this.#pageKeys;
   }
@@ -1581,7 +1596,9 @@ export class PkgExecutor extends Executor {
     devDependencies: string[] = [],
   ): Promise<Pick<PackageJson, "dependencies" | "devDependencies">> {
     const dependencyNames = [...new Set(dependencies)].sort();
-    const devDependencyNames = [...new Set(devDependencies)].filter((dep) => !dependencyNames.includes(dep)).sort();
+    const devDependencyNames = [...new Set(devDependencies)]
+      .filter((dep) => !dependencyNames.includes(dep))
+      .sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
     const dependencyVersions = new Map<string, string>();
     const missingDeps: string[] = [];
     for (const dep of [...dependencyNames, ...devDependencyNames]) {

package/frontendBuild/autoImportSync.test.ts

@@ -253,7 +253,9 @@ describe("AutoImportSync.syncForBatch", () => {
 
     const result = await sync.syncForBatch([uiFile, pageFile, webkitFile]);
     expect(result.errors).toEqual([]);
-    expect(result.changedFiles.sort()).toEqual([pageFile, webkitFile, uiFile].sort());
+    expect(result.changedFiles.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))).toEqual(
+      [pageFile, webkitFile, uiFile].sort(),
+    );
     expect(await readFile(uiFile, "utf8")).toContain(`import { st } from "@apps/akan/client";`);
     expect(await readFile(pageFile, "utf8")).toContain(`import { cnst } from "@apps/akan/client";`);
     expect(await readFile(webkitFile, "utf8")).toContain(`import { fetch } from "@libs/shared/client";`);

package/frontendBuild/clientEntryDiscovery.ts

@@ -6,7 +6,7 @@ import { BarrelAnalyzer } from "../transforms/barrelAnalyzer";
 import { createTsconfigPackageResolver, rewriteBarrelImports } from "../transforms/barrelImportsPlugin";
 import type { AkanConfig, ClientEntryDiscovery, ScannedImport } from "./clientBuildTypes";
 
-const USE_CLIENT_RE = /^\s*(?:\/\*[\s\S]*?\*\/\s*|\/\/[^\n]*\n\s*)*["']use client["']/;
+const USE_CLIENT_RE = /^\s*(?:\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*|\/\/[^\n]*\n\s*)*["']use client["']/;
 const NODE_MODULES_RE = /[\\/]node_modules[\\/]/;
 const AKANJS_NODE_MODULE_RE = /[\\/]node_modules[\\/]akanjs[\\/]/;
 // Bun's scanImports also surfaces CSS and asset imports, none of which can be a client component.

package/frontendBuild/csrArtifactBuilder.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, test } from "bun:test";
 import path from "node:path";
 import { tempDirs, writeText } from "../testHelpers";
+import { CsrArtifactBuilder } from "./csrArtifactBuilder";
 
 const makeTempRoot = tempDirs("akan-csr-artifact-");
 
@@ -31,4 +32,33 @@ console.info(await result.outputs[0].text());
     expect(stdout).toContain("envmark:debug");
     expect(stdout).not.toContain("envmark:local");
   });
+
+  //? An OTA release is keyed on the bundle's hash, so a no-op build from another checkout must not stage one.
+  test("bundles the same app identically from two checkout paths", async () => {
+    const app = { getPublicEnv: () => ({ AKAN_PUBLIC_ENV: "main" }) };
+    const buildFrom = async (root: string) => {
+      await writeText(
+        path.join(root, "node_modules/wasmdep/package.json"),
+        '{ "name": "wasmdep", "main": "index.js" }\n',
+      );
+      await writeText(
+        path.join(root, "node_modules/wasmdep/index.js"),
+        // biome-ignore lint/suspicious/noTemplateCurlyInString: the fixture module's own source holds a template literal
+        'var isNode = typeof process == "object" && !!process.versions?.node;\nmodule.exports = isNode ? `${__dirname}/` : "";\n',
+      );
+      await writeText(path.join(root, "entry.ts"), 'import dir from "wasmdep";\nconsole.info(dir);\n');
+      const result = await Bun.build({
+        ...CsrArtifactBuilder.bundleOptions(app as never, "build"),
+        entrypoints: [path.join(root, "entry.ts")],
+      });
+      expect(result.success).toBe(true);
+      return await result.outputs[0]?.text();
+    };
+    const [first, second] = [await makeTempRoot(), await makeTempRoot()];
+
+    const [firstOutput, secondOutput] = [await buildFrom(first), await buildFrom(second)];
+
+    expect(firstOutput).toBe(secondOutput);
+    expect(firstOutput).not.toContain(path.basename(first));
+  });
 });

package/frontendBuild/csrArtifactBuilder.ts

@@ -3,6 +3,7 @@ import path from "node:path";
 import type { BaseBuildArtifact } from "akanjs/server";
 import { type PageEntry, resolveSsrPageEntriesForApp } from "../artifact/implicitRootLayout";
 import type { App } from "../commandDecorators";
+import { createBrowserDirnamePlugin } from "../transforms/browserDirnamePlugin";
 import { bundleDefine } from "./bundleDefine";
 import { CsrEntryFiles } from "./csrEntryFiles";
 import { PagesBundleBuilder } from "./pagesBundleBuilder";
@@ -90,7 +91,7 @@ export class CsrArtifactBuilder {
       define: bundleDefine(app, command, "csr"),
       optimizeImports,
       // A raw `.css` in the route graph is Tailwind source; the base artifact's compiled sheet is the only stylesheet.
-      plugins: [PagesBundleBuilder.createCssStubPlugin()],
+      plugins: [PagesBundleBuilder.createCssStubPlugin(), createBrowserDirnamePlugin()],
     };
   }
 
@@ -234,7 +235,7 @@ void bootCsr(pages);
     for await (const filePath of glob.scan({ cwd: this.#outputDir, absolute: true })) {
       if (predicate(filePath)) files.push(filePath);
     }
-    return files.sort();
+    return files.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
   }
 
   // Bun hoists the module script into <head> and a React bundle contains "</head>" as text, so positions come from a
@@ -248,9 +249,10 @@ void bootCsr(pages);
     return `${html}\n${snippet}`;
   }
 
+  // An unclosed body runs to EOF, as the HTML tokenizer reads it; that also keeps the scan linear.
   static blankEmbeddedContent(html: string): string {
     return html.replace(
-      /<script\b[^>]*>[\s\S]*?<\/script\s*>|<style\b[^>]*>[\s\S]*?<\/style\s*>|<!--[\s\S]*?-->/gi,
+      /<script\b[^>]*>[\s\S]*?(?:<\/script(?:[\s/][^<>]*)?>|$)|<style\b[^>]*>[\s\S]*?(?:<\/style(?:[\s/][^<>]*)?>|$)|<!--[\s\S]*?(?:--!?>|$)/gi,
       (match) => " ".repeat(match.length),
     );
   }

package/frontendBuild/csrDevPatcher.test.ts

@@ -379,7 +379,10 @@ describe("CsrDevPatcher", () => {
     await expect(patcher.update([], { roots: [file("ui/E1.tsx")], onlyRoots: true })).rejects.toThrow();
     await expect(patcher.update([], { roots: [file("ui/E4.tsx")], onlyRoots: true })).rejects.toThrow();
     const graph = (await bundler.writer.readJson<CsrDevGraph>("graph.json")) as CsrDevGraph;
-    expect(graph.pending.sort()).toEqual(["apps/demo/ui/E1.tsx", "apps/demo/ui/E4.tsx"]);
+    expect(graph.pending.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))).toEqual([
+      "apps/demo/ui/E1.tsx",
+      "apps/demo/ui/E4.tsx",
+    ]);
   });
 
   test("a route's check that adds its own root leaves another route's failed root pending", async () => {

package/frontendBuild/cssBlockParser.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, test } from "bun:test";
+import { type CssBlock, CssBlockParser, type CssNode } from "./cssBlockParser";
+
+const blocksOf = (block: CssBlock) => block.nodes.filter((node): node is CssBlock => node.kind === "block");
+const declarationsOf = (block: CssBlock) =>
+  block.nodes.flatMap((node) => (node.kind === "declaration" ? [[node.property, node.value]] : []));
+
+const expectLinear = (run: () => unknown) => {
+  const started = performance.now();
+  run();
+  expect(performance.now() - started).toBeLessThan(1000);
+};
+
+describe("CssBlockParser.parse", () => {
+  test("reads consecutive blocks with their preludes and declarations", () => {
+    const root = CssBlockParser.parse(`a { --x: 1; } b { --y: 2 } c{--z:3}`);
+    expect(blocksOf(root).map((block) => block.prelude)).toEqual(["a", "b", "c"]);
+    expect(blocksOf(root).map(declarationsOf)).toEqual([[["--x", "1"]], [["--y", "2"]], [["--z", "3"]]]);
+  });
+
+  test("nests at-rules and nested rules, keeping a block's own declarations apart from its children's", () => {
+    const root = CssBlockParser.parse(
+      `@media (min-width: 1px) { :root { --a: 1; } } .card { color: red; &:hover { color: blue; } --b: 2; }`,
+    );
+    const [media, card] = blocksOf(root);
+    expect(media.atRule).toBe("@media");
+    expect(media.prelude).toBe("@media (min-width: 1px)");
+    expect(declarationsOf(blocksOf(media)[0])).toEqual([["--a", "1"]]);
+    expect(card.atRule).toBeNull();
+    expect(declarationsOf(card)).toEqual([
+      ["color", "red"],
+      ["--b", "2"],
+    ]);
+    expect(blocksOf(card).map((block) => block.prelude)).toEqual(["&:hover"]);
+  });
+
+  test("treats at-rule statements as neither blocks nor declarations", () => {
+    const root = CssBlockParser.parse(
+      `@source "./**/*";\n@import "tailwindcss";\n@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));\n:root { --a: 1; }`,
+    );
+    expect(root.nodes).toEqual([
+      { kind: "block", prelude: ":root", atRule: null, nodes: [{ kind: "declaration", property: "--a", value: "1" }] },
+    ]);
+  });
+
+  test("ignores braces, semicolons and comment markers inside strings, comments and escapes", () => {
+    const root = CssBlockParser.parse(
+      [
+        `/* :root { --commented: 1; } */`,
+        `.a::before { content: "} ; /* {"; --q: 'x;y'; }`,
+        `.w-\\[10px\\]\\{ { --escaped: 1; }`,
+        `.b { background: url(data:image/png;base64,AAAA); --after: 2; }`,
+      ].join("\n"),
+    );
+    expect(blocksOf(root).map((block) => block.prelude)).toEqual([".a::before", ".w-\\[10px\\]\\{", ".b"]);
+    expect(blocksOf(root).map(declarationsOf)).toEqual([
+      [
+        ["content", `"} ; /* {"`],
+        ["--q", "'x;y'"],
+      ],
+      [["--escaped", "1"]],
+      [
+        ["background", "url(data:image/png;base64,AAAA)"],
+        ["--after", "2"],
+      ],
+    ]);
+  });
+
+  test("drops comments from preludes and values", () => {
+    const root = CssBlockParser.parse(`/* lead */ :root /* mid */ , [data-theme="dark"] { --a: /* x */ #fff; }`);
+    const [block] = blocksOf(root);
+    expect(block.prelude).toBe(`:root  , [data-theme="dark"]`);
+    expect(declarationsOf(block)).toEqual([["--a", "#fff"]]);
+  });
+
+  test("closes what the input leaves open and tolerates a stray closing brace", () => {
+    const root = CssBlockParser.parse(`} :root { --a: 1; .x { --b: 2`);
+    const [rootBlock] = blocksOf(root);
+    expect(declarationsOf(rootBlock)).toEqual([["--a", "1"]]);
+    expect(declarationsOf(blocksOf(rootBlock)[0])).toEqual([["--b", "2"]]);
+    expect(CssBlockParser.parse(`.a { content: "unterminated\n--b: 2; }`).nodes).toHaveLength(1);
+    expect(CssBlockParser.parse(`.a { --b: 1 } /* unterminated`).nodes).toHaveLength(1);
+  });
+});
+
+describe("CssBlockParser.walk", () => {
+  test("visits in source order, passing each block's context to its children", () => {
+    const root = CssBlockParser.parse(
+      `.a { --x: 1; @media m { --y: 2; } --z: 3; } @theme { --skipped: 1; } .b { --w: 4 }`,
+    );
+    const visited: string[] = [];
+    CssBlockParser.walk(root, "", (node: CssNode, path: string) => {
+      if (node.kind === "declaration") {
+        visited.push(`${path}${node.property}`);
+        return null;
+      }
+      return node.atRule === "@theme" ? null : `${path}${node.prelude}>`;
+    });
+    expect(visited).toEqual([".a>--x", ".a>@media m>--y", ".a>--z", ".b>--w"]);
+  });
+
+  test("walks a deeply nested tree without recursion", () => {
+    const root = CssBlockParser.parse(`${"@media x{".repeat(100_000)}:root{--deep:1}`);
+    let found = "";
+    CssBlockParser.walk(root, true, (node) => {
+      if (node.kind === "declaration") found = node.property;
+      return true;
+    });
+    expect(found).toBe("--deep");
+  });
+});
+
+describe("CssBlockParser linear time", () => {
+  test("adversarial runs finish well under a second", () => {
+    expectLinear(() => CssBlockParser.parse(`}${" ".repeat(100_000)}`));
+    expectLinear(() => CssBlockParser.parse(`:root{${"--".repeat(100_000)}`));
+    expectLinear(() => CssBlockParser.parse("@theme".repeat(100_000)));
+    expectLinear(() => CssBlockParser.parse("/*".repeat(100_000)));
+    expectLinear(() => CssBlockParser.parse(`"${"\\".repeat(100_000)}`));
+    expectLinear(() => CssBlockParser.parse("(".repeat(100_000)));
+    expectLinear(() => CssBlockParser.parse(":root{--a:#fff}".repeat(100_000)));
+  });
+});

package/frontendBuild/cssBlockParser.ts

@@ -0,0 +1,132 @@
+export interface CssDeclaration {
+  kind: "declaration";
+  property: string;
+  value: string;
+}
+
+export interface CssBlock {
+  kind: "block";
+  prelude: string;
+  atRule: string | null;
+  nodes: CssNode[];
+}
+
+export type CssNode = CssDeclaration | CssBlock;
+
+export class CssBlockParser {
+  readonly #css: string;
+  readonly #stack: CssBlock[] = [{ kind: "block", prelude: "", atRule: null, nodes: [] }];
+  #pendingParts: string[] = [];
+  #segmentStart = 0;
+  #parenDepth = 0;
+
+  constructor(css: string) {
+    this.#css = css;
+  }
+
+  static parse(css: string): CssBlock {
+    return new CssBlockParser(css).#run();
+  }
+
+  static walk<T>(root: CssBlock, context: T, visit: (node: CssNode, context: T) => T | null) {
+    const stack = [{ nodes: root.nodes, idx: 0, context }];
+    while (stack.length > 0) {
+      const frame = stack[stack.length - 1];
+      const node = frame.nodes[frame.idx];
+      if (!node) {
+        stack.pop();
+        continue;
+      }
+      frame.idx += 1;
+      const childContext = visit(node, frame.context);
+      if (node.kind === "block" && childContext !== null)
+        stack.push({ nodes: node.nodes, idx: 0, context: childContext });
+    }
+  }
+
+  #run(): CssBlock {
+    const css = this.#css;
+    let idx = 0;
+    while (idx < css.length) {
+      const char = css[idx];
+      if (char === "/" && css[idx + 1] === "*") {
+        this.#pendingParts.push(css.slice(this.#segmentStart, idx));
+        const end = css.indexOf("*/", idx + 2);
+        idx = end === -1 ? css.length : end + 2;
+        this.#segmentStart = idx;
+        continue;
+      }
+      if (char === "\\") {
+        idx += 2;
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        idx = this.#skipString(idx);
+        continue;
+      }
+      if (char === "(") this.#parenDepth += 1;
+      else if (char === ")") this.#parenDepth = Math.max(0, this.#parenDepth - 1);
+      else if (char === "{") this.#openBlock(idx);
+      else if (char === "}") this.#closeBlock(idx);
+      //? A `;` inside parentheses belongs to the value, as in an unquoted `url(data:image/png;base64,…)`.
+      else if (char === ";" && this.#parenDepth === 0) this.#endStatement(idx);
+      idx += 1;
+    }
+    this.#endStatement(css.length);
+    return this.#stack[0];
+  }
+
+  get #current(): CssBlock {
+    return this.#stack[this.#stack.length - 1];
+  }
+
+  // An unterminated string ends at the newline, as the CSS tokenizer's bad-string does.
+  #skipString(start: number): number {
+    const css = this.#css;
+    const quote = css[start];
+    let idx = start + 1;
+    while (idx < css.length) {
+      const char = css[idx];
+      if (char === "\\") idx += 2;
+      else if (char === quote) return idx + 1;
+      else if (char === "\n") return idx;
+      else idx += 1;
+    }
+    return css.length;
+  }
+
+  #takeSegment(end: number): string {
+    const text = this.#pendingParts.join("") + this.#css.slice(this.#segmentStart, end);
+    this.#pendingParts = [];
+    this.#segmentStart = end + 1;
+    return text.trim();
+  }
+
+  #openBlock(idx: number) {
+    const prelude = this.#takeSegment(idx);
+    const block: CssBlock = { kind: "block", prelude, atRule: CssBlockParser.#atRuleOf(prelude), nodes: [] };
+    this.#current.nodes.push(block);
+    this.#stack.push(block);
+    this.#parenDepth = 0;
+  }
+
+  #closeBlock(idx: number) {
+    this.#endStatement(idx);
+    if (this.#stack.length > 1) this.#stack.pop();
+    this.#parenDepth = 0;
+  }
+
+  #endStatement(idx: number) {
+    const text = this.#takeSegment(idx);
+    if (!text || text.startsWith("@")) return;
+    const colon = text.indexOf(":");
+    if (colon <= 0) return;
+    const property = text.slice(0, colon).trim();
+    if (!/^[\w-]+$/.test(property)) return;
+    this.#current.nodes.push({ kind: "declaration", property, value: text.slice(colon + 1).trim() });
+  }
+
+  static #atRuleOf(prelude: string): string | null {
+    return prelude.match(/^@[\w-]+/)?.[0].toLowerCase() ?? null;
+  }
+}

package/frontendBuild/cssCandidateCache.test.ts

@@ -23,6 +23,22 @@ describe("CssCandidateCache token extraction", () => {
     expect(candidates).not.toContain("_td");
   });
 
+  test("keeps a bracket nested one level inside another whole, rather than cutting it at the inner `]`", async () => {
+    const candidates = await scan(
+      `const c = "hidden [[data-theme=light]_&]:block has-[[aria-expanded=true]]:opacity-100 [&_[data-x]]:p-2 [&:has([data-state=open])]:p-1";`,
+    );
+    expect(candidates).toEqual(
+      expect.arrayContaining([
+        "[[data-theme=light]_&]:block",
+        "has-[[aria-expanded=true]]:opacity-100",
+        "[&_[data-x]]:p-2",
+        "[&:has([data-state=open])]:p-1",
+      ]),
+    );
+    expect(candidates).not.toContain("[[data-theme=light]_");
+    expect(candidates).not.toContain("[&_[data-x]");
+  });
+
   test("keeps Tailwind v4's variable shorthand whole, and leaves a call's argument its own candidate", async () => {
     const candidates = await scan(
       `const c = "max-md:top-(--keyboard-top) min-h-(--x) bg-(color:--brand)/50"; cn("flex"); fn(value);`,

package/frontendBuild/cssCandidateCache.ts

@@ -1,10 +1,12 @@
 import { stat } from "node:fs/promises";
 
-// The leading `[` alternation keeps arbitrary variants (`[&_td]:px-3`) whole. Brackets hold no whitespace: a labelled
-// tuple type scanned as a class compiles to a rule lightningcss cannot parse, and it then drops every variant rule.
-// Parentheses pass only as Tailwind v4's variable shorthand, `(--x)` or `(length:--x)`, so `cn("flex")` still yields
-// `flex` on its own.
-const CANDIDATE_RE = /-?(?:[\w@]|\[[^\]\s]+\])[\w:/.-]*(?:(?:\[[^\]\s]+\]|\((?:[a-z-]+:)?--[^)\s]+\))[\w:/.-]*)*/g;
+// The leading `[` alternation keeps arbitrary variants (`[&_td]:px-3`) whole, and a bracket may hold one nested
+// bracket (`[&_[data-slot=x]]:p-2`, `has-[[aria-expanded=true]]:x`), or the candidate is cut at the inner `]` and the
+// rule silently never compiles. Brackets hold no whitespace: a labelled tuple type scanned as a class compiles to a
+// rule lightningcss cannot parse, and it then drops every variant rule. Parentheses pass only as Tailwind v4's
+// variable shorthand, `(--x)` or `(length:--x)`, so `cn("flex")` still yields `flex` on its own.
+const CANDIDATE_RE =
+  /-?(?:[\w@]|\[(?:[^[\]\s]|\[[^[\]\s]+\])+\])[\w:/.-]*(?:(?:\[(?:[^[\]\s]|\[[^[\]\s]+\])+\]|\((?:[a-z-]+:)?--[^)\s]+\))[\w:/.-]*)*/g;
 
 interface CachedFile {
   mtimeMs: number;
@@ -20,7 +22,7 @@ interface CacheFile {
 /** Tailwind candidates per source file, on disk: the batch worker that compiles CSS exits before the next save. */
 export class CssCandidateCache {
   // Bump when the token regex or the entry shape changes, so stale extractions are not reused.
-  static readonly #version = 4;
+  static readonly #version = 5;
   readonly #path: string;
   readonly #entries = new Map<string, CachedFile>();
   #dirty = false;

package/frontendBuild/cssCompiler.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, test } from "bun:test";
+import { declaredCustomProperties } from "./cssCompiler";
+
+describe("declaredCustomProperties", () => {
+  test("names what the regex-based version named", () => {
+    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",
+    ]);
+    expect(declaredCustomProperties(":root { --a : 1; --b:2 }")).toEqual(["--a", "--b"]);
+    expect(declaredCustomProperties(".a{--x:1}.b{--y:2}.c{--z:3}")).toEqual(["--x", "--y", "--z"]);
+    expect(declaredCustomProperties("--top: 1;")).toEqual(["--top"]);
+    expect(declaredCustomProperties("@property --percentage { syntax: '<number>'; inherits: false; }")).toEqual([]);
+  });
+
+  test("keeps source order across nested rules", () => {
+    expect(declaredCustomProperties(".x { --a: 1; .y { --b: 2; } --c: 3; }")).toEqual(["--a", "--b", "--c"]);
+  });
+
+  test("skips a whole @theme block, nested blocks included", () => {
+    const css = `@theme { --animate-spin: spin 1s; @keyframes spin { to { --inner: 1; } } --color-after: red; } :root { --kept: 1; }`;
+    expect(declaredCustomProperties(css)).toEqual(["--kept"]);
+  });
+
+  test("ignores comments and strings, so a comment mentioning @theme hides nothing", () => {
+    const css = [
+      "/* `@theme` extension does not work from a lib, so these are plain variables. */",
+      ":root { --kakao: #fee500; }",
+      "/* :root { --commented: 1; } */",
+      `.a::before { content: "--quoted: 1"; }`,
+    ].join("\n");
+    expect(declaredCustomProperties(css)).toEqual(["--kakao"]);
+  });
+
+  test("adversarial input finishes well under a second", () => {
+    for (const css of [
+      "@theme".repeat(100_000),
+      "@theme{".repeat(100_000),
+      `@theme ${"x".repeat(100_000)}`,
+      `:root{${"--".repeat(100_000)}`,
+      " --a".repeat(100_000),
+      "@media x{".repeat(100_000),
+    ]) {
+      const started = performance.now();
+      declaredCustomProperties(css);
+      expect(performance.now() - started).toBeLessThan(1000);
+    }
+  });
+});

package/frontendBuild/cssCompiler.ts

@@ -6,6 +6,7 @@ import type { App } from "../commandDecorators";
 import { BarrelAnalyzer } from "../transforms/barrelAnalyzer";
 import { createTsconfigPackageResolver, rewriteBarrelImports } from "../transforms/barrelImportsPlugin";
 import { CsrEntryFiles } from "./csrEntryFiles";
+import { CssBlockParser } from "./cssBlockParser";
 import { CssCandidateCache } from "./cssCandidateCache";
 import { CssImportResolver } from "./cssImportResolver";
 
@@ -387,10 +388,13 @@ export function isIgnoredNodeModuleSource(filePath: string): boolean {
 
 /** Skips `@theme` blocks: Tailwind emits those variables only when a utility uses one. */
 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,
-  );
+  const names = new Set<string>();
+  CssBlockParser.walk(CssBlockParser.parse(css), true, (node) => {
+    if (node.kind === "block") return node.atRule === "@theme" ? null : true;
+    if (node.property.startsWith("--")) names.add(node.property);
+    return null;
+  });
+  return [...names];
 }
 
 export function getPageKeyBasePath(pageKey: string, basePaths: string[]): string | null {

package/frontendBuild/fontOptimizer.ts

@@ -425,7 +425,8 @@ export class FontOptimizer {
       if (!isDir) continue;
       const filePaths: string[] = [];
       for await (const filePath of glob.scan({ cwd: root, absolute: true })) filePaths.push(filePath);
-      for (const filePath of filePaths.sort()) parts.push(await Bun.file(filePath).text());
+      for (const filePath of filePaths.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0)))
+        parts.push(await Bun.file(filePath).text());
     }
     return parts.join("");
   }

package/frontendBuild/frontendBuild.test.ts

@@ -195,6 +195,20 @@ describe("CsrArtifactBuilder", () => {
     );
   });
 
+  test("blanks embedded bodies the way the HTML tokenizer closes them", () => {
+    const blank = (html: string) => CsrArtifactBuilder.blankEmbeddedContent(html).trim();
+
+    expect(blank("<script>a</script >")).toBe("");
+    expect(blank("<script>a</script\t\n bar>")).toBe("");
+    expect(blank("<SCRIPT>a</SCRIPT>")).toBe("");
+    expect(blank("<style>a</style foo>")).toBe("");
+    expect(blank("<!-- a --!></head>")).toBe("</head>");
+    expect(blank("<script>a</scripts></head>")).toBe("");
+    expect(blank("<!-- a </head>")).toBe("");
+    expect(CsrArtifactBuilder.blankEmbeddedContent(`<!--${"<!--".repeat(50_000)}`)).toHaveLength(200_004);
+    expect(CsrArtifactBuilder.blankEmbeddedContent(`<script>${"</script\t".repeat(50_000)}`)).toHaveLength(450_008);
+  });
+
   test("gives each basePath its own routes plus the routes outside every basePath", () => {
     const entries = [
       { key: "./_layout.tsx", moduleAbsPath: "/repo/page/_layout.tsx" },