@homebound/truss 2.20.0 → 2.21.0

package/build/plugin/index.js

@@ -3136,7 +3136,6 @@ function transformTruss(code, filename, mapping, options = {}) {
   const errorMessages = [];
   let hasCssPropsCall = false;
   let hasBuildtimeJsxCssAttribute = false;
-  let hasRuntimeStyleCssUsage = false;
   traverse2(ast, {
     // -- Css.*.$  chain collection --
     MemberExpression(path) {
@@ -3145,10 +3144,6 @@ function transformTruss(code, filename, mapping, options = {}) {
       if (path.node.computed) return;
       const chain = extractChain(path.node.object, cssBindingName);
       if (!chain) return;
-      if (isInsideRuntimeStyleCssObject(path)) {
-        hasRuntimeStyleCssUsage = true;
-        return;
-      }
       if (isInsideWhenObjectValue(path, cssBindingName)) {
         return;
       }
@@ -3175,7 +3170,6 @@ function transformTruss(code, filename, mapping, options = {}) {
     // -- JSX css={...} attribute detection (so we don't bail when there are only css props) --
     JSXAttribute(path) {
       if (!t4.isJSXIdentifier(path.node.name, { name: "css" })) return;
-      if (isRuntimeStyleCssAttribute2(path)) return;
       hasBuildtimeJsxCssAttribute = true;
     }
   });
@@ -3229,7 +3223,7 @@ function transformTruss(code, filename, mapping, options = {}) {
     runtimeImports.push({ importedName: "__injectTrussCSS", localName: "__injectTrussCSS" });
   }
   let reusedCssImportLine = false;
-  if (cssIsImported && !hasRuntimeStyleCssUsage) {
+  if (cssIsImported) {
     reusedCssImportLine = runtimeImports.length > 0 && findImportDeclaration(ast, "@homebound/truss/runtime") === null && replaceCssImportWithNamedImports(ast, cssImportBinding, "@homebound/truss/runtime", runtimeImports);
     if (!reusedCssImportLine) {
       removeCssImport(ast, cssImportBinding);
@@ -3277,30 +3271,6 @@ function transformTruss(code, filename, mapping, options = {}) {
   const outputCode = preserveBlankLineAfterImports(code, output.code);
   return { code: outputCode, map: output.map, css: cssText, rules };
 }
-function isInsideRuntimeStyleCssObject(path) {
-  let current = path.parentPath;
-  while (current) {
-    if (current.isJSXExpressionContainer()) {
-      const attrPath = current.parentPath;
-      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;
-  if (!openingElementPath || !openingElementPath.isJSXOpeningElement()) return false;
-  return t4.isJSXIdentifier(openingElementPath.node.name, { name: "RuntimeStyle" });
-}
 function isInsideWhenObjectValue(path, cssBindingName) {
   let current = path.parentPath;
   while (current) {
@@ -3871,6 +3841,7 @@ function trussPlugin(opts) {
   const libraryPaths = opts.libraries ?? [];
   let emittedCssFileName = null;
   const cssRegistry = /* @__PURE__ */ new Map();
+  const arbitraryCssRegistry = /* @__PURE__ */ new Map();
   let cssVersion = 0;
   let lastSentVersion = 0;
   function mappingPath() {
@@ -3892,8 +3863,21 @@ function trussPlugin(opts) {
     }
     return libraryCache;
   }
+  function updateArbitraryCssRegistry(sourcePath, sourceCode) {
+    const css = transformCssTs(sourceCode, sourcePath, ensureMapping()).trim();
+    if (css.length > 0) {
+      const prev = arbitraryCssRegistry.get(sourcePath);
+      arbitraryCssRegistry.set(sourcePath, css);
+      if (prev !== css) cssVersion++;
+    } else {
+      if (arbitraryCssRegistry.delete(sourcePath)) cssVersion++;
+    }
+  }
   function collectCss() {
-    const appCss = generateCssText(cssRegistry);
+    const appCssParts = [generateCssText(cssRegistry)];
+    const allArbitrary = Array.from(arbitraryCssRegistry.values()).join("\n\n");
+    appCssParts.push(annotateArbitraryCssBlock(allArbitrary));
+    const appCss = appCssParts.filter((p) => p.length > 0).join("\n");
     const libs = loadLibraries();
     if (libs.length === 0) return appCss;
     const appParsed = parseTrussCss(appCss);
@@ -3911,6 +3895,7 @@ function trussPlugin(opts) {
     buildStart() {
       ensureMapping();
       cssRegistry.clear();
+      arbitraryCssRegistry.clear();
       libraryCache = null;
       cssVersion = 0;
       lastSentVersion = 0;
@@ -4005,7 +3990,8 @@ __injectTrussCSS(${JSON.stringify(css)});
       if (!id.startsWith(VIRTUAL_CSS_PREFIX)) return null;
       const sourcePath = id.slice(VIRTUAL_CSS_PREFIX.length) + ".ts";
       const sourceCode = readFileSync3(sourcePath, "utf8");
-      return transformCssTs(sourceCode, sourcePath, ensureMapping());
+      updateArbitraryCssRegistry(sourcePath, sourceCode);
+      return `/* [truss] ${sourcePath} \u2014 included via truss.css */`;
     },
     transform(code, id) {
       if (!/\.[cm]?[jt]sx?(\?|$)/.test(id)) return null;
@@ -4021,6 +4007,7 @@ __injectTrussCSS(${JSON.stringify(css)});
       }
       if (!hasCssDsl && !rewrittenImports.changed && !testCssBootstrap.changed) return null;
       if (fileId.endsWith(".css.ts")) {
+        updateArbitraryCssRegistry(fileId, code);
         return rewrittenImports.changed || testCssBootstrap.changed ? { code: transformedCode, map: null } : null;
       }
       if (!hasCssDsl) {