@homebound/truss 2.3.5 → 2.5.0

package/build/plugin/index.d.ts

@@ -34,11 +34,57 @@ type TrussMappingEntry =
     chain: string[];
 };
 
+interface TrussEsbuildPluginOptions {
+    /** Path to the Css.json mapping file (relative to cwd or absolute). */
+    mapping: string;
+    /** Output path for the generated truss.css (relative to outDir or absolute). Defaults to `truss.css`. */
+    outputCss?: string;
+}
+/**
+ * esbuild plugin that transforms `Css.*.$` expressions and emits a `truss.css` file.
+ *
+ * Designed for library builds using tsup/esbuild. Transforms source files
+ * during the build and writes an annotated `truss.css` alongside the output
+ * that consuming applications can merge via the Vite plugin's `libraries` option.
+ *
+ * Usage with tsup:
+ * ```ts
+ * import { trussEsbuildPlugin } from "@homebound/truss/plugin";
+ *
+ * export default defineConfig({
+ *   esbuildPlugins: [trussEsbuildPlugin({ mapping: "./src/Css.json" })],
+ * });
+ * ```
+ */
+declare function trussEsbuildPlugin(opts: TrussEsbuildPluginOptions): {
+    name: string;
+    setup(build: EsbuildPluginBuild): void;
+};
+/**
+ * Minimal esbuild plugin types so we don't need esbuild as a dependency.
+ *
+ * These match the subset of the esbuild Plugin API that we use.
+ */
+interface EsbuildPluginBuild {
+    initialOptions: {
+        outdir?: string;
+    };
+    onLoad(options: {
+        filter: RegExp;
+    }, callback: (args: {
+        path: string;
+    }) => {
+        contents: string;
+        loader: string;
+    } | undefined): void;
+    onEnd(callback: () => void): void;
+}
+
 interface TrussPluginOptions {
     /** Path to the Css.json mapping file used for transforming files (relative to project root or absolute). */
     mapping: string;
-    /** Packages in `node_modules` that should also be transformed, all other `node_modules` files are skipped. */
-    externalPackages?: string[];
+    /** Paths to pre-compiled truss.css files from libraries to merge into the app's CSS. */
+    libraries?: string[];
 }
 interface TrussVitePlugin {
     name: string;
@@ -72,4 +118,4 @@ declare function trussPlugin(opts: TrussPluginOptions): TrussVitePlugin;
 /** Load a truss mapping file synchronously (for tests). */
 declare function loadMapping(path: string): TrussMapping;
 
-export { type TrussMapping, type TrussMappingEntry, type TrussPluginOptions, type TrussVitePlugin, loadMapping, trussPlugin };
+export { type TrussEsbuildPluginOptions, type TrussMapping, type TrussMappingEntry, type TrussPluginOptions, type TrussVitePlugin, loadMapping, trussEsbuildPlugin, trussPlugin };

package/build/plugin/index.js

@@ -1,6 +1,6 @@
 // src/plugin/index.ts
-import { readFileSync, writeFileSync, existsSync } from "fs";
-import { resolve, dirname, isAbsolute, join } from "path";
+import { readFileSync as readFileSync3, writeFileSync as writeFileSync2, existsSync } from "fs";
+import { resolve as resolve2, dirname, isAbsolute, join as join2 } from "path";
 
 // src/plugin/emit-truss.ts
 import * as t from "@babel/types";
@@ -838,13 +838,18 @@ function collectVariableRules(rules, seg, mapping) {
 function generateCssText(rules) {
   const allRules = Array.from(rules.values());
   sortRulesByPriority(allRules);
+  const priorities = allRules.map(computeRulePriority);
   const lines = [];
-  for (const rule of allRules) {
+  for (let i = 0; i < allRules.length; i++) {
+    const rule = allRules[i];
+    const priority = priorities[i];
+    lines.push(`/* @truss p:${priority} c:${rule.className} */`);
     lines.push(formatRule(rule));
   }
   for (const rule of allRules) {
     for (const declaration of getRuleDeclarations(rule)) {
       if (declaration.cssVarName) {
+        lines.push(`/* @truss @property */`);
         lines.push(`@property ${declaration.cssVarName} { syntax: "*"; inherits: false; }`);
       }
     }
@@ -2791,6 +2796,133 @@ function toVirtualCssSpecifier(source) {
   return `${source}?truss-css`;
 }
 
+// src/plugin/merge-css.ts
+import { readFileSync } from "fs";
+var RULE_ANNOTATION_RE = /^\/\* @truss p:([\d.]+) c:(\S+) \*\/$/;
+var PROPERTY_ANNOTATION_RE = /^\/\* @truss @property \*\/$/;
+var PROPERTY_VAR_RE = /^@property\s+(--\S+)/;
+function parseTrussCss(cssText) {
+  const lines = cssText.split("\n");
+  const rules = [];
+  const properties = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i].trim();
+    const ruleMatch = RULE_ANNOTATION_RE.exec(line);
+    if (ruleMatch) {
+      const priority = parseFloat(ruleMatch[1]);
+      const className = ruleMatch[2];
+      i++;
+      while (i < lines.length && lines[i].trim() === "") i++;
+      if (i < lines.length) {
+        rules.push({ priority, className, cssText: lines[i].trim() });
+      }
+      i++;
+      continue;
+    }
+    if (PROPERTY_ANNOTATION_RE.test(line)) {
+      i++;
+      while (i < lines.length && lines[i].trim() === "") i++;
+      if (i < lines.length) {
+        const propLine = lines[i].trim();
+        const varMatch = PROPERTY_VAR_RE.exec(propLine);
+        if (varMatch) {
+          properties.push({ cssText: propLine, varName: varMatch[1] });
+        }
+      }
+      i++;
+      continue;
+    }
+    i++;
+  }
+  return { rules, properties };
+}
+function readTrussCss(filePath) {
+  const content = readFileSync(filePath, "utf8");
+  return parseTrussCss(content);
+}
+function mergeTrussCss(sources) {
+  const seenClasses = /* @__PURE__ */ new Set();
+  const allRules = [];
+  const seenProperties = /* @__PURE__ */ new Set();
+  const allProperties = [];
+  for (const source of sources) {
+    for (const rule of source.rules) {
+      if (!seenClasses.has(rule.className)) {
+        seenClasses.add(rule.className);
+        allRules.push(rule);
+      }
+    }
+    for (const prop of source.properties) {
+      if (!seenProperties.has(prop.varName)) {
+        seenProperties.add(prop.varName);
+        allProperties.push(prop);
+      }
+    }
+  }
+  allRules.sort(function(a, b) {
+    const diff = a.priority - b.priority;
+    if (diff !== 0) return diff;
+    return a.className < b.className ? -1 : a.className > b.className ? 1 : 0;
+  });
+  const lines = [];
+  for (const rule of allRules) {
+    lines.push(`/* @truss p:${rule.priority} c:${rule.className} */`);
+    lines.push(rule.cssText);
+  }
+  for (const prop of allProperties) {
+    lines.push(`/* @truss @property */`);
+    lines.push(prop.cssText);
+  }
+  return lines.join("\n");
+}
+
+// src/plugin/esbuild-plugin.ts
+import { readFileSync as readFileSync2, writeFileSync, mkdirSync } from "fs";
+import { resolve, join } from "path";
+function trussEsbuildPlugin(opts) {
+  const cssRegistry = /* @__PURE__ */ new Map();
+  let mapping = null;
+  let outDir;
+  return {
+    name: "truss",
+    setup(build) {
+      outDir = build.initialOptions.outdir ?? build.initialOptions.outdir;
+      build.onLoad({ filter: /\.[cm]?[jt]sx?$/ }, function(args) {
+        const code = readFileSync2(args.path, "utf8");
+        if (!code.includes("Css")) return void 0;
+        if (!mapping) {
+          mapping = loadMapping(resolve(process.cwd(), opts.mapping));
+        }
+        const result = transformTruss(code, args.path, mapping);
+        if (!result) return void 0;
+        if (result.rules) {
+          for (const [className, rule] of result.rules) {
+            if (!cssRegistry.has(className)) {
+              cssRegistry.set(className, rule);
+            }
+          }
+        }
+        return { contents: result.code, loader: loaderForPath(args.path) };
+      });
+      build.onEnd(function() {
+        if (cssRegistry.size === 0) return;
+        const css = generateCssText(cssRegistry);
+        const cssFileName = opts.outputCss ?? "truss.css";
+        const cssPath = resolve(outDir ?? join(process.cwd(), "dist"), cssFileName);
+        mkdirSync(resolve(cssPath, ".."), { recursive: true });
+        writeFileSync(cssPath, css, "utf8");
+      });
+    }
+  };
+}
+function loaderForPath(filePath) {
+  if (filePath.endsWith(".tsx")) return "tsx";
+  if (filePath.endsWith(".ts")) return "ts";
+  if (filePath.endsWith(".jsx")) return "jsx";
+  return "js";
+}
+
 // src/plugin/index.ts
 var VIRTUAL_CSS_PREFIX = "\0truss-css:";
 var CSS_TS_QUERY = "?truss-css";
@@ -2803,12 +2935,12 @@ function trussPlugin(opts) {
   let debug = false;
   let isTest = false;
   let isBuild = false;
-  const externalPackages = opts.externalPackages ?? [];
+  const libraryPaths = opts.libraries ?? [];
   const cssRegistry = /* @__PURE__ */ new Map();
   let cssVersion = 0;
   let lastSentVersion = 0;
   function mappingPath() {
-    return resolve(projectRoot || process.cwd(), opts.mapping);
+    return resolve2(projectRoot || process.cwd(), opts.mapping);
   }
   function ensureMapping() {
     if (!mapping) {
@@ -2816,8 +2948,22 @@ function trussPlugin(opts) {
     }
     return mapping;
   }
+  let libraryCache = null;
+  function loadLibraries() {
+    if (!libraryCache) {
+      libraryCache = libraryPaths.map(function(libPath) {
+        const resolved = resolve2(projectRoot || process.cwd(), libPath);
+        return readTrussCss(resolved);
+      });
+    }
+    return libraryCache;
+  }
   function collectCss() {
-    return generateCssText(cssRegistry);
+    const appCss = generateCssText(cssRegistry);
+    const libs = loadLibraries();
+    if (libs.length === 0) return appCss;
+    const appParsed = parseTrussCss(appCss);
+    return mergeTrussCss([...libs, appParsed]);
   }
   return {
     name: "truss",
@@ -2831,6 +2977,7 @@ function trussPlugin(opts) {
     buildStart() {
       ensureMapping();
       cssRegistry.clear();
+      libraryCache = null;
       cssVersion = 0;
       lastSentVersion = 0;
     },
@@ -2907,7 +3054,7 @@ function trussPlugin(opts) {
       }
       if (!id.startsWith(VIRTUAL_CSS_PREFIX)) return null;
       const sourcePath = id.slice(VIRTUAL_CSS_PREFIX.length) + ".ts";
-      const sourceCode = readFileSync(sourcePath, "utf8");
+      const sourceCode = readFileSync3(sourcePath, "utf8");
       return transformCssTs(sourceCode, sourcePath, ensureMapping());
     },
     transform(code, id) {
@@ -2917,7 +3064,7 @@ function trussPlugin(opts) {
       const hasCssDsl = rewrittenCode.includes("Css");
       if (!hasCssDsl && !rewrittenImports.changed) return null;
       const fileId = stripQueryAndHash(id);
-      if (isNodeModulesFile(fileId) && !isWhitelistedExternalPackageFile(fileId, externalPackages)) {
+      if (isNodeModulesFile(fileId)) {
         return null;
       }
       if (fileId.endsWith(".css.ts")) {
@@ -2971,15 +3118,15 @@ function trussPlugin(opts) {
       if (!isBuild) return;
       const css = collectCss();
       if (!css) return;
-      const outDir = options.dir || join(projectRoot, "dist");
-      const trussPath = join(outDir, "truss.css");
+      const outDir = options.dir || join2(projectRoot, "dist");
+      const trussPath = join2(outDir, "truss.css");
       if (!existsSync(trussPath)) {
         const alreadyEmitted = Object.keys(bundle).some(function(key) {
           const asset = bundle[key];
           return asset.type === "asset" && key.endsWith(".css") && typeof asset.source === "string" && asset.source.includes(css);
         });
         if (!alreadyEmitted) {
-          writeFileSync(trussPath, css, "utf8");
+          writeFileSync2(trussPath, css, "utf8");
         }
       }
     }
@@ -2990,9 +3137,9 @@ function resolveImportPath(source, importer, projectRoot) {
     return source;
   }
   if (importer) {
-    return resolve(dirname(importer), source);
+    return resolve2(dirname(importer), source);
   }
-  return resolve(projectRoot || process.cwd(), source);
+  return resolve2(projectRoot || process.cwd(), source);
 }
 function stripQueryAndHash(id) {
   const queryIndex = id.indexOf("?");
@@ -3007,23 +3154,15 @@ function stripQueryAndHash(id) {
   return cleanId;
 }
 function isNodeModulesFile(filePath) {
-  return normalizePath(filePath).includes("/node_modules/");
-}
-function isWhitelistedExternalPackageFile(filePath, externalPackages) {
-  const normalizedPath = normalizePath(filePath);
-  return externalPackages.some(function(pkg) {
-    return normalizedPath.includes(`/node_modules/${pkg}/`);
-  });
-}
-function normalizePath(path) {
-  return path.replace(/\\/g, "/");
+  return filePath.replace(/\\/g, "/").includes("/node_modules/");
 }
 function loadMapping(path) {
-  const raw = readFileSync(path, "utf8");
+  const raw = readFileSync3(path, "utf8");
   return JSON.parse(raw);
 }
 export {
   loadMapping,
+  trussEsbuildPlugin,
   trussPlugin
 };
 //# sourceMappingURL=index.js.map