@homebound/truss 2.0.3 → 2.0.5

package/build/plugin/index.js

@@ -1238,6 +1238,13 @@ import _generate from "@babel/generator";
 import * as t3 from "@babel/types";
 var generate = _generate.default ?? _generate;
 var traverse = _traverse.default ?? _traverse;
+function formatDroppedPropertyKey(prop) {
+  if (t3.isObjectProperty(prop)) {
+    if (t3.isIdentifier(prop.key)) return prop.key.name;
+    if (t3.isStringLiteral(prop.key)) return prop.key.value;
+  }
+  return formatNodeSnippet(prop);
+}
 function rewriteExpressionSites(options) {
   for (const site of options.sites) {
     const propsArgs = buildPropsArgsFromChain(site.resolvedChain, options);
@@ -1259,8 +1266,18 @@ function rewriteExpressionSites(options) {
     }
     site.path.replaceWith(buildStyleArrayExpression(propsArgs, site.path.node.loc?.start.line ?? null, options));
   }
-  rewriteCssSpreadCalls(options.ast, options.cssBindingName);
-  rewriteStyleObjectExpressions(options.ast);
+  rewriteCssSpreadCalls(
+    options.ast,
+    options.cssBindingName,
+    options.asStyleArrayHelperName,
+    options.needsAsStyleArrayHelper
+  );
+  rewriteStyleObjectExpressions(
+    options.ast,
+    options.skippedCssPropMessages,
+    options.asStyleArrayHelperName,
+    options.needsAsStyleArrayHelper
+  );
   rewriteCssAttributeExpressions(
     options.ast,
     options.filename,
@@ -1451,7 +1468,7 @@ function isCssRewriteableExpression(expr, path) {
   return !!lowerCssExpressionToPropsArgs(expr, path, "asStyleArray", { current: false });
 }
 function lowerCssExpressionToPropsArgs(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
-  return buildStyleObjectPropsArgs(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) ?? buildStyleArrayLikePropsArgsFromExpression(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) ?? buildUnknownCssValuePropsArgs(expr, asStyleArrayHelperName, needsAsStyleArrayHelper);
+  return buildStyleObjectPropsArgs(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) ?? buildStyleArrayLikePropsArgsFromExpression(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper);
 }
 function explainSkippedCssRewrite(expr, path) {
   if (t3.isObjectExpression(expr)) {
@@ -1503,26 +1520,28 @@ function removeExistingClassNameAttribute(path) {
 }
 function buildStyleObjectPropsArgs(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
   if (!t3.isObjectExpression(expr) || expr.properties.length === 0) return null;
-  const propsArgs = [];
-  for (const prop of expr.properties) {
-    if (!t3.isSpreadElement(prop)) return null;
-    const normalizedArg = normalizeStyleArrayLikeExpression(prop.argument, path, /* @__PURE__ */ new Set());
-    if (!normalizedArg) {
-      propsArgs.push(
-        t3.spreadElement(
-          buildUnknownObjectSpreadFallback(prop.argument, asStyleArrayHelperName, needsAsStyleArrayHelper)
-        )
-      );
-      continue;
-    }
-    const nestedArgs = buildStyleArrayLikePropsArgs(normalizedArg, path, /* @__PURE__ */ new Set());
-    if (nestedArgs && t3.isArrayExpression(normalizedArg)) {
-      propsArgs.push(...nestedArgs);
-    } else {
-      propsArgs.push(t3.spreadElement(buildSafeSpreadArgument(normalizedArg)));
+  const result = collectStyleCompositionEntries(expr, path);
+  if (!result) {
+    if (expr.properties.every(function(prop) {
+      return t3.isSpreadElement(prop);
+    })) {
+      return expr.properties.map(function(prop) {
+        const spread = prop;
+        return t3.spreadElement(
+          buildUnknownObjectSpreadFallback(spread.argument, asStyleArrayHelperName, needsAsStyleArrayHelper)
+          // I.e. `css={{ ...css }}` or `css={{ ...xss }}`
+        );
+      });
     }
+    return null;
   }
-  return propsArgs.length > 0 ? propsArgs : null;
+  if (result.droppedPropertyKeys.length > 0) return null;
+  return buildPropsArgsFromStyleCompositionEntries(
+    result.entries,
+    path,
+    asStyleArrayHelperName,
+    needsAsStyleArrayHelper
+  );
 }
 function buildStyleArrayLikePropsArgsFromExpression(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
   const normalizedExpr = normalizeStyleArrayLikeExpression(expr, path, /* @__PURE__ */ new Set());
@@ -1559,20 +1578,22 @@ function buildStyleArrayLikePropsArgs(expr, path, seen) {
   }
   return null;
 }
-function buildUnknownCssValuePropsArgs(expr, asStyleArrayHelperName, needsAsStyleArrayHelper) {
-  if (!(t3.isIdentifier(expr) || t3.isMemberExpression(expr) || t3.isCallExpression(expr))) return null;
-  return [t3.spreadElement(buildUnknownObjectSpreadFallback(expr, asStyleArrayHelperName, needsAsStyleArrayHelper))];
-}
-function rewriteStyleObjectExpressions(ast) {
+function rewriteStyleObjectExpressions(ast, messages, asStyleArrayHelperName, needsAsStyleArrayHelper) {
   traverse(ast, {
     ObjectExpression(path) {
-      const rewritten = tryBuildStyleArrayFromObject(path);
-      if (!rewritten) return;
-      path.replaceWith(rewritten);
+      const result = tryBuildStyleArrayFromObject(path, asStyleArrayHelperName, needsAsStyleArrayHelper);
+      if (!result.rewritten) return;
+      if (result.droppedPropertyKeys.length > 0) {
+        messages.push({
+          message: `[truss] Unsupported pattern: Dropped non-spread properties from style composition object (${result.droppedPropertyKeys.join(", ")})`,
+          line: path.node.loc?.start.line ?? null
+        });
+      }
+      path.replaceWith(result.rewritten);
     }
   });
 }
-function rewriteCssSpreadCalls(ast, cssBindingName) {
+function rewriteCssSpreadCalls(ast, cssBindingName, asStyleArrayHelperName, needsAsStyleArrayHelper) {
   traverse(ast, {
     CallExpression(path) {
       if (!isCssSpreadCall(path.node, cssBindingName)) return;
@@ -1580,44 +1601,86 @@ function rewriteCssSpreadCalls(ast, cssBindingName) {
       if (!arg || t3.isSpreadElement(arg) || !t3.isExpression(arg) || path.node.arguments.length !== 1) return;
       const styleObject = unwrapStyleObjectExpression(arg);
       if (!styleObject) return;
-      const rewritten = tryBuildStyleArrayFromObjectExpression(styleObject, path);
-      if (!rewritten) return;
-      path.replaceWith(rewritten);
+      const result = tryBuildStyleArrayFromObjectExpression(
+        styleObject,
+        path,
+        asStyleArrayHelperName,
+        needsAsStyleArrayHelper
+      );
+      if (!result.rewritten) return;
+      path.replaceWith(result.rewritten);
     }
   });
 }
-function tryBuildStyleArrayFromObject(path) {
-  return tryBuildStyleArrayFromObjectExpression(path.node, path);
+function tryBuildStyleArrayFromObject(path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
+  return tryBuildStyleArrayFromObjectExpression(path.node, path, asStyleArrayHelperName, needsAsStyleArrayHelper);
+}
+function tryBuildStyleArrayFromObjectExpression(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
+  const result = collectStyleCompositionEntries(expr, path);
+  if (!result) return { rewritten: null, droppedPropertyKeys: [] };
+  const elements = buildArrayElementsFromStyleCompositionEntries(
+    result.entries,
+    path,
+    asStyleArrayHelperName,
+    needsAsStyleArrayHelper
+  );
+  return { rewritten: t3.arrayExpression(elements), droppedPropertyKeys: result.droppedPropertyKeys };
 }
-function tryBuildStyleArrayFromObjectExpression(expr, path) {
+function collectStyleCompositionEntries(expr, path) {
   if (expr.properties.length === 0) return null;
-  let sawStyleArray = false;
-  const elements = [];
+  let sawKnownStyle = false;
+  const entries = [];
+  const droppedPropertyKeys = [];
   for (const prop of expr.properties) {
     if (!t3.isSpreadElement(prop)) {
-      return null;
+      droppedPropertyKeys.push(formatDroppedPropertyKey(prop));
+      continue;
     }
-    const normalizedArg = normalizeStyleArrayLikeExpression(
-      prop.argument,
-      path,
-      /* @__PURE__ */ new Set()
-      // I.e. `...Css.df.$`, `...(cond ? Css.df.$ : {})`, or `...styles.wrapper`
-    );
+    const normalizedArg = normalizeStyleArrayLikeExpression(prop.argument, path, /* @__PURE__ */ new Set());
     if (!normalizedArg) {
-      elements.push(t3.spreadElement(buildInlineAsStyleArrayExpression(prop.argument)));
+      entries.push({ kind: "unknown", expr: prop.argument });
       continue;
     }
     if (isKnownStyleArrayLike(normalizedArg, path, /* @__PURE__ */ new Set())) {
-      sawStyleArray = true;
+      sawKnownStyle = true;
+      entries.push({ kind: "known", expr: normalizedArg });
+    } else {
+      entries.push({ kind: "unknown", expr: normalizedArg });
     }
-    if (t3.isArrayExpression(normalizedArg)) {
-      elements.push(...normalizedArg.elements);
+  }
+  return sawKnownStyle ? { entries, droppedPropertyKeys } : null;
+}
+function buildPropsArgsFromStyleCompositionEntries(entries, path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
+  const propsArgs = [];
+  for (const entry of entries) {
+    const nestedArgs = entry.kind === "known" ? buildStyleArrayLikePropsArgs(entry.expr, path, /* @__PURE__ */ new Set()) : null;
+    if (nestedArgs && t3.isArrayExpression(entry.expr)) {
+      propsArgs.push(...nestedArgs);
       continue;
     }
-    elements.push(t3.spreadElement(buildSafeSpreadArgument(normalizedArg)));
+    propsArgs.push(
+      t3.spreadElement(
+        entry.kind === "known" ? buildSafeSpreadArgument(entry.expr) : buildUnknownObjectSpreadFallback(entry.expr, asStyleArrayHelperName, needsAsStyleArrayHelper)
+      )
+    );
   }
-  if (!sawStyleArray) return null;
-  return t3.arrayExpression(elements);
+  return propsArgs;
+}
+function buildArrayElementsFromStyleCompositionEntries(entries, path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
+  const elements = [];
+  for (const entry of entries) {
+    const nestedArgs = entry.kind === "known" ? buildStyleArrayLikePropsArgs(entry.expr, path, /* @__PURE__ */ new Set()) : null;
+    if (nestedArgs && t3.isArrayExpression(entry.expr)) {
+      elements.push(...entry.expr.elements);
+      continue;
+    }
+    elements.push(
+      t3.spreadElement(
+        entry.kind === "known" ? buildSafeSpreadArgument(entry.expr) : asStyleArrayHelperName && needsAsStyleArrayHelper ? buildUnknownObjectSpreadFallback(entry.expr, asStyleArrayHelperName, needsAsStyleArrayHelper) : buildInlineAsStyleArrayExpression(entry.expr)
+      )
+    );
+  }
+  return elements;
 }
 function isCssSpreadCall(expr, cssBindingName) {
   return t3.isMemberExpression(expr.callee) && !expr.callee.computed && t3.isIdentifier(expr.callee.object, { name: cssBindingName }) && t3.isIdentifier(expr.callee.property, { name: "spread" });
@@ -1661,6 +1724,9 @@ function normalizeStyleArrayLikeBranch(expr, path, seen) {
   if (isEmptyObjectExpression(expr)) {
     return t3.arrayExpression([]);
   }
+  if (t3.isObjectExpression(expr)) {
+    return tryBuildStyleArrayFromObjectExpression(expr, path).rewritten;
+  }
   return normalizeStyleArrayLikeExpression(expr, path, seen);
 }
 function isStyleArrayLike(expr, path, seen) {
@@ -1677,6 +1743,12 @@ function isStyleArrayLike(expr, path, seen) {
     return isStyleArrayLikeBranch(expr.consequent, path, seen) && isStyleArrayLikeBranch(expr.alternate, path, seen);
   }
   if (t3.isIdentifier(expr)) {
+    const possibleValues = resolvePossibleStyleValues(expr, path, new Set(seen));
+    if (possibleValues) {
+      return possibleValues.every(function(value) {
+        return isStyleArrayLike(value, path, new Set(seen));
+      });
+    }
     const binding = path.scope.getBinding(expr.name);
     const bindingPath = binding?.path;
     if (!bindingPath || !bindingPath.isVariableDeclarator()) return false;
@@ -1684,10 +1756,22 @@ function isStyleArrayLike(expr, path, seen) {
     return !!(init && isStyleArrayLike(init, bindingPath, seen));
   }
   if (t3.isCallExpression(expr)) {
+    const possibleValues = resolvePossibleStyleValues(expr, path, new Set(seen));
+    if (possibleValues) {
+      return possibleValues.every(function(value) {
+        return isStyleArrayLike(value, path, new Set(seen));
+      });
+    }
     const returnExpr = getCallStyleArrayLikeExpression(expr, path);
     return returnExpr ? isStyleArrayLike(returnExpr, path, seen) : true;
   }
   if (t3.isMemberExpression(expr)) {
+    const possibleValues = resolvePossibleStyleValues(expr, path, new Set(seen));
+    if (possibleValues) {
+      return possibleValues.every(function(value) {
+        return isStyleArrayLike(value, path, new Set(seen));
+      });
+    }
     const object = expr.object;
     if (!t3.isIdentifier(object)) return false;
     const binding = path.scope.getBinding(object.name);
@@ -1720,6 +1804,12 @@ function isKnownStyleArrayLike(expr, path, seen) {
     return isStyleArrayLikeBranch(expr.consequent, path, seen) && isStyleArrayLikeBranch(expr.alternate, path, seen);
   }
   if (t3.isIdentifier(expr)) {
+    const possibleValues = resolvePossibleStyleValues(expr, path, new Set(seen));
+    if (possibleValues) {
+      return possibleValues.every(function(value) {
+        return isKnownStyleArrayLike(value, path, new Set(seen));
+      });
+    }
     const binding = path.scope.getBinding(expr.name);
     const bindingPath = binding?.path;
     if (!bindingPath || !bindingPath.isVariableDeclarator()) return false;
@@ -1727,10 +1817,22 @@ function isKnownStyleArrayLike(expr, path, seen) {
     return !!(init && isKnownStyleArrayLike(init, bindingPath, seen));
   }
   if (t3.isCallExpression(expr)) {
+    const possibleValues = resolvePossibleStyleValues(expr, path, new Set(seen));
+    if (possibleValues) {
+      return possibleValues.every(function(value) {
+        return isKnownStyleArrayLike(value, path, new Set(seen));
+      });
+    }
     const returnExpr = getCallStyleArrayLikeExpression(expr, path);
     return !!(returnExpr && isKnownStyleArrayLike(returnExpr, path, seen));
   }
   if (t3.isMemberExpression(expr)) {
+    const possibleValues = resolvePossibleStyleValues(expr, path, new Set(seen));
+    if (possibleValues) {
+      return possibleValues.every(function(value) {
+        return isKnownStyleArrayLike(value, path, new Set(seen));
+      });
+    }
     const object = expr.object;
     if (!t3.isIdentifier(object)) return false;
     const binding = path.scope.getBinding(object.name);
@@ -1767,6 +1869,7 @@ function buildInlineAsStyleArrayExpression(expr) {
     t3.callExpression(t3.memberExpression(t3.identifier("Array"), t3.identifier("isArray")), [expr]),
     expr,
     t3.conditionalExpression(expr, t3.arrayExpression([expr]), t3.arrayExpression([]))
+    // I.e. `xss` becomes `[xss]` when truthy
   );
 }
 function buildSafeSpreadArgument(expr) {
@@ -1797,6 +1900,47 @@ function getCallStyleArrayLikeExpression(expr, path) {
   }
   return null;
 }
+function resolvePossibleStyleValues(expr, path, seen) {
+  if (seen.has(expr)) return null;
+  seen.add(expr);
+  if (t3.isObjectExpression(expr) || t3.isArrayExpression(expr)) {
+    return [expr];
+  }
+  if (t3.isIdentifier(expr)) {
+    const binding = path.scope.getBinding(expr.name);
+    const bindingPath = binding?.path;
+    if (!bindingPath || !bindingPath.isVariableDeclarator()) return null;
+    const init = bindingPath.node.init;
+    return init && t3.isExpression(init) ? resolvePossibleStyleValues(init, bindingPath, seen) : null;
+  }
+  if (t3.isCallExpression(expr)) {
+    const returnExpr = getCallStyleArrayLikeExpression(expr, path);
+    return returnExpr ? resolvePossibleStyleValues(returnExpr, path, seen) : null;
+  }
+  if (t3.isMemberExpression(expr)) {
+    const object = expr.object;
+    if (!t3.isExpression(object)) return null;
+    const objectValues = resolvePossibleStyleValues(object, path, seen);
+    if (!objectValues) return null;
+    const propertyName = getStaticMemberPropertyName(expr, path);
+    const values = [];
+    for (const objectValue of objectValues) {
+      if (!t3.isObjectExpression(objectValue)) continue;
+      for (const prop of objectValue.properties) {
+        if (!t3.isObjectProperty(prop) || prop.computed || !t3.isExpression(prop.value)) continue;
+        if (propertyName) {
+          if (isMatchingPropertyName(prop.key, propertyName)) {
+            values.push(prop.value);
+          }
+        } else {
+          values.push(prop.value);
+        }
+      }
+    }
+    return values.length > 0 ? values : null;
+  }
+  return null;
+}
 function getLocalFunctionReturnExpression(expr, path) {
   if (!t3.isIdentifier(expr.callee)) return null;
   const binding = path.scope.getBinding(expr.callee.name);