@homebound/truss 2.12.0 → 2.14.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,30 @@ 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 collectRuntimeLookups(chains) {
   const lookups = /* @__PURE__ */ new Map();
   for (const chain of chains) {