@timber-js/app 0.2.0-alpha.8 → 0.2.0-alpha.9

package/dist/plugins/fonts.d.ts

@@ -56,6 +56,13 @@ export declare function parseGoogleFontImports(source: string): string[];
  * e.g. { Inter: 'Inter', JetBrains_Mono: 'JetBrains Mono' }
  */
 export declare function parseGoogleFontFamilies(source: string): Map<string, string>;
+/**
+ * Generate CSS for a single extracted font.
+ *
+ * Includes @font-face rules (for local fonts), fallback @font-face,
+ * and the scoped class rule.
+ */
+export declare function generateFontCss(font: ExtractedFont): string;
 /**
  * Generate the CSS output for all extracted fonts.
  *

package/dist/plugins/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/plugins/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,MAAM,CAAC;AAGlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAqBxE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AA4CtD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAE7E;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,CAE5F;AAUD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAkB/D;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAqB3E;AAwED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,YAAY,GAAG,MAAM,CAwBjE;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAKtE;AAqED;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAuUtD"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/plugins/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,MAAM,CAAC;AAGlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AA4BxE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AA4CtD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAE7E;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,CAE5F;AAUD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAkB/D;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAqB3E;AAwED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,aAAa,GAAG,MAAM,CAmB3D;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,YAAY,GAAG,MAAM,CAMjE;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAKtE;AAqED;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAkUtD"}

package/dist/server/rsc-entry/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/server/rsc-entry/index.ts"],"names":[],"mappings":"AAgFA;;;;;GAKG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI,CAE/F;AAiaD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAIzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;8BArQ3C,OAAO,KAAG,OAAO,CAAC,QAAQ,CAAC;AAuQhD,wBAAiE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/server/rsc-entry/index.ts"],"names":[],"mappings":"AAkFA;;;;;GAKG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI,CAE/F;AAiaD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAIzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;8BArQ3C,OAAO,KAAG,OAAO,CAAC,QAAQ,CAAC;AAuQhD,wBAAiE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timber-js/app",
-  "version": "0.2.0-alpha.8",
+  "version": "0.2.0-alpha.9",
   "description": "Vite-native React framework for Cloudflare Workers — correct HTTP semantics, real status codes, pages that work without JavaScript",
   "keywords": [
     "cloudflare-workers",

package/src/index.ts

@@ -223,8 +223,7 @@ export interface PluginContext {
   buildManifest: BuildManifest | null;
   /** Startup timer for profiling cold start phases (active in dev, no-op in prod) */
   timer: StartupTimer;
-  /** URL path to font CSS file, set by timber-fonts when fonts are registered */
-  fontCssUrl?: string;
+
 }
 
 /**

package/src/plugins/entries.ts

@@ -112,7 +112,7 @@ function generateConfigModule(ctx: PluginContext): string {
     topLoader: ctx.config.topLoader,
     responseCache: ctx.config.responseCache,
     debug: ctx.config.debug ?? false,
-    fontCssUrl: ctx.fontCssUrl ?? null,
+
   };
 
   return [

package/src/plugins/fonts.ts

@@ -36,8 +36,15 @@ const VIRTUAL_LOCAL = '@timber/fonts/local';
 const RESOLVED_GOOGLE = '\0@timber/fonts/google';
 const RESOLVED_LOCAL = '\0@timber/fonts/local';
 
-/** URL path where font CSS is served (dev middleware and prod asset). */
-const FONT_CSS_PATH = '/_timber/fonts/fonts.css';
+/**
+ * Virtual module that exports the combined font CSS string.
+ *
+ * The RSC entry imports this module and inlines it as a <style> tag.
+ * Unlike a config-based approach, this module is loaded lazily (on first
+ * request), so it always has up-to-date font data from the registry.
+ */
+const VIRTUAL_FONT_CSS = 'virtual:timber-font-css';
+const RESOLVED_FONT_CSS = '\0virtual:timber-font-css';
 
 /**
  * Registry of fonts extracted during transform.
@@ -247,6 +254,33 @@ function generateLocalVirtualModule(): string {
   ].join('\n');
 }
 
+/**
+ * Generate CSS for a single extracted font.
+ *
+ * Includes @font-face rules (for local fonts), fallback @font-face,
+ * and the scoped class rule.
+ */
+export function generateFontCss(font: ExtractedFont): string {
+  const cssParts: string[] = [];
+
+  if (font.provider === 'local' && font.localSources) {
+    const faces = generateLocalFontFaces(font.family, font.localSources, font.display);
+    const faceCss = generateFontFaces(faces);
+    if (faceCss) cssParts.push(faceCss);
+  }
+
+  const fallbackCss = generateFallbackCss(font.family);
+  if (fallbackCss) cssParts.push(fallbackCss);
+
+  if (font.variable) {
+    cssParts.push(generateVariableClass(font.className, font.variable, font.fontFamily));
+  } else {
+    cssParts.push(generateFontFamilyClass(font.className, font.fontFamily));
+  }
+
+  return cssParts.join('\n\n');
+}
+
 /**
  * Generate the CSS output for all extracted fonts.
  *
@@ -255,27 +289,9 @@ function generateLocalVirtualModule(): string {
  */
 export function generateAllFontCss(registry: FontRegistry): string {
   const cssParts: string[] = [];
-
   for (const font of registry.values()) {
-    // Generate @font-face rules for local fonts
-    if (font.provider === 'local' && font.localSources) {
-      const faces = generateLocalFontFaces(font.family, font.localSources, font.display);
-      const faceCss = generateFontFaces(faces);
-      if (faceCss) cssParts.push(faceCss);
-    }
-
-    // Generate fallback @font-face if metrics are available
-    const fallbackCss = generateFallbackCss(font.family);
-    if (fallbackCss) cssParts.push(fallbackCss);
-
-    // Generate scoped class
-    if (font.variable) {
-      cssParts.push(generateVariableClass(font.className, font.variable, font.fontFamily));
-    } else {
-      cssParts.push(generateFontFamilyClass(font.className, font.fontFamily));
-    }
+    cssParts.push(generateFontCss(font));
   }
-
   return cssParts.join('\n\n');
 }
 
@@ -372,20 +388,32 @@ export function timberFonts(ctx: PluginContext): Plugin {
     name: 'timber-fonts',
 
     /**
-     * Resolve `@timber/fonts/google` and `@timber/fonts/local` to virtual modules.
+     * Resolve `@timber/fonts/google`, `@timber/fonts/local`,
+     * and `virtual:timber-font-css` virtual modules.
      */
     resolveId(id: string) {
       if (id === VIRTUAL_GOOGLE) return RESOLVED_GOOGLE;
       if (id === VIRTUAL_LOCAL) return RESOLVED_LOCAL;
+      if (id === VIRTUAL_FONT_CSS) return RESOLVED_FONT_CSS;
       return null;
     },
 
     /**
      * Return generated source for font virtual modules.
+     *
+     * `virtual:timber-font-css` exports the combined @font-face CSS
+     * as a string. The RSC entry imports it and inlines a <style> tag.
+     * Because this is loaded lazily (on first request), the font
+     * registry is always populated by the time it's needed.
      */
     load(id: string) {
       if (id === RESOLVED_GOOGLE) return generateGoogleVirtualModule(registry);
       if (id === RESOLVED_LOCAL) return generateLocalVirtualModule();
+
+      if (id === RESOLVED_FONT_CSS) {
+        const css = generateAllFontCss(registry);
+        return `export default ${JSON.stringify(css)};`;
+      }
       return null;
     },
 
@@ -412,14 +440,8 @@ export function timberFonts(ctx: PluginContext): Plugin {
           return;
         }
 
-        // Serve generated font CSS
-        if (requestedFilename === 'fonts.css') {
-          const css = generateAllFontCss(registry);
-          res.setHeader('Content-Type', 'text/css');
-          res.setHeader('Cache-Control', 'no-cache');
-          res.end(css);
-          return;
-        }
+        // Font CSS is now injected via Vite's CSS pipeline (virtual:timber-font-css modules).
+        // This middleware only serves font binary files (woff2, etc.).
 
         // Find the matching font file in the registry
         for (const font of registry.values()) {
@@ -578,10 +600,6 @@ export function timberFonts(ctx: PluginContext): Plugin {
       }
 
       if (transformedCode !== code) {
-        // Mark that fonts are in use so the RSC entry injects a <link> tag.
-        if (registry.size > 0 && !ctx.fontCssUrl) {
-          ctx.fontCssUrl = FONT_CSS_PATH;
-        }
         return { code: transformedCode, map: null };
       }
 
@@ -627,15 +645,8 @@ export function timberFonts(ctx: PluginContext): Plugin {
         }
       }
 
-      // Emit the combined font CSS as an asset
-      const fontCss = generateAllFontCss(registry);
-      if (fontCss) {
-        this.emitFile({
-          type: 'asset',
-          fileName: '_timber/fonts/fonts.css',
-          source: fontCss,
-        });
-      }
+      // Font CSS is emitted by Vite's CSS pipeline via virtual:timber-font-css modules.
+      // We only need to emit font binary files and update the build manifest here.
 
       if (!ctx.buildManifest) return;
 

package/src/server/rsc-entry/index.ts

@@ -23,6 +23,8 @@ import config from 'virtual:timber-config';
 import buildManifest from 'virtual:timber-build-manifest';
 // @ts-expect-error — virtual module provided by timber-entries plugin
 import loadUserInstrumentation from 'virtual:timber-instrumentation';
+// @ts-expect-error — virtual module provided by timber-fonts plugin
+import fontCss from 'virtual:timber-font-css';
 
 import type { FormRerender } from '#/server/action-handler.js';
 import { handleActionRequest, isActionRequest } from '#/server/action-handler.js';
@@ -386,11 +388,11 @@ async function renderRoute(
     headHtml += buildCssLinkTags(cssUrls);
   }
 
-  // Inject font CSS stylesheet — pure CSS, no JS needed.
-  // The URL is set by the timber-fonts plugin when fonts are registered.
-  const fontCssUrl = (config as { fontCssUrl?: string | null }).fontCssUrl;
-  if (fontCssUrl) {
-    headHtml += `<link rel="stylesheet" href="${fontCssUrl}">`;
+  // Inline font CSS as a <style> tag — @font-face rules and scoped classes.
+  // The virtual:timber-font-css module is loaded lazily, so the font registry
+  // is always populated by the time we get here (no timing issues).
+  if (fontCss) {
+    headHtml += `<style data-timber-fonts>${fontCss}</style>`;
   }
 
   const fontEntries = collectRouteFonts(segments, typedManifest);