@homebound/truss 2.29.7 → 2.29.8

package/build/plugin/index.js

@@ -56,6 +56,7 @@ function removeCssImport(ast, cssBinding) {
       ast.program.body.splice(i, 1);
     } else {
       node.specifiers.splice(cssSpecIndex, 1);
+      hoistTypeOnlyImportKind(node);
     }
     return;
   }
@@ -76,10 +77,10 @@ function insertAfterLeadingImports(ast, statements) {
 }
 function findNamedImportBinding(ast, importedName, source) {
   for (const node of ast.program.body) {
-    if (!t.isImportDeclaration(node)) continue;
+    if (!t.isImportDeclaration(node) || node.importKind === "type") continue;
     if (source !== void 0 && node.source.value !== source) continue;
     for (const spec of node.specifiers) {
-      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported, { name: importedName })) {
+      if (t.isImportSpecifier(spec) && spec.importKind !== "type" && t.isIdentifier(spec.imported, { name: importedName })) {
         return spec.local.name;
       }
     }
@@ -109,7 +110,9 @@ function replaceCssImportWithNamedImports(ast, cssBinding, source, imports) {
 }
 function upsertNamedImports(ast, source, imports) {
   if (imports.length === 0) return;
-  const existing = findImportDeclaration(ast, source);
+  const existing = ast.program.body.find(
+    (node) => t.isImportDeclaration(node) && node.source.value === source && node.importKind !== "type" && !node.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec))
+  );
   if (!existing) {
     const importDecl = t.importDeclaration(imports.map(toImportSpecifier), t.stringLiteral(source));
     ast.program.body.splice(findLastImportIndex(ast) + 1, 0, importDecl);
@@ -117,7 +120,7 @@ function upsertNamedImports(ast, source, imports) {
   }
   for (const entry of imports) {
     const exists = existing.specifiers.some((spec) => {
-      return t.isImportSpecifier(spec) && t.isIdentifier(spec.imported, { name: entry.importedName });
+      return t.isImportSpecifier(spec) && spec.importKind !== "type" && t.isIdentifier(spec.imported, { name: entry.importedName });
     });
     if (!exists) existing.specifiers.push(toImportSpecifier(entry));
   }
@@ -183,6 +186,15 @@ function memberPropertyName(node) {
   if (node.computed && t.isStringLiteral(node.property)) return node.property.value;
   return null;
 }
+function hoistTypeOnlyImportKind(node) {
+  if (node.importKind === "type") return;
+  const typeOnly = node.specifiers.every((spec) => t.isImportSpecifier(spec) && spec.importKind === "type");
+  if (!typeOnly) return;
+  node.importKind = "type";
+  for (const spec of node.specifiers) {
+    if (t.isImportSpecifier(spec)) spec.importKind = null;
+  }
+}
 function toImportSpecifier(entry) {
   return t.importSpecifier(t.identifier(entry.localName), t.identifier(entry.importedName));
 }
@@ -2486,6 +2498,84 @@ function sortRulesByPriority(rules) {
   return decorated.map((d) => ({ rule: d.rule, priority: d.priority }));
 }
 
+// src/plugin/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 \*\/$/;
+var ARBITRARY_END_RE = /^\/\* @truss arbitrary:end \*\/$/;
+var PROPERTY_VAR_RE = /^@property\s+(--\S+)/;
+function parseTrussCss(cssText) {
+  const lines = cssText.split("\n");
+  const rules = [];
+  const properties = [];
+  const arbitraryCssBlocks = [];
+  let i = 0;
+  function takeAnnotatedLine() {
+    i++;
+    while (i < lines.length && lines[i].trim() === "") i++;
+    return i < lines.length ? lines[i].trim() : null;
+  }
+  while (i < lines.length) {
+    const line = lines[i].trim();
+    const ruleMatch = RULE_ANNOTATION_RE.exec(line);
+    if (ruleMatch) {
+      const cssText2 = takeAnnotatedLine();
+      if (cssText2 !== null) {
+        rules.push({ priority: parseFloat(ruleMatch[1]), className: ruleMatch[2], cssText: cssText2 });
+      }
+      i++;
+      continue;
+    }
+    if (PROPERTY_ANNOTATION_RE.test(line)) {
+      const propLine = takeAnnotatedLine();
+      const varMatch = propLine === null ? null : PROPERTY_VAR_RE.exec(propLine);
+      if (propLine !== null && varMatch) {
+        properties.push({ cssText: propLine, varName: varMatch[1] });
+      }
+      i++;
+      continue;
+    }
+    if (ARBITRARY_START_RE.test(line)) {
+      i++;
+      const blockLines = [];
+      while (i < lines.length && !ARBITRARY_END_RE.test(lines[i].trim())) {
+        blockLines.push(lines[i]);
+        i++;
+      }
+      const blockText = blockLines.join("\n").trim();
+      if (blockText.length > 0) {
+        arbitraryCssBlocks.push({ cssText: blockText });
+      }
+      if (i < lines.length && ARBITRARY_END_RE.test(lines[i].trim())) {
+        i++;
+      }
+      continue;
+    }
+    i++;
+  }
+  return { rules, properties, arbitraryCssBlocks };
+}
+function serializeTrussCss(css) {
+  const lines = [];
+  for (const rule of css.rules) {
+    lines.push(`/* @truss p:${rule.priority} c:${rule.className} */`, rule.cssText);
+  }
+  for (const prop of css.properties) {
+    lines.push(`/* @truss @property */`, prop.cssText);
+  }
+  for (const block of css.arbitraryCssBlocks) {
+    lines.push(annotateArbitraryCssBlock(block.cssText));
+  }
+  return lines.join("\n");
+}
+function annotateArbitraryCssBlock(cssText) {
+  const trimmed = cssText.trim();
+  if (trimmed.length === 0) {
+    return "";
+  }
+  return ["/* @truss arbitrary:start */", trimmed, "/* @truss arbitrary:end */"].join("\n");
+}
+
 // src/plugin/emit-css.ts
 function collectAtomicRules(chains, mapping) {
   const rules = /* @__PURE__ */ new Map();
@@ -2545,22 +2635,28 @@ function whenSelectorFor(whenPseudo) {
     pseudo: whenPseudo.pseudo
   };
 }
-function generateCssText(rules) {
+function generateCssData(rules) {
   const sorted = sortRulesByPriority(rules.values());
-  const lines = [];
-  for (const { rule, priority } of sorted) {
-    lines.push(`/* @truss p:${priority} c:${rule.className} */`);
-    lines.push(formatRule(rule));
-  }
+  const css = {
+    rules: sorted.map((entry) => ({
+      priority: entry.priority,
+      className: entry.rule.className,
+      cssText: formatRule(entry.rule)
+    })),
+    properties: [],
+    arbitraryCssBlocks: []
+  };
   for (const { rule } of sorted) {
     for (const declaration of rule.declarations) {
       if (declaration.cssVarName) {
-        lines.push(`/* @truss @property */`);
-        lines.push(`@property ${declaration.cssVarName} { syntax: "*"; inherits: false; }`);
+        css.properties.push({
+          varName: declaration.cssVarName,
+          cssText: `@property ${declaration.cssVarName} { syntax: "*"; inherits: false; }`
+        });
       }
     }
   }
-  return lines.join("\n");
+  return css;
 }
 function formatRule(rule) {
   const duplicateClassName = !!rule.mediaQuery;
@@ -2805,6 +2901,38 @@ ${body}
 import * as t15 from "@babel/types";
 import { basename } from "path";
 
+// src/plugin/test-css.ts
+import { parse as parse2 } from "css-tree";
+function createTestCssPayload(css) {
+  const payload = {};
+  if (css.rules.length > 0) {
+    payload.rules = css.rules.map((rule) => {
+      const atRule = atRulePrelude(rule.cssText);
+      return { ...rule, ...atRule === void 0 ? {} : { atRule } };
+    });
+  }
+  if (css.properties.length > 0) payload.properties = css.properties;
+  const arbitraryRules = css.arbitraryCssBlocks.flatMap((block) => splitArbitraryCss(block.cssText));
+  if (arbitraryRules.length > 0) payload.arbitraryRules = arbitraryRules;
+  return payload;
+}
+function splitArbitraryCss(cssText) {
+  const root = parse2(cssText, {
+    context: "stylesheet",
+    positions: true,
+    parseRulePrelude: false,
+    parseAtrulePrelude: false,
+    parseValue: false
+  });
+  const rules = [];
+  root.children.forEach((node) => {
+    if (node.type === "Rule" || node.type === "Atrule") {
+      rules.push(cssText.slice(node.loc.start.offset, node.loc.end.offset));
+    }
+  });
+  return rules;
+}
+
 // src/plugin/emit-style-hash.ts
 import * as t13 from "@babel/types";
 function buildStyleHashProperties(segments, mapping, maybeIncHelperName, maybeCssVarHelperName) {
@@ -3271,7 +3399,8 @@ function transformTruss(code, filename, mapping, options = {}) {
   if (sites.length === 0 && !hasCssPropsCall && !hasBuildtimeJsxCssAttribute) return null;
   const chains = sites.map((s) => s.resolvedChain);
   const { rules, needsMaybeInc, needsMaybeCssVar } = collectAtomicRules(chains, mapping);
-  const cssText = generateCssText(rules);
+  const cssData = generateCssData(rules);
+  const cssText = serializeTrussCss(cssData);
   const runtime = createRuntimeHelpers(ast, usedTopLevelNames);
   const maybeIncHelperName = needsMaybeInc ? reservePreferredName(usedTopLevelNames, "__maybeInc") : null;
   const maybeCssVarHelperName = needsMaybeCssVar ? runtime.use("maybeCssVar") : null;
@@ -3317,7 +3446,9 @@ function transformTruss(code, filename, mapping, options = {}) {
   }
   if (options.injectCss && cssText.length > 0) {
     declarationsToInsert.push(
-      t15.expressionStatement(t15.callExpression(t15.identifier("__injectTrussCSS"), [t15.stringLiteral(cssText)]))
+      t15.expressionStatement(
+        t15.callExpression(t15.identifier("__injectTrussCSS"), [t15.valueToNode(createTestCssPayload(cssData))])
+      )
     );
   }
   for (const { message, line } of errorMessages) {
@@ -3436,78 +3567,11 @@ 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 \*\/$/;
-var ARBITRARY_END_RE = /^\/\* @truss arbitrary:end \*\/$/;
-var PROPERTY_VAR_RE = /^@property\s+(--\S+)/;
-function parseTrussCss(cssText) {
-  const lines = cssText.split("\n");
-  const rules = [];
-  const properties = [];
-  const arbitraryCssBlocks = [];
-  let i = 0;
-  function takeAnnotatedLine() {
-    i++;
-    while (i < lines.length && lines[i].trim() === "") i++;
-    return i < lines.length ? lines[i].trim() : null;
-  }
-  while (i < lines.length) {
-    const line = lines[i].trim();
-    const ruleMatch = RULE_ANNOTATION_RE.exec(line);
-    if (ruleMatch) {
-      const cssText2 = takeAnnotatedLine();
-      if (cssText2 !== null) {
-        rules.push({ priority: parseFloat(ruleMatch[1]), className: ruleMatch[2], cssText: cssText2 });
-      }
-      i++;
-      continue;
-    }
-    if (PROPERTY_ANNOTATION_RE.test(line)) {
-      const propLine = takeAnnotatedLine();
-      const varMatch = propLine === null ? null : PROPERTY_VAR_RE.exec(propLine);
-      if (propLine !== null && varMatch) {
-        properties.push({ cssText: propLine, varName: varMatch[1] });
-      }
-      i++;
-      continue;
-    }
-    if (ARBITRARY_START_RE.test(line)) {
-      i++;
-      const blockLines = [];
-      while (i < lines.length && !ARBITRARY_END_RE.test(lines[i].trim())) {
-        blockLines.push(lines[i]);
-        i++;
-      }
-      const blockText = blockLines.join("\n").trim();
-      if (blockText.length > 0) {
-        arbitraryCssBlocks.push({ cssText: blockText });
-      }
-      if (i < lines.length && ARBITRARY_END_RE.test(lines[i].trim())) {
-        i++;
-      }
-      continue;
-    }
-    i++;
-  }
-  return { rules, properties, arbitraryCssBlocks };
-}
-function annotateArbitraryCssBlock(cssText) {
-  const trimmed = cssText.trim();
-  if (trimmed.length === 0) {
-    return "";
-  }
-  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) {
+function mergeTrussCssData(sources) {
   const seenClasses = /* @__PURE__ */ new Set();
   const allRules = [];
   const seenProperties = /* @__PURE__ */ new Set();
@@ -3532,19 +3596,11 @@ function mergeTrussCss(sources) {
     return { rule, key: ruleSortKey(rule.priority, rule.className, atRulePrelude(rule.cssText)) };
   });
   decorated.sort((a, b) => compareRuleSortKeys(a.key, b.key));
-  const lines = [];
-  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 */`);
-    lines.push(prop.cssText);
-  }
-  for (const block of allArbitraryCssBlocks) {
-    lines.push(annotateArbitraryCssBlock(block.cssText));
-  }
-  return lines.join("\n");
+  return {
+    rules: decorated.map((entry) => entry.rule),
+    properties: allProperties,
+    arbitraryCssBlocks: allArbitraryCssBlocks
+  };
 }
 
 // src/plugin/transform-session.ts
@@ -3604,12 +3660,11 @@ function createTrussTransformSession(options) {
   }
   function collectCss() {
     const mapping2 = ensureMapping();
-    const appCssParts = [generateCssText(cssRegistry)];
+    const appCss = generateCssData(cssRegistry);
     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");
+    if (allArbitrary.length > 0) appCss.arbitraryCssBlocks.push({ cssText: allArbitrary });
     const libs = loadLibraries();
-    const body = libs.length === 0 ? appCss : mergeTrussCss([...libs, parseTrussCss(appCss)]);
+    const body = serializeTrussCss(libs.length === 0 ? appCss : mergeTrussCssData([...libs, appCss]));
     if (body.length === 0) return "";
     return `${rootSpacingPreludeCss(mapping2.increment)}
 ${body}`;
@@ -3618,7 +3673,7 @@ ${body}`;
     return cssRegistry.size > 0 || arbitraryCssRegistry.size > 0 || libraryPaths.length > 0;
   }
   function collectTestCss() {
-    return mergeTrussCss(loadLibraries());
+    return createTestCssPayload(mergeTrussCssData(loadLibraries()));
   }
   function getArbitraryCss(sourcePath) {
     return arbitraryCssRegistry.get(resolve2(sourcePath).replace(/\\/g, "/")) ?? "";
@@ -3687,6 +3742,8 @@ function loaderForPath(filePath) {
 var VIRTUAL_CSS_PREFIX = "\0truss-css:";
 var VIRTUAL_TEST_CSS_PREFIX = "\0truss-test-css:";
 var CSS_TS_QUERY = "?truss-css";
+var RUNTIME_MODULE2 = "@homebound/truss/runtime";
+var INJECT_CSS_HELPER = "__injectTrussCSS";
 var TRUSS_CSS_PLACEHOLDER = "__TRUSS_CSS_HASH__";
 var VIRTUAL_CSS_ENDPOINT = "/virtual:truss.css";
 var VIRTUAL_RUNTIME_ID = "virtual:truss:runtime";
@@ -3809,8 +3866,8 @@ function trussPlugin(opts) {
 `;
       }
       if (id === RESOLVED_VIRTUAL_TEST_CSS_ID) {
-        const css = session.collectTestCss();
-        const options = {
+        const payload = {
+          ...session.collectTestCss(),
           source: "libraries",
           order: 0,
           prelude: rootSpacingPreludeCss(session.ensureMapping().increment)
@@ -3818,18 +3875,21 @@ function trussPlugin(opts) {
         return `
 import { __injectTrussCSS } from "@homebound/truss/runtime";
 
-__injectTrussCSS(${JSON.stringify(css)}, ${JSON.stringify(options)});
+__injectTrussCSS(${JSON.stringify(payload)});
 `;
       }
       if (id.startsWith(VIRTUAL_TEST_CSS_PREFIX)) {
-        const sourcePath2 = resolve4(id.slice(VIRTUAL_TEST_CSS_PREFIX.length)).replace(/\\/g, "/");
+        const sourcePath2 = canonicalSourcePath(id.slice(VIRTUAL_TEST_CSS_PREFIX.length));
         session.updateArbitraryCssRegistry(sourcePath2, readFileSync4(sourcePath2, "utf8"));
-        const css = annotateArbitraryCssBlock(session.getArbitraryCss(sourcePath2));
+        const payload = {
+          arbitraryRules: splitArbitraryCss(session.getArbitraryCss(sourcePath2)),
+          source: sourcePath2
+        };
         return `
 import "${VIRTUAL_TEST_CSS_ID}";
 import { __injectTrussCSS } from "@homebound/truss/runtime";
 
-__injectTrussCSS(${JSON.stringify(css)}, ${JSON.stringify({ source: sourcePath2 })});
+__injectTrussCSS(${JSON.stringify(payload)});
 `;
       }
       if (!id.startsWith(VIRTUAL_CSS_PREFIX)) return null;
@@ -3851,32 +3911,8 @@ import "${VIRTUAL_TEST_CSS_ID}";` : rewrittenImports.code;
       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 };
+          const css = session.getArbitraryCss(fileId);
+          return { code: appendTestCssInjection(transformedCode, fileId, css), map: null };
         }
         return importsOnlyResult;
       }
@@ -3938,6 +3974,30 @@ function stripQueryAndHash(id) {
 function isNodeModulesFile(filePath) {
   return filePath.replace(/\\/g, "/").includes("/node_modules/");
 }
+function canonicalSourcePath(filePath) {
+  return resolve4(filePath).replace(/\\/g, "/");
+}
+function appendTestCssInjection(code, fileId, css) {
+  const ast = parseModule(code, fileId);
+  let usedTopLevelNames = /* @__PURE__ */ new Set();
+  traverse(ast, {
+    Program(path) {
+      usedTopLevelNames = new Set(Object.keys(path.scope.bindings));
+      path.stop();
+    }
+  });
+  const existing = findNamedImportBinding(ast, INJECT_CSS_HELPER, RUNTIME_MODULE2);
+  const localName = existing ?? reservePreferredName(usedTopLevelNames, INJECT_CSS_HELPER);
+  if (!existing) upsertNamedImports(ast, RUNTIME_MODULE2, [{ importedName: INJECT_CSS_HELPER, localName }]);
+  ast.program.body.push(
+    t16.expressionStatement(
+      t16.callExpression(t16.identifier(localName), [
+        t16.valueToNode({ arbitraryRules: splitArbitraryCss(css), source: canonicalSourcePath(fileId) })
+      ])
+    )
+  );
+  return generate(ast, { sourceFileName: fileId }).code;
+}
 export {
   loadMapping,
   trussEsbuildPlugin,