@cloudwerk/vite-plugin 0.6.2 → 0.6.3

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import { CloudwerkConfig, RouteManifest, ScanResult, QueueManifest, ServiceManifest } from '@cloudwerk/core/build';
+import { CloudwerkConfig, QueueManifest, ServiceManifest, RouteManifest, ScanResult } from '@cloudwerk/core/build';
 
 /**
  * @cloudwerk/vite-plugin - Types
@@ -96,6 +96,17 @@ interface ClientComponentInfo {
     /** Absolute file path */
     absolutePath: string;
 }
+/**
+ * Information about a CSS import detected in a layout or page.
+ */
+interface CssImportInfo {
+    /** Absolute path to the CSS file */
+    absolutePath: string;
+    /** File that imports the CSS */
+    importedBy: string;
+    /** Whether the importing file is a layout */
+    isLayout: boolean;
+}
 /**
  * Virtual module IDs used by the plugin.
  */
@@ -150,6 +161,20 @@ declare function cloudwerkPlugin(options?: CloudwerkVitePluginOptions): Plugin;
  * a Hono app with all routes registered from the file-based routing manifest.
  */
 
+/**
+ * Asset manifest entry from Vite build.
+ */
+interface AssetManifestEntry {
+    file: string;
+    css?: string[];
+    assets?: string[];
+    isEntry?: boolean;
+    isDynamicEntry?: boolean;
+}
+/**
+ * Asset manifest from Vite build (maps source to output files).
+ */
+type AssetManifest = Record<string, AssetManifestEntry>;
 /**
  * Options for generating server entry.
  */
@@ -158,6 +183,8 @@ interface GenerateServerEntryOptions {
     queueManifest?: QueueManifest | null;
     /** Service manifest if services are configured */
     serviceManifest?: ServiceManifest | null;
+    /** Asset manifest from Vite build for CSS injection */
+    assetManifest?: AssetManifest | null;
 }
 /**
  * Generate the server entry module code.
@@ -187,14 +214,16 @@ declare function generateServerEntry(manifest: RouteManifest, scanResult: ScanRe
  * Generate the client entry module code.
  *
  * This creates a hydration bootstrap that:
+ * - Imports CSS files from layouts and pages
  * - Finds all elements with data-hydrate-id attributes
  * - Dynamically imports the corresponding component bundles
  * - Hydrates each component with its serialized props
  *
  * @param clientComponents - Map of detected client components
+ * @param cssImports - Map of CSS imports from layouts and pages
  * @param options - Resolved plugin options
  * @returns Generated JavaScript code
  */
-declare function generateClientEntry(clientComponents: Map<string, ClientComponentInfo>, options: ResolvedCloudwerkOptions): string;
+declare function generateClientEntry(clientComponents: Map<string, ClientComponentInfo>, cssImports: Map<string, CssImportInfo[]>, options: ResolvedCloudwerkOptions): string;
 
-export { type ClientComponentInfo, type CloudwerkVitePluginOptions, RESOLVED_VIRTUAL_IDS, type ResolvedCloudwerkOptions, VIRTUAL_MODULE_IDS, cloudwerkPlugin, cloudwerkPlugin as default, generateClientEntry, generateServerEntry };
+export { type AssetManifest, type AssetManifestEntry, type ClientComponentInfo, type CloudwerkVitePluginOptions, type CssImportInfo, type GenerateServerEntryOptions, RESOLVED_VIRTUAL_IDS, type ResolvedCloudwerkOptions, VIRTUAL_MODULE_IDS, cloudwerkPlugin, cloudwerkPlugin as default, generateClientEntry, generateServerEntry };

package/dist/index.js

@@ -39,6 +39,7 @@ import * as path from "path";
 function generateServerEntry(manifest, scanResult, options, entryOptions) {
   const queueManifest = entryOptions?.queueManifest;
   const serviceManifest = entryOptions?.serviceManifest;
+  const assetManifest = entryOptions?.assetManifest;
   const imports = [];
   const pageRegistrations = [];
   const routeRegistrations = [];
@@ -139,6 +140,18 @@ function generateServerEntry(manifest, scanResult, options, entryOptions) {
   }
   const rendererName = options.renderer;
   const clientEntryPath = options.isProduction ? `${options.hydrationEndpoint}/client.js` : "/@id/__x00__virtual:cloudwerk/client-entry";
+  let cssLinksCode = "";
+  if (options.isProduction && assetManifest) {
+    const clientEntry = assetManifest["virtual:cloudwerk/client-entry"];
+    if (clientEntry?.css && clientEntry.css.length > 0) {
+      const cssLinks = clientEntry.css.map((css) => `<link rel="stylesheet" href="/${css}" />`).join("");
+      cssLinksCode = `const CSS_LINKS = '${cssLinks}'`;
+    }
+  }
+  if (!cssLinksCode) {
+    cssLinksCode = `const CSS_LINKS = ''`;
+  }
+  const viteClientScript = options.isProduction ? "" : '<script type="module" src="/@vite/client"></script>';
   return `/**
  * Generated Cloudwerk Server Entry
  * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
@@ -176,6 +189,16 @@ const notFoundBoundaryMap = new Map([
 ${notFoundBoundaryMapEntries.join(",\n")}
 ])
 
+// ============================================================================
+// Asset Injection Configuration
+// ============================================================================
+
+// CSS links from asset manifest (production) or empty (dev - CSS served by Vite)
+${cssLinksCode}
+
+// Vite client script for HMR (dev only)
+const VITE_CLIENT = '${viteClientScript}'
+
 // ============================================================================
 // Helper Functions
 // ============================================================================
@@ -395,20 +418,34 @@ function registerPage(app, pattern, pageModule, layoutModules, middlewareModules
 }
 
 /**
- * Render element to a Response, injecting hydration script before </body>.
+ * Render element to a Response, injecting CSS and scripts.
+ * - CSS links are injected before </head>
+ * - Vite client (dev) and hydration script are injected before </body>
  */
 function renderWithHydration(element, status = 200) {
   // Hono JSX elements have toString() for synchronous rendering
-  const html = '<!DOCTYPE html>' + String(element)
+  let html = '<!DOCTYPE html>' + String(element)
 
-  // Inject hydration script before </body> if it exists (case-insensitive for HTML compat)
-  const hydrationScript = '<script type="module" src="${clientEntryPath}"></script>'
+  // Inject CSS links before </head> if present
+  if (CSS_LINKS) {
+    const headCloseRegex = /<\\/head>/i
+    if (headCloseRegex.test(html)) {
+      html = html.replace(headCloseRegex, CSS_LINKS + '</head>')
+    }
+  }
+
+  // Inject scripts before </body>
+  // - Vite client for HMR (dev only)
+  // - Hydration script for client components
+  const scripts = VITE_CLIENT + '<script type="module" src="${clientEntryPath}"></script>'
   const bodyCloseRegex = /<\\/body>/i
-  const injectedHtml = bodyCloseRegex.test(html)
-    ? html.replace(bodyCloseRegex, hydrationScript + '</body>')
-    : html + hydrationScript
+  if (bodyCloseRegex.test(html)) {
+    html = html.replace(bodyCloseRegex, scripts + '</body>')
+  } else {
+    html = html + scripts
+  }
 
-  return new Response(injectedHtml, {
+  return new Response(html, {
     status,
     headers: {
       'Content-Type': 'text/html; charset=utf-8',
@@ -469,6 +506,15 @@ app.use('*', async (c, next) => {
     return
   }
 
+  // Only serve static assets for GET/HEAD requests
+  // Other methods (POST, PUT, etc.) should go directly to route handlers
+  // to avoid consuming the request body
+  const method = c.req.method
+  if (method !== 'GET' && method !== 'HEAD') {
+    await next()
+    return
+  }
+
   // Try to serve the request as a static asset
   const response = await c.env.ASSETS.fetch(c.req.raw)
 
@@ -722,12 +768,28 @@ function generateServiceRegistration(serviceManifest) {
 }
 
 // src/virtual-modules/client-entry.ts
-function generateClientEntry(clientComponents, options) {
+function collectCssImports(cssImports) {
+  const allCss = /* @__PURE__ */ new Set();
+  for (const imports of cssImports.values()) {
+    for (const info of imports) {
+      allCss.add(info.absolutePath);
+    }
+  }
+  return Array.from(allCss);
+}
+function generateCssImportStatements(cssPaths) {
+  if (cssPaths.length === 0) {
+    return "";
+  }
+  return cssPaths.map((cssPath) => `import '${cssPath}'`).join("\n") + "\n\n";
+}
+function generateClientEntry(clientComponents, cssImports, options) {
   const { renderer, hydrationEndpoint, isProduction } = options;
+  const cssPaths = collectCssImports(cssImports);
   if (renderer === "react") {
-    return generateReactClientEntry(clientComponents, hydrationEndpoint, isProduction);
+    return generateReactClientEntry(clientComponents, cssPaths, hydrationEndpoint, isProduction);
   }
-  return generateHonoClientEntry(clientComponents, hydrationEndpoint, isProduction);
+  return generateHonoClientEntry(clientComponents, cssPaths, hydrationEndpoint, isProduction);
 }
 function generateStaticImportsAndMap(clientComponents) {
   const components = Array.from(clientComponents.values());
@@ -746,7 +808,7 @@ function generateProductionClientEntry(clientComponents, config) {
  * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
  */
 
-${config.rendererImports}
+${config.cssImports}${config.rendererImports}
 
 // Static component imports
 ${imports}
@@ -810,10 +872,12 @@ if (document.readyState === 'loading') {
 export { hydrate }
 `;
 }
-function generateHonoClientEntry(clientComponents, _hydrationEndpoint, isProduction = false) {
+function generateHonoClientEntry(clientComponents, cssPaths, _hydrationEndpoint, isProduction = false) {
+  const cssImportStatements = generateCssImportStatements(cssPaths);
   if (isProduction) {
     return generateProductionClientEntry(clientComponents, {
       header: "Generated Cloudwerk Client Entry (Hono JSX - Production)",
+      cssImports: cssImportStatements,
       rendererImports: `import { render } from 'hono/jsx/dom'
 import { jsx } from 'hono/jsx/jsx-runtime'`,
       additionalDeclarations: "",
@@ -830,7 +894,7 @@ import { jsx } from 'hono/jsx/jsx-runtime'`,
  * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
  */
 
-import { render } from 'hono/jsx/dom'
+${cssImportStatements}import { render } from 'hono/jsx/dom'
 import { jsx } from 'hono/jsx/jsx-runtime'
 
 // Bundle map for component lookups
@@ -914,10 +978,12 @@ if (document.readyState === 'loading') {
 export { hydrate }
 `;
 }
-function generateReactClientEntry(clientComponents, _hydrationEndpoint, isProduction = false) {
+function generateReactClientEntry(clientComponents, cssPaths, _hydrationEndpoint, isProduction = false) {
+  const cssImportStatements = generateCssImportStatements(cssPaths);
   if (isProduction) {
     return generateProductionClientEntry(clientComponents, {
       header: "Generated Cloudwerk Client Entry (React - Production)",
+      cssImports: cssImportStatements,
       rendererImports: `import { hydrateRoot } from 'react-dom/client'
 import { createElement } from 'react'`,
       additionalDeclarations: `
@@ -937,7 +1003,7 @@ const rootCache = new Map()
  * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
  */
 
-import { hydrateRoot, createRoot } from 'react-dom/client'
+${cssImportStatements}import { hydrateRoot, createRoot } from 'react-dom/client'
 import { createElement } from 'react'
 
 // Bundle map for component lookups
@@ -1594,6 +1660,66 @@ async function scanClientComponents(root, state) {
   }
   await scanDir(appDir);
 }
+var CSS_IMPORT_REGEX = /import\s+(?:['"]([^'"]+\.css)['"]|(?:\w+\s+from\s+)?['"]([^'"]+\.css)['"])/g;
+function extractCssImports(code) {
+  const imports = [];
+  let match;
+  CSS_IMPORT_REGEX.lastIndex = 0;
+  while ((match = CSS_IMPORT_REGEX.exec(code)) !== null) {
+    const cssPath = match[1] || match[2];
+    if (cssPath) {
+      imports.push(cssPath);
+    }
+  }
+  return imports;
+}
+function isLayoutOrPage(filePath) {
+  const basename2 = path3.basename(filePath);
+  const nameWithoutExt = basename2.replace(/\.(ts|tsx|js|jsx)$/, "");
+  return {
+    isLayout: nameWithoutExt === "layout",
+    isPage: nameWithoutExt === "page"
+  };
+}
+async function scanCssImports(root, state) {
+  const appDir = path3.resolve(root, state.options.appDir);
+  try {
+    await fs2.promises.access(appDir);
+  } catch {
+    return;
+  }
+  async function scanDir(dir) {
+    const entries = await fs2.promises.readdir(dir, { withFileTypes: true });
+    await Promise.all(
+      entries.map(async (entry) => {
+        const fullPath = path3.join(dir, entry.name);
+        if (entry.isDirectory()) {
+          if (entry.name !== "node_modules" && !entry.name.startsWith(".")) {
+            await scanDir(fullPath);
+          }
+        } else if (entry.isFile() && (entry.name.endsWith(".tsx") || entry.name.endsWith(".ts"))) {
+          const { isLayout, isPage } = isLayoutOrPage(fullPath);
+          if (isLayout || isPage) {
+            const content = await fs2.promises.readFile(fullPath, "utf-8");
+            const cssImportPaths = extractCssImports(content);
+            if (cssImportPaths.length > 0) {
+              const cssInfos = cssImportPaths.map((cssPath) => ({
+                absolutePath: path3.resolve(path3.dirname(fullPath), cssPath),
+                importedBy: fullPath,
+                isLayout
+              }));
+              state.cssImports.set(fullPath, cssInfos);
+              if (state.options.verbose) {
+                console.log(`[cloudwerk] Found ${cssInfos.length} CSS import(s) in ${path3.relative(root, fullPath)}`);
+              }
+            }
+          }
+        }
+      })
+    );
+  }
+  await scanDir(appDir);
+}
 function cloudwerkPlugin(options = {}) {
   let state = null;
   let server = null;
@@ -1794,6 +1920,7 @@ function cloudwerkPlugin(options = {}) {
         serviceManifest: null,
         serviceScanResult: null,
         clientComponents: /* @__PURE__ */ new Map(),
+        cssImports: /* @__PURE__ */ new Map(),
         serverEntryCache: null,
         clientEntryCache: null
       };
@@ -1801,6 +1928,7 @@ function cloudwerkPlugin(options = {}) {
       await buildQueueManifestIfExists(root);
       await buildServiceManifestIfExists(root);
       await scanClientComponents(root, state);
+      await scanCssImports(root, state);
     },
     /**
      * Configure the dev server with file watching.
@@ -1945,6 +2073,7 @@ function cloudwerkPlugin(options = {}) {
         if (!state.clientEntryCache) {
           state.clientEntryCache = generateClientEntry(
             state.clientComponents,
+            state.cssImports,
             state.options
           );
         }
@@ -2031,6 +2160,22 @@ function cloudwerkPlugin(options = {}) {
           return parts.join("\n");
         });
       }
+      const { isLayout, isPage } = isLayoutOrPage(id);
+      if (isLayout || isPage) {
+        const cssImportPaths = extractCssImports(transformedCode);
+        if (cssImportPaths.length > 0) {
+          const cssInfos = cssImportPaths.map((cssPath) => ({
+            absolutePath: path3.resolve(path3.dirname(id), cssPath),
+            importedBy: id,
+            isLayout
+          }));
+          state.cssImports.set(id, cssInfos);
+          state.clientEntryCache = null;
+          if (state.options.verbose) {
+            console.log(`[cloudwerk] Detected ${cssInfos.length} CSS import(s) in ${path3.relative(state.options.root, id)}`);
+          }
+        }
+      }
       if (hasUseClientDirective(transformedCode)) {
         const componentId = generateComponentId(id, state.options.root);
         const bundlePath = `${state.options.hydrationEndpoint}/${componentId}.js`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudwerk/vite-plugin",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Vite plugin for Cloudwerk file-based routing with virtual entry generation",
   "repository": {
     "type": "git",
@@ -19,8 +19,8 @@
   ],
   "dependencies": {
     "@swc/core": "^1.3.100",
-    "@cloudwerk/core": "^0.15.0",
-    "@cloudwerk/ui": "^0.15.0"
+    "@cloudwerk/core": "^0.15.1",
+    "@cloudwerk/ui": "^0.15.1"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0",