@homebound/truss 2.10.0 → 2.11.1

package/build/plugin/index.js

@@ -2443,7 +2443,12 @@ function rewriteExpressionSites(options) {
     const cssAttrPath = getCssAttributePath(site.path);
     const line = site.path.node.loc?.start.line ?? null;
     if (cssAttrPath) {
-      cssAttrPath.replaceWith(t3.jsxSpreadAttribute(buildCssSpreadExpression(cssAttrPath, styleHash, line, options)));
+      if (!options.debug && isFullyStaticStyleHash(styleHash) && !hasExistingAttribute(cssAttrPath, "className") && !hasExistingAttribute(cssAttrPath, "style")) {
+        const classNames = extractStaticClassNames(styleHash);
+        cssAttrPath.replaceWith(t3.jsxAttribute(t3.jsxIdentifier("className"), t3.stringLiteral(classNames)));
+      } else {
+        cssAttrPath.replaceWith(t3.jsxSpreadAttribute(buildCssSpreadExpression(cssAttrPath, styleHash, line, options)));
+      }
     } else {
       if (options.debug && line !== null) {
         injectDebugInfo(styleHash, line, options);
@@ -2815,6 +2820,29 @@ function extractSiblingClassName(callPath) {
 function isMatchingPropertyName(key, name) {
   return t3.isIdentifier(key) && key.name === name || t3.isStringLiteral(key) && key.value === name;
 }
+function isFullyStaticStyleHash(hash) {
+  for (const prop of hash.properties) {
+    if (!t3.isObjectProperty(prop)) return false;
+    if (!t3.isStringLiteral(prop.value)) return false;
+  }
+  return true;
+}
+function extractStaticClassNames(hash) {
+  const classNames = [];
+  for (const prop of hash.properties) {
+    if (t3.isObjectProperty(prop) && t3.isStringLiteral(prop.value)) {
+      classNames.push(prop.value.value);
+    }
+  }
+  return classNames.join(" ");
+}
+function hasExistingAttribute(path, attrName) {
+  const openingElement = path.parentPath;
+  if (!openingElement || !openingElement.isJSXOpeningElement()) return false;
+  return openingElement.node.attributes.some((attr) => {
+    return t3.isJSXAttribute(attr) && t3.isJSXIdentifier(attr.name, { name: attrName });
+  });
+}
 
 // src/plugin/transform.ts
 var traverse2 = _traverse2.default ?? _traverse2;
@@ -2833,6 +2861,7 @@ function transformTruss(code, filename, mapping, options = {}) {
   const sites = [];
   const errorMessages = [];
   let hasCssPropsCall = false;
+  let hasJsxCssAttribute = false;
   traverse2(ast, {
     // -- Css.*.$  chain collection --
     MemberExpression(path) {
@@ -2858,9 +2887,16 @@ function transformTruss(code, filename, mapping, options = {}) {
       if (t4.isMemberExpression(callee) && !callee.computed && t4.isIdentifier(callee.object, { name: cssBindingName }) && t4.isIdentifier(callee.property, { name: "props" })) {
         hasCssPropsCall = true;
       }
+    },
+    // -- 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 (sites.length === 0 && !hasCssPropsCall) return null;
+  if (sites.length === 0 && !hasCssPropsCall && !hasJsxCssAttribute) return null;
   const chains = sites.map((s) => s.resolvedChain);
   const { rules, needsMaybeInc } = collectAtomicRules(chains, mapping);
   const cssText = generateCssText(rules);