@homebound/truss 2.29.3 → 2.29.5

package/build/plugin/index.js

@@ -1102,7 +1102,7 @@ function segmentClassPrefix(condition, mapping) {
   }
   if (condition.mediaQuery) {
     const breakpoint = breakpointNameForMediaQuery(mapping, condition.mediaQuery);
-    parts.push(breakpoint ? `${breakpoint.toLowerCase()}_` : "mq_");
+    parts.push(`${breakpoint ? breakpoint.toLowerCase() : sanitizeClassNameToken(condition.mediaQuery)}_`);
   }
   if (condition.pseudoClass) {
     parts.push(`${pseudoSelectorPrefix(condition.pseudoClass)}_`);
@@ -1327,7 +1327,9 @@ function typographyLookupKeySuffix(context, mapping) {
   if (context.pseudoElement) parts.push(context.pseudoElement.replace(/^::/, ""));
   if (context.mediaQuery) {
     const breakpoint = breakpointNameForMediaQuery(mapping, context.mediaQuery);
-    parts.push(breakpoint ? breakpoint.replace(/^./, (c) => c.toLowerCase()) : "mq");
+    parts.push(
+      breakpoint ? breakpoint.replace(/^./, (c) => c.toLowerCase()) : sanitizeClassNameToken(context.mediaQuery)
+    );
   }
   if (context.pseudoClass) parts.push(context.pseudoClass.replace(/^:+/, "").replace(/-/g, "_"));
   if (context.whenPseudo) parts.push(whenLookupKeyPart(context.whenPseudo));
@@ -2426,18 +2428,56 @@ function computeRulePriority(rule) {
 function isVariableRule(rule) {
   return rule.declarations.some((d) => d.cssVarName !== void 0);
 }
+function ruleSortKey(priority, className, atRulePrelude2) {
+  const widthInterval = atRulePrelude2 === void 0 ? null : parseWidthInterval(atRulePrelude2);
+  return { priority, className, widthInterval };
+}
+function compareRuleSortKeys(a, b) {
+  return a.priority - b.priority || compareWidthIntervals(a.widthInterval, b.widthInterval) || compareClassNames(a.className, b.className);
+}
 function sortRulesByPriority(rules) {
   const decorated = Array.from(rules, (rule) => {
-    return { rule, priority: computeRulePriority(rule) };
-  });
-  decorated.sort((a, b) => {
-    return a.priority - b.priority || compareClassNames(a.rule.className, b.rule.className);
+    const priority = computeRulePriority(rule);
+    return { rule, priority, key: ruleSortKey(priority, rule.className, rule.mediaQuery) };
   });
-  return decorated;
+  decorated.sort((a, b) => compareRuleSortKeys(a.key, b.key));
+  return decorated.map((d) => ({ rule: d.rule, priority: d.priority }));
 }
 function compareClassNames(a, b) {
   return a < b ? -1 : a > b ? 1 : 0;
 }
+function parseWidthInterval(prelude) {
+  if (/,|\bnot\b|\bor\b|[<>]/.test(prelude)) return null;
+  const terms = Array.from(prelude.matchAll(/\((min|max)-width:\s*([^)]*)\)/g));
+  if (terms.length === 0) return null;
+  let lo = 0;
+  let hi = Infinity;
+  for (const term of terms) {
+    const px = parsePxLength(term[2]);
+    if (px === null) return null;
+    if (term[1] === "min") {
+      lo = Math.max(lo, px);
+    } else {
+      hi = Math.min(hi, px);
+    }
+  }
+  return { lo, hi };
+}
+function parsePxLength(value) {
+  const match = value.trim().match(/^(\d+(?:\.\d+)?)(px)?$/);
+  if (!match) return null;
+  if (match[2] === void 0 && Number(match[1]) !== 0) return null;
+  return Number(match[1]);
+}
+function compareWidthIntervals(a, b) {
+  if (a === null || b === null) {
+    return (a === null ? 1 : 0) - (b === null ? 1 : 0);
+  }
+  const widthA = a.hi - a.lo;
+  const widthB = b.hi - b.lo;
+  if (widthA !== widthB) return widthA > widthB ? -1 : 1;
+  return a.lo - b.lo;
+}
 
 // src/plugin/emit-css.ts
 function collectAtomicRules(chains, mapping) {
@@ -3477,11 +3517,14 @@ function mergeTrussCss(sources) {
     }
     allArbitraryCssBlocks.push(...source.arbitraryCssBlocks);
   }
-  allRules.sort((a, b) => a.priority - b.priority || compareClassNames(a.className, b.className));
+  const decorated = allRules.map((rule) => {
+    return { rule, key: ruleSortKey(rule.priority, rule.className, atRulePrelude(rule.cssText)) };
+  });
+  decorated.sort((a, b) => compareRuleSortKeys(a.key, b.key));
   const lines = [];
-  for (const rule of allRules) {
-    lines.push(`/* @truss p:${rule.priority} c:${rule.className} */`);
-    lines.push(rule.cssText);
+  for (const entry of decorated) {
+    lines.push(`/* @truss p:${entry.rule.priority} c:${entry.rule.className} */`);
+    lines.push(entry.rule.cssText);
   }
   for (const prop of allProperties) {
     lines.push(`/* @truss @property */`);
@@ -3492,6 +3535,11 @@ function mergeTrussCss(sources) {
   }
   return lines.join("\n");
 }
+function atRulePrelude(cssText) {
+  if (!cssText.startsWith("@")) return void 0;
+  const brace = cssText.indexOf("{");
+  return brace === -1 ? void 0 : cssText.slice(0, brace).trim();
+}
 
 // src/plugin/transform-session.ts
 function createTrussTransformSession(options) {