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

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 = [];
@@ -1039,12 +1130,62 @@ function buildMaybeIncDeclaration(helperName, increment) {
     t2.variableDeclarator(t2.identifier(helperName), t2.arrowFunctionExpression([incParam], body))
   ]);
 }
+function buildMergePropsDeclaration(helperName, stylexNamespaceName) {
+  const explicitClassNameParam = t2.identifier("explicitClassName");
+  const stylesRestParam = t2.restElement(t2.identifier("styles"));
+  const sxId = t2.identifier("sx");
+  return t2.functionDeclaration(
+    t2.identifier(helperName),
+    [explicitClassNameParam, stylesRestParam],
+    t2.blockStatement([
+      t2.variableDeclaration("const", [
+        t2.variableDeclarator(
+          sxId,
+          t2.callExpression(t2.memberExpression(t2.identifier(stylexNamespaceName), t2.identifier("props")), [
+            t2.spreadElement(t2.identifier("styles"))
+          ])
+        )
+      ]),
+      t2.returnStatement(
+        t2.objectExpression([
+          t2.spreadElement(sxId),
+          t2.objectProperty(
+            t2.identifier("className"),
+            t2.callExpression(
+              t2.memberExpression(
+                t2.binaryExpression(
+                  "+",
+                  t2.binaryExpression("+", explicitClassNameParam, t2.stringLiteral(" ")),
+                  t2.logicalExpression("||", t2.memberExpression(sxId, t2.identifier("className")), t2.stringLiteral(""))
+                ),
+                t2.identifier("trim")
+              ),
+              []
+            )
+          )
+        ])
+      )
+    ])
+  );
+}
 function buildCreateDeclaration(createVarName, stylexNamespaceName, createProperties) {
   const createCall = t2.callExpression(t2.memberExpression(t2.identifier(stylexNamespaceName), t2.identifier("create")), [
     t2.objectExpression(createProperties)
   ]);
   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)) {
@@ -1088,53 +1229,22 @@ function rewriteExpressionSites(options) {
         t3.memberExpression(t3.identifier(options.stylexNamespaceName), t3.identifier("props")),
         propsArgs
       );
-      const openingElement = cssAttrPath.parentPath;
-      let existingClassNameExpr = null;
-      if (openingElement && openingElement.isJSXOpeningElement()) {
-        const attrs = openingElement.node.attributes;
-        for (let i = 0; i < attrs.length; i++) {
-          const attr = attrs[i];
-          if (t3.isJSXAttribute(attr) && t3.isJSXIdentifier(attr.name, { name: "className" })) {
-            if (t3.isStringLiteral(attr.value)) {
-              existingClassNameExpr = attr.value;
-            } else if (t3.isJSXExpressionContainer(attr.value) && t3.isExpression(attr.value.expression)) {
-              existingClassNameExpr = attr.value.expression;
-            }
-            attrs.splice(i, 1);
-            break;
-          }
-        }
-      }
-      let spreadExpr;
-      if (existingClassNameExpr) {
-        const rId = t3.identifier("__r");
-        const mergedClassName = t3.callExpression(
-          t3.memberExpression(
-            t3.binaryExpression(
-              "+",
-              t3.binaryExpression("+", existingClassNameExpr, t3.stringLiteral(" ")),
-              t3.logicalExpression("||", t3.memberExpression(rId, t3.identifier("className")), t3.stringLiteral(""))
-            ),
-            t3.identifier("trim")
-          ),
-          []
-        );
-        spreadExpr = t3.callExpression(
-          t3.arrowFunctionExpression(
-            [rId],
-            t3.objectExpression([t3.spreadElement(rId), t3.objectProperty(t3.identifier("className"), mergedClassName)])
-          ),
-          [propsCall]
-        );
-      } else {
-        spreadExpr = propsCall;
-      }
-      cssAttrPath.replaceWith(t3.jsxSpreadAttribute(spreadExpr));
+      cssAttrPath.replaceWith(
+        t3.jsxSpreadAttribute(
+          buildCssSpreadExpression(cssAttrPath, propsCall, options.mergePropsHelperName, options.needsMergePropsHelper)
+        )
+      );
       continue;
     }
     site.path.replaceWith(t3.arrayExpression(propsArgs));
   }
-  rewriteCssArrayExpressions(options.ast, options.stylexNamespaceName);
+  rewriteStyleObjectExpressions(options.ast);
+  rewriteCssAttributeExpressions(
+    options.ast,
+    options.stylexNamespaceName,
+    options.mergePropsHelperName,
+    options.needsMergePropsHelper
+  );
 }
 function getCssAttributePath(path) {
   const parentPath = path.parentPath;
@@ -1165,7 +1275,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 +1291,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;
@@ -1198,42 +1321,271 @@ function buildPropsArgs(segments, options) {
   }
   return args;
 }
-function rewriteCssArrayExpressions(ast, stylexNamespaceName) {
+function rewriteCssAttributeExpressions(ast, stylexNamespaceName, mergePropsHelperName, needsMergePropsHelper) {
   traverse(ast, {
     JSXAttribute(path) {
       if (!t3.isJSXIdentifier(path.node.name, { name: "css" })) return;
       const value = path.node.value;
       if (!t3.isJSXExpressionContainer(value)) return;
-      const expr = value.expression;
-      if (!t3.isArrayExpression(expr)) return;
-      const propsArgs = [];
-      for (const el of expr.elements) {
-        if (t3.isSpreadElement(el)) {
-          const arg = el.argument;
-          if (t3.isArrayExpression(arg)) {
-            for (const inner of arg.elements) {
-              if (!inner) continue;
-              if (t3.isSpreadElement(inner)) {
-                propsArgs.push(t3.spreadElement(inner.argument));
-              } else {
-                propsArgs.push(inner);
-              }
-            }
-          } else {
-            propsArgs.push(t3.spreadElement(arg));
-          }
-        } else if (el) {
-          propsArgs.push(el);
-        }
-      }
+      if (!t3.isExpression(value.expression)) return;
+      const propsArgs = buildStyleObjectPropsArgs(value.expression, path) ?? buildStyleArrayLikePropsArgsFromExpression(value.expression, path);
+      if (!propsArgs) return;
       const propsCall = t3.callExpression(
         t3.memberExpression(t3.identifier(stylexNamespaceName), t3.identifier("props")),
         propsArgs
       );
-      path.replaceWith(t3.jsxSpreadAttribute(propsCall));
+      path.replaceWith(
+        t3.jsxSpreadAttribute(buildCssSpreadExpression(path, propsCall, mergePropsHelperName, needsMergePropsHelper))
+      );
     }
   });
 }
+function buildCssSpreadExpression(path, propsCall, mergePropsHelperName, needsMergePropsHelper) {
+  const existingClassNameExpr = removeExistingClassNameAttribute(path);
+  if (!existingClassNameExpr) return propsCall;
+  needsMergePropsHelper.current = true;
+  return t3.callExpression(t3.identifier(mergePropsHelperName), [existingClassNameExpr, ...propsCall.arguments]);
+}
+function removeExistingClassNameAttribute(path) {
+  const openingElement = path.parentPath;
+  if (!openingElement || !openingElement.isJSXOpeningElement()) return null;
+  const attrs = openingElement.node.attributes;
+  for (let i = 0; i < attrs.length; i++) {
+    const attr = attrs[i];
+    if (!t3.isJSXAttribute(attr) || !t3.isJSXIdentifier(attr.name, { name: "className" })) continue;
+    let classNameExpr = null;
+    if (t3.isStringLiteral(attr.value)) {
+      classNameExpr = attr.value;
+    } else if (t3.isJSXExpressionContainer(attr.value) && t3.isExpression(attr.value.expression)) {
+      classNameExpr = attr.value.expression;
+    }
+    attrs.splice(i, 1);
+    return classNameExpr;
+  }
+  return null;
+}
+function buildStyleObjectPropsArgs(expr, path) {
+  if (!t3.isObjectExpression(expr) || expr.properties.length === 0) return null;
+  let sawStyleArray = false;
+  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(prop.argument));
+      continue;
+    }
+    if (isStyleArrayLike(normalizedArg, path, /* @__PURE__ */ new Set())) {
+      sawStyleArray = true;
+    }
+    const nestedArgs = buildStyleArrayLikePropsArgs(normalizedArg, path, /* @__PURE__ */ new Set());
+    if (nestedArgs && t3.isArrayExpression(normalizedArg)) {
+      propsArgs.push(...nestedArgs);
+    } else {
+      propsArgs.push(t3.spreadElement(normalizedArg));
+    }
+  }
+  return sawStyleArray ? propsArgs : null;
+}
+function buildStyleArrayLikePropsArgsFromExpression(expr, path) {
+  const normalizedExpr = normalizeStyleArrayLikeExpression(expr, path, /* @__PURE__ */ new Set());
+  if (!normalizedExpr) return null;
+  return buildStyleArrayLikePropsArgs(normalizedExpr, path, /* @__PURE__ */ new Set());
+}
+function buildStyleArrayLikePropsArgs(expr, path, seen) {
+  if (seen.has(expr)) return null;
+  seen.add(expr);
+  if (t3.isArrayExpression(expr)) {
+    const propsArgs = [];
+    for (const el of expr.elements) {
+      if (!el) continue;
+      if (t3.isSpreadElement(el)) {
+        const normalizedArg = normalizeStyleArrayLikeExpression(el.argument, path, /* @__PURE__ */ new Set());
+        if (!normalizedArg) {
+          propsArgs.push(t3.spreadElement(el.argument));
+          continue;
+        }
+        const nestedArgs = buildStyleArrayLikePropsArgs(normalizedArg, path, seen);
+        if (nestedArgs && t3.isArrayExpression(normalizedArg)) {
+          propsArgs.push(...nestedArgs);
+        } else {
+          propsArgs.push(t3.spreadElement(normalizedArg));
+        }
+        continue;
+      }
+      propsArgs.push(el);
+    }
+    return propsArgs;
+  }
+  if (t3.isIdentifier(expr) || t3.isMemberExpression(expr) || t3.isConditionalExpression(expr) || t3.isLogicalExpression(expr) || t3.isCallExpression(expr)) {
+    return [t3.spreadElement(expr)];
+  }
+  return null;
+}
+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 = normalizeStyleArrayLikeExpression(
+      prop.argument,
+      path,
+      /* @__PURE__ */ new Set()
+      // I.e. `...Css.df.$`, `...(cond ? Css.df.$ : {})`, or `...styles.wrapper`
+    );
+    if (!normalizedArg) {
+      return null;
+    }
+    if (isStyleArrayLike(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 normalizeStyleArrayLikeExpression(expr, path, seen) {
+  if (seen.has(expr)) return null;
+  seen.add(expr);
+  if (t3.isArrayExpression(expr)) return expr;
+  if (t3.isLogicalExpression(expr) && expr.operator === "&&") {
+    const consequent = normalizeStyleArrayLikeExpression(expr.right, path, seen);
+    if (!consequent) return null;
+    return t3.conditionalExpression(expr.left, consequent, t3.arrayExpression([]));
+  }
+  if (t3.isLogicalExpression(expr) && (expr.operator === "||" || expr.operator === "??")) {
+    const left = normalizeStyleArrayLikeExpression(expr.left, path, seen);
+    const right = normalizeStyleArrayLikeBranch(expr.right, path, seen);
+    if (!left || !right) return null;
+    return t3.logicalExpression(expr.operator, left, right);
+  }
+  if (t3.isConditionalExpression(expr)) {
+    const consequent = normalizeStyleArrayLikeBranch(expr.consequent, path, seen);
+    const alternate = normalizeStyleArrayLikeBranch(expr.alternate, path, seen);
+    if (!consequent || !alternate) return null;
+    return t3.conditionalExpression(expr.test, consequent, alternate);
+  }
+  if (t3.isIdentifier(expr) || t3.isMemberExpression(expr) || t3.isCallExpression(expr)) {
+    const nestedSeen = new Set(seen);
+    nestedSeen.delete(expr);
+    if (isStyleArrayLike(expr, path, nestedSeen)) return expr;
+  }
+  return null;
+}
+function normalizeStyleArrayLikeBranch(expr, path, seen) {
+  if (isEmptyObjectExpression(expr)) {
+    return t3.arrayExpression([]);
+  }
+  return normalizeStyleArrayLikeExpression(expr, path, seen);
+}
+function isStyleArrayLike(expr, path, seen) {
+  if (seen.has(expr)) return false;
+  seen.add(expr);
+  if (t3.isArrayExpression(expr)) return true;
+  if (t3.isLogicalExpression(expr) && expr.operator === "&&") {
+    return isStyleArrayLike(expr.right, path, seen);
+  }
+  if (t3.isLogicalExpression(expr) && (expr.operator === "||" || expr.operator === "??")) {
+    return isStyleArrayLike(expr.left, path, seen) && isStyleArrayLikeBranch(expr.right, path, seen);
+  }
+  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 && isStyleArrayLike(init, bindingPath, seen));
+  }
+  if (t3.isCallExpression(expr)) {
+    const returnExpr = getLocalFunctionReturnExpression(expr, path);
+    return !!(returnExpr && isStyleArrayLike(returnExpr, path, seen));
+  }
+  if (t3.isMemberExpression(expr)) {
+    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 = getStaticMemberPropertyName(expr, path);
+    if (!propertyName) return false;
+    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) && isStyleArrayLike(value, bindingPath, seen);
+    }
+  }
+  return false;
+}
+function isStyleArrayLikeBranch(expr, path, seen) {
+  return isEmptyObjectExpression(expr) || isStyleArrayLike(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;
+}
+function getStaticMemberPropertyName(expr, path) {
+  if (!expr.computed && t3.isIdentifier(expr.property)) {
+    return expr.property.name;
+  }
+  if (t3.isStringLiteral(expr.property)) {
+    return expr.property.value;
+  }
+  if (t3.isIdentifier(expr.property)) {
+    const binding = path.scope.getBinding(expr.property.name);
+    const bindingPath = binding?.path;
+    if (!bindingPath || !bindingPath.isVariableDeclarator()) return null;
+    const init = bindingPath.node.init;
+    return t3.isStringLiteral(init) ? init.value : null;
+  }
+  return null;
+}
+function getLocalFunctionReturnExpression(expr, path) {
+  if (!t3.isIdentifier(expr.callee)) return null;
+  const binding = path.scope.getBinding(expr.callee.name);
+  const bindingPath = binding?.path;
+  if (!bindingPath) return null;
+  if (bindingPath.isFunctionDeclaration()) {
+    return getFunctionLikeReturnExpression(bindingPath.node);
+  }
+  if (bindingPath.isVariableDeclarator()) {
+    const init = bindingPath.node.init;
+    if (init && (t3.isArrowFunctionExpression(init) || t3.isFunctionExpression(init))) {
+      return getFunctionLikeReturnExpression(init);
+    }
+  }
+  return null;
+}
+function getFunctionLikeReturnExpression(fn) {
+  if (t3.isExpression(fn.body)) {
+    return fn.body;
+  }
+  if (fn.body.body.length !== 1) return null;
+  const stmt = fn.body.body[0];
+  return t3.isReturnStatement(stmt) && stmt.argument && t3.isExpression(stmt.argument) ? stmt.argument : null;
+}
 
 // src/plugin/transform.ts
 var traverse2 = _traverse2.default ?? _traverse2;
@@ -1268,19 +1620,28 @@ 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 mergePropsHelperName = reservePreferredName(usedTopLevelNames, "__mergeProps");
+  const needsMergePropsHelper = { current: false };
+  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,
+    mergePropsHelperName,
+    needsMergePropsHelper,
+    runtimeLookupNames
   });
   removeCssImport(ast, cssBindingName);
   if (!findStylexNamespaceImport(ast)) {
@@ -1292,9 +1653,17 @@ function transformTruss(code, filename, mapping) {
   if (maybeIncHelperName) {
     declarationsToInsert.push(buildMaybeIncDeclaration(maybeIncHelperName, mapping.increment));
   }
+  if (needsMergePropsHelper.current) {
+    declarationsToInsert.push(buildMergePropsDeclaration(mergePropsHelperName, stylexNamespaceName));
+  }
   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;
@@ -1358,7 +1727,72 @@ function hoistMarkerDeclarations(ast, names) {
 
 // src/plugin/transform-css.ts
 import { parse as parse2 } from "@babel/parser";
+import * as t6 from "@babel/types";
+
+// src/plugin/css-ts-utils.ts
 import * as t5 from "@babel/types";
+function collectStaticStringBindings(ast) {
+  const bindings = /* @__PURE__ */ new Map();
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const node of ast.program.body) {
+      const declaration = getTopLevelVariableDeclaration(node);
+      if (!declaration) continue;
+      for (const declarator of declaration.declarations) {
+        if (!t5.isIdentifier(declarator.id) || !declarator.init) continue;
+        if (bindings.has(declarator.id.name)) continue;
+        const value = resolveStaticString(declarator.init, bindings);
+        if (value === null) continue;
+        bindings.set(declarator.id.name, value);
+        changed = true;
+      }
+    }
+  }
+  return bindings;
+}
+function resolveStaticString(node, bindings) {
+  if (!node) return null;
+  if (t5.isStringLiteral(node)) return node.value;
+  if (t5.isTemplateLiteral(node)) {
+    let value = "";
+    for (let i = 0; i < node.quasis.length; i++) {
+      value += node.quasis[i].value.cooked ?? "";
+      if (i >= node.expressions.length) continue;
+      const expressionValue = resolveStaticString(node.expressions[i], bindings);
+      if (expressionValue === null) return null;
+      value += expressionValue;
+    }
+    return value;
+  }
+  if (t5.isIdentifier(node)) {
+    return bindings.get(node.name) ?? null;
+  }
+  if (t5.isTSAsExpression(node) || t5.isTSSatisfiesExpression(node) || t5.isTSNonNullExpression(node)) {
+    return resolveStaticString(node.expression, bindings);
+  }
+  if (t5.isParenthesizedExpression(node)) {
+    return resolveStaticString(node.expression, bindings);
+  }
+  if (t5.isBinaryExpression(node, { operator: "+" })) {
+    const left = resolveStaticString(node.left, bindings);
+    const right = resolveStaticString(node.right, bindings);
+    if (left === null || right === null) return null;
+    return left + right;
+  }
+  return null;
+}
+function getTopLevelVariableDeclaration(node) {
+  if (t5.isVariableDeclaration(node)) {
+    return node;
+  }
+  if (t5.isExportNamedDeclaration(node) && node.declaration && t5.isVariableDeclaration(node.declaration)) {
+    return node.declaration;
+  }
+  return null;
+}
+
+// src/plugin/transform-css.ts
 function transformCssTs(code, filename, mapping) {
   const ast = parse2(code, {
     sourceType: "module",
@@ -1370,28 +1804,29 @@ function transformCssTs(code, filename, mapping) {
     return `/* [truss] ${filename}: no Css import found */
 `;
   }
-  const defaultExport = findDefaultExportObject(ast);
-  if (!defaultExport) {
-    return `/* [truss] ${filename}: expected \`export default { ... }\` with an object literal */
+  const cssExport = findNamedCssExportObject(ast);
+  if (!cssExport) {
+    return `/* [truss] ${filename}: expected \`export const css = { ... }\` with an object literal */
 `;
   }
   const rules = [];
-  for (const prop of defaultExport.properties) {
-    if (t5.isSpreadElement(prop)) {
+  const stringBindings = collectStaticStringBindings(ast);
+  for (const prop of cssExport.properties) {
+    if (t6.isSpreadElement(prop)) {
       rules.push(`/* [truss] unsupported: spread elements in css.ts export */`);
       continue;
     }
-    if (!t5.isObjectProperty(prop)) {
+    if (!t6.isObjectProperty(prop)) {
       rules.push(`/* [truss] unsupported: non-property in css.ts export */`);
       continue;
     }
-    const selector = objectPropertyStringKey(prop);
+    const selector = objectPropertyStringKey(prop, stringBindings);
     if (selector === null) {
       rules.push(`/* [truss] unsupported: non-string-literal key in css.ts export */`);
       continue;
     }
     const valueNode = prop.value;
-    if (!t5.isExpression(valueNode)) {
+    if (!t6.isExpression(valueNode)) {
       rules.push(`/* [truss] unsupported: "${selector}" value is not an expression */`);
       continue;
     }
@@ -1404,23 +1839,32 @@ function transformCssTs(code, filename, mapping) {
   }
   return rules.join("\n\n") + "\n";
 }
-function findDefaultExportObject(ast) {
+function findNamedCssExportObject(ast) {
   for (const node of ast.program.body) {
-    if (!t5.isExportDefaultDeclaration(node)) continue;
-    const decl = node.declaration;
-    if (t5.isObjectExpression(decl)) return decl;
-    if (t5.isTSAsExpression(decl) && t5.isObjectExpression(decl.expression)) return decl.expression;
-    if (t5.isTSSatisfiesExpression(decl) && t5.isObjectExpression(decl.expression)) return decl.expression;
+    if (!t6.isExportNamedDeclaration(node) || !node.declaration) continue;
+    if (!t6.isVariableDeclaration(node.declaration)) continue;
+    for (const declarator of node.declaration.declarations) {
+      if (!t6.isIdentifier(declarator.id, { name: "css" })) continue;
+      const value = unwrapObjectExpression(declarator.init);
+      if (value) return value;
+    }
   }
   return null;
 }
-function objectPropertyStringKey(prop) {
-  if (t5.isStringLiteral(prop.key)) return prop.key.value;
-  if (t5.isIdentifier(prop.key) && !prop.computed) return prop.key.name;
+function unwrapObjectExpression(node) {
+  if (!node) return null;
+  if (t6.isObjectExpression(node)) return node;
+  if (t6.isTSAsExpression(node) || t6.isTSSatisfiesExpression(node)) return unwrapObjectExpression(node.expression);
+  return null;
+}
+function objectPropertyStringKey(prop, stringBindings) {
+  if (t6.isStringLiteral(prop.key)) return prop.key.value;
+  if (t6.isIdentifier(prop.key) && !prop.computed) return prop.key.name;
+  if (prop.computed) return resolveStaticString(prop.key, stringBindings);
   return null;
 }
 function resolveCssExpression(node, cssBindingName, mapping, filename) {
-  if (!t5.isMemberExpression(node) || node.computed || !t5.isIdentifier(node.property, { name: "$" })) {
+  if (!t6.isMemberExpression(node) || node.computed || !t6.isIdentifier(node.property, { name: "$" })) {
     return { error: "value must be a Css.*.$  expression" };
   }
   const chain = extractChain(node.object, cssBindingName);
@@ -1450,6 +1894,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` };
       }
@@ -1486,8 +1933,61 @@ ${body}
 }`;
 }
 
+// src/plugin/rewrite-css-ts-imports.ts
+import { parse as parse3 } from "@babel/parser";
+import _generate2 from "@babel/generator";
+import * as t7 from "@babel/types";
+var generate2 = _generate2.default ?? _generate2;
+function rewriteCssTsImports(code, filename) {
+  if (!code.includes(".css.ts")) {
+    return { code, changed: false };
+  }
+  const ast = parse3(code, {
+    sourceType: "module",
+    plugins: ["typescript", "jsx"],
+    sourceFilename: filename
+  });
+  const existingCssSideEffects = /* @__PURE__ */ new Set();
+  const neededCssSideEffects = /* @__PURE__ */ new Set();
+  let changed = false;
+  for (const node of ast.program.body) {
+    if (!t7.isImportDeclaration(node)) continue;
+    if (typeof node.source.value !== "string") continue;
+    if (!node.source.value.endsWith(".css.ts")) continue;
+    if (node.specifiers.length === 0) {
+      node.source = t7.stringLiteral(toVirtualCssSpecifier(node.source.value));
+      existingCssSideEffects.add(node.source.value);
+      changed = true;
+      continue;
+    }
+    neededCssSideEffects.add(toVirtualCssSpecifier(node.source.value));
+  }
+  const sideEffectImports = [];
+  for (const source of neededCssSideEffects) {
+    if (existingCssSideEffects.has(source)) continue;
+    sideEffectImports.push(t7.importDeclaration([], t7.stringLiteral(source)));
+    changed = true;
+  }
+  if (!changed) {
+    return { code, changed: false };
+  }
+  if (sideEffectImports.length > 0) {
+    const insertIndex = findLastImportIndex(ast) + 1;
+    ast.program.body.splice(insertIndex, 0, ...sideEffectImports);
+  }
+  const output = generate2(ast, {
+    sourceFileName: filename,
+    retainLines: false
+  });
+  return { code: output.code, changed: true };
+}
+function toVirtualCssSpecifier(source) {
+  return `${source}?truss-css`;
+}
+
 // src/plugin/index.ts
 var VIRTUAL_CSS_PREFIX = "\0truss-css:";
+var CSS_TS_QUERY = "?truss-css";
 function trussPlugin(opts) {
   let mapping = null;
   let projectRoot;
@@ -1511,15 +2011,8 @@ function trussPlugin(opts) {
       ensureMapping();
     },
     resolveId(source, importer) {
-      if (!source.endsWith(".css.ts")) return null;
-      let absolutePath;
-      if (isAbsolute(source)) {
-        absolutePath = source;
-      } else if (importer) {
-        absolutePath = resolve(dirname(importer), source);
-      } else {
-        absolutePath = resolve(projectRoot || process.cwd(), source);
-      }
+      if (!source.endsWith(CSS_TS_QUERY)) return null;
+      const absolutePath = resolveImportPath(source.slice(0, -CSS_TS_QUERY.length), importer, projectRoot);
       if (!existsSync(absolutePath)) return null;
       return VIRTUAL_CSS_PREFIX + absolutePath.slice(0, -3);
     },
@@ -1531,17 +2024,38 @@ function trussPlugin(opts) {
     },
     transform(code, id) {
       if (!/\.[cm]?[jt]sx?(\?|$)/.test(id)) return null;
-      if (!code.includes("Css")) return null;
+      const rewrittenImports = rewriteCssTsImports(code, id);
+      const rewrittenCode = rewrittenImports.code;
+      const hasCssDsl = rewrittenCode.includes("Css");
+      if (!hasCssDsl && !rewrittenImports.changed) return null;
       const fileId = stripQueryAndHash(id);
       if (isNodeModulesFile(fileId) && !isWhitelistedExternalPackageFile(fileId, externalPackages)) {
         return null;
       }
-      const result = transformTruss(code, id, ensureMapping());
-      if (!result) return null;
+      if (fileId.endsWith(".css.ts")) {
+        return rewrittenImports.changed ? { code: rewrittenCode, map: null } : null;
+      }
+      if (!hasCssDsl) {
+        return { code: rewrittenCode, map: null };
+      }
+      const result = transformTruss(rewrittenCode, id, ensureMapping());
+      if (!result) {
+        if (!rewrittenImports.changed) return null;
+        return { code: rewrittenCode, map: null };
+      }
       return { code: result.code, map: result.map };
     }
   };
 }
+function resolveImportPath(source, importer, projectRoot) {
+  if (isAbsolute(source)) {
+    return source;
+  }
+  if (importer) {
+    return resolve(dirname(importer), source);
+  }
+  return resolve(projectRoot || process.cwd(), source);
+}
 function stripQueryAndHash(id) {
   const queryIndex = id.indexOf("?");
   const hashIndex = id.indexOf("#");