@homebound/truss 2.9.1 → 2.11.0

package/build/plugin/index.js

@@ -583,6 +583,396 @@ function sortRulesByPriority(rules) {
   }
 }
 
+// src/plugin/css-property-abbreviations.ts
+var cssPropertyAbbreviations = {
+  // Alignment
+  alignContent: "ac",
+  alignItems: "ai",
+  alignSelf: "als",
+  // Animation
+  animation: "anim",
+  animationDelay: "animd",
+  animationDirection: "animdr",
+  animationDuration: "animdu",
+  animationFillMode: "animfm",
+  animationIterationCount: "animic",
+  animationName: "animn",
+  animationPlayState: "animps",
+  animationTimingFunction: "animtf",
+  // Appearance
+  appearance: "app",
+  // Aspect ratio
+  aspectRatio: "ar",
+  // Backdrop filter
+  backdropFilter: "bdf",
+  // Background
+  background: "bg",
+  backgroundAttachment: "bga",
+  backgroundBlendMode: "bgbm",
+  backgroundClip: "bgcl",
+  backgroundColor: "bgc",
+  backgroundImage: "bgi",
+  backgroundOrigin: "bgo",
+  backgroundPosition: "bgp",
+  backgroundRepeat: "bgr",
+  backgroundSize: "bgs",
+  // Border – shorthand
+  border: "bd",
+  borderCollapse: "bdcl",
+  borderColor: "bdc",
+  borderImage: "bdi",
+  borderRadius: "bra",
+  borderSpacing: "bdsp",
+  borderStyle: "bs",
+  borderWidth: "bw",
+  // Border – top
+  borderTop: "bdt",
+  borderTopColor: "btc",
+  borderTopLeftRadius: "btlr",
+  borderTopRightRadius: "btrr",
+  borderTopStyle: "bts",
+  borderTopWidth: "btw",
+  // Border – right
+  borderRight: "bdr",
+  borderRightColor: "brc",
+  borderRightStyle: "brs",
+  borderRightWidth: "brw",
+  // Border – bottom
+  borderBottom: "bdb",
+  borderBottomColor: "bbc",
+  borderBottomLeftRadius: "bblr",
+  borderBottomRightRadius: "bbrr",
+  borderBottomStyle: "bbs",
+  borderBottomWidth: "bbw",
+  // Border – left
+  borderLeft: "bdl",
+  borderLeftColor: "blc",
+  borderLeftStyle: "bls",
+  borderLeftWidth: "blw",
+  // Box
+  boxDecorationBreak: "bxdb",
+  boxShadow: "bxs",
+  boxSizing: "bxz",
+  // Break
+  breakAfter: "bka",
+  breakBefore: "bkb",
+  breakInside: "bki",
+  // Caret / caption
+  captionSide: "cps",
+  caretColor: "cac",
+  // Clear / clip
+  clear: "clr",
+  clip: "cli",
+  clipPath: "clp",
+  // Color
+  color: "c",
+  colorScheme: "cs",
+  // Columns
+  columnCount: "cc",
+  columnFill: "cf",
+  columnGap: "cg",
+  columnRule: "cr",
+  columnRuleColor: "crc",
+  columnRuleStyle: "crs",
+  columnRuleWidth: "crw",
+  columnSpan: "csp",
+  columnWidth: "cw",
+  columns: "cols",
+  // Contain / container
+  contain: "ctn",
+  containerName: "ctnm",
+  containerType: "ctnt",
+  content: "cnt",
+  contentVisibility: "cv",
+  // Counter
+  counterIncrement: "coi",
+  counterReset: "cor",
+  // Cursor
+  cursor: "cur",
+  // Direction
+  direction: "dir",
+  // Display
+  display: "d",
+  // Empty cells
+  emptyCells: "ec",
+  // Fill (SVG)
+  fill: "fi",
+  fillOpacity: "fio",
+  fillRule: "fir",
+  // Filter
+  filter: "flt",
+  // Flex
+  flex: "fx",
+  flexBasis: "fxb",
+  flexDirection: "fxd",
+  flexFlow: "fxf",
+  flexGrow: "fxg",
+  flexShrink: "fxs",
+  flexWrap: "fxw",
+  // Float
+  float: "fl",
+  // Font
+  font: "fnt",
+  fontDisplay: "fntd",
+  fontFamily: "ff",
+  fontFeatureSettings: "ffs",
+  fontKerning: "fk",
+  fontSize: "fz",
+  fontSizeAdjust: "fza",
+  fontStretch: "fst",
+  fontStyle: "fsy",
+  fontSynthesis: "fsyn",
+  fontVariant: "fv",
+  fontVariantCaps: "fvc",
+  fontVariantLigatures: "fvl",
+  fontVariantNumeric: "fvn",
+  fontWeight: "fw",
+  // Gap
+  gap: "g",
+  // Grid
+  grid: "gd",
+  gridArea: "ga",
+  gridAutoColumns: "gac",
+  gridAutoFlow: "gaf",
+  gridAutoRows: "gar",
+  gridColumn: "gc",
+  gridColumnEnd: "gce",
+  gridColumnGap: "gcg",
+  gridColumnStart: "gcs",
+  gridGap: "gg",
+  gridRow: "gr",
+  gridRowEnd: "gre",
+  gridRowGap: "grg",
+  gridRowStart: "grs",
+  gridTemplate: "gt",
+  gridTemplateAreas: "gta",
+  gridTemplateColumns: "gtc",
+  gridTemplateRows: "gtr",
+  // Height
+  height: "h",
+  maxHeight: "mxh",
+  minHeight: "mnh",
+  // Hyphens
+  hyphens: "hyp",
+  // Image rendering
+  imageRendering: "ir",
+  // Inset
+  inset: "ins",
+  insetBlock: "insb",
+  insetBlockEnd: "insbe",
+  insetBlockStart: "insbs",
+  insetInline: "insi",
+  insetInlineEnd: "insie",
+  insetInlineStart: "insis",
+  // Isolation
+  isolation: "iso",
+  // Justify
+  justifyContent: "jc",
+  justifyItems: "ji",
+  justifySelf: "jfs",
+  // Left
+  left: "l",
+  // Letter spacing
+  letterSpacing: "ls",
+  // Line
+  lineBreak: "lb",
+  lineHeight: "lh",
+  // List
+  listStyle: "lis",
+  listStyleImage: "lsi",
+  listStylePosition: "lsp",
+  listStyleType: "lst",
+  // Margin
+  margin: "m",
+  marginBlock: "mbl",
+  marginBlockEnd: "mble",
+  marginBlockStart: "mbls",
+  marginBottom: "mb",
+  marginInline: "mil",
+  marginInlineEnd: "mile",
+  marginInlineStart: "mils",
+  marginLeft: "ml",
+  marginRight: "mr",
+  marginTop: "mt",
+  // Mask
+  mask: "msk",
+  maskImage: "mski",
+  maskPosition: "mskp",
+  maskRepeat: "mskr",
+  maskSize: "msks",
+  // Max / min width
+  maxWidth: "mxw",
+  minWidth: "mnw",
+  // Mix blend mode
+  mixBlendMode: "mbm",
+  // Object
+  objectFit: "obf",
+  objectPosition: "obp",
+  // Offset
+  offset: "ofs",
+  offsetPath: "ofsp",
+  // Opacity
+  opacity: "op",
+  // Order
+  order: "ord",
+  // Orphans / widows
+  orphans: "orp",
+  widows: "wid",
+  // Outline
+  outline: "ol",
+  outlineColor: "olc",
+  outlineOffset: "olo",
+  outlineStyle: "ols",
+  outlineWidth: "olw",
+  // Overflow
+  overflow: "ov",
+  overflowAnchor: "ova",
+  overflowWrap: "ovw",
+  overflowX: "ovx",
+  overflowY: "ovy",
+  overscrollBehavior: "osb",
+  overscrollBehaviorX: "osbx",
+  overscrollBehaviorY: "osby",
+  // Padding
+  padding: "p",
+  paddingBlock: "pbl",
+  paddingBlockEnd: "pble",
+  paddingBlockStart: "pbls",
+  paddingBottom: "pb",
+  paddingInline: "pil",
+  paddingInlineEnd: "pile",
+  paddingInlineStart: "pils",
+  paddingLeft: "pl",
+  paddingRight: "pr",
+  paddingTop: "pt",
+  // Page break
+  pageBreakAfter: "pgba",
+  pageBreakBefore: "pgbb",
+  pageBreakInside: "pgbi",
+  // Perspective
+  perspective: "per",
+  perspectiveOrigin: "pero",
+  // Place
+  placeContent: "plc",
+  placeItems: "pli",
+  placeSelf: "pls",
+  // Pointer events
+  pointerEvents: "pe",
+  // Position
+  position: "pos",
+  // Quotes
+  quotes: "q",
+  // Resize
+  resize: "rsz",
+  // Right
+  right: "r",
+  // Rotate / scale
+  rotate: "rot",
+  scale: "sc",
+  // Row gap
+  rowGap: "rg",
+  // Scroll
+  scrollBehavior: "scb",
+  scrollMargin: "scm",
+  scrollPadding: "scp",
+  scrollSnapAlign: "ssa",
+  scrollSnapStop: "sss",
+  scrollSnapType: "sst",
+  // Shape
+  shapeImageThreshold: "sit",
+  shapeMargin: "sm",
+  shapeOutside: "so",
+  // Stroke (SVG)
+  stroke: "stk",
+  strokeDasharray: "sda",
+  strokeDashoffset: "sdo",
+  strokeLinecap: "slc",
+  strokeLinejoin: "slj",
+  strokeOpacity: "sop",
+  strokeWidth: "sw",
+  // Tab size
+  tabSize: "ts",
+  // Table layout
+  tableLayout: "tl",
+  // Text
+  textAlign: "ta",
+  textAlignLast: "tal",
+  textDecoration: "td",
+  textDecorationColor: "tdc",
+  textDecorationLine: "tdl",
+  textDecorationStyle: "tds",
+  textDecorationThickness: "tdt",
+  textEmphasis: "te",
+  textIndent: "ti",
+  textJustify: "tj",
+  textOrientation: "tor",
+  textOverflow: "to",
+  textRendering: "tr",
+  textShadow: "tsh",
+  textTransform: "tt",
+  textUnderlineOffset: "tuo",
+  textUnderlinePosition: "tup",
+  textWrap: "twp",
+  // Top
+  top: "tp",
+  // Touch action
+  touchAction: "tca",
+  // Transform
+  transform: "tf",
+  transformOrigin: "tfo",
+  transformStyle: "tfs",
+  // Transition
+  transition: "tsn",
+  transitionDelay: "tsnd",
+  transitionDuration: "tsndu",
+  transitionProperty: "tsnp",
+  transitionTimingFunction: "tsntf",
+  // Translate
+  translate: "tsl",
+  // Unicode / user select
+  unicodeBidi: "ub",
+  userSelect: "us",
+  // Vertical align
+  verticalAlign: "va",
+  // Visibility
+  visibility: "vis",
+  // Webkit
+  WebkitAppearance: "wkapp",
+  WebkitBackdropFilter: "wkbdf",
+  WebkitBoxOrient: "wbo",
+  WebkitFontSmoothing: "wkfs",
+  WebkitLineClamp: "wlc",
+  WebkitMaskImage: "wkmi",
+  WebkitOverflowScrolling: "wkos",
+  WebkitTapHighlightColor: "wkthc",
+  WebkitTextFillColor: "wktfc",
+  WebkitTextStrokeColor: "wktsc",
+  WebkitTextStrokeWidth: "wktsw",
+  // White space
+  whiteSpace: "ws",
+  // Width
+  width: "w",
+  // Will change
+  willChange: "wc",
+  // Word
+  wordBreak: "wdb",
+  wordSpacing: "wds",
+  wordWrap: "wdw",
+  writingMode: "wm",
+  // Z-index
+  zIndex: "zi",
+  // Bottom (positioned after "border*" to avoid scan confusion)
+  bottom: "bot"
+};
+var seen = /* @__PURE__ */ new Map();
+for (const [prop, abbr] of Object.entries(cssPropertyAbbreviations)) {
+  const existing = seen.get(abbr);
+  if (existing) {
+    throw new Error(`CSS property abbreviation conflict: "${abbr}" is used by both "${existing}" and "${prop}"`);
+  }
+  seen.set(abbr, prop);
+}
+
 // src/plugin/emit-truss.ts
 var PSEUDO_SUFFIX = {
   ":hover": "_h",
@@ -700,6 +1090,9 @@ function getLonghandLookup(mapping) {
   }
   return cachedLookup;
 }
+function getPropertyAbbreviation(cssProp) {
+  return cssPropertyAbbreviations[cssProp] ?? cssProp;
+}
 function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
   const abbr = seg.abbr;
   if (seg.argResolved !== void 0) {
@@ -708,7 +1101,7 @@ function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
       const lookup = getLonghandLookup(mapping);
       const canonical = lookup.get(`${cssProp}\0${cssValue}`);
       if (canonical) return canonical;
-      return `${abbr}_${valuePart}_${cssProp}`;
+      return `${getPropertyAbbreviation(cssProp)}_${cleanValueForClassName(cssValue)}`;
     }
     return `${abbr}_${valuePart}`;
   }
@@ -716,7 +1109,7 @@ function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
     const lookup = getLonghandLookup(mapping);
     const canonical = lookup.get(`${cssProp}\0${cssValue}`);
     if (canonical) return canonical;
-    return `${abbr}_${cssProp}`;
+    return `${getPropertyAbbreviation(cssProp)}_${cleanValueForClassName(cssValue)}`;
   }
   return abbr;
 }
@@ -823,13 +1216,16 @@ function collectVariableRules(rules, seg, mapping) {
   }
   if (seg.variableExtraDefs) {
     for (const [cssProp, value] of Object.entries(seg.variableExtraDefs)) {
-      const extraBase = `${seg.abbr}_${cssProp}`;
+      const cssValue = String(value);
+      const lookup = getLonghandLookup(mapping);
+      const canonical = lookup.get(`${cssProp}\0${cssValue}`);
+      const extraBase = canonical ?? `${getPropertyAbbreviation(cssProp)}_${cleanValueForClassName(cssValue)}`;
       const extraName = prefix ? `${prefix}${extraBase}` : extraBase;
       if (!rules.has(extraName)) {
         rules.set(extraName, {
           className: extraName,
           cssProperty: camelToKebab(cssProp),
-          cssValue: String(value),
+          cssValue,
           ...!whenSelector && baseRuleFields(seg),
           whenSelector
         });
@@ -961,7 +1357,10 @@ function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
       }
       if (seg.variableExtraDefs) {
         for (const [cssProp, value] of Object.entries(seg.variableExtraDefs)) {
-          const extraBase = `${seg.abbr}_${cssProp}`;
+          const cssValue = String(value);
+          const lookup = getLonghandLookup(mapping);
+          const canonical = lookup.get(`${cssProp}\0${cssValue}`);
+          const extraBase = canonical ?? `${getPropertyAbbreviation(cssProp)}_${cleanValueForClassName(cssValue)}`;
           const extraName = prefix ? `${prefix}${extraBase}` : extraBase;
           pushEntry(cssProp, { className: extraName, isVariable: false, isConditional });
         }
@@ -2044,7 +2443,12 @@ function rewriteExpressionSites(options) {
     const cssAttrPath = getCssAttributePath(site.path);
     const line = site.path.node.loc?.start.line ?? null;
     if (cssAttrPath) {
-      cssAttrPath.replaceWith(t3.jsxSpreadAttribute(buildCssSpreadExpression(cssAttrPath, styleHash, line, options)));
+      if (!options.debug && isFullyStaticStyleHash(styleHash) && !hasExistingAttribute(cssAttrPath, "className") && !hasExistingAttribute(cssAttrPath, "style")) {
+        const classNames = extractStaticClassNames(styleHash);
+        cssAttrPath.replaceWith(t3.jsxAttribute(t3.jsxIdentifier("className"), t3.stringLiteral(classNames)));
+      } else {
+        cssAttrPath.replaceWith(t3.jsxSpreadAttribute(buildCssSpreadExpression(cssAttrPath, styleHash, line, options)));
+      }
     } else {
       if (options.debug && line !== null) {
         injectDebugInfo(styleHash, line, options);
@@ -2138,11 +2542,18 @@ function buildStyleHashMembers(segments, options) {
       }
       continue;
     }
+    if (options.debug && !seg.classNameArg && !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) {
+        classNameArgs.push(t3.stringLiteral(seg.abbr));
+      }
+    }
     normalSegs.push(seg);
   }
   flushNormal();
   if (classNameArgs.length > 0) {
-    members.push(...buildCustomClassNameMembers(classNameArgs));
+    members.unshift(...buildCustomClassNameMembers(classNameArgs));
   }
   return members;
 }
@@ -2409,6 +2820,29 @@ function extractSiblingClassName(callPath) {
 function isMatchingPropertyName(key, name) {
   return t3.isIdentifier(key) && key.name === name || t3.isStringLiteral(key) && key.value === name;
 }
+function isFullyStaticStyleHash(hash) {
+  for (const prop of hash.properties) {
+    if (!t3.isObjectProperty(prop)) return false;
+    if (!t3.isStringLiteral(prop.value)) return false;
+  }
+  return true;
+}
+function extractStaticClassNames(hash) {
+  const classNames = [];
+  for (const prop of hash.properties) {
+    if (t3.isObjectProperty(prop) && t3.isStringLiteral(prop.value)) {
+      classNames.push(prop.value.value);
+    }
+  }
+  return classNames.join(" ");
+}
+function hasExistingAttribute(path, attrName) {
+  const openingElement = path.parentPath;
+  if (!openingElement || !openingElement.isJSXOpeningElement()) return false;
+  return openingElement.node.attributes.some((attr) => {
+    return t3.isJSXAttribute(attr) && t3.isJSXIdentifier(attr.name, { name: attrName });
+  });
+}
 
 // src/plugin/transform.ts
 var traverse2 = _traverse2.default ?? _traverse2;