From d803ec8054acba9045107e35f4565f7f375642ce Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Mon, 4 May 2026 01:42:12 -0700
Subject: [PATCH] chore: fix CSS SSR rendering

---
 .gitignore                 |  1 +
 Island.cfm                 | 34 ++++++++++++++-
 coldspa/renderers/Vue.cfm  | 11 +++--
 coldspa/vite/ssr-server.js | 87 +++++++++++++++++++++++++++++++++-----
 dist-ssr/App.js            | 33 ---------------
 dist-ssr/vue-ssr.js        | 15 -------
 6 files changed, 118 insertions(+), 63 deletions(-)
 delete mode 100644 dist-ssr/App.js
 delete mode 100644 dist-ssr/vue-ssr.js

diff --git a/.gitignore b/.gitignore
index 66ec20c..9794208 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ WEB-INF/
 crossdomain.xml
 node_modules/
 dist/
+dist-ssr/
 island-config.json
\ No newline at end of file
diff --git a/Island.cfm b/Island.cfm
index c640890..be6b8d2 100644
--- a/Island.cfm
+++ b/Island.cfm
@@ -107,17 +107,40 @@ bootBody    = rendered.body;
 // available, we just emit an empty div and the client mounts fresh -- so the
 // page works either way (just no JS-off rendering in that case).
 ssrHtml  = "";
+ssrCss   = "";
 ssrError = "";
 if (structKeyExists(attributes.framework, "ssrRender")) {
     ssrResult = attributes.framework.ssrRender(componentGlobKey, attributes.props);
     // Tolerate older renderers that returned a plain string.
     if (isStruct(ssrResult)) {
         ssrHtml  = ssrResult.html  ?: "";
+        ssrCss   = ssrResult.css   ?: "";
         ssrError = ssrResult.error ?: "";
     } else {
         ssrHtml = ssrResult;
     }
 }
+
+// In prod the SSR sidecar can't easily inline component CSS (the SSR build
+// doesn't emit CSS), so we surface it as <link> tags from the client manifest.
+// Each chunk in the manifest carries a `css` array of hashed asset filenames.
+ssrCssLinks = [];
+if (!cfg.isDev && len(ssrHtml) && structKeyExists(attributes.framework, "clientEntry")) {
+    try {
+        manifestPath = expandPath("/dist/.vite/manifest.json");
+        if (fileExists(manifestPath)) {
+            manifest = deserializeJSON(fileRead(manifestPath));
+            entryKey = reReplace(attributes.framework.clientEntry, "^\./", "");
+            if (structKeyExists(manifest, entryKey) && structKeyExists(manifest[entryKey], "css")) {
+                for (cssFile in manifest[entryKey].css) {
+                    arrayAppend(ssrCssLinks, "/dist/" & cssFile);
+                }
+            }
+        }
+    } catch (any e) {
+        // non-fatal: we'll just have a brief FOUC
+    }
+}
 </cfscript>
 
 <!--- Surface SSR failures so they aren't silently swallowed. --->
@@ -126,8 +149,17 @@ if (structKeyExists(attributes.framework, "ssrRender")) {
 <cfelseif not len(ssrHtml)>
     <cfoutput><!-- coldspa SSR: empty html, no error reported (renderer may not implement ssrRender) --></cfoutput>
 <cfelse>
-    <cfoutput><!-- coldspa SSR: ok (#len(ssrHtml)# bytes) --></cfoutput>
+    <cfoutput><!-- coldspa SSR: ok (#len(ssrHtml)# bytes, #len(ssrCss)# css bytes) --></cfoutput>
+</cfif>
+
+<!--- Inline scoped/component CSS (dev) so styles are present pre-hydration. --->
+<cfif len(ssrCss)>
+    <cfoutput><style data-coldspa-ssr="#mountId#">#ssrCss#</style></cfoutput>
 </cfif>
+<!--- In prod, link the bundled CSS for the client entry. --->
+<cfloop array="#ssrCssLinks#" index="cssHref">
+    <cfoutput><link rel="stylesheet" href="#cssHref#" data-coldspa-ssr="#mountId#"></cfoutput>
+</cfloop>
 
 <!--- Mount point (contains SSR HTML if available, for hydration) --->
 <div id="<cfoutput>#mountId#</cfoutput>" data-coldspa-island="<cfoutput>#attributes.framework.name#</cfoutput>"><cfoutput>#ssrHtml#</cfoutput></div>
diff --git a/coldspa/renderers/Vue.cfm b/coldspa/renderers/Vue.cfm
index f0ec053..6840f64 100644
--- a/coldspa/renderers/Vue.cfm
+++ b/coldspa/renderers/Vue.cfm
@@ -26,14 +26,19 @@ Vue = {
             }
             if (find("200", local.resp.statusCode)) {
                 var parsed = deserializeJSON(local.resp.fileContent);
-                return { "html": parsed.html ?: "", "error": "" };
+                return {
+                    "html":  parsed.html ?: "",
+                    "css":   parsed.css  ?: "",
+                    "error": ""
+                };
             }
             return {
-                "html": "",
+                "html":  "",
+                "css":   "",
                 "error": "SSR sidecar returned " & local.resp.statusCode & ": " & left(local.resp.fileContent, 500)
             };
         } catch (any e) {
-            return { "html": "", "error": "SSR call failed: " & e.message };
+            return { "html": "", "css": "", "error": "SSR call failed: " & e.message };
         }
     },
 
diff --git a/coldspa/vite/ssr-server.js b/coldspa/vite/ssr-server.js
index ef02ab5..331adbd 100644
--- a/coldspa/vite/ssr-server.js
+++ b/coldspa/vite/ssr-server.js
@@ -5,22 +5,21 @@
 // Endpoints:
 //   POST /render/:framework
 //     body: { componentPath: string, props: object }
-//     200:  { html: string }
+//     200:  { html: string, css: string }
 //     500:  { error: string }
 //
 // Modes:
 //   - dev   (default if NODE_ENV !== 'production'): uses Vite's middleware-mode
 //           dev server + ssrLoadModule. Picks up component changes without
-//           rebuilding.
+//           rebuilding. Component CSS is collected from Vite's module graph
+//           and returned in the `css` field so CF can inline a <style> tag.
 //   - prod: imports the built bundle from dist-ssr/ directly. Run
-//           `npm run build:ssr` first.
+//           `npm run build:ssr` first. CSS is served via <link> tags from the
+//           client manifest (handled in Island.cfm).
 //
 // Env:
 //   COLDSPA_SSR_PORT   default 5174
-//   COLDSPA_SSR_HOST   default 0.0.0.0  (bind on all interfaces so CF running
-//                                        in a container or on another machine
-//                                        can reach the sidecar; restrict to
-//                                        '127.0.0.1' for single-host dev)
+//   COLDSPA_SSR_HOST   default 0.0.0.0
 //   NODE_ENV           'production' switches to prod mode
 
 import { createServer as createHttpServer } from 'http';
@@ -51,12 +50,10 @@ async function getRenderer(framework) {
         if (prodModuleCache[framework]) return prodModuleCache[framework];
         const path = SSR_ENTRIES_PROD[framework];
         if (!path) throw new Error(`Unknown framework "${framework}"`);
-        // pathToFileURL so dynamic import works on Windows.
         const mod = await import(pathToFileURL(path).href);
         prodModuleCache[framework] = mod;
         return mod;
     }
-    // Dev: lazy-init Vite middleware-mode server, ssrLoadModule per request.
     if (!viteDevServer) {
         const { createServer } = await import('vite');
         viteDevServer = await createServer({
@@ -70,6 +67,72 @@ async function getRenderer(framework) {
     return await viteDevServer.ssrLoadModule(id);
 }
 
+// --- CSS collection (dev) -----------------------------------------------
+
+function isCssId(s) {
+    if (!s) return false;
+    return /\.(css|scss|sass|less|styl|stylus|pcss|postcss)($|\?)/.test(s)
+        || /[?&]lang\.(css|scss|sass|less|styl|stylus|pcss|postcss)/.test(s)
+        || /[?&]vue&type=style/.test(s);
+}
+
+function unquote(literal) {
+    // Decode a JS source-level string/template literal.
+    try { return Function(`return (${literal})`)(); } catch { return ''; }
+}
+
+function extractCssFromModule(code) {
+    // Vite's CSS HMR module wraps the raw CSS in __vite__updateStyle(id, "...").
+    let m = code.match(/__vite__updateStyle\([^,]+,\s*((?:`|")[\s\S]*?(?:`|"))\)/);
+    if (m) return unquote(m[1]) || '';
+    // Fallback for other shapes Vite may emit.
+    m = code.match(/const\s+__vite__css\s*=\s*((?:`|")[\s\S]*?(?:`|"))/);
+    if (m) return unquote(m[1]) || '';
+    return '';
+}
+
+// Walks the SSR module graph from a given component URL and returns the
+// concatenated CSS of every (transitively) imported style module. Without
+// this, scoped Vue styles flash in only after the client bundle hydrates.
+async function collectCssDev(componentPath) {
+    if (!viteDevServer) return '';
+    // Make sure the module is in the SSR graph.
+    try { await viteDevServer.ssrLoadModule(componentPath); } catch { /* ignore */ }
+
+    const root = await viteDevServer.moduleGraph.getModuleByUrl(componentPath, true);
+    if (!root) return '';
+
+    const styles = new Map();
+    const seen = new Set();
+
+    async function walk(mod) {
+        if (!mod) return;
+        const key = mod.id || mod.url;
+        if (!key || seen.has(key)) return;
+        seen.add(key);
+
+        if (isCssId(mod.id) || isCssId(mod.url)) {
+            try {
+                const r = await viteDevServer.transformRequest(mod.url || mod.id, { ssr: false });
+                if (r && r.code) {
+                    const css = extractCssFromModule(r.code);
+                    if (css) styles.set(key, css);
+                }
+            } catch {
+                // ignore transform errors -- skip this file
+            }
+        }
+
+        const next = mod.ssrImportedModules || mod.importedModules;
+        if (next) {
+            for (const child of next) await walk(child);
+        }
+    }
+
+    await walk(root);
+    return Array.from(styles.values()).join('\n');
+}
+
 // --- http ---------------------------------------------------------------
 
 async function readJsonBody(req) {
@@ -96,10 +159,12 @@ const server = createHttpServer(async (req, res) => {
         const { componentPath, props } = await readJsonBody(req);
         const renderer = await getRenderer(framework);
         const html = await renderer.render(componentPath, props ?? {});
+        // Dev: collect inline CSS so the page has component styles before
+        // hydration. Prod: handled via <link> from the client manifest.
+        const css = IS_PROD ? '' : await collectCssDev(componentPath);
         res.setHeader('content-type', 'application/json');
-        res.end(JSON.stringify({ html }));
+        res.end(JSON.stringify({ html, css }));
     } catch (err) {
-        // Log full stack server-side; send a short message to CF.
         console.error('[coldspa-ssr]', err);
         res.statusCode = 500;
         res.setHeader('content-type', 'application/json');
diff --git a/dist-ssr/App.js b/dist-ssr/App.js
deleted file mode 100644
index 543393e..0000000
--- a/dist-ssr/App.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ref, mergeProps, useSSRContext } from "vue";
-import { ssrRenderAttrs, ssrInterpolate } from "vue/server-renderer";
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const _sfc_main = {
-  __name: "App",
-  __ssrInlineRender: true,
-  props: {
-    hello: { type: String, default: "" },
-    serverTime: { type: String, default: "" }
-  },
-  setup(__props) {
-    const count = ref(0);
-    return (_ctx, _push, _parent, _attrs) => {
-      _push(`<div${ssrRenderAttrs(mergeProps({ class: "island" }, _attrs))} data-v-f4406005><h2 data-v-f4406005>Hello, ${ssrInterpolate(__props.hello)}!</h2><p data-v-f4406005>Rendered server-side at: <code data-v-f4406005>${ssrInterpolate(__props.serverTime)}</code></p><p data-v-f4406005>Hydrated client-side by Vue.</p><button data-v-f4406005>${ssrInterpolate(count.value)}</button></div>`);
-    };
-  }
-};
-const _sfc_setup = _sfc_main.setup;
-_sfc_main.setup = (props, ctx) => {
-  const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/App.vue");
-  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
-};
-const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f4406005"]]);
-export {
-  App as default
-};
diff --git a/dist-ssr/vue-ssr.js b/dist-ssr/vue-ssr.js
deleted file mode 100644
index ab43b8c..0000000
--- a/dist-ssr/vue-ssr.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createSSRApp } from "vue";
-import { renderToString } from "vue/server-renderer";
-const components = /* @__PURE__ */ Object.assign({ "/src/App.vue": () => import("./App.js") });
-async function render(componentPath, props) {
-  const loader = components[componentPath];
-  if (!loader) {
-    throw new Error(`[Coldspa SSR] No Vue component registered for path "${componentPath}".`);
-  }
-  const mod = await loader();
-  const app = createSSRApp(mod.default, props);
-  return await renderToString(app);
-}
-export {
-  render
-};
-- 
2.51.2