feat: include critical css into html template

LiasCode · LiasCode · commit 9044dce5f98d · 2025-09-12T05:21:39.000-04:00
diff --git a/examples/basic/src/entry-server.tsx b/examples/basic/src/entry-server.tsx
@@ -34,7 +34,7 @@ export default function ServerEntry({ children }: ServerEntryProps) {
         />
         <Meta />
       </head>
-      <body>
+      <body class="dark">
         {children}
         <Scripts />
       </body>
diff --git a/packages/pranx/src/build/generate_html_template.ts b/packages/pranx/src/build/generate_html_template.ts
@@ -1,30 +1,39 @@
 import { META_TAG } from "@/server/components/meta";
 import { SCRIPTS_TAG } from "@/server/components/scripts";
 import { minifySync } from "@swc/html";
+import { readFileSync } from "node:fs";
+
+let critical_css = "";
 
 export const generate_html_template = ({
   hydrate_data_as_string,
   page_prerendered,
   minify = false,
-  css = [],
+  css_links = [],
+  critical_css_filepath = "",
 }: {
   page_prerendered: string;
   hydrate_data_as_string: string;
   minify: boolean;
-  css: string[];
+  css_links: string[];
+  critical_css_filepath: string;
 }) => {
+  if (!critical_css) {
+    critical_css = readFileSync(critical_css_filepath, { encoding: "utf8" });
+  }
+
   const template = `
       <!DOCTYPE html>
       ${page_prerendered
         .replace(
           META_TAG,
-          `${css.map((css_path) => `<link rel="stylesheet" href="${css_path}" />`).join("\n")}`
+          `<style>${critical_css}</style> 
+          ${css_links.map((css_path) => `<link rel="stylesheet" href="${css_path}" />`).join("\n")}`
         )
         .replace(
           SCRIPTS_TAG,
-          `
-        <script>window.__PRANX_HYDRATE_DATA__=${hydrate_data_as_string}</script>
-        <script type="module" src="/_.._/entry-client.js"></script>`
+          `<script>window.__PRANX_HYDRATE_DATA__=${hydrate_data_as_string}</script> 
+           <script type="module" src="/_.._/entry-client.js"></script>`
         )}`;
 
   if (!minify) return template;
diff --git a/packages/pranx/src/cmd/build.ts b/packages/pranx/src/cmd/build.ts
@@ -38,7 +38,7 @@ export async function build() {
   await fse.emptyDir(OUTPUT_PRANX_DIR);
 
   // Bundling
-  const optimize_output = true;
+  const optimize_output = false;
 
   const server_bundle_result = await bundle_server({
     optimize: optimize_output,
@@ -53,6 +53,7 @@ export async function build() {
   // Manifests
   const server_site_manifest: SERVER_MANIFEST = {
     entry_server: join(OUTPUT_BUNDLE_SERVER_DIR, "entry-server.js"),
+    global_css_filepath: "",
     routes: [],
     api: [],
   };
@@ -101,7 +102,7 @@ export async function build() {
     if (!file.endsWith(".css")) continue;
 
     if (file.endsWith("entry-client.css")) {
-      css_output.entry = file.replace(pranx_browser_base_path, "");
+      css_output.entry = join(OUTPUT_BUNDLE_BROWSER_DIR, file.replace(pranx_browser_base_path, ""));
       continue;
     }
 
@@ -116,6 +117,8 @@ export async function build() {
     css_output[path_normalized] = css_file_relative;
   }
 
+  server_site_manifest.global_css_filepath = css_output.entry;
+
   // Generating Manifest and generating static pages data
   for (const [file, _output] of Object.entries(browser_bundle_result.metafile.outputs)) {
     if (!file.endsWith("page.js")) continue;
@@ -189,7 +192,7 @@ export async function build() {
         revalidate: statics_fn_result.revalidate || -1,
         is_dynamic: isUrlDynamic,
         dynamic_params: dynamic_params,
-        css: [css_output.entry, css_output[final_path_normalized] || ""].filter(Boolean),
+        css: [css_output[final_path_normalized] || ""].filter(Boolean),
         static_generated_routes: [],
         absolute_module_path: module_path,
       });
@@ -247,12 +250,13 @@ export async function build() {
       static_generated_routes: [],
       is_dynamic: isUrlDynamic,
       dynamic_params: dynamic_params,
-      css: [css_output.entry, css_output[final_path_normalized] || ""].filter(Boolean) as string[],
+      css: [css_output[final_path_normalized] || ""].filter(Boolean) as string[],
       absolute_module_path: module_path,
     });
   }
 
   const hydrate_data: HYDRATE_DATA = {
+    entry_css: css_output.entry,
     routes: server_site_manifest.routes.map((r) => {
       return {
         module: r.module,
@@ -294,7 +298,8 @@ export async function build() {
           page_prerendered,
           hydrate_data_as_string,
           minify: optimize_output,
-          css: route.css,
+          css_links: route.css,
+          critical_css_filepath: server_site_manifest.global_css_filepath,
         });
 
         const output_html_path = join(OUTPUT_BUNDLE_BROWSER_DIR, static_route.path, "index.html");
@@ -314,7 +319,8 @@ export async function build() {
       page_prerendered,
       hydrate_data_as_string,
       minify: true,
-      css: route.css,
+      css_links: route.css,
+      critical_css_filepath: server_site_manifest.global_css_filepath,
     });
 
     const output_html_path = join(OUTPUT_BUNDLE_BROWSER_DIR, route.path, "index.html");
diff --git a/packages/pranx/src/server/runtime/define-ssr-handlers.ts b/packages/pranx/src/server/runtime/define-ssr-handlers.ts
@@ -66,7 +66,8 @@ export const define_ssr_handlers = async (server_manifest: SERVER_MANIFEST, app:
           page_prerendered,
           hydrate_data_as_string: JSON.stringify(hydrate_data),
           minify: true,
-          css: route.css,
+          css_links: route.css,
+          critical_css_filepath: server_manifest.global_css_filepath,
         });
 
         return html(event, html_string);
diff --git a/packages/pranx/types/index.d.ts b/packages/pranx/types/index.d.ts
@@ -93,6 +93,7 @@ export type ServerManifestApiHandler = {
 
 export type SERVER_MANIFEST = {
   entry_server: string;
+  global_css_filepath: string;
   routes: ServerManifestRoute[];
   api: ServerManifestApiHandler[];
 };
@@ -110,6 +111,7 @@ export type HydrateDataRoute = {
 
 export type HYDRATE_DATA = {
   routes: HydrateDataRoute[];
+  entry_css: string;
 };
 
 declare global {
