@homebound/truss 2.29.6 → 2.29.7

package/build/plugin/index.js

@@ -1874,6 +1874,55 @@ function flattenWhenObjectParts(resolved) {
   return segments;
 }
 
+// src/css-order.ts
+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 compareClassNames(a, b) {
+  return a < b ? -1 : a > b ? 1 : 0;
+}
+function atRulePrelude(cssText) {
+  if (!cssText.startsWith("@")) return void 0;
+  const brace = cssText.indexOf("{");
+  return brace === -1 ? void 0 : cssText.slice(0, brace).trim();
+}
+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/property-priorities.ts
 var longHandPhysical = /* @__PURE__ */ new Set();
 var longHandLogical = /* @__PURE__ */ new Set();
@@ -2428,13 +2477,6 @@ 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) => {
     const priority = computeRulePriority(rule);
@@ -2443,41 +2485,6 @@ function sortRulesByPriority(rules) {
   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) {
@@ -3429,6 +3436,8 @@ function findLastImportLine(lines) {
 
 // src/plugin/merge-css.ts
 import { readFileSync as readFileSync2 } from "fs";
+
+// src/truss-css.ts
 var RULE_ANNOTATION_RE = /^\/\* @truss p:([\d.]+) c:(\S+) \*\/$/;
 var PROPERTY_ANNOTATION_RE = /^\/\* @truss @property \*\/$/;
 var ARBITRARY_START_RE = /^\/\* @truss arbitrary:start \*\/$/;
@@ -3485,10 +3494,6 @@ function parseTrussCss(cssText) {
   }
   return { rules, properties, arbitraryCssBlocks };
 }
-function readTrussCss(filePath) {
-  const content = readFileSync2(filePath, "utf8");
-  return parseTrussCss(content);
-}
 function annotateArbitraryCssBlock(cssText) {
   const trimmed = cssText.trim();
   if (trimmed.length === 0) {
@@ -3496,6 +3501,12 @@ function annotateArbitraryCssBlock(cssText) {
   }
   return ["/* @truss arbitrary:start */", trimmed, "/* @truss arbitrary:end */"].join("\n");
 }
+
+// src/plugin/merge-css.ts
+function readTrussCss(filePath) {
+  const content = readFileSync2(filePath, "utf8");
+  return parseTrussCss(content);
+}
 function mergeTrussCss(sources) {
   const seenClasses = /* @__PURE__ */ new Set();
   const allRules = [];
@@ -3535,11 +3546,6 @@ 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) {
@@ -3569,6 +3575,7 @@ function createTrussTransformSession(options) {
     libraryCache = null;
   }
   function updateArbitraryCssRegistry(sourcePath, sourceCode) {
+    sourcePath = resolve2(sourcePath).replace(/\\/g, "/");
     const css = transformCssTs(sourceCode, sourcePath, ensureMapping()).trim();
     if (css.length > 0) {
       const prev = arbitraryCssRegistry.get(sourcePath);
@@ -3598,7 +3605,7 @@ function createTrussTransformSession(options) {
   function collectCss() {
     const mapping2 = ensureMapping();
     const appCssParts = [generateCssText(cssRegistry)];
-    const allArbitrary = Array.from(arbitraryCssRegistry.values()).join("\n\n");
+    const allArbitrary = Array.from(arbitraryCssRegistry.entries()).sort((a, b) => compareClassNames(a[0], b[0])).map((entry) => entry[1]).join("\n\n");
     appCssParts.push(annotateArbitraryCssBlock(allArbitrary));
     const appCss = appCssParts.filter((part) => part.length > 0).join("\n");
     const libs = loadLibraries();
@@ -3610,8 +3617,16 @@ ${body}`;
   function hasCss() {
     return cssRegistry.size > 0 || arbitraryCssRegistry.size > 0 || libraryPaths.length > 0;
   }
+  function collectTestCss() {
+    return mergeTrussCss(loadLibraries());
+  }
+  function getArbitraryCss(sourcePath) {
+    return arbitraryCssRegistry.get(resolve2(sourcePath).replace(/\\/g, "/")) ?? "";
+  }
   return {
     collectCss,
+    collectTestCss,
+    getArbitraryCss,
     ensureMapping,
     hasCss,
     reset,
@@ -3620,6 +3635,9 @@ ${body}`;
   };
 }
 
+// src/plugin/index.ts
+import * as t16 from "@babel/types";
+
 // src/plugin/esbuild-plugin.ts
 import { readFileSync as readFileSync3, writeFileSync, mkdirSync } from "fs";
 import { resolve as resolve3, join } from "path";
@@ -3667,6 +3685,7 @@ function loaderForPath(filePath) {
 
 // src/plugin/index.ts
 var VIRTUAL_CSS_PREFIX = "\0truss-css:";
+var VIRTUAL_TEST_CSS_PREFIX = "\0truss-test-css:";
 var CSS_TS_QUERY = "?truss-css";
 var TRUSS_CSS_PLACEHOLDER = "__TRUSS_CSS_HASH__";
 var VIRTUAL_CSS_ENDPOINT = "/virtual:truss.css";
@@ -3756,6 +3775,7 @@ function trussPlugin(opts) {
       if (!source.endsWith(CSS_TS_QUERY)) return null;
       const absolutePath = resolveImportPath(source.slice(0, -CSS_TS_QUERY.length), importer, projectRoot);
       if (!existsSync2(absolutePath)) return null;
+      if (isTest) return VIRTUAL_TEST_CSS_PREFIX + absolutePath;
       return VIRTUAL_CSS_PREFIX + absolutePath.slice(0, -3);
     },
     load(id) {
@@ -3789,11 +3809,27 @@ function trussPlugin(opts) {
 `;
       }
       if (id === RESOLVED_VIRTUAL_TEST_CSS_ID) {
-        const css = session.collectCss();
+        const css = session.collectTestCss();
+        const options = {
+          source: "libraries",
+          order: 0,
+          prelude: rootSpacingPreludeCss(session.ensureMapping().increment)
+        };
         return `
 import { __injectTrussCSS } from "@homebound/truss/runtime";
 
-__injectTrussCSS(${JSON.stringify(css)});
+__injectTrussCSS(${JSON.stringify(css)}, ${JSON.stringify(options)});
+`;
+      }
+      if (id.startsWith(VIRTUAL_TEST_CSS_PREFIX)) {
+        const sourcePath2 = resolve4(id.slice(VIRTUAL_TEST_CSS_PREFIX.length)).replace(/\\/g, "/");
+        session.updateArbitraryCssRegistry(sourcePath2, readFileSync4(sourcePath2, "utf8"));
+        const css = annotateArbitraryCssBlock(session.getArbitraryCss(sourcePath2));
+        return `
+import "${VIRTUAL_TEST_CSS_ID}";
+import { __injectTrussCSS } from "@homebound/truss/runtime";
+
+__injectTrussCSS(${JSON.stringify(css)}, ${JSON.stringify({ source: sourcePath2 })});
 `;
       }
       if (!id.startsWith(VIRTUAL_CSS_PREFIX)) return null;
@@ -3803,16 +3839,45 @@ __injectTrussCSS(${JSON.stringify(css)});
       return `/* [truss] ${sourcePath} \u2014 included via truss.css */`;
     },
     transform(code, id) {
+      if (id.startsWith(VIRTUAL_TEST_CSS_PREFIX)) return null;
       if (!/\.[cm]?[jt]sx?(\?|$)/.test(id)) return null;
       const fileId = stripQueryAndHash(id);
       if (isNodeModulesFile(fileId)) return null;
       const rewrittenImports = rewriteCssTsImports(code, id);
-      const shouldBootstrapTestCss = isTest && libraryPaths.length > 0;
+      const shouldBootstrapTestCss = isTest;
       const transformedCode = shouldBootstrapTestCss ? `${rewrittenImports.code}
 import "${VIRTUAL_TEST_CSS_ID}";` : rewrittenImports.code;
       const importsOnlyResult = rewrittenImports.changed || shouldBootstrapTestCss ? { code: transformedCode, map: null } : null;
       if (fileId.endsWith(".css.ts")) {
         session.updateArbitraryCssRegistry(fileId, code);
+        if (isTest) {
+          const css = annotateArbitraryCssBlock(session.getArbitraryCss(fileId));
+          const ast = parseModule(transformedCode, fileId);
+          traverse(ast, {
+            Program(path) {
+              const inject = path.scope.generateUidIdentifier("injectTrussCSS");
+              path.unshiftContainer(
+                "body",
+                t16.importDeclaration(
+                  [t16.importSpecifier(inject, t16.identifier("__injectTrussCSS"))],
+                  t16.stringLiteral("@homebound/truss/runtime")
+                )
+              );
+              path.pushContainer(
+                "body",
+                t16.expressionStatement(
+                  t16.callExpression(inject, [
+                    t16.stringLiteral(css),
+                    t16.objectExpression([
+                      t16.objectProperty(t16.identifier("source"), t16.stringLiteral(resolve4(fileId).replace(/\\/g, "/")))
+                    ])
+                  ])
+                )
+              );
+            }
+          });
+          return { code: generate(ast, { sourceFileName: fileId }).code, map: null };
+        }
         return importsOnlyResult;
       }
       const hasCssDsl = rewrittenImports.code.includes("Css") || rewrittenImports.code.includes("css=");