@typestyles/build-runner 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,7 +1,478 @@
-// src/index.ts
-import { build as esbuildBuild } from "esbuild";
-import { existsSync, unlinkSync, writeFileSync } from "fs";
+// src/discover.ts
+import { existsSync } from "fs";
+import { resolve as resolvePath } from "path";
+var DEFAULT_EXTRACT_MODULE_BASES = [
+  "src/typestyles-entry",
+  "src/typestyles",
+  "src/styles/index",
+  "src/styles",
+  "styles/typestyles-entry",
+  "styles/typestyles"
+];
+var DISCOVERY_EXTENSIONS = [".ts", ".tsx", ".js", ".mjs"];
+var DEFAULT_EXTRACT_MODULE_CANDIDATES = DEFAULT_EXTRACT_MODULE_BASES.map(
+  (base) => `${base}.ts`
+);
+function discoverDefaultExtractModules(root) {
+  const absRoot = resolvePath(root);
+  for (const base of DEFAULT_EXTRACT_MODULE_BASES) {
+    for (const ext of DISCOVERY_EXTENSIONS) {
+      const rel = `${base}${ext}`;
+      if (existsSync(resolvePath(absRoot, rel))) {
+        return [rel.replace(/\\/g, "/")];
+      }
+    }
+  }
+  return [];
+}
+
+// src/namespaces.ts
+var STYLES_COMPONENT_RE = /styles\.component\(\s*['"]([^'"]+)['"]/g;
+var STYLES_CLASS_RE = /styles\.class\(\s*['"]([^'"]+)['"]/g;
+var TOKENS_CREATE_RE = /tokens\.create\(\s*['"]([^'"]+)['"]/g;
+var CREATE_THEME_RE = /(?:tokens\.)?createTheme\(\s*['"]([^'"]+)['"]/g;
+var KEYFRAMES_CREATE_RE = /keyframes\.create\(\s*['"]([^'"]+)['"]/g;
+var GLOBAL_STYLE_RE = /global\.style\(\s*['"]([^'"]+)['"]/g;
+var GLOBAL_FONT_FACE_RE = /global\.fontFace\(\s*['"]([^'"]+)['"]/g;
+var TYPESTYLES_IMPORT_RE = /(?:from\s+|import\s+|require\s*\(\s*)['"]typestyles['"]/;
+function extractNamespaces(code) {
+  const keys = [];
+  const prefixes = [];
+  for (const match of code.matchAll(STYLES_COMPONENT_RE)) {
+    prefixes.push(`.${match[1]}-`);
+  }
+  for (const match of code.matchAll(STYLES_CLASS_RE)) {
+    prefixes.push(`.${match[1]}-`);
+  }
+  for (const match of code.matchAll(TOKENS_CREATE_RE)) {
+    keys.push(`tokens:${match[1]}`);
+  }
+  for (const match of code.matchAll(CREATE_THEME_RE)) {
+    keys.push(`theme:${match[1]}`);
+  }
+  for (const match of code.matchAll(KEYFRAMES_CREATE_RE)) {
+    keys.push(`keyframes:${match[1]}`);
+  }
+  for (const match of code.matchAll(GLOBAL_STYLE_RE)) {
+    prefixes.push(match[1]);
+  }
+  for (const match of code.matchAll(GLOBAL_FONT_FACE_RE)) {
+    prefixes.push(`font-face:${match[1]}`);
+  }
+  return { keys, prefixes };
+}
+function reportDuplicateNamespaces(moduleNamespaces, id, prefixes, reporter) {
+  for (const [otherId, other] of moduleNamespaces) {
+    if (otherId === id) continue;
+    for (const prefix of prefixes) {
+      if (other.prefixes.includes(prefix)) {
+        const ns = prefix.slice(1, -1);
+        reporter.error(
+          `[typestyles] Style namespace "${ns}" is also used in ${otherId}. Duplicate namespaces cause class name collisions. Use a distinct name or isolate with createStyles({ scopeId: fileScopeId(import.meta) }).`
+        );
+      }
+    }
+  }
+}
+
+// src/resolve-extract.ts
+function resolveExtractModules(root, extract) {
+  if (extract?.modules !== void 0) {
+    return extract.modules;
+  }
+  return discoverDefaultExtractModules(root);
+}
+function resolveExtractMode(explicitMode, resolvedModules) {
+  return explicitMode ?? (resolvedModules.length > 0 ? "build" : "runtime");
+}
+
+// src/verify.ts
+import { existsSync as existsSync2, readFileSync } from "fs";
 import { resolve } from "path";
+
+// src/manifest.ts
+function isManifestV2(manifest) {
+  return manifest.version === 2;
+}
+function normalizeRoutePath(routePath) {
+  if (!routePath || routePath === "/") return "/";
+  const trimmed = routePath.replace(/\/+$/, "");
+  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+}
+
+// src/verify.ts
+var VerifyTypestylesBuildError = class extends Error {
+  constructor(message, code) {
+    super(`[typestyles:verify] ${message}`);
+    this.name = "VerifyTypestylesBuildError";
+    this.code = code;
+  }
+};
+function fail(message, code) {
+  throw new VerifyTypestylesBuildError(message, code);
+}
+function readManifest(path) {
+  let parsed;
+  try {
+    parsed = JSON.parse(readFileSync(path, "utf8"));
+  } catch {
+    fail(`Invalid JSON in ${path}.`, "manifest-invalid-json");
+  }
+  if (typeof parsed !== "object" || parsed === null || !("version" in parsed) || !("css" in parsed)) {
+    fail(`Manifest at ${path} is missing required fields.`, "manifest-invalid-shape");
+  }
+  const version = parsed.version;
+  if (version !== 1 && version !== 2) {
+    fail(`Unsupported manifest version ${String(version)}.`, "manifest-version-unsupported");
+  }
+  const manifest = parsed;
+  if (isManifestV2(manifest) && typeof manifest.routes !== "object") {
+    fail(`Manifest v2 at ${path} is missing routes.`, "manifest-invalid-shape");
+  }
+  return manifest;
+}
+function verifyTypestylesBuild(options) {
+  const {
+    root,
+    cssFile,
+    manifestFile,
+    manifestCssPath,
+    manifestVersion = 1,
+    minBytes,
+    requiredCssSubstrings = [],
+    minRouteEntries
+  } = options;
+  const cssPath = resolve(root, cssFile);
+  if (!existsSync2(cssPath)) {
+    fail(`Missing ${cssPath} \u2014 run your TypeStyles build step first.`, "css-missing");
+  }
+  const css = readFileSync(cssPath, "utf8");
+  const cssBytes = Buffer.byteLength(css, "utf8");
+  const min = minBytes ?? 1;
+  if (cssBytes < min) {
+    fail(
+      `CSS file unexpectedly small (${cssBytes} bytes, expected at least ${min}).`,
+      "css-too-small"
+    );
+  }
+  for (const substring of requiredCssSubstrings) {
+    if (!css.includes(substring)) {
+      fail(`Expected CSS to contain ${JSON.stringify(substring)}.`, "css-missing-substring");
+    }
+  }
+  const manifestRel = manifestFile === false ? void 0 : manifestFile;
+  if (!manifestRel) {
+    return { cssPath, cssBytes };
+  }
+  const manifestPath = resolve(root, manifestRel);
+  if (!existsSync2(manifestPath)) {
+    fail(`Missing ${manifestPath}.`, "manifest-missing");
+  }
+  const manifest = readManifest(manifestPath);
+  if (manifest.version !== manifestVersion) {
+    fail(
+      `Expected manifest version ${manifestVersion}, got ${manifest.version}.`,
+      "manifest-version-mismatch"
+    );
+  }
+  const expectedCssPath = manifestCssPath ?? cssFile;
+  if (manifest.css !== expectedCssPath) {
+    fail(
+      `Expected manifest.css ${JSON.stringify(expectedCssPath)}, got ${JSON.stringify(manifest.css)}.`,
+      "manifest-css-mismatch"
+    );
+  }
+  if (isManifestV2(manifest)) {
+    const routeCount = Object.keys(manifest.routes).length;
+    if (minRouteEntries !== void 0 && routeCount < minRouteEntries) {
+      fail(
+        `Expected at least ${minRouteEntries} route CSS entries, got ${routeCount}.`,
+        "manifest-routes-too-few"
+      );
+    }
+    for (const [routePath, entry] of Object.entries(manifest.routes)) {
+      const routeCssPath = resolve(root, entry.css);
+      if (!existsSync2(routeCssPath)) {
+        fail(`Missing route CSS for ${routePath} at ${routeCssPath}.`, "route-css-missing");
+      }
+      if (Buffer.byteLength(readFileSync(routeCssPath, "utf8"), "utf8") < 1) {
+        fail(`Route CSS for ${routePath} is empty.`, "route-css-empty");
+      }
+    }
+  }
+  return {
+    cssPath,
+    cssBytes,
+    manifestPath,
+    manifestVersion: manifest.version
+  };
+}
+
+// src/next-routes.ts
+import { existsSync as existsSync3, readdirSync, statSync } from "fs";
+import { dirname, join, relative, resolve as resolve2 } from "path";
+var PAGE_BASENAMES = /* @__PURE__ */ new Set(["page.tsx", "page.ts", "page.jsx", "page.js"]);
+var LAYOUT_BASENAMES = /* @__PURE__ */ new Set(["layout.tsx", "layout.ts", "layout.jsx", "layout.js"]);
+function normalizeRelPath(root, absPath) {
+  return relative(root, absPath).replace(/\\/g, "/");
+}
+function isRouteGroupSegment(segment) {
+  return segment.startsWith("(") && segment.endsWith(")");
+}
+function pageRelPathToRoutePath(pageRelPath) {
+  const dir = dirname(pageRelPath).replace(/\\/g, "/");
+  if (dir === "." || dir === "") return "/";
+  const segments = dir.split("/").filter((segment) => segment.length > 0 && !isRouteGroupSegment(segment));
+  return segments.length === 0 ? "/" : `/${segments.join("/")}`;
+}
+function walkForPages(appAbs, currentRel, pages) {
+  const currentAbs = join(appAbs, currentRel);
+  let entries;
+  try {
+    entries = readdirSync(currentAbs);
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    const entryRel = currentRel ? join(currentRel, entry) : entry;
+    const entryAbs = join(appAbs, entryRel);
+    let stat;
+    try {
+      stat = statSync(entryAbs);
+    } catch {
+      continue;
+    }
+    if (stat.isDirectory()) {
+      walkForPages(appAbs, entryRel, pages);
+      continue;
+    }
+    if (PAGE_BASENAMES.has(entry)) {
+      pages.push(entryRel.replace(/\\/g, "/"));
+    }
+  }
+}
+function collectLayoutChain(appAbs, pageRelPath) {
+  const layouts = [];
+  const segments = dirname(pageRelPath).replace(/\\/g, "/").split("/");
+  const chainDirs = [""];
+  for (const segment of segments) {
+    if (!segment || segment === ".") continue;
+    const parent = chainDirs[chainDirs.length - 1];
+    chainDirs.push(parent ? `${parent}/${segment}` : segment);
+  }
+  for (const dir of chainDirs) {
+    const dirAbs = dir ? join(appAbs, dir) : appAbs;
+    for (const layoutName of LAYOUT_BASENAMES) {
+      const layoutAbs = join(dirAbs, layoutName);
+      if (existsSync3(layoutAbs)) {
+        layouts.push(join(dir, layoutName).replace(/\\/g, "/"));
+        break;
+      }
+    }
+  }
+  return layouts;
+}
+function discoverNextAppRoutes(root, appDir = "app") {
+  const appAbs = resolve2(root, appDir);
+  if (!existsSync3(appAbs)) return [];
+  const pageRelPaths = [];
+  walkForPages(appAbs, "", pageRelPaths);
+  return pageRelPaths.map((pageRelPath) => {
+    const pageFile = normalizeRelPath(root, join(appAbs, pageRelPath));
+    const layoutFiles = collectLayoutChain(appAbs, pageRelPath).map(
+      (layoutRel) => normalizeRelPath(root, join(appAbs, layoutRel))
+    );
+    return {
+      routePath: pageRelPathToRoutePath(pageRelPath),
+      pageFile,
+      layoutFiles
+    };
+  }).sort((a, b) => a.routePath.localeCompare(b.routePath));
+}
+
+// src/trace-imports.ts
+import { build as esbuildBuild } from "esbuild";
+import { existsSync as existsSync4, readFileSync as readFileSync2 } from "fs";
+import { join as join2, resolve as resolve3 } from "path";
+import { pathToFileURL } from "url";
+var EXTERNAL_PREFIXES = [
+  "react",
+  "react-dom",
+  "react/",
+  "react-dom/",
+  "next",
+  "next/",
+  "server-only",
+  "client-only",
+  "typestyles",
+  "typestyles/"
+];
+function isExternalBareImport(specifier) {
+  if (specifier.startsWith("node:")) return true;
+  return EXTERNAL_PREFIXES.some(
+    (prefix) => specifier === prefix || specifier.startsWith(`${prefix}/`)
+  );
+}
+function isExternalAssetPath(path, importer, namespace) {
+  if (path.endsWith(".css")) return true;
+  const fromCss = namespace === "css" || importer.endsWith(".css");
+  if (fromCss && path.startsWith("/") && !path.startsWith("//")) {
+    return true;
+  }
+  return false;
+}
+function fileImportsTypestyles(absPath) {
+  if (!existsSync4(absPath)) return false;
+  try {
+    return TYPESTYLES_IMPORT_RE.test(readFileSync2(absPath, "utf8"));
+  } catch {
+    return false;
+  }
+}
+async function traceTypestylesModules(root, entryFiles) {
+  const absEntries = entryFiles.map((file) => resolve3(root, file));
+  const missing = absEntries.filter((file) => !existsSync4(file));
+  if (missing.length > 0) {
+    throw new Error(
+      `[typestyles] Cannot trace imports; missing entry file(s): ${missing.join(", ")}`
+    );
+  }
+  const tsconfigPath = join2(root, "tsconfig.json");
+  const result = await esbuildBuild({
+    entryPoints: absEntries,
+    bundle: true,
+    write: false,
+    outdir: root,
+    metafile: true,
+    platform: "neutral",
+    format: "esm",
+    logLevel: "silent",
+    absWorkingDir: root,
+    ...existsSync4(tsconfigPath) ? { tsconfig: tsconfigPath } : {},
+    plugins: [
+      {
+        name: "typestyles-trace-imports",
+        setup(build) {
+          build.onResolve({ filter: /.*/ }, (args) => {
+            if (isExternalAssetPath(args.path, args.importer, args.namespace)) {
+              return { path: args.path, external: true };
+            }
+            if (args.path.startsWith(".")) {
+              return null;
+            }
+            if (isExternalBareImport(args.path)) {
+              return { path: args.path, external: true };
+            }
+            return null;
+          });
+        }
+      }
+    ]
+  });
+  const inputs = result.metafile?.inputs ?? {};
+  const traced = /* @__PURE__ */ new Set();
+  for (const inputPath of Object.keys(inputs)) {
+    const absPath = resolve3(root, inputPath);
+    if (!fileImportsTypestyles(absPath)) continue;
+    traced.add(inputPath.replace(/\\/g, "/"));
+  }
+  return [...traced].sort();
+}
+function createModuleLoader(root, modulePath) {
+  const abs = resolve3(root, modulePath);
+  const href = pathToFileURL(abs).href;
+  return () => import(href);
+}
+
+// src/route-css.ts
+import { mkdir, writeFile } from "fs/promises";
+import { dirname as dirname2, resolve as resolve4 } from "path";
+function routePathToCssFile(routePath) {
+  if (routePath === "/") return "index.css";
+  const slug = routePath.slice(1).replace(/^\[|\]$/g, "").replace(/[^\w.-]+/g, "-");
+  return `${slug || "route"}.css`;
+}
+function uniqueModules(...groups) {
+  return [...new Set(groups.flat())].sort();
+}
+async function collectAndWriteRouteCss(options) {
+  const {
+    root,
+    sharedModules,
+    appDir = "app",
+    routeCssOutDir = "app/_typestyles/routes",
+    collectCss
+  } = options;
+  const routes = discoverNextAppRoutes(root, appDir);
+  if (routes.length === 0) {
+    return { routes: {} };
+  }
+  const manifestRoutes = {};
+  for (const route of routes) {
+    const entryFiles = uniqueModules(route.layoutFiles, [route.pageFile]);
+    const routeModules = await traceTypestylesModules(root, entryFiles);
+    const modules = uniqueModules(sharedModules, routeModules);
+    const loaders = modules.map((mod) => createModuleLoader(root, mod));
+    const css = await collectCss(loaders);
+    const cssFileName = routePathToCssFile(route.routePath);
+    const cssRel = `${routeCssOutDir.replace(/\\/g, "/")}/${cssFileName}`;
+    const cssAbs = resolve4(root, cssRel);
+    await mkdir(dirname2(cssAbs), { recursive: true });
+    await writeFile(cssAbs, css, "utf8");
+    manifestRoutes[route.routePath] = { css: cssRel };
+  }
+  return { routes: manifestRoutes };
+}
+function buildManifestV2(cssOutFile, routeEntries) {
+  return {
+    version: 2,
+    css: cssOutFile,
+    routes: routeEntries
+  };
+}
+
+// src/route-css-read.ts
+import { existsSync as existsSync5, readFileSync as readFileSync3 } from "fs";
+import { resolve as resolve5 } from "path";
+function readTypestylesManifest(root, manifestFile = "app/typestyles.manifest.json") {
+  const manifestPath = resolve5(root, manifestFile);
+  if (!existsSync5(manifestPath)) {
+    throw new Error(`[typestyles] Missing manifest at ${manifestPath}.`);
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(readFileSync3(manifestPath, "utf8"));
+  } catch {
+    throw new Error(`[typestyles] Invalid JSON in ${manifestPath}.`);
+  }
+  if (typeof parsed !== "object" || parsed === null || !("version" in parsed) || !("css" in parsed)) {
+    throw new Error(`[typestyles] Manifest at ${manifestPath} is missing required fields.`);
+  }
+  return parsed;
+}
+function readCssFile(root, cssRelPath) {
+  const cssPath = resolve5(root, cssRelPath);
+  if (!existsSync5(cssPath)) {
+    throw new Error(`[typestyles] Missing CSS file at ${cssPath}.`);
+  }
+  return readFileSync3(cssPath, "utf8");
+}
+function getRouteCss(routePath, options) {
+  const manifest = readTypestylesManifest(options.root, options.manifestFile);
+  const normalized = normalizeRoutePath(routePath);
+  if (isManifestV2(manifest)) {
+    const routeEntry = manifest.routes[normalized];
+    if (routeEntry) {
+      return readCssFile(options.root, routeEntry.css);
+    }
+  }
+  return readCssFile(options.root, manifest.css);
+}
+
+// src/index.ts
+import { build as esbuildBuild2 } from "esbuild";
+import { existsSync as existsSync6, unlinkSync, writeFileSync } from "fs";
+import { resolve as resolve6 } from "path";
 import { spawnSync } from "child_process";
 function toImportPath(modulePath) {
   const normalized = modulePath.replace(/\\/g, "/");
@@ -16,7 +487,7 @@ async function runTypestylesBuild({
 }) {
   if (!modules.length) return "";
   const importLines = modules.map((mod) => `import ${JSON.stringify(toImportPath(mod))};`).join("\n");
-  const bundleResult = await esbuildBuild({
+  const bundleResult = await esbuildBuild2({
     write: false,
     bundle: true,
     platform: "node",
@@ -34,7 +505,7 @@ async function runTypestylesBuild({
   if (!bundledCode) {
     throw new Error("[typestyles] Failed to produce extraction bundle.");
   }
-  const scriptPath = resolve(root, `.typestyles-extract-${process.pid}.cjs`);
+  const scriptPath = resolve6(root, `.typestyles-extract-${process.pid}.cjs`);
   const script = `${bundledCode}
 process.stdout.write(require('typestyles').getRegisteredCss());
 `;
@@ -56,7 +527,7 @@ ${result.stderr || result.stdout || "unknown error"}`
     }
     return result.stdout ?? "";
   } finally {
-    if (existsSync(scriptPath)) {
+    if (existsSync6(scriptPath)) {
       try {
         unlinkSync(scriptPath);
       } catch {
@@ -65,5 +536,25 @@ ${result.stderr || result.stdout || "unknown error"}`
   }
 }
 export {
-  runTypestylesBuild
+  DEFAULT_EXTRACT_MODULE_CANDIDATES,
+  TYPESTYLES_IMPORT_RE,
+  VerifyTypestylesBuildError,
+  buildManifestV2,
+  collectAndWriteRouteCss,
+  createModuleLoader,
+  discoverDefaultExtractModules,
+  discoverNextAppRoutes,
+  extractNamespaces,
+  getRouteCss,
+  isManifestV2,
+  normalizeRoutePath,
+  pageRelPathToRoutePath,
+  readCssFile,
+  readTypestylesManifest,
+  reportDuplicateNamespaces,
+  resolveExtractMode,
+  resolveExtractModules,
+  runTypestylesBuild,
+  traceTypestylesModules,
+  verifyTypestylesBuild
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typestyles/build-runner",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Shared module execution utilities for typestyles build integrations",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -28,16 +28,18 @@
     "@types/node": "^25.2.1",
     "eslint": "^9.39.2",
     "tsup": "^8.0.0",
-    "typescript": "^5.4.0"
+    "typescript": "^5.4.0",
+    "vitest": "^3.0.0"
   },
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/dbanksdesign/typestyles",
+    "url": "https://github.com/type-styles/typestyles",
     "directory": "packages/build-runner"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "test": "vitest run",
     "lint": "eslint .",
     "typecheck": "tsc --noEmit"
   }