@homebound/truss 2.0.0-next.1 → 2.0.0-next.5

package/build/plugin/index.js

@@ -142,6 +142,17 @@ function resolveChain(chain, mapping) {
           segments.push(seg);
           continue;
         }
+        if (abbr === "typography") {
+          const resolved = resolveTypographyCall(
+            node,
+            mapping,
+            currentMediaQuery,
+            currentPseudoClass,
+            currentPseudoElement
+          );
+          segments.push(...resolved);
+          continue;
+        }
         if (abbr === "element") {
           if (node.args.length !== 1 || node.args[0].type !== "StringLiteral") {
             throw new UnsupportedPatternError(
@@ -215,6 +226,52 @@ function conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, breakpoints)
   if (pseudoClass) parts.push(pseudoName(pseudoClass));
   return parts.join("_");
 }
+function resolveTypographyCall(node, mapping, mediaQuery, pseudoClass, pseudoElement) {
+  if (node.args.length !== 1) {
+    throw new UnsupportedPatternError(`typography() expects exactly 1 argument, got ${node.args.length}`);
+  }
+  const argAst = node.args[0];
+  if (argAst.type === "StringLiteral") {
+    return resolveTypographyEntry(argAst.value, mapping, mediaQuery, pseudoClass, pseudoElement);
+  }
+  const typography = mapping.typography ?? [];
+  if (typography.length === 0) {
+    throw new UnsupportedPatternError(`typography() is unavailable because no typography abbreviations were generated`);
+  }
+  const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
+  const lookupKey = suffix ? `typography__${suffix}` : "typography";
+  const segmentsByName = {};
+  for (const name of typography) {
+    segmentsByName[name] = resolveTypographyEntry(name, mapping, mediaQuery, pseudoClass, pseudoElement);
+  }
+  return [
+    {
+      key: lookupKey,
+      defs: {},
+      typographyLookup: {
+        lookupKey,
+        argNode: argAst,
+        segmentsByName
+      }
+    }
+  ];
+}
+function resolveTypographyEntry(name, mapping, mediaQuery, pseudoClass, pseudoElement) {
+  if (!(mapping.typography ?? []).includes(name)) {
+    throw new UnsupportedPatternError(`Unknown typography abbreviation "${name}"`);
+  }
+  const entry = mapping.abbreviations[name];
+  if (!entry) {
+    throw new UnsupportedPatternError(`Unknown typography abbreviation "${name}"`);
+  }
+  const resolved = resolveEntry(name, entry, mapping, mediaQuery, pseudoClass, pseudoElement, null);
+  for (const segment of resolved) {
+    if (segment.dynamicProps || segment.whenPseudo) {
+      throw new UnsupportedPatternError(`Typography abbreviation "${name}" cannot require runtime arguments`);
+    }
+  }
+  return resolved;
+}
 function wrapDefsWithConditions(defs, mediaQuery, pseudoClass) {
   if (!mediaQuery && !pseudoClass) return defs;
   const result = {};
@@ -869,12 +926,17 @@ function extractChain(node, cssBinding) {
 import * as t2 from "@babel/types";
 function collectCreateData(chains) {
   const createEntries = /* @__PURE__ */ new Map();
+  const runtimeLookups = /* @__PURE__ */ new Map();
   let needsMaybeInc = false;
   for (const chain of chains) {
     for (const part of chain.parts) {
       const segs = part.type === "unconditional" ? part.segments : [...part.thenSegments, ...part.elseSegments];
       for (const seg of segs) {
         if (seg.error) continue;
+        if (seg.typographyLookup) {
+          collectTypographyLookup(createEntries, runtimeLookups, seg);
+          continue;
+        }
         if (seg.dynamicProps) {
           if (!createEntries.has(seg.key)) {
             createEntries.set(seg.key, {
@@ -903,7 +965,36 @@ function collectCreateData(chains) {
       }
     }
   }
-  return { createEntries, needsMaybeInc };
+  return { createEntries, runtimeLookups, needsMaybeInc };
+}
+function collectTypographyLookup(createEntries, runtimeLookups, seg) {
+  const lookup = seg.typographyLookup;
+  if (!lookup) return;
+  if (!runtimeLookups.has(lookup.lookupKey)) {
+    runtimeLookups.set(lookup.lookupKey, {
+      lookupKey: lookup.lookupKey,
+      refsByName: Object.fromEntries(
+        Object.entries(lookup.segmentsByName).map(function([name, segments]) {
+          return [
+            name,
+            segments.map(function(segment) {
+              return segment.key;
+            })
+          ];
+        })
+      )
+    });
+  }
+  for (const segments of Object.values(lookup.segmentsByName)) {
+    for (const segment of segments) {
+      if (createEntries.has(segment.key)) continue;
+      createEntries.set(segment.key, {
+        key: segment.key,
+        defs: segment.defs,
+        whenPseudo: segment.whenPseudo
+      });
+    }
+  }
 }
 function buildCreateProperties(createEntries, stylexNamespaceName) {
   const createProperties = [];
@@ -1045,6 +1136,18 @@ function buildCreateDeclaration(createVarName, stylexNamespaceName, createProper
   ]);
   return t2.variableDeclaration("const", [t2.variableDeclarator(t2.identifier(createVarName), createCall)]);
 }
+function buildRuntimeLookupDeclaration(lookupName, createVarName, lookup) {
+  const properties = [];
+  for (const [name, refs] of Object.entries(lookup.refsByName)) {
+    const values = refs.map(function(refKey) {
+      return t2.memberExpression(t2.identifier(createVarName), t2.identifier(refKey));
+    });
+    properties.push(t2.objectProperty(toPropertyKey(name), t2.arrayExpression(values)));
+  }
+  return t2.variableDeclaration("const", [
+    t2.variableDeclarator(t2.identifier(lookupName), t2.objectExpression(properties))
+  ]);
+}
 function defsToAst(defs) {
   const properties = [];
   for (const [key, value] of Object.entries(defs)) {
@@ -1134,6 +1237,7 @@ function rewriteExpressionSites(options) {
     }
     site.path.replaceWith(t3.arrayExpression(propsArgs));
   }
+  rewriteStyleObjectExpressions(options.ast);
   rewriteCssArrayExpressions(options.ast, options.stylexNamespaceName);
 }
 function getCssAttributePath(path) {
@@ -1165,7 +1269,7 @@ function buildPropsArgsFromChain(chain, options) {
     }
     const thenArgs = buildPropsArgs(part.thenSegments, options);
     const elseArgs = buildPropsArgs(part.elseSegments, options);
-    if (thenArgs.length === 1 && elseArgs.length === 1) {
+    if (thenArgs.length === 1 && elseArgs.length === 1 && !t3.isSpreadElement(thenArgs[0]) && !t3.isSpreadElement(elseArgs[0])) {
       args.push(t3.conditionalExpression(part.conditionNode, thenArgs[0], elseArgs[0]));
     } else if (thenArgs.length > 0 || elseArgs.length > 0) {
       args.push(
@@ -1181,6 +1285,19 @@ function buildPropsArgs(segments, options) {
   const args = [];
   for (const seg of segments) {
     if (seg.error) continue;
+    if (seg.typographyLookup) {
+      const lookupName = options.runtimeLookupNames.get(seg.typographyLookup.lookupKey);
+      if (!lookupName) {
+        continue;
+      }
+      const lookupAccess = t3.memberExpression(
+        t3.identifier(lookupName),
+        seg.typographyLookup.argNode,
+        true
+      );
+      args.push(t3.spreadElement(t3.logicalExpression("??", lookupAccess, t3.arrayExpression([]))));
+      continue;
+    }
     const ref = t3.memberExpression(t3.identifier(options.createVarName), t3.identifier(seg.key));
     if (seg.dynamicProps && seg.argNode) {
       let argExpr;
@@ -1234,6 +1351,108 @@ function rewriteCssArrayExpressions(ast, stylexNamespaceName) {
     }
   });
 }
+function rewriteStyleObjectExpressions(ast) {
+  traverse(ast, {
+    ObjectExpression(path) {
+      const rewritten = tryBuildStyleArrayFromObject(path);
+      if (!rewritten) return;
+      path.replaceWith(rewritten);
+    }
+  });
+}
+function tryBuildStyleArrayFromObject(path) {
+  if (path.node.properties.length === 0) return null;
+  let sawStyleArray = false;
+  const elements = [];
+  for (const prop of path.node.properties) {
+    if (!t3.isSpreadElement(prop)) {
+      return null;
+    }
+    const normalizedArg = normalizeStyleArrayExpression(
+      prop.argument,
+      path,
+      /* @__PURE__ */ new Set()
+      // I.e. `...Css.df.$`, `...(cond ? Css.df.$ : {})`, or `...styles.wrapper`
+    );
+    if (!normalizedArg) {
+      return null;
+    }
+    if (isStyleArrayLikeExpression(normalizedArg, path, /* @__PURE__ */ new Set())) {
+      sawStyleArray = true;
+    }
+    if (t3.isArrayExpression(normalizedArg)) {
+      elements.push(...normalizedArg.elements);
+      continue;
+    }
+    elements.push(t3.spreadElement(normalizedArg));
+  }
+  if (!sawStyleArray) return null;
+  return t3.arrayExpression(elements);
+}
+function normalizeStyleArrayExpression(expr, path, seen) {
+  if (seen.has(expr)) return null;
+  seen.add(expr);
+  if (t3.isArrayExpression(expr)) return expr;
+  if (t3.isConditionalExpression(expr)) {
+    const consequent = normalizeConditionalBranch(expr.consequent, path, seen);
+    const alternate = normalizeConditionalBranch(expr.alternate, path, seen);
+    if (!consequent || !alternate) return null;
+    return t3.conditionalExpression(expr.test, consequent, alternate);
+  }
+  if (t3.isIdentifier(expr) || t3.isMemberExpression(expr)) {
+    const nestedSeen = new Set(seen);
+    nestedSeen.delete(expr);
+    if (isStyleArrayLikeExpression(expr, path, nestedSeen)) return expr;
+  }
+  return null;
+}
+function normalizeConditionalBranch(expr, path, seen) {
+  if (isEmptyObjectExpression(expr)) {
+    return t3.arrayExpression([]);
+  }
+  return normalizeStyleArrayExpression(expr, path, seen);
+}
+function isStyleArrayLikeExpression(expr, path, seen) {
+  if (seen.has(expr)) return false;
+  seen.add(expr);
+  if (t3.isArrayExpression(expr)) return true;
+  if (t3.isConditionalExpression(expr)) {
+    return isStyleArrayLikeBranch(expr.consequent, path, seen) && isStyleArrayLikeBranch(expr.alternate, path, seen);
+  }
+  if (t3.isIdentifier(expr)) {
+    const binding = path.scope.getBinding(expr.name);
+    const bindingPath = binding?.path;
+    if (!bindingPath || !bindingPath.isVariableDeclarator()) return false;
+    const init = bindingPath.node.init;
+    return !!(init && isStyleArrayLikeExpression(init, bindingPath, seen));
+  }
+  if (t3.isMemberExpression(expr) && !expr.computed && t3.isIdentifier(expr.property)) {
+    const object = expr.object;
+    if (!t3.isIdentifier(object)) return false;
+    const binding = path.scope.getBinding(object.name);
+    const bindingPath = binding?.path;
+    if (!bindingPath || !bindingPath.isVariableDeclarator()) return false;
+    const init = bindingPath.node.init;
+    if (!init || !t3.isObjectExpression(init)) return false;
+    const propertyName = expr.property.name;
+    for (const prop of init.properties) {
+      if (!t3.isObjectProperty(prop) || prop.computed) continue;
+      if (!isMatchingPropertyName(prop.key, propertyName)) continue;
+      const value = prop.value;
+      return t3.isExpression(value) && isStyleArrayLikeExpression(value, bindingPath, seen);
+    }
+  }
+  return false;
+}
+function isStyleArrayLikeBranch(expr, path, seen) {
+  return isEmptyObjectExpression(expr) || isStyleArrayLikeExpression(expr, path, seen);
+}
+function isMatchingPropertyName(key, name) {
+  return t3.isIdentifier(key) && key.name === name || t3.isStringLiteral(key) && key.value === name;
+}
+function isEmptyObjectExpression(expr) {
+  return t3.isObjectExpression(expr) && expr.properties.length === 0;
+}
 
 // src/plugin/transform.ts
 var traverse2 = _traverse2.default ?? _traverse2;
@@ -1268,19 +1487,24 @@ function transformTruss(code, filename, mapping) {
     }
   });
   if (sites.length === 0) return null;
-  const { createEntries, needsMaybeInc } = collectCreateData(sites.map((s) => s.resolvedChain));
+  const { createEntries, runtimeLookups, needsMaybeInc } = collectCreateData(sites.map((s) => s.resolvedChain));
   const usedTopLevelNames = collectTopLevelBindings(ast);
   const existingStylexNamespace = findStylexNamespaceImport(ast);
   const stylexNamespaceName = existingStylexNamespace ?? reservePreferredName(usedTopLevelNames, "stylex");
   const createVarName = reservePreferredName(usedTopLevelNames, "css", "css_");
   const maybeIncHelperName = needsMaybeInc ? reservePreferredName(usedTopLevelNames, "__maybeInc") : null;
+  const runtimeLookupNames = /* @__PURE__ */ new Map();
+  for (const [lookupKey] of runtimeLookups) {
+    runtimeLookupNames.set(lookupKey, reservePreferredName(usedTopLevelNames, `__${lookupKey}`));
+  }
   const createProperties = buildCreateProperties(createEntries, stylexNamespaceName);
   rewriteExpressionSites({
     ast,
     sites,
     createVarName,
     stylexNamespaceName,
-    maybeIncHelperName
+    maybeIncHelperName,
+    runtimeLookupNames
   });
   removeCssImport(ast, cssBindingName);
   if (!findStylexNamespaceImport(ast)) {
@@ -1295,6 +1519,11 @@ function transformTruss(code, filename, mapping) {
   declarationsToInsert.push(...hoistedMarkerDecls);
   if (createProperties.length > 0) {
     declarationsToInsert.push(buildCreateDeclaration(createVarName, stylexNamespaceName, createProperties));
+    for (const [lookupKey, lookup] of runtimeLookups) {
+      const lookupName = runtimeLookupNames.get(lookupKey);
+      if (!lookupName) continue;
+      declarationsToInsert.push(buildRuntimeLookupDeclaration(lookupName, createVarName, lookup));
+    }
   }
   for (const { message, line } of errorMessages) {
     const location = line !== null ? `${filename}:${line}` : filename;
@@ -1450,6 +1679,9 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
       if (seg.dynamicProps && !seg.argResolved) {
         return { error: `dynamic value with variable argument is not supported in .css.ts files` };
       }
+      if (seg.typographyLookup) {
+        return { error: `typography() with a runtime key is not supported in .css.ts files` };
+      }
       if (seg.mediaQuery) {
         return { error: `media query modifiers (ifSm, ifMd, etc.) are not supported in .css.ts files` };
       }