@homebound/truss 2.3.5 → 2.4.0

package/build/plugin/index.d.ts

@@ -37,8 +37,8 @@ type TrussMappingEntry =
 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;

package/build/plugin/index.js

@@ -1,5 +1,5 @@
 // src/plugin/index.ts
-import { readFileSync, writeFileSync, existsSync } from "fs";
+import { readFileSync as readFileSync2, writeFileSync, existsSync } from "fs";
 import { resolve, dirname, isAbsolute, join } from "path";
 
 // src/plugin/emit-truss.ts
@@ -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,87 @@ 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/index.ts
 var VIRTUAL_CSS_PREFIX = "\0truss-css:";
 var CSS_TS_QUERY = "?truss-css";
@@ -2803,7 +2889,7 @@ 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;
@@ -2816,8 +2902,22 @@ function trussPlugin(opts) {
     }
     return mapping;
   }
+  let libraryCache = null;
+  function loadLibraries() {
+    if (!libraryCache) {
+      libraryCache = libraryPaths.map(function(libPath) {
+        const resolved = resolve(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 +2931,7 @@ function trussPlugin(opts) {
     buildStart() {
       ensureMapping();
       cssRegistry.clear();
+      libraryCache = null;
       cssVersion = 0;
       lastSentVersion = 0;
     },
@@ -2907,7 +3008,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 = readFileSync2(sourcePath, "utf8");
       return transformCssTs(sourceCode, sourcePath, ensureMapping());
     },
     transform(code, id) {
@@ -2917,7 +3018,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")) {
@@ -3007,19 +3108,10 @@ 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 = readFileSync2(path, "utf8");
   return JSON.parse(raw);
 }
 export {