@homebound/truss 2.11.3 → 2.13.0

package/build/plugin/index.js

@@ -2773,6 +2773,7 @@ function rewriteCssPropsAndCssAttributes(options) {
     // I.e. css={someVariable}, css={{ ...a, ...b }}, css={cond ? a : b}
     JSXAttribute(path) {
       if (!t3.isJSXIdentifier(path.node.name, { name: "css" })) return;
+      if (isRuntimeStyleCssAttribute(path)) return;
       const value = path.node.value;
       if (!t3.isJSXExpressionContainer(value)) return;
       if (!t3.isExpression(value.expression)) return;
@@ -2820,6 +2821,11 @@ function extractSiblingClassName(callPath) {
 function isMatchingPropertyName(key, name) {
   return t3.isIdentifier(key) && key.name === name || t3.isStringLiteral(key) && key.value === name;
 }
+function isRuntimeStyleCssAttribute(path) {
+  const openingElementPath = path.parentPath;
+  if (!openingElementPath || !openingElementPath.isJSXOpeningElement()) return false;
+  return t3.isJSXIdentifier(openingElementPath.node.name, { name: "RuntimeStyle" });
+}
 function isFullyStaticStyleHash(hash) {
   for (const prop of hash.properties) {
     if (!t3.isObjectProperty(prop)) return false;
@@ -2860,7 +2866,8 @@ function transformTruss(code, filename, mapping, options = {}) {
   const sites = [];
   const errorMessages = [];
   let hasCssPropsCall = false;
-  let hasJsxCssAttribute = false;
+  let hasBuildtimeJsxCssAttribute = false;
+  let hasRuntimeStyleCssUsage = false;
   traverse2(ast, {
     // -- Css.*.$  chain collection --
     MemberExpression(path) {
@@ -2869,6 +2876,10 @@ 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;
+      }
       const parentPath = path.parentPath;
       if (parentPath && parentPath.isMemberExpression() && t4.isIdentifier(parentPath.node.property, { name: "$" })) {
         return;
@@ -2890,13 +2901,12 @@ function transformTruss(code, filename, mapping, options = {}) {
     },
     // -- JSX css={...} attribute detection (so we don't bail when there are only css props) --
     JSXAttribute(path) {
-      if (hasJsxCssAttribute) return;
-      if (t4.isJSXIdentifier(path.node.name, { name: "css" })) {
-        hasJsxCssAttribute = true;
-      }
+      if (!t4.isJSXIdentifier(path.node.name, { name: "css" })) return;
+      if (isRuntimeStyleCssAttribute2(path)) return;
+      hasBuildtimeJsxCssAttribute = true;
     }
   });
-  if (sites.length === 0 && !hasCssPropsCall && !hasJsxCssAttribute) return null;
+  if (sites.length === 0 && !hasCssPropsCall && !hasBuildtimeJsxCssAttribute) return null;
   const chains = sites.map((s) => s.resolvedChain);
   const { rules, needsMaybeInc } = collectAtomicRules(chains, mapping);
   const cssText = generateCssText(rules);
@@ -2946,7 +2956,7 @@ function transformTruss(code, filename, mapping, options = {}) {
     runtimeImports.push({ importedName: "__injectTrussCSS", localName: "__injectTrussCSS" });
   }
   let reusedCssImportLine = false;
-  if (cssIsImported) {
+  if (cssIsImported && !hasRuntimeStyleCssUsage) {
     reusedCssImportLine = runtimeImports.length > 0 && findImportDeclaration(ast, "@homebound/truss/runtime") === null && replaceCssImportWithNamedImports(ast, cssImportBinding, "@homebound/truss/runtime", runtimeImports);
     if (!reusedCssImportLine) {
       removeCssImport(ast, cssImportBinding);
@@ -2994,6 +3004,24 @@ 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);
+    }
+    current = current.parentPath;
+  }
+  return false;
+}
+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 collectRuntimeLookups(chains) {
   const lookups = /* @__PURE__ */ new Map();
   for (const chain of chains) {
@@ -3111,10 +3139,6 @@ function transformCssTs(code, filename, mapping) {
     sourceFilename: filename
   });
   const cssBindingName = findCssImportBinding(ast);
-  if (!cssBindingName) {
-    return `/* [truss] ${filename}: no Css import found */
-`;
-  }
   const cssExport = findNamedCssExportObject(ast);
   if (!cssExport) {
     return `/* [truss] ${filename}: expected \`export const css = { ... }\` with an object literal */
@@ -3137,10 +3161,19 @@ function transformCssTs(code, filename, mapping) {
       continue;
     }
     const valueNode = prop.value;
+    const rawCss = extractStaticStringValue(valueNode, cssBindingName);
+    if (rawCss !== null) {
+      rules.push(formatRawCssRule(selector, rawCss));
+      continue;
+    }
     if (!t6.isExpression(valueNode)) {
       rules.push(`/* [truss] unsupported: "${selector}" value is not an expression */`);
       continue;
     }
+    if (!cssBindingName) {
+      rules.push(`/* [truss] unsupported: "${selector}" \u2014 Css.*.$  chain requires a Css import */`);
+      continue;
+    }
     const cssResult = resolveCssExpression(valueNode, cssBindingName, mapping, filename);
     if ("error" in cssResult) {
       rules.push(`/* [truss] unsupported: "${selector}" \u2014 ${cssResult.error} */`);
@@ -3174,6 +3207,16 @@ function objectPropertyStringKey(prop, stringBindings) {
   if (prop.computed) return resolveStaticString(prop.key, stringBindings);
   return null;
 }
+function extractStaticStringValue(node, cssBindingName) {
+  if (t6.isStringLiteral(node)) return node.value;
+  if (t6.isTemplateLiteral(node) && node.expressions.length === 0 && node.quasis.length === 1) {
+    return node.quasis[0].value.cooked ?? node.quasis[0].value.raw;
+  }
+  if (t6.isTaggedTemplateExpression(node) && t6.isMemberExpression(node.tag) && !node.tag.computed && t6.isIdentifier(node.tag.property, { name: "raw" }) && t6.isIdentifier(node.tag.object, { name: cssBindingName ?? "" }) && node.quasi.expressions.length === 0 && node.quasi.quasis.length === 1) {
+    return node.quasi.quasis[0].value.cooked ?? node.quasi.quasis[0].value.raw;
+  }
+  return null;
+}
 function resolveCssExpression(node, cssBindingName, mapping, filename) {
   if (!t6.isMemberExpression(node) || node.computed || !t6.isIdentifier(node.property, { name: "$" })) {
     return { error: "value must be a Css.*.$  expression" };
@@ -3234,6 +3277,14 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
   }
   return { declarations };
 }
+function formatRawCssRule(selector, raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) return `${selector} {}`;
+  const body = trimmed.split("\n").map((line) => `  ${line.trim()}`).filter((line) => line.trim().length > 0).join("\n");
+  return `${selector} {
+${body}
+}`;
+}
 function formatCssRule(selector, declarations) {
   if (declarations.length === 0) {
     return `${selector} {}`;