@stacksjs/stx 0.2.133 → 0.2.134

package/dist/dev-server/crosswind.d.ts

@@ -1,3 +1,4 @@
+export declare function getCrosswindServeAsset(hash: string): string | undefined;
 /**
  * Lazily load the Crosswind module
  * Returns null if Crosswind is not installed
@@ -70,7 +71,7 @@ export declare function generateCrosswindCSS(htmlContent: string, appDir?: strin
  * Inject generated CSS into HTML content
  * Tries to inject before </head>, falls back to <body> or prepends
  */
-export declare function injectCrosswindCSS(htmlContent: string, appDir?: string): Promise<string>;
+export declare function injectCrosswindCSS(htmlContent: string, appDir?: string, serveMode?: boolean): Promise<string>;
 // Type for Crosswind module
 declare interface CrosswindModule {
   CSSGenerator: new (config: CrosswindConfig) => CSSGenerator

package/dist/dev-server/crosswind.js

@@ -3,7 +3,7 @@ import { hasLocalConfig } from "bunfig/discovery";
 import { stateDir } from "../state-dir.js";
 import { colors } from "./terminal-colors.js";
 let crosswindModule = null, crosswindLoadAttempted = !1, cachedConfig = null, cachedCSS = "", isBuilding = !1;
-const MAX_CACHE = 256, cssByClassSet = new Map;
+const MAX_CACHE = 256, cssByClassSet = new Map, serveCssByHash = new Map;
 let diskCacheRoot = null, configFingerprint = null;
 function shortHash(input) {
   return Bun.hash(input).toString(16).padStart(16, "0").slice(0, 16);
@@ -15,6 +15,23 @@ function setLruCache(key, value) {
     cssByClassSet.delete(cssByClassSet.keys().next().value);
   cssByClassSet.set(key, value);
 }
+function registerServeCss(css) {
+  const hash = shortHash(css);
+  if (serveCssByHash.has(hash))
+    serveCssByHash.delete(hash);
+  else if (serveCssByHash.size >= MAX_CACHE)
+    serveCssByHash.delete(serveCssByHash.keys().next().value);
+  serveCssByHash.set(hash, css);
+  return hash;
+}
+export function getCrosswindServeAsset(hash) {
+  const css = serveCssByHash.get(hash);
+  if (css === void 0)
+    return;
+  serveCssByHash.delete(hash);
+  serveCssByHash.set(hash, css);
+  return css;
+}
 async function readDiskCache(key) {
   if (!diskCacheRoot)
     return null;
@@ -140,6 +157,7 @@ export async function loadCrosswind() {
 }
 export function resetCssCache() {
   cssByClassSet.clear();
+  serveCssByHash.clear();
 }
 export function resetCrosswindCache() {
   crosswindModule = null;
@@ -147,6 +165,7 @@ export function resetCrosswindCache() {
   cachedConfig = null;
   cachedCSS = "";
   cssByClassSet.clear();
+  serveCssByHash.clear();
   configFingerprint = null;
 }
 export async function loadCrosswindConfig(cwd) {
@@ -377,27 +396,27 @@ export async function generateCrosswindCSS(htmlContent, appDir) {
     return "";
   }
 }
-export async function injectCrosswindCSS(htmlContent, appDir) {
+export async function injectCrosswindCSS(htmlContent, appDir, serveMode = !1) {
   const css = await generateCrosswindCSS(htmlContent, appDir);
   if (!css)
     return htmlContent;
-  const styleTag = `<style data-crosswind="generated">
+  const assetTag = serveMode ? `<link data-crosswind="generated" rel="stylesheet" href="/_stx/crosswind.${registerServeCss(css)}.css">` : `<style data-crosswind="generated">
 ${css}
-</style>`, existing = /<style data-crosswind="generated">[\s\S]*?<\/style>/g;
+</style>`, existing = /(?:<style\b[^>]*\bdata-crosswind=(?:"generated"|'generated')[^>]*>[\s\S]*?<\/style>|<link\b[^>]*\bdata-crosswind=(?:"generated"|'generated')[^>]*>)/g;
   if (existing.test(htmlContent)) {
     let placed = !1;
     return htmlContent.replace(existing, () => {
       if (placed)
         return "";
       placed = !0;
-      return styleTag;
+      return assetTag;
     });
   }
   if (htmlContent.includes("</head>"))
-    return htmlContent.replace("</head>", `${styleTag}
+    return htmlContent.replace("</head>", `${assetTag}
 </head>`);
   if (htmlContent.includes("<body"))
     return htmlContent.replace(/<body([^>]*)>/, `<body$1>
-${styleTag}`);
-  return styleTag + htmlContent;
+${assetTag}`);
+  return assetTag + htmlContent;
 }

package/dist/index.d.ts

@@ -158,7 +158,7 @@ export * from './dynamic-components';
 export { definePlugin, pluginManager } from './plugin-system';
 // These modules are exported first to establish their types
 export * from './render';
-export { generateCrosswindCSS, injectCrosswindCSS, extractClassNames } from './dev-server/crosswind';
+export { extractClassNames, generateCrosswindCSS, getCrosswindServeAsset, injectCrosswindCSS } from './dev-server/crosswind';
 export { runDoctor, formatDoctorReport, findPantryPackage } from './doctor';
 export {
   applyTranslations,

package/dist/index.js

@@ -107,7 +107,7 @@ export { createApp, createApp as createStxApp, defineCustomElement } from "./app
 export * from "./dynamic-components.js";
 export { definePlugin, pluginManager } from "./plugin-system.js";
 export * from "./render.js";
-export { generateCrosswindCSS, injectCrosswindCSS, extractClassNames } from "./dev-server/crosswind.js";
+export { extractClassNames, generateCrosswindCSS, getCrosswindServeAsset, injectCrosswindCSS } from "./dev-server/crosswind.js";
 export { runDoctor, formatDoctorReport, findPantryPackage } from "./doctor.js";
 export {
   applyTranslations,

package/dist/process.js

@@ -316,7 +316,7 @@ export async function processDirectives(template, context, filePath, options, de
           }
         } catch {}
       if (isTopLevel && context.__stx_inject_css !== !1)
-        result = await injectCrosswindCSS(result);
+        result = await injectCrosswindCSS(result, void 0, options.buildMode === "serve");
       if (isTopLevel)
         result = dedupeScopedStyles(result);
       result = result.replace(/\x00STX_ESCAPED_AT\x00/g, "@");