Pre Release New Changes

packages/compiler/src/codegen.ts

@@ -9,7 +9,7 @@
  *   api="<name>"       -> SSR/client data binding declared in a mode block
  *   ssrGet/ssrText     -> legacy server-side API fetch + render
  *   csrGet/csrText     -> legacy browser-side API fetch + render
- *   style              -> an inline page stylesheet
+ *   style              -> tagged local stylesheet metadata promoted by SSR
  *   functions          -> server-only helpers for API/realtime code
  *   api M /p {b}       -> export const M = async (ctx) => { b }
  *   realtime {..}      -> export const websocket = { evt(ws, ...args) { b } }
@@ -735,6 +735,36 @@ function hydrationId(ast: PageAst): string {
   return `${ast.name}:${stableHash(shape)}`;
 }
 
+function localStyleId(ast: PageAst): string {
+  return `wrn-${ast.kind}-${stableHash(`${ast.kind}:${ast.name}`)}`;
+}
+
+function localStyleTag(ast: PageAst, styles: string[]): string {
+  if (!styles.length) return "";
+
+  const id = localStyleId(ast);
+  const css = styles.map(styleEscape).join("\n");
+
+  return `<style data-wrnexus-style="${attrEscape(ast.name)}" data-wrnexus-style-id="${attrEscape(id)}" data-wrnexus-style-owner="${attrEscape(ast.name)}" data-wrnexus-style-kind="${attrEscape(ast.kind)}">\n${css}\n</style>`;
+}
+
+function localStyleExport(ast: PageAst, styles: string[]): string | null {
+  if (!styles.length) return null;
+
+  return `export const __wrnexusStyles = ${JSON.stringify(
+    [
+      {
+        id: localStyleId(ast),
+        owner: ast.name,
+        kind: ast.kind,
+        css: styles.join("\n"),
+      },
+    ],
+    null,
+    2,
+  )};`;
+}
+
 function isSafeGeneratedIdentifier(name: string): boolean {
   return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name);
 }
@@ -829,10 +859,12 @@ export function generate(ast: PageAst): string {
     html = `<div data-scope="${scopePlaceholder}"${behaviorAttribute(pageBehavior)}${hydrationAttribute(ast)}>${html}</div>`;
   }
 
-  if (styles.length > 0) {
-    const css = styles.map(styleEscape).join("\n");
-    html = `<style data-wrnexus-style="${attrEscape(ast.name)}">\n${css}\n</style>${html}`;
+  const pageStyleTag = localStyleTag(ast, styles);
+  if (pageStyleTag) {
+    html = `${pageStyleTag}${html}`;
   }
+  const pageStyleExport = localStyleExport(ast, styles);
+  if (pageStyleExport) out.push(pageStyleExport);
   if (csrBindings.length > 0) {
     out.push(`export const __wrnexusCsr = ${JSON.stringify(csrBindings, null, 2)};`);
   }
@@ -1653,12 +1685,7 @@ function generateComponent(ast: PageAst): string {
     )
     .join("");
   const styles = ast.styles.map((body) => body.trim()).filter(Boolean);
-  const styleTag =
-    styles.length > 0
-      ? escLit(
-          `<style data-wrnexus-style="${attrEscape(ast.name)}">\n${styles.map(styleEscape).join("\n")}\n</style>`,
-        )
-      : "";
+  const styleTag = escLit(localStyleTag(ast, styles));
 
   // A component needs a reactive scope only when it has state or event handlers.
   // Prop-driven text/attributes are baked server-side, so static components ship
@@ -1740,6 +1767,8 @@ function generateComponent(ast: PageAst): string {
   if (Object.keys(ast.security).length > 0) {
     out.push(`export const __wrnexusSecurity = ${JSON.stringify(ast.security, null, 2)};`);
   }
+  const componentStyleExport = localStyleExport(ast, styles);
+  if (componentStyleExport) out.push(componentStyleExport);
 
   if (behavior) {
     out.push(`export const __wrnexusBehavior = ${JSON.stringify(behavior, null, 2)};`);