veryfront 0.1.92 → 0.1.94

package/src/cli/commands/styles/command.ts

@@ -0,0 +1,296 @@
+import * as dntShim from "../../../_dnt.shims.js";
+import { z } from "zod";
+import { getConfig } from "../../../src/config/index.js";
+import {
+  enhanceAdapterWithFS,
+  getEnv,
+  isExtendedFSAdapter,
+  runtime,
+  type VeryfrontApiClient,
+} from "../../../src/platform/index.js";
+import {
+  buildPreparedCSSArtifactFromFiles,
+  createStyleScopeProfile,
+  resolveStyleContentVersion,
+} from "../../../src/rendering/styles.js";
+import { cliLogger, exitProcess } from "../../utils/index.js";
+import type { StylesArgs } from "./handler.js";
+import { writeJobResultIfConfigured } from "../../utils/write-job-result.js";
+
+const StyleArtifactBuildConfigSchema = z.object({
+  style_profile_hash: z.string().min(1).optional(),
+  branch: z.string().min(1).optional(),
+  environment_name: z.string().min(1).optional(),
+  release_id: z.string().min(1).optional(),
+}).superRefine((value, ctx) => {
+  const selectorCount = [value.branch, value.environment_name, value.release_id].filter(Boolean)
+    .length;
+  if (selectorCount !== 1) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Exactly one of branch, environment_name, or release_id is required.",
+    });
+  }
+});
+
+type StyleArtifactBuildConfig = z.infer<typeof StyleArtifactBuildConfigSchema>;
+
+interface StyleBuildContentContext {
+  branch?: string;
+  environmentName?: string;
+  releaseId?: string;
+}
+
+interface StyleArtifactBuildResult {
+  kind: "style_artifact";
+  status: "ready";
+  style_profile_hash: string;
+  artifact_hash: string;
+  asset_path: string;
+  content_type: string;
+  etag: string;
+  selector: {
+    type: "branch" | "environment" | "release";
+    value: string;
+  };
+}
+
+type StyleArtifactSelector =
+  | { branch: string; environmentName?: never; releaseId?: never; type: "branch"; value: string }
+  | {
+    branch?: never;
+    environmentName: string;
+    releaseId?: never;
+    type: "environment";
+    value: string;
+  }
+  | { branch?: never; environmentName?: never; releaseId: string; type: "release"; value: string };
+
+function parseStyleArtifactBuildConfig(rawConfig: string | undefined): StyleArtifactBuildConfig {
+  if (!rawConfig) {
+    throw new Error("Missing --config JSON");
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(rawConfig);
+  } catch {
+    throw new Error("Invalid --config JSON");
+  }
+
+  return StyleArtifactBuildConfigSchema.parse(parsed);
+}
+
+function resolveStyleArtifactSelector(
+  config: StyleArtifactBuildConfig,
+): StyleArtifactSelector {
+  if (config.branch) {
+    return {
+      branch: config.branch,
+      type: "branch",
+      value: config.branch,
+    };
+  }
+
+  if (config.environment_name) {
+    return {
+      environmentName: config.environment_name,
+      type: "environment",
+      value: config.environment_name,
+    };
+  }
+
+  return {
+    releaseId: config.release_id!,
+    type: "release",
+    value: config.release_id!,
+  };
+}
+
+function resolveContentContextSelector(
+  selector: StyleArtifactSelector,
+): { type: "branch"; branch: string } | { type: "environment"; name: string } | {
+  type: "release";
+  releaseId: string;
+} {
+  if (selector.type === "branch") {
+    return { type: "branch", branch: selector.branch };
+  }
+
+  if (selector.type === "environment") {
+    return { type: "environment", name: selector.environmentName };
+  }
+
+  return { type: "release", releaseId: selector.releaseId };
+}
+
+function requireEnv(name: string): string {
+  const value = getEnv(name)?.trim();
+  if (!value) {
+    throw new Error(`${name} is required`);
+  }
+  return value;
+}
+
+function getUnderlyingVeryfrontClient(adapter: Awaited<ReturnType<typeof enhanceAdapterWithFS>>): {
+  client: VeryfrontApiClient;
+  contentContext: StyleBuildContentContext | null;
+  getAllSourceFiles: () => Promise<Array<{ path: string; content?: string }>>;
+} {
+  if (!isExtendedFSAdapter(adapter.fs)) {
+    throw new Error("Styles build requires a Veryfront FS adapter");
+  }
+
+  const fsAdapter = adapter.fs.getUnderlyingAdapter() as {
+    getAllSourceFiles?: () => Promise<Array<{ path: string; content?: string }>>;
+    getContentContext?: () => StyleBuildContentContext | null;
+    getClient?: () => VeryfrontApiClient;
+  };
+
+  if (
+    typeof fsAdapter.getAllSourceFiles !== "function" ||
+    typeof fsAdapter.getClient !== "function"
+  ) {
+    throw new Error("Styles build requires a Veryfront source adapter");
+  }
+
+  return {
+    client: fsAdapter.getClient(),
+    contentContext: typeof fsAdapter.getContentContext === "function"
+      ? fsAdapter.getContentContext()
+      : null,
+    getAllSourceFiles: fsAdapter.getAllSourceFiles,
+  };
+}
+
+async function markStyleArtifactFailed(
+  client: VeryfrontApiClient | null,
+  selector: StyleArtifactSelector,
+  styleProfileHash: string | null | undefined,
+  error: string,
+): Promise<void> {
+  if (!client || !styleProfileHash) return;
+
+  try {
+    await client.upsertStyleArtifact({
+      ...(selector.type === "branch" ? { branch: selector.branch } : {}),
+      ...(selector.type === "environment" ? { environmentName: selector.environmentName } : {}),
+      ...(selector.type === "release" ? { releaseId: selector.releaseId } : {}),
+      styleProfileHash,
+      status: "failed",
+      failureReason: error,
+    });
+  } catch (updateError) {
+    cliLogger.warn("Failed to mark style artifact as failed", updateError);
+  }
+}
+
+export async function stylesCommand(options: StylesArgs): Promise<void> {
+  const buildConfig = parseStyleArtifactBuildConfig(options.config);
+  const selector = resolveStyleArtifactSelector(buildConfig);
+  const projectSlug = requireEnv("VERYFRONT_PROJECT_SLUG");
+  const apiToken = requireEnv("VERYFRONT_API_TOKEN");
+  const apiBaseUrl = requireEnv("VERYFRONT_API_BASE_URL");
+  const projectId = getEnv("VERYFRONT_PROJECT_ID")?.trim();
+  const projectDir = dntShim.Deno.cwd();
+
+  const baseAdapter = await runtime.get();
+  const adapter = await enhanceAdapterWithFS(
+    baseAdapter,
+    {
+      fs: {
+        type: "veryfront-api",
+        projectDir,
+        veryfront: {
+          apiBaseUrl,
+          apiToken,
+          projectSlug,
+          projectId,
+          contentSource: resolveContentContextSelector(selector),
+        },
+      },
+    },
+    projectDir,
+  );
+
+  let client: VeryfrontApiClient | null = null;
+  let resolvedStyleProfileHash: string | null = buildConfig.style_profile_hash ?? null;
+
+  try {
+    const sourceAdapter = getUnderlyingVeryfrontClient(adapter);
+    client = sourceAdapter.client;
+    const cacheKey = projectId || projectSlug;
+    const config = await getConfig(projectDir, adapter, { cacheKey });
+    const styleProfile = createStyleScopeProfile(config);
+    resolvedStyleProfileHash = styleProfile.hash;
+
+    if (buildConfig.style_profile_hash && styleProfile.hash !== buildConfig.style_profile_hash) {
+      const message =
+        `Style profile hash mismatch: expected ${buildConfig.style_profile_hash}, got ${styleProfile.hash}`;
+      await markStyleArtifactFailed(client, selector, buildConfig.style_profile_hash, message);
+      throw new Error(message);
+    }
+
+    const files = await sourceAdapter.getAllSourceFiles();
+    if (files.length === 0) {
+      throw new Error("No project files were available to build the style artifact");
+    }
+
+    const projectVersion = resolveStyleContentVersion(null, {
+      branch: sourceAdapter.contentContext?.branch ?? null,
+      releaseId: sourceAdapter.contentContext?.releaseId ?? null,
+      environmentName: sourceAdapter.contentContext?.environmentName ?? null,
+    });
+    const build = await buildPreparedCSSArtifactFromFiles({
+      projectSlug,
+      projectVersion,
+      projectDir,
+      files,
+      styleProfile,
+      stylesheetPath: config?.tailwind?.stylesheet,
+      minify: true,
+      environment: "preview",
+      buildMode: "production",
+    });
+
+    const resolution = await client.upsertStyleArtifact({
+      ...(selector.type === "branch" ? { branch: selector.branch } : {}),
+      ...(selector.type === "environment" ? { environmentName: selector.environmentName } : {}),
+      ...(selector.type === "release" ? { releaseId: selector.releaseId } : {}),
+      styleProfileHash: styleProfile.hash,
+      status: "ready",
+      artifactHash: build.hash,
+    });
+
+    const result: StyleArtifactBuildResult = {
+      kind: "style_artifact",
+      status: "ready",
+      style_profile_hash: styleProfile.hash,
+      artifact_hash: build.hash,
+      asset_path: resolution.assetPath ?? `/_vf/css/${build.hash}.css`,
+      content_type: resolution.contentType ?? "text/css; charset=utf-8",
+      etag: resolution.etag ?? `"${build.hash}"`,
+      selector: {
+        type: selector.type,
+        value: selector.value,
+      },
+    };
+
+    await writeJobResultIfConfigured(result);
+    cliLogger.info(`Built style artifact ${build.hash}`);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    await markStyleArtifactFailed(
+      client,
+      selector,
+      resolvedStyleProfileHash ?? buildConfig.style_profile_hash,
+      message,
+    );
+    cliLogger.error(message);
+    exitProcess(1);
+  } finally {
+    if (isExtendedFSAdapter(adapter.fs)) {
+      await adapter.fs.shutdown();
+    }
+  }
+}

package/src/cli/commands/styles/handler.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+import { createArgParser, parseArgsOrThrow } from "../../shared/args.js";
+import type { ParsedArgs } from "../../shared/types.js";
+
+const StylesArgsSchema = z.object({
+  subcommand: z.literal("build-artifact"),
+  config: z.string().optional(),
+  debug: z.boolean().default(false),
+});
+
+export type StylesArgs = z.infer<typeof StylesArgsSchema>;
+
+export const parseStylesArgs = createArgParser(StylesArgsSchema, {
+  subcommand: { keys: ["subcommand"], type: "string", positional: 0 },
+  config: { keys: ["config"], type: "string" },
+  debug: { keys: ["debug"], type: "boolean" },
+});
+
+export async function handleStylesCommand(args: ParsedArgs): Promise<void> {
+  const opts = parseArgsOrThrow(parseStylesArgs, "styles", args);
+  const { stylesCommand } = await import("./command.js");
+  await stylesCommand(opts);
+}

package/src/cli/help/command-definitions.ts

@@ -16,6 +16,7 @@ import { doctorHelp } from "../commands/doctor/command-help.js";
 import { cleanHelp } from "../commands/clean/command-help.js";
 import { routesHelp } from "../commands/routes/command-help.js";
 import { studioHelp } from "../commands/studio/command-help.js";
+import { stylesHelp } from "../commands/styles/command-help.js";
 import { lockHelp } from "../commands/lock/command-help.js";
 import { analyzeChunksHelp } from "../commands/analyze-chunks/command-help.js";
 import { generateHelp } from "../commands/generate/command-help.js";
@@ -51,6 +52,7 @@ export const COMMANDS: CommandRegistry = {
   clean: cleanHelp,
   routes: routesHelp,
   studio: studioHelp,
+  styles: stylesHelp,
   lock: lockHelp,
   "analyze-chunks": analyzeChunksHelp,
   generate: generateHelp,

package/src/cli/router.ts

@@ -29,6 +29,7 @@ import { handleRoutesCommand } from "./commands/routes/handler.js";
 import { handleServeCommand } from "./commands/serve/handler.js";
 import { handleStartCommand } from "./commands/start/handler.js";
 import { handleStudioCommand } from "./commands/studio/handler.js";
+import { handleStylesCommand } from "./commands/styles/handler.js";
 import { handleUpCommand } from "./commands/up/index.js";
 import { handleTaskCommand } from "./commands/task/handler.js";
 import { handleWorkflowCommand } from "./commands/workflow/handler.js";
@@ -55,6 +56,7 @@ const commands: Record<string, (args: ParsedArgs) => Promise<void>> = {
   "analyze-chunks": handleAnalyzeChunksCommand,
   "routes": handleRoutesCommand,
   "studio": handleStudioCommand,
+  "styles": handleStylesCommand,
   "lock": handleLockCommand,
   "generate": handleGenerateCommand,
   "g": handleGenerateCommand,

package/src/deno.js

@@ -1,6 +1,6 @@
 export default {
   "name": "veryfront",
-  "version": "0.1.92",
+  "version": "0.1.94",
   "license": "Apache-2.0",
   "nodeModulesDir": "auto",
   "exclude": [
@@ -97,6 +97,7 @@ export default {
     "veryfront/config": "./src/config/index.ts",
     "veryfront/build": "./src/build/index.ts",
     "veryfront/rendering": "./src/rendering/index.ts",
+    "veryfront/rendering/styles": "./src/rendering/styles.ts",
     "veryfront/cache": "./src/cache/index.ts",
     "veryfront/security": "./src/security/index.ts",
     "veryfront/errors": "./src/errors/index.ts",

package/src/src/html/styles-builder/css-pregeneration.ts

@@ -39,6 +39,60 @@ interface CSSPregenerationOptions {
   buildMode?: "development" | "production";
 }
 
+export interface PreparedCSSArtifactBuildResult {
+  css: string;
+  hash: string;
+  candidateCount: number;
+  fromCache: boolean;
+  context: ReturnType<typeof createPreparedProjectCSSContext>;
+}
+
+export async function buildPreparedCSSArtifactFromFiles(
+  options: CSSPregenerationOptions,
+): Promise<PreparedCSSArtifactBuildResult> {
+  const {
+    projectSlug,
+    projectVersion,
+    projectDir,
+    files,
+    styleProfile,
+    stylesheet,
+    stylesheetPath,
+    minify = true,
+    environment = "preview",
+    buildMode = "production",
+  } = options;
+
+  const resolvedStylesheet = stylesheet ?? findStylesheetFromFiles(files, stylesheetPath);
+  const candidates = extractCandidatesFromFiles(files, {
+    projectDir,
+    styleProfile,
+  });
+
+  const result = await getProjectCSS(projectSlug, resolvedStylesheet, candidates, {
+    minify,
+    environment,
+    buildMode,
+  });
+  const context = createPreparedProjectCSSContext(
+    projectSlug,
+    projectVersion,
+    resolvedStylesheet,
+    styleProfile.hash,
+    { minify, environment, buildMode },
+  );
+
+  await storePreparedProjectCSS(context, { css: result.css, hash: result.hash });
+
+  return {
+    css: result.css,
+    hash: result.hash,
+    candidateCount: candidates.size,
+    fromCache: result.fromCache,
+    context,
+  };
+}
+
 /**
  * Pre-generate and cache CSS from file list.
  *
@@ -57,54 +111,28 @@ export async function pregenerateCSSFromFiles(
   const {
     projectSlug,
     projectVersion,
-    projectDir,
     files,
     styleProfile,
     stylesheet,
-    stylesheetPath,
-    minify = true,
-    environment = "preview",
-    buildMode = "production",
   } = options;
   const startTime = performance.now();
 
   try {
-    const resolvedStylesheet = stylesheet ?? findStylesheetFromFiles(files, stylesheetPath);
-    const candidates = extractCandidatesFromFiles(files, {
-      projectDir,
-      styleProfile,
-    });
-
     logger.debug("Starting", {
       projectSlug,
       projectVersion,
       fileCount: files.length,
-      candidateCount: candidates.size,
-      hasStylesheet: Boolean(resolvedStylesheet),
+      hasStylesheet: Boolean(stylesheet),
       styleProfileHash: styleProfile.hash,
     });
 
-    const result = await getProjectCSS(projectSlug, resolvedStylesheet, candidates, {
-      minify,
-      environment,
-      buildMode,
-    });
-    await storePreparedProjectCSS(
-      createPreparedProjectCSSContext(
-        projectSlug,
-        projectVersion,
-        resolvedStylesheet,
-        styleProfile.hash,
-        { minify, environment, buildMode },
-      ),
-      { css: result.css, hash: result.hash },
-    );
+    const result = await buildPreparedCSSArtifactFromFiles(options);
     const duration = performance.now() - startTime;
 
     logger.debug("Complete", {
       projectSlug,
       projectVersion,
-      candidateCount: candidates.size,
+      candidateCount: result.candidateCount,
       cssLength: result.css.length,
       cssHash: result.hash,
       fromCache: result.fromCache,

package/src/src/platform/adapters/fs/veryfront/adapter.ts

@@ -724,9 +724,9 @@ export class VeryfrontFSAdapter implements FSAdapter {
    */
   private async triggerCSSPregeneration(
     files: Array<{ path: string; content?: string }>,
-  ): Promise<void> {
+  ): Promise<{ hash: string; assetPath: string } | undefined> {
     try {
-      const { pregenerateCSSFromFiles, findStylesheetFromFiles } = await import(
+      const { buildPreparedCSSArtifactFromFiles, findStylesheetFromFiles } = await import(
         "../../../../html/styles-builder/css-pregeneration.js"
       );
       const { resolveStyleContentVersion } = await import(
@@ -744,7 +744,7 @@ export class VeryfrontFSAdapter implements FSAdapter {
         logger.debug("Skipping CSS pre-generation without projectDir", {
           projectSlug: this.projectSlug,
         });
-        return;
+        return undefined;
       }
 
       try {
@@ -769,7 +769,7 @@ export class VeryfrontFSAdapter implements FSAdapter {
         environmentName: this.contentContext?.environmentName ?? null,
       });
 
-      await pregenerateCSSFromFiles({
+      const result = await buildPreparedCSSArtifactFromFiles({
         projectSlug: this.projectSlug,
         projectVersion,
         projectDir,
@@ -781,11 +781,25 @@ export class VeryfrontFSAdapter implements FSAdapter {
         environment: "preview",
         buildMode: "production",
       });
+
+      logger.debug("CSS pre-generation complete", {
+        projectSlug: this.projectSlug,
+        projectVersion,
+        cssHash: result.hash,
+        candidateCount: result.candidateCount,
+        fromCache: result.fromCache,
+      });
+
+      return {
+        hash: result.hash,
+        assetPath: `/_vf/css/${result.hash}.css`,
+      };
     } catch (error) {
       logger.warn("CSS pre-generation failed", {
         projectSlug: this.projectSlug,
         error: error instanceof Error ? error.message : String(error),
       });
+      return undefined;
     }
   }
 }

package/src/src/platform/adapters/fs/veryfront/types.ts

@@ -120,6 +120,8 @@ export interface InvalidationProjectContext {
   environment?: "preview" | "production";
   branch?: string | null;
   releaseId?: string | null;
+  styleArtifactHash?: string;
+  styleAssetPath?: string;
 }
 
 export interface InvalidationCallbacks {

package/src/src/platform/adapters/fs/veryfront/websocket-manager.ts

@@ -26,6 +26,11 @@ const WS_RECONNECT_MAX_FAILURES = 10;
 const WS_HEARTBEAT_INTERVAL_MS = 60000;
 const WS_HEARTBEAT_TIMEOUT_MS = 300000;
 
+interface PreviewStyleArtifactInfo {
+  hash: string;
+  assetPath: string;
+}
+
 interface WebSocketDeps {
   apiBaseUrl: string;
   apiToken: string;
@@ -43,7 +48,9 @@ interface WebSocketDeps {
     cacheKey: string,
     files: Array<{ path: string; content?: string }>,
   ) => Promise<void>;
-  pregenerateStyles?: (files: Array<{ path: string; content?: string }>) => Promise<void>;
+  pregenerateStyles?: (
+    files: Array<{ path: string; content?: string }>,
+  ) => Promise<PreviewStyleArtifactInfo | undefined>;
 }
 
 export class WebSocketManager {
@@ -557,6 +564,7 @@ export class WebSocketManager {
     const contentContext = this.deps.getContentContext();
     const previewInvalidationPrefixes = this.getPreviewInvalidationPrefixes(contentContext);
     const previewInvalidationVersion = this.previewInvalidationVersion;
+    let preparedStyleArtifact: PreviewStyleArtifactInfo | undefined;
     let succeeded = false;
 
     try {
@@ -630,11 +638,12 @@ export class WebSocketManager {
           const cacheKey = buildFileListCacheKey(contentContext);
           await this.deps.setFileListCache(cacheKey, files);
           this.deps.clearFileListIndex();
-          await this.deps.pregenerateStyles?.(files);
+          preparedStyleArtifact = await this.deps.pregenerateStyles?.(files);
 
           logger.debug("Fresh files cached (memory + Redis)", {
             cacheKey,
             fileCount: files.length,
+            styleAssetPath: preparedStyleArtifact?.assetPath,
           });
         } catch (error) {
           logger.warn("Failed to fetch files during selective invalidation", {
@@ -664,6 +673,8 @@ export class WebSocketManager {
         environment,
         branch: contentContext?.branch ?? null,
         releaseId: contentContext?.releaseId ?? null,
+        styleArtifactHash: preparedStyleArtifact?.hash,
+        styleAssetPath: preparedStyleArtifact?.assetPath,
       };
 
       this.deps.invalidationCallbacks.triggerReload?.(changedPaths, projectContext);
@@ -691,6 +702,7 @@ export class WebSocketManager {
     const contentContext = this.deps.getContentContext();
     const previewInvalidationPrefixes = this.getPreviewInvalidationPrefixes(contentContext);
     const previewInvalidationVersion = this.previewInvalidationVersion;
+    let preparedStyleArtifact: PreviewStyleArtifactInfo | undefined;
     let succeeded = false;
 
     try {
@@ -773,11 +785,12 @@ export class WebSocketManager {
           const cacheKey = buildFileListCacheKey(contentContext);
           await this.deps.setFileListCache(cacheKey, files);
           this.deps.clearFileListIndex();
-          await this.deps.pregenerateStyles?.(files);
+          preparedStyleArtifact = await this.deps.pregenerateStyles?.(files);
 
           logger.debug("FRESH FILES FETCHED", {
             cacheKey,
             fileCount: files.length,
+            styleAssetPath: preparedStyleArtifact?.assetPath,
           });
         } catch (error) {
           logger.warn("Failed to fetch files during invalidation", { error });
@@ -801,6 +814,8 @@ export class WebSocketManager {
         environment,
         branch: contentContext?.branch ?? null,
         releaseId: contentContext?.releaseId ?? null,
+        styleArtifactHash: preparedStyleArtifact?.hash,
+        styleAssetPath: preparedStyleArtifact?.assetPath,
       };
 
       this.deps.invalidationCallbacks.triggerReload?.(undefined, projectContext);

package/src/src/platform/adapters/veryfront-api-client/client.ts

@@ -1,5 +1,6 @@
 import { logger as baseLogger } from "../../../utils/index.js";
 import {
+  type EnsureStyleArtifactBuildInput,
   type FileDetail,
   type FileListResult,
   type ListFilesOptions,
@@ -350,6 +351,13 @@ export class VeryfrontApiClient {
     return this.operations.resolveStyleArtifact(projectRef, input);
   }
 
+  ensureStyleArtifactBuild(
+    input: EnsureStyleArtifactBuildInput,
+    projectRef = this.getProjectSlug()!,
+  ): Promise<ProjectStyleArtifactResolution> {
+    return this.operations.ensureStyleArtifactBuild(projectRef, input);
+  }
+
   upsertStyleArtifact(
     input: UpsertStyleArtifactInput,
     projectRef = this.getProjectSlug()!,

package/src/src/platform/adapters/veryfront-api-client/index.ts

@@ -6,6 +6,7 @@
 
 export { type FileContext, VeryfrontApiClient } from "./client.js";
 export {
+  type EnsureStyleArtifactBuildInput,
   type FileDetail,
   type FileListResult,
   type ListFilesOptions,