@homebound/truss 2.19.3 → 2.20.1

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) {
@@ -2036,10 +2029,9 @@ function resolveChain(ctx, chain) {
           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(ctx, chain) {
           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,
@@ -2364,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: {},
@@ -2383,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];
@@ -2411,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: {},
@@ -2432,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") {
@@ -3822,6 +3871,7 @@ function trussPlugin(opts) {
   const libraryPaths = opts.libraries ?? [];
   let emittedCssFileName = null;
   const cssRegistry = /* @__PURE__ */ new Map();
+  const arbitraryCssRegistry = /* @__PURE__ */ new Map();
   let cssVersion = 0;
   let lastSentVersion = 0;
   function mappingPath() {
@@ -3843,8 +3893,21 @@ function trussPlugin(opts) {
     }
     return libraryCache;
   }
+  function updateArbitraryCssRegistry(sourcePath, sourceCode) {
+    const css = transformCssTs(sourceCode, sourcePath, ensureMapping()).trim();
+    if (css.length > 0) {
+      const prev = arbitraryCssRegistry.get(sourcePath);
+      arbitraryCssRegistry.set(sourcePath, css);
+      if (prev !== css) cssVersion++;
+    } else {
+      if (arbitraryCssRegistry.delete(sourcePath)) cssVersion++;
+    }
+  }
   function collectCss() {
-    const appCss = generateCssText(cssRegistry);
+    const appCssParts = [generateCssText(cssRegistry)];
+    const allArbitrary = Array.from(arbitraryCssRegistry.values()).join("\n\n");
+    appCssParts.push(annotateArbitraryCssBlock(allArbitrary));
+    const appCss = appCssParts.filter((p) => p.length > 0).join("\n");
     const libs = loadLibraries();
     if (libs.length === 0) return appCss;
     const appParsed = parseTrussCss(appCss);
@@ -3862,6 +3925,7 @@ function trussPlugin(opts) {
     buildStart() {
       ensureMapping();
       cssRegistry.clear();
+      arbitraryCssRegistry.clear();
       libraryCache = null;
       cssVersion = 0;
       lastSentVersion = 0;
@@ -3956,7 +4020,8 @@ __injectTrussCSS(${JSON.stringify(css)});
       if (!id.startsWith(VIRTUAL_CSS_PREFIX)) return null;
       const sourcePath = id.slice(VIRTUAL_CSS_PREFIX.length) + ".ts";
       const sourceCode = readFileSync3(sourcePath, "utf8");
-      return transformCssTs(sourceCode, sourcePath, ensureMapping());
+      updateArbitraryCssRegistry(sourcePath, sourceCode);
+      return `/* [truss] ${sourcePath} \u2014 included via truss.css */`;
     },
     transform(code, id) {
       if (!/\.[cm]?[jt]sx?(\?|$)/.test(id)) return null;
@@ -3972,6 +4037,7 @@ __injectTrussCSS(${JSON.stringify(css)});
       }
       if (!hasCssDsl && !rewrittenImports.changed && !testCssBootstrap.changed) return null;
       if (fileId.endsWith(".css.ts")) {
+        updateArbitraryCssRegistry(fileId, code);
         return rewrittenImports.changed || testCssBootstrap.changed ? { code: transformedCode, map: null } : null;
       }
       if (!hasCssDsl) {