@homebound/truss 2.15.2 → 2.17.0

package/build/plugin/index.js

@@ -1115,7 +1115,7 @@ function collectAtomicRules(chains, mapping) {
   const rules = /* @__PURE__ */ new Map();
   let needsMaybeInc = false;
   function collectSegment(seg) {
-    if (seg.error || seg.styleArrayArg || seg.classNameArg) return;
+    if (seg.error || seg.styleArrayArg || seg.classNameArg || seg.styleArg) return;
     if (seg.typographyLookup) {
       for (const segments of Object.values(seg.typographyLookup.segmentsByName)) {
         for (const nestedSeg of segments) {
@@ -1315,7 +1315,7 @@ function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
     entries.push(entry);
   }
   for (const seg of segments) {
-    if (seg.error || seg.styleArrayArg || seg.typographyLookup || seg.classNameArg) continue;
+    if (seg.error || seg.styleArrayArg || seg.typographyLookup || seg.classNameArg || seg.styleArg) continue;
     const { prefix } = segmentContext(seg, mapping);
     const isConditional = prefix !== "";
     if (seg.variableProps) {
@@ -1718,6 +1718,17 @@ function resolveChain(chain, mapping, initialContext = emptyConditionContext())
           segments.push(seg);
           continue;
         }
+        if (abbr === "style") {
+          const seg = resolveStyleCall(
+            node,
+            context.mediaQuery,
+            context.pseudoClass,
+            context.pseudoElement,
+            context.whenPseudo
+          );
+          segments.push(seg);
+          continue;
+        }
         if (abbr === "typography") {
           const resolved = resolveTypographyCall(
             node,
@@ -1988,6 +1999,25 @@ function resolveClassNameCall(node, mediaQuery, pseudoClass, pseudoElement, when
     classNameArg: arg
   };
 }
+function resolveStyleCall(node, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
+  if (node.args.length !== 1) {
+    throw new UnsupportedPatternError(`style() expects exactly 1 argument, got ${node.args.length}`);
+  }
+  const arg = node.args[0];
+  if (arg.type === "SpreadElement") {
+    throw new UnsupportedPatternError(`style() does not support spread arguments`);
+  }
+  if (mediaQuery || pseudoClass || pseudoElement || whenPseudo) {
+    throw new UnsupportedPatternError(
+      `style() cannot be used inside media query, pseudo-class, pseudo-element, or when() contexts`
+    );
+  }
+  return {
+    abbr: "style",
+    defs: {},
+    styleArg: arg
+  };
+}
 function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
   const isAddCss = node.name === "addCss";
   if (isAddCss) {
@@ -2561,6 +2591,7 @@ function buildStyleHashMembers(segments, options) {
   const members = [];
   const normalSegs = [];
   const classNameArgs = [];
+  const styleKeyCounts = /* @__PURE__ */ new Map();
   function flushNormal() {
     if (normalSegs.length > 0) {
       members.push(...buildStyleHashProperties(normalSegs, options.mapping, options.maybeIncHelperName));
@@ -2573,6 +2604,11 @@ function buildStyleHashMembers(segments, options) {
       classNameArgs.push(t3.cloneNode(seg.classNameArg, true));
       continue;
     }
+    if (seg.styleArg) {
+      flushNormal();
+      members.push(buildInlineStyleMember(seg.styleArg, styleKeyCounts));
+      continue;
+    }
     if (seg.styleArrayArg) {
       flushNormal();
       if (seg.isAddCss && t3.isObjectExpression(seg.styleArrayArg)) {
@@ -2595,7 +2631,7 @@ function buildStyleHashMembers(segments, options) {
       }
       continue;
     }
-    if (options.debug && !seg.classNameArg && !seg.styleArrayArg && !seg.typographyLookup) {
+    if (options.debug && !seg.classNameArg && !seg.styleArg && !seg.styleArrayArg && !seg.typographyLookup) {
       const isMultiProp = Object.keys(seg.defs).length > 1;
       const hasExtraDefs = seg.variableExtraDefs && Object.keys(seg.variableExtraDefs).length > 0;
       if (isMultiProp || hasExtraDefs) {
@@ -2613,14 +2649,21 @@ function buildStyleHashMembers(segments, options) {
 function buildCustomClassNameMembers(classNameArgs) {
   const counts = /* @__PURE__ */ new Map();
   return classNameArgs.map((arg) => {
-    const baseKey = `className_${sanitizeClassNameKey(arg)}`;
+    const baseKey = `className_${sanitizeMetadataKey(arg)}`;
     const count = (counts.get(baseKey) ?? 0) + 1;
     counts.set(baseKey, count);
     const key = count === 1 ? baseKey : `${baseKey}_${count}`;
     return t3.objectProperty(t3.identifier(key), t3.cloneNode(arg, true));
   });
 }
-function sanitizeClassNameKey(arg) {
+function buildInlineStyleMember(arg, counts) {
+  const baseKey = `style_${sanitizeMetadataKey(arg)}`;
+  const count = (counts.get(baseKey) ?? 0) + 1;
+  counts.set(baseKey, count);
+  const key = count === 1 ? baseKey : `${baseKey}_${count}`;
+  return t3.objectProperty(t3.identifier(key), t3.cloneNode(arg, true));
+}
+function sanitizeMetadataKey(arg) {
   const raw = t3.isStringLiteral(arg) ? arg.value : t3.isTemplateLiteral(arg) && arg.expressions.length === 0 && arg.quasis.length === 1 ? arg.quasis[0].value.cooked ?? "" : generate(arg).code;
   const sanitized = raw.replace(/[^a-zA-Z0-9_$]/g, "_").replace(/_+/g, "_").replace(/^_+|_+$/g, "");
   return sanitized || "value";
@@ -2656,7 +2699,7 @@ function buildAddCssObjectMembers(styleObject) {
 function collectConditionalOnlyProps(segments) {
   const allProps = /* @__PURE__ */ new Map();
   for (const seg of segments) {
-    if (seg.error || seg.styleArrayArg || seg.typographyLookup || seg.classNameArg) continue;
+    if (seg.error || seg.styleArrayArg || seg.typographyLookup || seg.classNameArg || seg.styleArg) continue;
     const hasCondition = !!(seg.pseudoClass || seg.mediaQuery || seg.pseudoElement || seg.whenPseudo);
     const props = seg.variableProps ?? Object.keys(seg.defs);
     for (const prop of props) {
@@ -2750,7 +2793,7 @@ function clonePropertyKey(key) {
 function injectDebugInfo(expr, line, options) {
   if (!options.debug) return;
   const firstProp = expr.properties.find((p) => {
-    return t3.isObjectProperty(p) && !(t3.isIdentifier(p.key) && p.key.name.startsWith("className_") || t3.isStringLiteral(p.key) && p.key.value.startsWith("className_") || t3.isIdentifier(p.key) && p.key.name === "__marker" || t3.isStringLiteral(p.key) && p.key.value === "__marker");
+    return t3.isObjectProperty(p) && !(t3.isIdentifier(p.key) && p.key.name.startsWith("className_") || t3.isStringLiteral(p.key) && p.key.value.startsWith("className_") || t3.isIdentifier(p.key) && p.key.name.startsWith("style_") || t3.isStringLiteral(p.key) && p.key.value.startsWith("style_") || t3.isIdentifier(p.key) && p.key.name === "__marker" || t3.isStringLiteral(p.key) && p.key.value === "__marker");
   });
   if (!firstProp) return;
   options.needsTrussDebugInfo.current = true;
@@ -3313,6 +3356,9 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
       if (seg.styleArrayArg) {
         return { error: `add(cssProp) is not supported in .css.ts files` };
       }
+      if (seg.styleArg) {
+        return { error: `style() 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` };
       }