veryfront 0.1.26 → 0.1.28

package/src/src/rendering/orchestrator/css-candidate-manifest.ts

@@ -0,0 +1,176 @@
+import { extractCandidates } from "../../html/styles-builder/tailwind-compiler.js";
+import { getRouteModulePaths } from "../../modules/manifest/route-module-manifest.js";
+import { rendererLogger } from "../../utils/index.js";
+
+interface SourceFileLike {
+  path: string;
+  content?: string;
+}
+
+interface CandidateManifest {
+  fileCandidates: Map<string, Set<string>>;
+  allCandidates: Set<string>;
+  builtAt: number;
+}
+
+interface RouteCandidateOptions {
+  projectScope: string;
+  projectVersion: string;
+  projectDir: string;
+  routeKey: string;
+  routeFilePaths: string[];
+  files: SourceFileLike[];
+  developmentMode: boolean;
+}
+
+const logger = rendererLogger.component("css-candidate-manifest");
+const SOURCE_EXTENSIONS = [".tsx", ".jsx", ".mdx", ".ts", ".js"];
+const DEV_MANIFEST_TTL_MS = 2000;
+
+const manifestCache = new Map<string, CandidateManifest>();
+const routeCandidateCache = new Map<string, Set<string>>();
+
+function normalizePath(path: string): string {
+  return path.replace(/\\/g, "/").replace(/\/{2,}/g, "/");
+}
+
+function toRelativeProjectPath(path: string, projectDir: string): string {
+  const normalized = normalizePath(path);
+  const normalizedProjectDir = normalizePath(projectDir).replace(/\/+$/, "");
+  if (normalized.startsWith(normalizedProjectDir)) {
+    return normalized.slice(normalizedProjectDir.length).replace(/^\/+/, "");
+  }
+  return normalized.replace(/^\/+/, "");
+}
+
+function buildManifestCacheKey(projectScope: string, projectVersion: string): string {
+  return `${projectScope}:${projectVersion}`;
+}
+
+function shouldRebuildManifest(
+  existing: CandidateManifest | undefined,
+  developmentMode: boolean,
+): boolean {
+  if (!existing) return true;
+  if (!developmentMode) return false;
+  return (Date.now() - existing.builtAt) > DEV_MANIFEST_TTL_MS;
+}
+
+function buildSourceCandidatePaths(modulePath: string): string[] {
+  const normalized = normalizePath(modulePath).replace(/^\/+/, "").replace(/^_vf_modules\//, "");
+  if (!normalized.endsWith(".js")) return [normalized];
+  const withoutJs = normalized.slice(0, -3);
+  return [
+    `${withoutJs}.tsx`,
+    `${withoutJs}.ts`,
+    `${withoutJs}.jsx`,
+    `${withoutJs}.mdx`,
+    `${withoutJs}.js`,
+  ];
+}
+
+function buildCandidateManifest(files: SourceFileLike[], projectDir: string): CandidateManifest {
+  const fileCandidates = new Map<string, Set<string>>();
+  const allCandidates = new Set<string>();
+
+  for (const file of files) {
+    if (!file.content) continue;
+    if (!SOURCE_EXTENSIONS.some((ext) => file.path.endsWith(ext))) continue;
+
+    const candidates = new Set(extractCandidates(file.content));
+    const relativePath = toRelativeProjectPath(file.path, projectDir);
+    const absolutePath = normalizePath(file.path);
+
+    fileCandidates.set(relativePath, candidates);
+    fileCandidates.set(absolutePath, candidates);
+
+    for (const cls of candidates) allCandidates.add(cls);
+  }
+
+  return { fileCandidates, allCandidates, builtAt: Date.now() };
+}
+
+function addCandidatesForPath(
+  target: Set<string>,
+  manifest: CandidateManifest,
+  path: string,
+  projectDir: string,
+): void {
+  const absolutePath = normalizePath(path);
+  const relativePath = toRelativeProjectPath(path, projectDir);
+  const candidates = manifest.fileCandidates.get(absolutePath) ??
+    manifest.fileCandidates.get(relativePath);
+  if (!candidates) return;
+  for (const cls of candidates) target.add(cls);
+}
+
+/**
+ * Resolve route-scoped Tailwind candidates from a precomputed per-project manifest.
+ */
+export function getRouteCandidates(options: RouteCandidateOptions): Set<string> {
+  const manifestKey = buildManifestCacheKey(options.projectScope, options.projectVersion);
+  const existingManifest = manifestCache.get(manifestKey);
+  const manifest = shouldRebuildManifest(existingManifest, options.developmentMode)
+    ? buildCandidateManifest(options.files, options.projectDir)
+    : existingManifest!;
+
+  if (manifest !== existingManifest) {
+    manifestCache.set(manifestKey, manifest);
+
+    // Clear route subsets when project-level file manifest is rebuilt.
+    for (const key of routeCandidateCache.keys()) {
+      if (key.startsWith(`${manifestKey}:`)) routeCandidateCache.delete(key);
+    }
+  }
+
+  const routeCacheKey = `${manifestKey}:${options.routeKey}`;
+  const cachedRoute = routeCandidateCache.get(routeCacheKey);
+  if (cachedRoute) return new Set(cachedRoute);
+
+  const routeCandidates = new Set<string>();
+
+  for (const path of options.routeFilePaths) {
+    addCandidatesForPath(routeCandidates, manifest, path, options.projectDir);
+  }
+
+  for (const modulePath of getRouteModulePaths(options.projectScope, options.routeKey)) {
+    for (const sourcePath of buildSourceCandidatePaths(modulePath)) {
+      addCandidatesForPath(routeCandidates, manifest, sourcePath, options.projectDir);
+    }
+  }
+
+  // Fallback to full-project candidates for correctness if route manifest is incomplete.
+  if (routeCandidates.size === 0) {
+    for (const cls of manifest.allCandidates) routeCandidates.add(cls);
+  }
+
+  routeCandidateCache.set(routeCacheKey, routeCandidates);
+
+  logger.debug("Resolved route candidates", {
+    projectScope: options.projectScope,
+    projectVersion: options.projectVersion,
+    route: options.routeKey,
+    count: routeCandidates.size,
+  });
+
+  return new Set(routeCandidates);
+}
+
+/**
+ * Invalidate cached candidate manifests for one project scope (or all scopes).
+ */
+export function invalidateProjectCandidateManifests(projectScope?: string): void {
+  if (!projectScope) {
+    manifestCache.clear();
+    routeCandidateCache.clear();
+    return;
+  }
+
+  for (const key of manifestCache.keys()) {
+    if (key.startsWith(`${projectScope}:`)) manifestCache.delete(key);
+  }
+
+  for (const key of routeCandidateCache.keys()) {
+    if (key.startsWith(`${projectScope}:`)) routeCandidateCache.delete(key);
+  }
+}

package/src/src/rendering/orchestrator/html.ts

@@ -8,7 +8,6 @@ import {
   injectHTMLContent,
   isFullHTMLDocument,
 } from "../../html/index.js";
-import { extractCandidates } from "../../html/styles-builder/tailwind-compiler.js";
 import type { CollectedHead } from "../../react/head-collector.js";
 import type { RuntimeAdapter } from "../../platform/adapters/base.js";
 import type {
@@ -25,6 +24,11 @@ import { computeSourceHash } from "../../studio/hash-utils.js";
 import { extractRelativePath } from "../../utils/route-path-utils.js";
 import { resolveAppComponentPath } from "../layouts/utils/app-resolver.js";
 import { StreamTimeoutError, streamToString } from "../utils/stream-utils.js";
+import {
+  normalizeCssModuleKey,
+  rewriteCssModuleContent,
+} from "../../transforms/css-modules/naming.js";
+import { getRouteCandidates } from "./css-candidate-manifest.js";
 
 const logger = rendererLogger.component("html-generator");
 
@@ -46,6 +50,8 @@ export interface HTMLGenerationContext {
   ssrHash: string;
   options?: RenderOptions;
   collectedHead?: CollectedHead;
+  /** Absolute paths to CSS files imported by components (collected during module loading) */
+  cssImports?: string[];
 }
 
 export class HTMLGenerator {
@@ -306,11 +312,15 @@ export class HTMLGenerator {
     mergedFrontmatter: MDXFrontmatter,
   ): Promise<HTMLGenerationOptions> {
     const stylesheetPath = this.config.config?.tailwind?.stylesheet || "globals.css";
-    const [appComponentPath, globalCSS, projectClasses] = await Promise.all([
+    const [appComponentPath, globalCSS] = await Promise.all([
       this.resolveAppPath().then((p) => p ?? undefined),
       this.loadProjectFile(stylesheetPath),
-      this.extractProjectClasses(),
     ]);
+    const projectClasses = await this.extractProjectClassesForRoute(context, appComponentPath);
+
+    // Load CSS imported by components and merge with globalCSS.
+    // Deduplicate against the configured stylesheet to avoid double-loading.
+    const combinedCSS = await this.mergeImportedCSS(globalCSS, context.cssImports, stylesheetPath);
 
     logger.debug("App component resolution", {
       appComponentPath,
@@ -351,7 +361,7 @@ export class HTMLGenerator {
       pagePath,
       pageType,
       nonce: context.options?.nonce,
-      globalCSS,
+      globalCSS: combinedCSS,
       frontmatter: mergedFrontmatter,
       studioEmbed: context.options?.studioEmbed,
       projectId: context.options?.projectId,
@@ -368,8 +378,94 @@ export class HTMLGenerator {
     };
   }
 
-  private async extractProjectClasses(): Promise<Set<string>> {
-    const SOURCE_EXTENSIONS = [".tsx", ".jsx", ".mdx", ".ts", ".js"];
+  /**
+   * Load CSS files imported by components and merge with the global stylesheet.
+   * Deduplicates against the configured Tailwind stylesheet path to avoid
+   * double-loading globals.css when it's both auto-discovered and explicitly imported.
+   */
+  private async mergeImportedCSS(
+    globalCSS: string | undefined,
+    cssImports: string[] | undefined,
+    stylesheetPath: string,
+  ): Promise<string | undefined> {
+    if (!cssImports || cssImports.length === 0) return globalCSS;
+
+    const normalizedStylesheetPath = stylesheetPath.replace(/^\/+/, "");
+    const configuredStylesheetAbsolute = normalizeCssModuleKey(
+      join(this.config.projectDir, normalizedStylesheetPath),
+    );
+    const uniqueImports = new Map<string, string>();
+    for (const cssPath of cssImports) {
+      const normalized = normalizeCssModuleKey(cssPath);
+      if (!uniqueImports.has(normalized)) {
+        uniqueImports.set(normalized, cssPath);
+      }
+    }
+
+    const sortedImports = [...uniqueImports.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+    const regularCssSegments: string[] = [];
+    const moduleCssSegments: string[] = [];
+
+    for (const [normalizedCssPath, cssPath] of sortedImports) {
+      // Deduplicate only exact path matches to avoid skipping unrelated files
+      // like /styles/globals.css when the configured stylesheet is /globals.css.
+      if (normalizedCssPath === configuredStylesheetAbsolute) {
+        continue;
+      }
+
+      try {
+        const content = await this.config.adapter.fs.readFile(cssPath);
+        if (!content) continue;
+
+        if (normalizedCssPath.endsWith(".module.css")) {
+          moduleCssSegments.push(rewriteCssModuleContent(content, normalizedCssPath));
+        } else {
+          regularCssSegments.push(content);
+        }
+      } catch {
+        logger.debug("Could not load imported CSS file", { cssPath });
+      }
+    }
+
+    if (regularCssSegments.length === 0 && moduleCssSegments.length === 0) return globalCSS;
+
+    const combined = [globalCSS, ...regularCssSegments, ...moduleCssSegments]
+      .filter(Boolean)
+      .join("\n");
+    logger.debug("Merged imported CSS with global stylesheet", {
+      importedCount: regularCssSegments.length + moduleCssSegments.length,
+      regularCount: regularCssSegments.length,
+      moduleCount: moduleCssSegments.length,
+      totalLength: combined.length,
+    });
+    return combined;
+  }
+
+  private getProjectContentVersion(): string | undefined {
+    const wrappedFs = this.config.adapter.fs as unknown as {
+      getUnderlyingAdapter?: () => unknown;
+    };
+
+    if (typeof wrappedFs.getUnderlyingAdapter !== "function") return undefined;
+
+    const fsAdapter = wrappedFs.getUnderlyingAdapter() as {
+      getProjectData?: () => { updated_at?: string } | undefined;
+    };
+
+    return fsAdapter.getProjectData?.()?.updated_at;
+  }
+
+  private buildRouteManifestKey(pagePath: string): string {
+    const relativePagePath = extractRelativePath(pagePath, this.config.projectDir);
+    return relativePagePath
+      .replace(/\.(tsx|ts|jsx|mdx|md|js)$/, "")
+      .replace(/^pages\//, "");
+  }
+
+  private async extractProjectClassesForRoute(
+    context: HTMLGenerationContext,
+    appComponentPath?: string,
+  ): Promise<Set<string>> {
     const classes = new Set<string>();
 
     const wrappedFs = this.config.adapter.fs as unknown as {
@@ -387,20 +483,36 @@ export class HTMLGenerator {
     if (typeof fsAdapter.getAllSourceFiles !== "function") return classes;
 
     const files = await fsAdapter.getAllSourceFiles();
+    const projectScope = context.options?.projectSlug || context.options?.projectId ||
+      this.config.projectDir;
+    const projectVersion = this.getProjectContentVersion() ??
+      (this.config.mode === "development" ? "dev" : "unknown");
+    const routeKey = this.buildRouteManifestKey(context.pageInfo.entity.path);
+    const routeLayoutPaths = context.nestedLayouts
+      .map((layout) => layout.componentPath || layout.path)
+      .filter((path): path is string => Boolean(path));
+    const routeFilePaths = [
+      context.pageInfo.entity.path,
+      ...routeLayoutPaths,
+      ...(appComponentPath ? [appComponentPath] : []),
+    ];
 
-    let filesProcessed = 0;
-    for (const file of files) {
-      if (!file.content) continue;
-      if (!SOURCE_EXTENSIONS.some((ext) => file.path.endsWith(ext))) continue;
+    const routeCandidates = getRouteCandidates({
+      projectScope,
+      projectVersion,
+      projectDir: this.config.projectDir,
+      routeKey,
+      routeFilePaths,
+      files,
+      developmentMode: this.config.mode === "development",
+    });
 
-      filesProcessed++;
-      for (const cls of extractCandidates(file.content)) {
-        classes.add(cls);
-      }
-    }
+    for (const cls of routeCandidates) classes.add(cls);
 
     logger.debug("extractProjectClasses", {
-      filesProcessed,
+      filesProcessed: files.length,
+      routeKey,
+      routeFileCount: routeFilePaths.length,
       totalClasses: classes.size,
     });