@homebound/truss 2.29.12 → 2.30.0

package/build/plugin/index.d.ts

@@ -7,6 +7,10 @@ interface TrussMapping {
     typography?: string[];
     /** Token member name → CSS variable (from `config.tokens`), for `setVar` key resolution. */
     tokens?: Record<string, string>;
+    /** CSS variable → its `@property` block, for the tokens `config.tokens` registers with a `syntax`. */
+    properties?: Record<string, string>;
+    /** Keyframe name → its `@keyframes` block (from `config.keyframes`). */
+    keyframes?: Record<string, string>;
     abbreviations: Record<string, TrussMappingEntry>;
 }
 /**

package/build/plugin/index.js

@@ -267,6 +267,44 @@ function toVirtualCssSpecifier(source) {
 // src/plugin/transform-session.ts
 import { resolve as resolve2 } from "path";
 
+// src/plugin/at-rule-refs.ts
+var ANIMATION_VALUE_RE = /\banimation(?:-name)?\s*:\s*([^;}]+)/g;
+function applyReferencedKeyframes(css, mapping) {
+  const configured = mapping.keyframes ?? {};
+  if (Object.keys(configured).length === 0) return;
+  const cssTexts = [...css.rules.map((rule) => rule.cssText), ...css.arbitraryCssBlocks.map((block) => block.cssText)];
+  const alreadyEmitted = new Set(css.keyframes.map((block) => block.name));
+  for (const name of referencedKeyframes(cssTexts, Object.keys(configured))) {
+    if (alreadyEmitted.has(name) || configured[name].length === 0) continue;
+    css.keyframes.push({ name, cssText: configured[name] });
+  }
+}
+function applyRegisteredProperties(css, mapping) {
+  const pending = new Map(Object.entries(mapping.properties ?? {}));
+  if (pending.size === 0) return;
+  for (let i = 0; i < css.properties.length; i++) {
+    const varName = css.properties[i].varName;
+    const cssText = pending.get(varName);
+    if (cssText === void 0) continue;
+    css.properties[i] = { varName, cssText };
+    pending.delete(varName);
+  }
+  for (const [varName, cssText] of pending) {
+    css.properties.push({ varName, cssText });
+  }
+}
+function referencedKeyframes(cssTexts, names) {
+  if (names.length === 0) return [];
+  const referenced = /* @__PURE__ */ new Set();
+  for (const cssText of cssTexts) {
+    for (const match of cssText.matchAll(ANIMATION_VALUE_RE)) {
+      if (match[1].includes("var(")) return names;
+      for (const token of match[1].trim().split(/[\s,]+/)) referenced.add(token);
+    }
+  }
+  return names.filter((name) => referenced.has(name));
+}
+
 // src/plugin/resolve-chain.ts
 import * as t10 from "@babel/types";
 
@@ -333,11 +371,11 @@ function resetConditionContext(context) {
 // src/plugin/unknown-abbreviation.ts
 var UnknownAbbreviationError = class extends UnsupportedPatternError {
   constructor(abbreviation, candidates) {
-    const suggestion = closestAbbreviation(abbreviation, candidates);
+    const suggestion = closestName(abbreviation, candidates);
     super(`Unknown abbreviation "${abbreviation}"${suggestion ? `. Did you mean "${suggestion}"?` : ""}`);
   }
 };
-function closestAbbreviation(abbreviation, candidates) {
+function closestName(abbreviation, candidates) {
   let closest;
   let bestDistance = 3;
   for (const candidate of candidates) {
@@ -414,6 +452,7 @@ function hasCondition(condition) {
 
 // src/plugin/resolve-literals.ts
 import * as t3 from "@babel/types";
+import { pascalCase } from "change-case";
 
 // src/css-custom-property.ts
 function maybeCssVar(value) {
@@ -428,6 +467,65 @@ function isCustomPropertyName(value) {
   return value.startsWith("--");
 }
 
+// src/plugin/keyframe-names.ts
+var ANIMATION_KEYWORDS = /* @__PURE__ */ new Set([
+  // CSS-wide
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "revert-layer",
+  // <single-animation-iteration-count>, <single-animation-name>, <single-animation-fill-mode>
+  "infinite",
+  "none",
+  "forwards",
+  "backwards",
+  "both",
+  // <single-animation-direction>
+  "normal",
+  "reverse",
+  "alternate",
+  "alternate-reverse",
+  // <single-animation-play-state>
+  "running",
+  "paused",
+  // <easing-function>
+  "linear",
+  "ease",
+  "ease-in",
+  "ease-out",
+  "ease-in-out",
+  "step-start",
+  "step-end",
+  // <single-animation-timeline>
+  "auto"
+]);
+var NUMERIC_TOKEN_RE = /^[+-]?(\d+\.?\d*|\.\d+)(m?s)?$/;
+function validateAnimationValue(props, value, mapping) {
+  const configured = mapping.keyframes;
+  if (!configured || Object.keys(configured).length === 0) return;
+  if (!props.some((prop) => ANIMATION_PROPERTIES.has(prop))) return;
+  if (value.includes("var(")) return;
+  for (const rawToken of value.trim().split(/[\s,]+/)) {
+    const token = rawToken.replace(/^["']|["']$/g, "");
+    if (token.length === 0) continue;
+    if (token.includes("(") || token.includes(")") || token.startsWith("--")) continue;
+    if (NUMERIC_TOKEN_RE.test(token)) continue;
+    if (ANIMATION_KEYWORDS.has(token.toLowerCase())) continue;
+    if (Object.hasOwn(configured, token)) continue;
+    throw new UnknownKeyframesError(token, Object.keys(configured));
+  }
+}
+var ANIMATION_PROPERTIES = /* @__PURE__ */ new Set(["animation", "animationName", "animation-name"]);
+var UnknownKeyframesError = class extends UnsupportedPatternError {
+  constructor(name, candidates) {
+    const suggestion = closestName(name, candidates);
+    super(
+      `Unknown keyframes "${name}" - add it to config.keyframes${suggestion ? `. Did you mean "${suggestion}"?` : ""}`
+    );
+  }
+};
+
 // src/spacing-css-var.ts
 var SPACING_CUSTOM_PROPERTY = "--t-spacing";
 function incrementCssValue(multiplier) {
@@ -460,6 +558,10 @@ function tryResolveValueLiteral(node, mapping) {
   if (mapping) {
     const token = tryResolveTokensMember(node, mapping);
     if (token !== null) return token;
+    const keyframes = tryResolveKeyframesMember(node, mapping);
+    if (keyframes !== null) return keyframes;
+    const template = tryResolveTemplateLiteral(node, mapping);
+    if (template !== null) return template;
   }
   if (t3.isStringLiteral(node)) {
     return node.value;
@@ -467,6 +569,19 @@ function tryResolveValueLiteral(node, mapping) {
   const numeric = tryNumericLiteral(node);
   return numeric === null ? null : String(numeric);
 }
+function tryResolveTemplateLiteral(node, mapping) {
+  if (!t3.isTemplateLiteral(node)) return null;
+  let result = node.quasis[0].value.cooked ?? node.quasis[0].value.raw;
+  for (let i = 0; i < node.expressions.length; i++) {
+    const expression = node.expressions[i];
+    if (!t3.isExpression(expression)) return null;
+    const resolved = tryResolveValueLiteral(expression, mapping);
+    if (resolved === null) return null;
+    const quasi = node.quasis[i + 1];
+    result += maybeCssVar(resolved) + (quasi.value.cooked ?? quasi.value.raw);
+  }
+  return result;
+}
 function tryNumericLiteral(node) {
   if (t3.isNumericLiteral(node)) {
     return node.value;
@@ -489,6 +604,23 @@ function tryResolveTokensMember(node, mapping) {
   }
   return tokenMap[memberName];
 }
+function tryResolveKeyframesMember(node, mapping) {
+  if (!t3.isMemberExpression(node) || !t3.isIdentifier(node.object, { name: "Keyframes" })) return null;
+  const memberName = memberPropertyName(node);
+  if (memberName === null) return null;
+  const keyframesMap = mapping.keyframes;
+  if (!keyframesMap) {
+    throw new UnsupportedPatternError(`Keyframes.* requires config.keyframes`);
+  }
+  const name = Object.keys(keyframesMap).find((configured) => pascalCase(configured) === memberName);
+  if (name === void 0) {
+    throw new UnknownKeyframesError(
+      memberName,
+      Object.keys(keyframesMap).map((configured) => pascalCase(configured))
+    );
+  }
+  return name;
+}
 function singleArg(node, label) {
   if (node.args.length !== 1) {
     throw new UnsupportedPatternError(`${label}() expects exactly 1 argument, got ${node.args.length}`);
@@ -540,7 +672,7 @@ function requireValueLiteral(node, errorMessage) {
 
 // src/plugin/resolve-setvar.ts
 import * as t6 from "@babel/types";
-import { pascalCase } from "change-case";
+import { pascalCase as pascalCase2 } from "change-case";
 
 // src/plugin/container-query.ts
 import * as t4 from "@babel/types";
@@ -592,6 +724,8 @@ import * as t5 from "@babel/types";
 
 // src/plugin/css-property-abbreviations.ts
 var cssPropertyAbbreviations = {
+  // Accent color
+  accentColor: "acc",
   // Alignment
   alignContent: "ac",
   alignItems: "ai",
@@ -1134,7 +1268,7 @@ function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
     return canonical ?? `${getPropertyAbbreviation(cssProp)}_${classNameFragmentForResolvedValue(cssValue)}`;
   }
   if (seg.argResolved !== void 0) {
-    return `${seg.abbr}_${classNameFragmentForResolvedValue(seg.argResolved)}`;
+    return `${getPropertyAbbreviation(seg.abbr)}_${classNameFragmentForResolvedValue(seg.argResolved)}`;
   }
   return seg.abbr;
 }
@@ -1161,9 +1295,6 @@ function whenPrefix(whenPseudo) {
   const markerPart = whenPseudo.markerNode ? `${whenPseudo.markerNode.name}_` : "";
   return `wh_${rel}_${pseudoPrefix}_${markerPart}`;
 }
-function camelToKebab(s) {
-  return s.replace(/^(Webkit|Moz|Ms|O)/, (m) => `-${m.toLowerCase()}`).replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-}
 function sanitizeClassNameToken(value) {
   return value.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
 }
@@ -1284,7 +1415,7 @@ function expandSetVarValueToLeaves(valueNode, mapping, baseContext) {
 }
 function setVarMediaLeaves(mediaObject, mapping, baseContext) {
   return plainObjectEntries(mediaObject, "setVar().media").map(({ key: breakpointName, value }) => {
-    const mediaQuery = breakpointMediaQuery(mapping, `if${pascalCase(breakpointName)}`);
+    const mediaQuery = breakpointMediaQuery(mapping, `if${pascalCase2(breakpointName)}`);
     if (mediaQuery === null) {
       throw new UnsupportedPatternError(
         `Unknown breakpoint "${breakpointName}" in setVar().media - use a Breakpoint name from truss-config`
@@ -1445,6 +1576,7 @@ function resolveDelegateCall(abbr, entry, node, mapping, context) {
 }
 function resolveLiteralOrVariableSegment(params) {
   const { abbr, props, incremented, appendPx = false, extraDefs, argAst, literalValue, mapping, context } = params;
+  if (literalValue !== null) validateAnimationValue(props, literalValue, mapping);
   if (literalValue !== null && !isCustomPropertyLiteral(argAst, mapping)) {
     const defs = Object.fromEntries(props.map((prop) => [prop, literalValue]));
     return staticSegment(abbr, { ...defs, ...extraDefs }, context, literalValue);
@@ -2529,16 +2661,24 @@ function sortRulesByPriority(rules) {
   return decorated.map((d) => ({ rule: d.rule, priority: d.priority }));
 }
 
+// src/utils.ts
+function camelToKebab(s) {
+  return s.replace(/^(Webkit|Moz|Ms|O)/, (m) => `-${m.toLowerCase()}`).replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+
 // src/plugin/truss-css.ts
 var RULE_ANNOTATION_RE = /^\/\* @truss p:([\d.]+) c:(\S+) \*\/$/;
 var PROPERTY_ANNOTATION_RE = /^\/\* @truss @property \*\/$/;
+var KEYFRAMES_ANNOTATION_RE = /^\/\* @truss @keyframes \*\/$/;
 var ARBITRARY_START_RE = /^\/\* @truss arbitrary:start \*\/$/;
 var ARBITRARY_END_RE = /^\/\* @truss arbitrary:end \*\/$/;
 var PROPERTY_VAR_RE = /^@property\s+(--\S+)/;
+var KEYFRAMES_NAME_RE = /^@keyframes\s+([^\s{]+)/;
 function parseTrussCss(cssText) {
   const lines = cssText.split("\n");
   const rules = [];
   const properties = [];
+  const keyframes = [];
   const arbitraryCssBlocks = [];
   let i = 0;
   function takeAnnotatedLine() {
@@ -2566,6 +2706,15 @@ function parseTrussCss(cssText) {
       i++;
       continue;
     }
+    if (KEYFRAMES_ANNOTATION_RE.test(line)) {
+      const keyframesLine = takeAnnotatedLine();
+      const nameMatch = keyframesLine === null ? null : KEYFRAMES_NAME_RE.exec(keyframesLine);
+      if (keyframesLine !== null && nameMatch) {
+        keyframes.push({ cssText: keyframesLine, name: nameMatch[1] });
+      }
+      i++;
+      continue;
+    }
     if (ARBITRARY_START_RE.test(line)) {
       i++;
       const blockLines = [];
@@ -2584,7 +2733,7 @@ function parseTrussCss(cssText) {
     }
     i++;
   }
-  return { rules, properties, arbitraryCssBlocks };
+  return { rules, properties, keyframes, arbitraryCssBlocks };
 }
 function serializeTrussCss(css, annotate = true) {
   const lines = [];
@@ -2596,6 +2745,10 @@ function serializeTrussCss(css, annotate = true) {
     if (annotate) lines.push(`/* @truss @property */`);
     lines.push(prop.cssText);
   }
+  for (const block of css.keyframes) {
+    if (annotate) lines.push(`/* @truss @keyframes */`);
+    lines.push(block.cssText);
+  }
   for (const block of css.arbitraryCssBlocks) {
     lines.push(annotate ? annotateArbitraryCssBlock(block.cssText) : block.cssText.trim());
   }
@@ -2677,6 +2830,7 @@ function generateCssData(rules) {
       cssText: formatRule(entry.rule)
     })),
     properties: [],
+    keyframes: [],
     arbitraryCssBlocks: []
   };
   for (const { rule } of sorted) {
@@ -2965,6 +3119,7 @@ function createTestCssPayload(css) {
     });
   }
   if (css.properties.length > 0) payload.properties = css.properties;
+  if (css.keyframes.length > 0) payload.keyframes = css.keyframes;
   const arbitraryRules = css.arbitraryCssBlocks.flatMap((block) => splitArbitraryCss(block.cssText));
   if (arbitraryRules.length > 0) payload.arbitraryRules = arbitraryRules;
   return payload;
@@ -3461,6 +3616,7 @@ function transformTruss(code, filename, mapping, options = {}) {
   const chains = sites.map((s) => s.resolvedChain);
   const { rules, needsMaybeInc, needsMaybeCssVar } = collectAtomicRules(chains, mapping);
   const cssData = generateCssData(rules);
+  applyReferencedKeyframes(cssData, mapping);
   const cssText = serializeTrussCss(cssData);
   const runtime = createRuntimeHelpers(ast, usedTopLevelNames);
   const maybeIncHelperName = needsMaybeInc ? reservePreferredName(usedTopLevelNames, "__maybeInc") : null;
@@ -3637,6 +3793,8 @@ function mergeTrussCssData(sources) {
   const allRules = [];
   const seenProperties = /* @__PURE__ */ new Set();
   const allProperties = [];
+  const seenKeyframes = /* @__PURE__ */ new Set();
+  const allKeyframes = [];
   const allArbitraryCssBlocks = [];
   for (const source of sources) {
     for (const rule of source.rules) {
@@ -3651,6 +3809,12 @@ function mergeTrussCssData(sources) {
         allProperties.push(prop);
       }
     }
+    for (const block of source.keyframes) {
+      if (!seenKeyframes.has(block.name)) {
+        seenKeyframes.add(block.name);
+        allKeyframes.push(block);
+      }
+    }
     allArbitraryCssBlocks.push(...source.arbitraryCssBlocks);
   }
   const decorated = allRules.map((rule) => {
@@ -3660,6 +3824,7 @@ function mergeTrussCssData(sources) {
   return {
     rules: decorated.map((entry) => entry.rule),
     properties: allProperties,
+    keyframes: allKeyframes,
     arbitraryCssBlocks: allArbitraryCssBlocks
   };
 }
@@ -3725,7 +3890,10 @@ function createTrussTransformSession(options) {
     const allArbitrary = Array.from(arbitraryCssRegistry.entries()).sort((a, b) => compareClassNames(a[0], b[0])).map((entry) => entry[1]).join("\n\n");
     if (allArbitrary.length > 0) appCss.arbitraryCssBlocks.push({ cssText: allArbitrary });
     const libs = loadLibraries();
-    const body = serializeTrussCss(libs.length === 0 ? appCss : mergeTrussCssData([...libs, appCss]), annotate);
+    const merged = libs.length === 0 ? appCss : mergeTrussCssData([...libs, appCss]);
+    applyReferencedKeyframes(merged, mapping2);
+    applyRegisteredProperties(merged, mapping2);
+    const body = serializeTrussCss(merged, annotate);
     if (body.length === 0) return "";
     return `${rootSpacingPreludeCss(mapping2.increment)}
 ${body}`;
@@ -3734,7 +3902,9 @@ ${body}`;
     return cssRegistry.size > 0 || arbitraryCssRegistry.size > 0 || libraryPaths.length > 0;
   }
   function collectTestCss() {
-    return createTestCssPayload(mergeTrussCssData(loadLibraries()));
+    const css = mergeTrussCssData(loadLibraries());
+    applyRegisteredProperties(css, ensureMapping());
+    return createTestCssPayload(css);
   }
   function getArbitraryCss(sourcePath) {
     return arbitraryCssRegistry.get(resolve2(sourcePath).replace(/\\/g, "/")) ?? "";
@@ -3947,8 +4117,17 @@ __injectTrussCSS(${JSON.stringify(payload)});
       if (id.startsWith(VIRTUAL_TEST_CSS_PREFIX)) {
         const sourcePath2 = canonicalSourcePath(id.slice(VIRTUAL_TEST_CSS_PREFIX.length));
         session.updateArbitraryCssRegistry(sourcePath2, readFileSync4(sourcePath2, "utf8"), diagnostics(this));
+        const arbitraryRules = splitArbitraryCss(session.getArbitraryCss(sourcePath2));
+        const atRules = {
+          rules: [],
+          properties: [],
+          keyframes: [],
+          arbitraryCssBlocks: arbitraryRules.map((cssText) => ({ cssText }))
+        };
+        applyReferencedKeyframes(atRules, session.ensureMapping());
         const payload = {
-          arbitraryRules: splitArbitraryCss(session.getArbitraryCss(sourcePath2)),
+          arbitraryRules,
+          ...atRules.keyframes.length > 0 ? { keyframes: atRules.keyframes } : {},
           source: sourcePath2
         };
         return `