@homebound/truss 2.19.2 → 2.20.0

package/build/plugin/index.js

@@ -6,6 +6,23 @@ import { createHash } from "crypto";
 // src/plugin/emit-truss.ts
 import * as t from "@babel/types";
 
+// src/plugin/types.ts
+var _longhandCache = /* @__PURE__ */ new WeakMap();
+function getLonghandLookup(mapping) {
+  let lookup = _longhandCache.get(mapping);
+  if (lookup) return lookup;
+  lookup = /* @__PURE__ */ new Map();
+  for (const [abbr, entry] of Object.entries(mapping.abbreviations)) {
+    if (entry.kind !== "static") continue;
+    const keys = Object.keys(entry.defs);
+    if (keys.length !== 1) continue;
+    const key = `${keys[0]}\0${entry.defs[keys[0]]}`;
+    if (!lookup.has(key)) lookup.set(key, abbr);
+  }
+  _longhandCache.set(mapping, lookup);
+  return lookup;
+}
+
 // src/plugin/property-priorities.ts
 var longHandPhysical = /* @__PURE__ */ new Set();
 var longHandLogical = /* @__PURE__ */ new Set();
@@ -1067,30 +1084,6 @@ function cleanValueForClassName(value) {
 function getPropertyAbbreviation(cssProp) {
   return cssPropertyAbbreviations[cssProp] ?? cssProp;
 }
-function buildLonghandLookup(mapping) {
-  const lookup = /* @__PURE__ */ new Map();
-  for (const [abbrev, entry] of Object.entries(mapping.abbreviations)) {
-    if (entry.kind !== "static") continue;
-    const props = Object.keys(entry.defs);
-    if (props.length !== 1) continue;
-    const prop = props[0];
-    const value = String(entry.defs[prop]);
-    const key = `${prop}\0${value}`;
-    if (!lookup.has(key)) {
-      lookup.set(key, abbrev);
-    }
-  }
-  return lookup;
-}
-var cachedMapping = null;
-var cachedLookup = null;
-function getLonghandLookup(mapping) {
-  if (cachedMapping !== mapping) {
-    cachedMapping = mapping;
-    cachedLookup = buildLonghandLookup(mapping);
-  }
-  return cachedLookup;
-}
 function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
   const abbr = seg.abbr;
   if (seg.argResolved !== void 0) {
@@ -1749,7 +1742,9 @@ function applyModifierNodeToConditionContext(context, node, mapping) {
     context.pseudoClass = pseudoSelector(node.name);
   }
 }
-function resolveFullChain(chain, mapping, cssBindingName, initialContext = emptyConditionContext(), resolveCssChainReference2) {
+function resolveFullChain(ctx, chain) {
+  const { mapping } = ctx;
+  const initialContext = ctx.initialContext ?? emptyConditionContext();
   const parts = [];
   const markers = [];
   const nestedErrors = [];
@@ -1779,7 +1774,7 @@ function resolveFullChain(chain, mapping, cssBindingName, initialContext = empty
     }
     parts.push({
       type: "unconditional",
-      segments: resolveChain(currentNodes, mapping, currentNodesStartContext, cssBindingName, resolveCssChainReference2)
+      segments: resolveChain({ ...ctx, initialContext: currentNodesStartContext }, currentNodes)
     });
     currentNodes = [];
     currentNodesStartContext = cloneConditionContext(currentContext);
@@ -1801,8 +1796,8 @@ function resolveFullChain(chain, mapping, cssBindingName, initialContext = empty
         const branchContext = cloneConditionContext(currentContext);
         const thenNodes = mediaStart.thenNodes ? [...mediaStart.thenNodes, ...filteredChain.slice(i + 1, elseIndex)] : filteredChain.slice(i, elseIndex);
         const elseNodes = [makeMediaQueryNode(mediaStart.inverseMediaQuery), ...filteredChain.slice(elseIndex + 1)];
-        const thenSegs = resolveChain(thenNodes, mapping, branchContext, cssBindingName, resolveCssChainReference2);
-        const elseSegs = resolveChain(elseNodes, mapping, branchContext, cssBindingName, resolveCssChainReference2);
+        const thenSegs = resolveChain({ ...ctx, initialContext: branchContext }, thenNodes);
+        const elseSegs = resolveChain({ ...ctx, initialContext: branchContext }, elseNodes);
         parts.push({ type: "unconditional", segments: [...thenSegs, ...elseSegs] });
         i = filteredChain.length;
         break;
@@ -1810,13 +1805,7 @@ function resolveFullChain(chain, mapping, cssBindingName, initialContext = empty
     }
     if (isWhenObjectCall(node)) {
       flushCurrentNodes();
-      const resolved = resolveWhenObjectSelectors(
-        node,
-        mapping,
-        cssBindingName,
-        currentContext,
-        resolveCssChainReference2
-      );
+      const resolved = resolveWhenObjectSelectors(ctx, node, currentContext);
       parts.push(...resolved.parts);
       markers.push(...resolved.markers);
       nestedErrors.push(...resolved.errors);
@@ -1852,8 +1841,8 @@ function resolveFullChain(chain, mapping, cssBindingName, initialContext = empty
         }
         i++;
       }
-      const thenSegs = resolveChain(thenNodes, mapping, branchContext, cssBindingName, resolveCssChainReference2);
-      const elseSegs = resolveChain(elseNodes, mapping, branchContext, cssBindingName, resolveCssChainReference2);
+      const thenSegs = resolveChain({ ...ctx, initialContext: branchContext }, thenNodes);
+      const elseSegs = resolveChain({ ...ctx, initialContext: branchContext }, elseNodes);
       parts.push({
         type: "conditional",
         conditionNode: node.conditionNode,
@@ -1880,7 +1869,8 @@ function resolveFullChain(chain, mapping, cssBindingName, initialContext = empty
 function isWhenObjectCall(node) {
   return node.type === "call" && node.name === "when" && node.args.length === 1 && node.args[0].type === "ObjectExpression";
 }
-function resolveWhenObjectSelectors(node, mapping, cssBindingName, initialContext, resolveCssChainReference2) {
+function resolveWhenObjectSelectors(ctx, node, initialContext) {
+  const { cssBindingName } = ctx;
   if (!cssBindingName) {
     return {
       parts: [],
@@ -1907,13 +1897,13 @@ function resolveWhenObjectSelectors(node, mapping, cssBindingName, initialContex
         throw new UnsupportedPatternError(`when({ ... }) selector keys must be string literals`);
       }
       const value = unwrapExpression(property.value);
-      const innerChain = resolveWhenObjectValueChain(value, cssBindingName, resolveCssChainReference2);
+      const innerChain = resolveWhenObjectValueChain(ctx, value);
       if (!innerChain) {
         throw new UnsupportedPatternError(`when({ ... }) values must be Css.*.$ expressions`);
       }
       const selectorContext = cloneConditionContext(initialContext);
       selectorContext.pseudoClass = property.key.value;
-      const resolved = resolveFullChain(innerChain, mapping, cssBindingName, selectorContext, resolveCssChainReference2);
+      const resolved = resolveFullChain({ ...ctx, initialContext: selectorContext }, innerChain);
       parts.push(...resolved.parts);
       markers.push(...resolved.markers);
       errors.push(...resolved.errors);
@@ -1927,7 +1917,8 @@ function resolveWhenObjectSelectors(node, mapping, cssBindingName, initialContex
   }
   return { parts, markers, errors: [...new Set(errors)] };
 }
-function resolveWhenObjectValueChain(value, cssBindingName, resolveCssChainReference2) {
+function resolveWhenObjectValueChain(ctx, value) {
+  const { cssBindingName, resolveCssChainReference: resolveCssChainReference2 } = ctx;
   if (cssBindingName && value.type === "MemberExpression" && !value.computed && value.property.type === "Identifier" && value.property.name === "$") {
     return extractChain(value.object, cssBindingName);
   }
@@ -1993,7 +1984,9 @@ function invertMediaQuery(query) {
   }
   return query.replace("@media", "@media not");
 }
-function resolveChain(chain, mapping, initialContext = emptyConditionContext(), cssBindingName, resolveCssChainReference2) {
+function resolveChain(ctx, chain) {
+  const { mapping, cssBindingName } = ctx;
+  const initialContext = ctx.initialContext ?? emptyConditionContext();
   const segments = [];
   const context = cloneConditionContext(initialContext);
   for (const node of chain) {
@@ -2036,10 +2029,9 @@ function resolveChain(chain, mapping, initialContext = emptyConditionContext(),
           context.mediaQuery = containerSelectorFromCall(node);
           continue;
         }
-        if (abbr === "add" || abbr === "addCss") {
-          const seg = resolveAddCall(
+        if (abbr === "with") {
+          const seg = resolveWithCall(
             node,
-            mapping,
             context.mediaQuery,
             context.pseudoClass,
             context.pseudoElement,
@@ -2048,6 +2040,18 @@ function resolveChain(chain, mapping, initialContext = emptyConditionContext(),
           segments.push(seg);
           continue;
         }
+        if (abbr === "add") {
+          const segs = resolveAddCall(
+            node,
+            mapping,
+            context.mediaQuery,
+            context.pseudoClass,
+            context.pseudoElement,
+            context.whenPseudo
+          );
+          segments.push(...segs);
+          continue;
+        }
         if (abbr === "className") {
           const seg = resolveClassNameCall(
             node,
@@ -2093,13 +2097,7 @@ function resolveChain(chain, mapping, initialContext = emptyConditionContext(),
         }
         if (abbr === "when") {
           if (isWhenObjectCall(node)) {
-            const resolved2 = resolveWhenObjectSelectors(
-              node,
-              mapping,
-              cssBindingName,
-              context,
-              resolveCssChainReference2
-            );
+            const resolved2 = resolveWhenObjectSelectors(ctx, node, context);
             segments.push(...flattenWhenObjectParts(resolved2));
             continue;
           }
@@ -2370,18 +2368,15 @@ function resolveStyleCall(node, mediaQuery, pseudoClass, pseudoElement, whenPseu
     styleArg: arg
   };
 }
-function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
-  const isAddCss = node.name === "addCss";
-  if (isAddCss) {
-    if (node.args.length !== 1) {
-      throw new UnsupportedPatternError(
-        `addCss() requires exactly 1 argument (an existing CssProp/style hash expression)`
-      );
-    }
-    const styleArg = node.args[0];
-    if (styleArg.type === "SpreadElement") {
-      throw new UnsupportedPatternError(`addCss() does not support spread arguments`);
-    }
+function resolveWithCall(node, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
+  if (node.args.length !== 1) {
+    throw new UnsupportedPatternError(`with() requires exactly 1 argument`);
+  }
+  const styleArg = node.args[0];
+  if (styleArg.type === "SpreadElement") {
+    throw new UnsupportedPatternError(`with() does not support spread arguments`);
+  }
+  if (styleArg.type === "ObjectExpression") {
     return {
       abbr: "__composed_css_prop",
       defs: {},
@@ -2389,25 +2384,34 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, w
       isAddCss: true
     };
   }
+  return {
+    abbr: "__composed_css_prop",
+    defs: {},
+    styleArrayArg: styleArg
+  };
+}
+function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
+  const context = {
+    mediaQuery,
+    pseudoClass,
+    pseudoElement,
+    whenPseudo
+  };
   if (node.args.length === 1) {
     const styleArg = node.args[0];
     if (styleArg.type === "SpreadElement") {
       throw new UnsupportedPatternError(`add() does not support spread arguments`);
     }
     if (styleArg.type === "ObjectExpression") {
-      throw new UnsupportedPatternError(
-        `add(cssProp) does not accept object literals -- pass an existing CssProp expression instead`
-      );
+      return resolveAddObjectLiteral(styleArg, mapping, context);
     }
-    return {
-      abbr: "__composed_css_prop",
-      defs: {},
-      styleArrayArg: styleArg
-    };
+    throw new UnsupportedPatternError(
+      `add() requires 1 or 2 arguments (property name and value, or an object literal), got ${node.args.length}. Supported overloads are add({ prop: value }), add("propName", value), and with(cssProp)`
+    );
   }
   if (node.args.length !== 2) {
     throw new UnsupportedPatternError(
-      `add() requires exactly 2 arguments (property name and value), got ${node.args.length}. Supported overloads are add(cssProp), addCss(cssProp), and add("propName", value)`
+      `add() requires 1 or 2 arguments (property name and value, or an object literal), got ${node.args.length}. Supported overloads are add({ prop: value }), add("propName", value), and with(cssProp)`
     );
   }
   const propArg = node.args[0];
@@ -2417,19 +2421,13 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, w
   const propName = propArg.value;
   const valueArg = node.args[1];
   const literalValue = tryEvaluateAddLiteral(valueArg);
-  const context = {
-    mediaQuery,
-    pseudoClass,
-    pseudoElement,
-    whenPseudo
-  };
   if (literalValue !== null) {
-    return segmentWithConditionContext(
+    return [segmentWithConditionContext(
       { abbr: propName, defs: { [propName]: literalValue }, argResolved: literalValue },
       context
-    );
+    )];
   }
-  return segmentWithConditionContext(
+  return [segmentWithConditionContext(
     {
       abbr: propName,
       defs: {},
@@ -2438,7 +2436,52 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, w
       argNode: valueArg
     },
     context
-  );
+  )];
+}
+function resolveAddObjectLiteral(obj, mapping, context) {
+  const segments = [];
+  for (const property of obj.properties) {
+    if (property.type === "SpreadElement") {
+      throw new UnsupportedPatternError(`add({...}) does not support spread properties -- use with() instead`);
+    }
+    if (property.type !== "ObjectProperty" || property.computed) {
+      throw new UnsupportedPatternError(`add({...}) only supports simple property keys`);
+    }
+    let propName;
+    if (property.key.type === "Identifier") {
+      propName = property.key.name;
+    } else if (property.key.type === "StringLiteral") {
+      propName = property.key.value;
+    } else {
+      throw new UnsupportedPatternError(`add({...}) property keys must be identifiers or string literals`);
+    }
+    const valueNode = property.value;
+    const literalValue = tryEvaluateAddLiteral(valueNode);
+    if (literalValue !== null) {
+      const canonicalAbbr = findCanonicalAbbreviation(mapping, propName, literalValue);
+      if (canonicalAbbr) {
+        const entry = mapping.abbreviations[canonicalAbbr];
+        segments.push(segmentWithConditionContext(
+          { abbr: canonicalAbbr, defs: entry.defs },
+          context
+        ));
+      } else {
+        segments.push(segmentWithConditionContext(
+          { abbr: propName, defs: { [propName]: literalValue }, argResolved: literalValue },
+          context
+        ));
+      }
+    } else {
+      segments.push(segmentWithConditionContext(
+        { abbr: propName, defs: {}, variableProps: [propName], incremented: false, argNode: valueNode },
+        context
+      ));
+    }
+  }
+  return segments;
+}
+function findCanonicalAbbreviation(mapping, prop, value) {
+  return getLonghandLookup(mapping).get(`${prop}\0${value}`) ?? null;
 }
 function tryEvaluateAddLiteral(node) {
   if (node.type === "StringLiteral") {
@@ -3114,7 +3157,7 @@ function transformTruss(code, filename, mapping, options = {}) {
         return;
       }
       const resolveCssChainReference2 = buildCssChainReferenceResolver(path, cssBindingName);
-      const resolvedChain = resolveFullChain(chain, mapping, cssBindingName, void 0, resolveCssChainReference2);
+      const resolvedChain = resolveFullChain({ mapping, cssBindingName, resolveCssChainReference: resolveCssChainReference2 }, chain);
       sites.push({ path, resolvedChain });
       const line = path.node.loc?.start.line ?? null;
       for (const err of resolvedChain.errors) {
@@ -3515,7 +3558,7 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
       return { error: "when() modifiers are not supported in .css.ts files" };
     }
   }
-  const resolved = resolveFullChain(chain, mapping, cssBindingName);
+  const resolved = resolveFullChain({ mapping, cssBindingName }, chain);
   if (resolved.errors.length > 0) {
     return { error: resolved.errors[0] };
   }