@homebound/truss 2.13.0 → 2.15.0

package/build/plugin/index.js

@@ -1,6 +1,7 @@
 // src/plugin/index.ts
-import { readFileSync as readFileSync3, existsSync } from "fs";
-import { resolve as resolve2, dirname, isAbsolute } from "path";
+import { readFileSync as readFileSync3, writeFileSync as writeFileSync2, existsSync, readdirSync } from "fs";
+import { resolve as resolve2, dirname, isAbsolute, join as join2 } from "path";
+import { createHash } from "crypto";
 
 // src/plugin/emit-truss.ts
 import * as t from "@babel/types";
@@ -3012,10 +3013,16 @@ function isInsideRuntimeStyleCssObject(path) {
       if (!attrPath || !attrPath.isJSXAttribute()) return false;
       return t4.isObjectExpression(current.node.expression) && isRuntimeStyleCssAttribute2(attrPath);
     }
+    if (current.isCallExpression() && isUseRuntimeStyleCall(current.node)) {
+      return true;
+    }
     current = current.parentPath;
   }
   return false;
 }
+function isUseRuntimeStyleCall(node) {
+  return t4.isIdentifier(node.callee, { name: "useRuntimeStyle" });
+}
 function isRuntimeStyleCssAttribute2(path) {
   if (!t4.isJSXIdentifier(path.node.name, { name: "css" })) return false;
   const openingElementPath = path.parentPath;
@@ -3477,6 +3484,7 @@ function loaderForPath(filePath) {
 // src/plugin/index.ts
 var VIRTUAL_CSS_PREFIX = "\0truss-css:";
 var CSS_TS_QUERY = "?truss-css";
+var TRUSS_CSS_PLACEHOLDER = "__TRUSS_CSS_HASH__";
 var VIRTUAL_CSS_ENDPOINT = "/virtual:truss.css";
 var VIRTUAL_RUNTIME_ID = "virtual:truss:runtime";
 var RESOLVED_VIRTUAL_RUNTIME_ID = "\0" + VIRTUAL_RUNTIME_ID;
@@ -3489,6 +3497,7 @@ function trussPlugin(opts) {
   let isTest = false;
   let isBuild = false;
   const libraryPaths = opts.libraries ?? [];
+  let emittedCssFileName = null;
   const cssRegistry = /* @__PURE__ */ new Map();
   let cssVersion = 0;
   let lastSentVersion = 0;
@@ -3556,8 +3565,9 @@ function trussPlugin(opts) {
     },
     transformIndexHtml(html) {
       if (isBuild) {
-        const link = `<link rel="stylesheet" href="./truss.css">`;
-        return html.replace("</head>", `    ${link}
+        const stripped = html.replace(/\s*<link[^>]*href=["'][^"']*virtual:truss\.css["'][^>]*\/?>/, "");
+        const link = `<link rel="stylesheet" href="${TRUSS_CSS_PLACEHOLDER}">`;
+        return stripped.replace("</head>", `    ${link}
   </head>`);
       }
       const tag = `<script type="module" src="/${VIRTUAL_RUNTIME_ID}"></script>`;
@@ -3674,11 +3684,27 @@ __injectTrussCSS(${JSON.stringify(css)});
       if (!isBuild) return;
       const css = collectCss();
       if (!css) return;
+      const hash = createHash("sha256").update(css).digest("hex").slice(0, 8);
+      const fileName = `assets/truss-${hash}.css`;
+      emittedCssFileName = fileName;
       this.emitFile({
         type: "asset",
-        fileName: "truss.css",
+        fileName,
         source: css
       });
+    },
+    /** Patch HTML files on disk to replace the CSS placeholder with the hashed filename. */
+    writeBundle(options, _bundle) {
+      if (!emittedCssFileName) return;
+      const outDir = options.dir || join2(projectRoot, "dist");
+      for (const entry of readdirSync(outDir)) {
+        if (!entry.endsWith(".html")) continue;
+        const htmlPath = join2(outDir, entry);
+        const html = readFileSync3(htmlPath, "utf8");
+        if (html.includes(TRUSS_CSS_PLACEHOLDER)) {
+          writeFileSync2(htmlPath, html.replace(TRUSS_CSS_PLACEHOLDER, `/${emittedCssFileName}`), "utf8");
+        }
+      }
     }
   };
 }