@motion-proto/live-tokens 0.94.2 → 0.95.0

package/dist-plugin/index.d.cts

@@ -2,6 +2,13 @@ import { Plugin } from 'vite';
 export { ComponentSource, MissingToken, RunResult, TOKENS_CSS_MIGRATIONS, TokensCssMigration, ValidateInput, runTokensCssMigrations, validateTokensCss } from './tokensCssMigrations/index.cjs';
 import './dataPaths-BpIK_Obx.cjs';
 
+interface ProductionCssOptions {
+    /** default: true. With false the build removes unreached properties only and keeps every `var()`. */
+    substitute?: boolean;
+    /** Names a script sets or reads under a name it assembles at runtime. */
+    keep?: string[];
+}
+
 interface ThemeFileApiOptions {
     tokensCssPath: string;
     tokensGeneratedCssPath?: string;
@@ -14,7 +21,8 @@ interface ThemeFileApiOptions {
     componentsSrcDir?: string;
     autoMigrate?: boolean;
     checks?: boolean;
+    productionCss?: false | ProductionCssOptions;
 }
 declare function themeFileApi(opts: ThemeFileApiOptions): Plugin;
 
-export { type ThemeFileApiOptions, themeFileApi };
+export { type ProductionCssOptions, type ThemeFileApiOptions, themeFileApi };

package/dist-plugin/index.d.ts

@@ -2,6 +2,13 @@ import { Plugin } from 'vite';
 export { ComponentSource, MissingToken, RunResult, TOKENS_CSS_MIGRATIONS, TokensCssMigration, ValidateInput, runTokensCssMigrations, validateTokensCss } from './tokensCssMigrations/index.js';
 import './dataPaths-BpIK_Obx.js';
 
+interface ProductionCssOptions {
+    /** default: true. With false the build removes unreached properties only and keeps every `var()`. */
+    substitute?: boolean;
+    /** Names a script sets or reads under a name it assembles at runtime. */
+    keep?: string[];
+}
+
 interface ThemeFileApiOptions {
     tokensCssPath: string;
     tokensGeneratedCssPath?: string;
@@ -14,7 +21,8 @@ interface ThemeFileApiOptions {
     componentsSrcDir?: string;
     autoMigrate?: boolean;
     checks?: boolean;
+    productionCss?: false | ProductionCssOptions;
 }
 declare function themeFileApi(opts: ThemeFileApiOptions): Plugin;
 
-export { type ThemeFileApiOptions, themeFileApi };
+export { type ProductionCssOptions, type ThemeFileApiOptions, themeFileApi };

package/dist-plugin/index.js

@@ -5,7 +5,7 @@ import {
   nextAvailableName,
   normalizeTheme,
   versionedFileResourceServer
-} from "./chunk-W5VQV32K.js";
+} from "./chunk-GYRULB2X.js";
 import {
   formatGradientValue,
   palettesToVars,
@@ -13,17 +13,17 @@ import {
   parseGradientValue,
   reconcilePalettesFromCssVars,
   sanitizeFileName
-} from "./chunk-O6GQ6GBH.js";
+} from "./chunk-A4TBP4MM.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "./chunk-ONYAIXCZ.js";
+} from "./chunk-QQASYPW7.js";
 import {
   TOKENS_CSS_MIGRATIONS,
   extractGlobalRootBody,
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-7XSUHJUH.js";
+} from "./chunk-4J6JPSVS.js";
 import {
   hexToOklch,
   oklchToRgb255,
@@ -37,7 +37,7 @@ import {
 
 // vite-plugin/themeFileApi.ts
 import fs2 from "fs";
-import { createHash } from "crypto";
+import { createHash as createHash2 } from "crypto";
 import path3 from "path";
 
 // src/editor/core/themes/migrations/2026-07-21-palette-oklch-basis.ts
@@ -252,6 +252,502 @@ async function checkBeforeBuild({
   return null;
 }
 
+// vite-plugin/productionCss/index.ts
+import { createHash } from "crypto";
+
+// vite-plugin/productionCss/analyze.ts
+import postcss from "postcss";
+var ROOT_SPECIFICITY = /* @__PURE__ */ new Map([
+  [":root", [0, 1, 0]],
+  [":root:root", [0, 2, 0]],
+  [":where(:root)", [0, 0, 0]],
+  ["html", [0, 0, 1]]
+]);
+var NAME = String.raw`--(?:[\w-]|[^\x00-\x7f])+`;
+var VAR_REF = new RegExp(String.raw`var\(\s*(${NAME})`, "gi");
+var PRELUDE_NAME = new RegExp(NAME, "g");
+var SCRIPT_NAME = new RegExp(String.raw`(?<![\w-])${NAME}`, "g");
+var CSS_WIDE_KEYWORD = /^\s*(?:initial|inherit|unset|revert|revert-layer)\s*$/i;
+var varRefs = (value) => [...value.matchAll(VAR_REF)].map((m) => m[1]);
+function compareSpecificity(a, b) {
+  return a[0] - b[0] || a[1] - b[1] || a[2] - b[2];
+}
+function rootSpecificity(selector) {
+  let best = null;
+  for (const part of selector.split(",")) {
+    const specificity = ROOT_SPECIFICITY.get(part.trim());
+    if (!specificity) return null;
+    if (!best || compareSpecificity(specificity, best) > 0) best = specificity;
+  }
+  return best;
+}
+function outranks(a, b) {
+  if (a.important !== b.important) return a.important;
+  const bySpecificity = compareSpecificity(a.specificity, b.specificity);
+  if (bySpecificity !== 0) return bySpecificity > 0;
+  return a.asset !== b.asset ? a.asset > b.asset : a.order > b.order;
+}
+function winnerOf(declarations) {
+  let winner = null;
+  for (const d of declarations) if (d.bare && (!winner || outranks(d, winner))) winner = d;
+  return winner;
+}
+function analyze({ css, js, html, keep, entries }) {
+  const declarations = /* @__PURE__ */ new Map();
+  const regularRefs = /* @__PURE__ */ new Set();
+  const preludeNames = /* @__PURE__ */ new Set();
+  const registered = /* @__PURE__ */ new Set();
+  const reads = css.map(() => /* @__PURE__ */ new Set());
+  css.forEach((source, asset) => {
+    let order = 0;
+    postcss.parse(source).walk((node) => {
+      if (node.type === "atrule") {
+        if (node.name.toLowerCase() === "property") registered.add(node.params.trim());
+        for (const [name] of node.params.matchAll(PRELUDE_NAME)) preludeNames.add(name);
+        return;
+      }
+      if (node.type !== "decl") return;
+      const refs = varRefs(node.value);
+      for (const name of refs) reads[asset].add(name);
+      if (!node.prop.startsWith("--")) {
+        for (const name of refs) regularRefs.add(name);
+        return;
+      }
+      let selector = null;
+      let outerRule = false;
+      const atRules = [];
+      for (let p = node.parent; p && p.type !== "root"; p = p.parent) {
+        if (p.type === "atrule") {
+          const at = p;
+          atRules.unshift(`@${at.name} ${at.params}`.trim());
+        } else if (p.type === "rule") {
+          if (selector === null) selector = p.selector;
+          else outerRule = true;
+        }
+      }
+      const specificity = selector === null ? null : rootSpecificity(selector);
+      const declaration = {
+        asset,
+        order: order++,
+        selector,
+        atRules,
+        value: node.value,
+        important: node.important,
+        root: specificity !== null,
+        bare: specificity !== null && atRules.length === 0 && !outerRule,
+        specificity
+      };
+      const list = declarations.get(node.prop);
+      if (list) list.push(declaration);
+      else declarations.set(node.prop, [declaration]);
+    });
+  });
+  const scriptNames = /* @__PURE__ */ new Set();
+  for (const text2 of [...js, ...html]) {
+    for (const [name] of text2.matchAll(SCRIPT_NAME)) scriptNames.add(name);
+  }
+  const keepNames = new Set(keep);
+  const references = /* @__PURE__ */ new Map();
+  for (const [name, decls] of declarations) {
+    references.set(name, new Set(decls.flatMap((d) => varRefs(d.value))));
+  }
+  const reached = /* @__PURE__ */ new Set();
+  const toReach = [...regularRefs, ...preludeNames, ...scriptNames, ...keepNames];
+  while (toReach.length) {
+    const name = toReach.pop();
+    if (reached.has(name)) continue;
+    reached.add(name);
+    for (const ref of references.get(name) ?? []) toReach.push(ref);
+  }
+  const loops = /* @__PURE__ */ new Map();
+  const reachesCycle = (name) => {
+    const state = loops.get(name);
+    if (state !== void 0) return state !== false;
+    loops.set(name, "visiting");
+    let result2 = false;
+    for (const ref of references.get(name) ?? []) {
+      if (declarations.has(ref) && reachesCycle(ref)) result2 = true;
+    }
+    loops.set(name, result2);
+    return result2;
+  };
+  const setByName = (name) => scriptNames.has(name) || keepNames.has(name) || registered.has(name);
+  const entryAssets = new Set(entries);
+  const winners = /* @__PURE__ */ new Map();
+  const reasons = /* @__PURE__ */ new Map();
+  for (const [name, decls] of declarations) {
+    const winner = winnerOf(decls);
+    winners.set(name, winner);
+    const bare = decls.filter((d) => d.bare);
+    const why = [];
+    if (decls.some((d) => !d.bare)) why.push("scoped");
+    if (scriptNames.has(name)) why.push("script");
+    if (preludeNames.has(name)) why.push("prelude");
+    if (registered.has(name)) why.push("registered");
+    if (keepNames.has(name)) why.push("keep");
+    if (winner && CSS_WIDE_KEYWORD.test(winner.value)) why.push("keyword");
+    if (reachesCycle(name)) why.push("cycle");
+    if (new Set(bare.map((d) => d.asset)).size > 1 && new Set(bare.map((d) => d.value)).size > 1) {
+      why.push("assets");
+    }
+    if ([...references.get(name)].some((ref) => !declarations.has(ref) && !setByName(ref))) why.push("undeclared");
+    const declaring = new Set(decls.map((d) => d.asset));
+    if (![...declaring].some((asset) => entryAssets.has(asset)) && reads.some((names, asset) => !declaring.has(asset) && names.has(name))) {
+      why.push("lazy");
+    }
+    reasons.set(name, why);
+  }
+  const dependents = /* @__PURE__ */ new Map();
+  for (const [name, refs] of references) {
+    for (const ref of refs) {
+      const list = dependents.get(ref);
+      if (list) list.push(name);
+      else dependents.set(ref, [name]);
+    }
+  }
+  const dynamic = /* @__PURE__ */ new Set();
+  const toSpread = [
+    ...[...reasons].filter(([, why]) => why.length > 0).map(([name]) => name),
+    ...scriptNames,
+    ...keepNames,
+    ...registered
+  ];
+  while (toSpread.length) {
+    const name = toSpread.pop();
+    if (dynamic.has(name)) continue;
+    dynamic.add(name);
+    for (const dependent of dependents.get(name) ?? []) toSpread.push(dependent);
+  }
+  const result = /* @__PURE__ */ new Map();
+  for (const [name, decls] of declarations) {
+    const refs = [...references.get(name)];
+    const why = reasons.get(name);
+    if (refs.some((ref) => dynamic.has(ref))) why.push("reference");
+    result.set(name, {
+      declarations: decls,
+      references: refs,
+      reached: reached.has(name),
+      dynamic: why.length > 0,
+      reasons: why,
+      winner: winners.get(name)
+    });
+  }
+  return result;
+}
+
+// vite-plugin/productionCss/rewrite.ts
+import postcss2, { AtRule, Rule } from "postcss";
+var TOKEN_BEFORE_FUNCTION = /[\w\-#@\\]|[^\x00-\x7f]/;
+var VAR_NAME = /^\s*(--(?:[\w-]|[^\x00-\x7f])+)\s*(?:,|$)/;
+var JOINS_LEFT = /[\w\-#@.+\\]|[^\x00-\x7f]/;
+var JOINS_RIGHT = /[\w\-.+%(\\]|[^\x00-\x7f]/;
+var EMPTIED_AT_RULES = /* @__PURE__ */ new Set(["media", "supports", "container"]);
+var DESCRIPTOR_AT_RULES = /* @__PURE__ */ new Set(["font-face", "property", "counter-style", "font-palette-values"]);
+function skipString(value, start) {
+  const quote = value[start];
+  let i = start + 1;
+  while (i < value.length && value[i] !== quote) i += value[i] === "\\" ? 2 : 1;
+  return i + 1;
+}
+function skipComment(value, start) {
+  const end = value.indexOf("*/", start + 2);
+  return end < 0 ? value.length : end + 2;
+}
+function closingParen(value, open) {
+  let depth = 0;
+  let i = open;
+  while (i < value.length) {
+    const c = value[i];
+    if (c === '"' || c === "'") i = skipString(value, i);
+    else if (c === "/" && value[i + 1] === "*") i = skipComment(value, i);
+    else {
+      if (c === "\\") i += 1;
+      else if (c === "(") depth += 1;
+      else if (c === ")" && --depth === 0) return i;
+      i += 1;
+    }
+  }
+  return -1;
+}
+function afterUrl(value, start) {
+  let i = start;
+  while (/\s/.test(value[i] ?? "")) i += 1;
+  if (value[i] === '"' || value[i] === "'") {
+    const close = closingParen(value, start - 1);
+    return close < 0 ? value.length : close + 1;
+  }
+  while (i < value.length && value[i] !== ")") i += value[i] === "\\" ? 2 : 1;
+  return i + 1;
+}
+function functionAt(value, i, name) {
+  return value.slice(i, i + name.length).toLowerCase() === name && (i === 0 || !TOKEN_BEFORE_FUNCTION.test(value[i - 1]));
+}
+function breaksBetween(left, right) {
+  if (!left || !right) return false;
+  return JOINS_LEFT.test(left) && JOINS_RIGHT.test(right) || left === "/" && right === "*";
+}
+function spliced(before, text2, after) {
+  if (text2 === "") return breaksBetween(before, after) ? "/**/" : "";
+  const head = breaksBetween(before, text2[0]) ? "/**/" : "";
+  const tail = breaksBetween(text2[text2.length - 1], after) ? "/**/" : "";
+  return head + text2 + tail;
+}
+function substituteValue(value, valueOf) {
+  let out = "";
+  let copied = 0;
+  let i = 0;
+  while (i < value.length) {
+    const c = value[i];
+    if (c === '"' || c === "'") {
+      i = skipString(value, i);
+    } else if (c === "/" && value[i + 1] === "*") {
+      i = skipComment(value, i);
+    } else if (c === "\\") {
+      i += 2;
+    } else if (functionAt(value, i, "url(")) {
+      i = afterUrl(value, i + 4);
+    } else if (functionAt(value, i, "var(")) {
+      const close = closingParen(value, i + 3);
+      if (close < 0) break;
+      const args = value.slice(i + 4, close);
+      const name = VAR_NAME.exec(args)?.[1];
+      const replacement = name === void 0 ? void 0 : valueOf(name);
+      out += value.slice(copied, i);
+      out += replacement === void 0 ? `${value.slice(i, i + 4)}${substituteValue(args, valueOf)})` : spliced(out[out.length - 1], replacement, value[close + 1]);
+      copied = i = close + 1;
+    } else {
+      i += 1;
+    }
+  }
+  return out + value.slice(copied);
+}
+function staticValues(analysis) {
+  const values = /* @__PURE__ */ new Map();
+  const valueOf = (name) => {
+    const property = analysis.get(name);
+    if (!property || property.dynamic) return void 0;
+    let value = values.get(name);
+    if (value === void 0) {
+      value = substituteValue(property.winner.value.trim(), valueOf);
+      values.set(name, value);
+    }
+    return value;
+  };
+  for (const [name, property] of analysis) if (property.reached) valueOf(name);
+  return values;
+}
+function droppedDeclarations(analysis, asset, { substitute }) {
+  const dropped = /* @__PURE__ */ new Set();
+  for (const property of analysis.values()) {
+    const own = property.declarations.filter((d) => d.asset === asset);
+    if (!property.reached || substitute && !property.dynamic) {
+      for (const d of own) dropped.add(d.order);
+      continue;
+    }
+    const winner = winnerOf(own);
+    for (const d of own) if (d.bare && d !== winner) dropped.add(d.order);
+  }
+  return dropped;
+}
+var isDescriptor = (decl) => decl.parent instanceof AtRule && DESCRIPTOR_AT_RULES.has(decl.parent.name.toLowerCase());
+var removableWhenEmpty = (node) => node instanceof Rule || node instanceof AtRule && EMPTIED_AT_RULES.has(node.name.toLowerCase());
+function removeEmptied(containers) {
+  for (const container of containers) {
+    let node = container;
+    while (removableWhenEmpty(node) && node.nodes?.length === 0) {
+      const parent = node.parent;
+      node.remove();
+      node = parent;
+    }
+  }
+}
+function rewrite(css, asset, analysis, options, values = options.substitute ? staticValues(analysis) : null) {
+  const dropped = droppedDeclarations(analysis, asset, options);
+  const root = postcss2.parse(css);
+  const emptied = /* @__PURE__ */ new Set();
+  let order = 0;
+  root.walkDecls((decl) => {
+    if (decl.prop.startsWith("--") && dropped.has(order++)) {
+      emptied.add(decl.parent);
+      decl.remove();
+      return;
+    }
+    if (!values || isDescriptor(decl)) return;
+    const value = substituteValue(decl.value, (name) => values.get(name));
+    if (value !== decl.value) decl.value = value;
+  });
+  removeEmptied(emptied);
+  return root.toString();
+}
+
+// vite-plugin/productionCss/index.ts
+var text = (source) => typeof source === "string" ? source : new TextDecoder().decode(source);
+var HASH = /\[hash(?::(\d+))?\]/;
+var PLACEHOLDER = /\[(name|hash(?::\d+)?|ext|extname|format)\]/g;
+var escape = (literal) => literal.replace(/[.*+?^${}()|[\]\\/]/g, "\\$&");
+var TEXT_ASSET = /\.(css|html|json|map)$/;
+function hashedFileName(fileName, pattern, content) {
+  const hash = HASH.exec(pattern);
+  if (!hash) return null;
+  const length = hash[1] ? Number(hash[1]) : 8;
+  let regex = "^";
+  let last = 0;
+  for (const m of pattern.matchAll(PLACEHOLDER)) {
+    regex += escape(pattern.slice(last, m.index));
+    if (m.index === hash.index) regex += `([A-Za-z0-9_-]{${length}})`;
+    else if (m[1] === "ext") regex += "[^./]*";
+    else if (m[1] === "extname") regex += "(?:\\.[^./]*)?";
+    else regex += ".*?";
+    last = m.index + m[0].length;
+  }
+  regex += escape(pattern.slice(last)) + "$";
+  const match = new RegExp(regex, "d").exec(fileName);
+  if (!match?.indices?.[1]) throw new Error(`live-tokens: ${fileName} does not follow the output pattern "${pattern}"`);
+  const [start, end] = match.indices[1];
+  const digest = createHash("sha256").update(content).digest("base64url").slice(0, length);
+  return fileName.slice(0, start) + digest + fileName.slice(end);
+}
+function tails(from, to) {
+  let i = 0;
+  while (from[i] === to[i]) i += 1;
+  const start = from.lastIndexOf("/", i) + 1;
+  return [from.slice(start), to.slice(start)];
+}
+function repoint(files, renames) {
+  const pairs = [...renames].map(([from, to]) => tails(from, to));
+  const replace = (s) => {
+    for (const [from, to] of pairs) s = s.replaceAll(from, () => to);
+    return s;
+  };
+  const renamed = (names) => names.map((name) => renames.get(name) ?? name);
+  const changed = /* @__PURE__ */ new Set();
+  for (const file of files) {
+    if (file.type === "chunk") {
+      const code = replace(file.code);
+      if (code !== file.code) {
+        file.code = code;
+        changed.add(file);
+      }
+      if (file.imports.some((name) => renames.has(name))) file.imports = renamed(file.imports);
+      if (file.dynamicImports.some((name) => renames.has(name))) file.dynamicImports = renamed(file.dynamicImports);
+      const map = file.sourcemapFileName && replace(file.sourcemapFileName);
+      if (map && map !== file.sourcemapFileName) file.sourcemapFileName = map;
+      const imported = file.viteMetadata?.importedCss;
+      if (imported && [...imported].some((name) => renames.has(name))) {
+        const next = renamed([...imported]);
+        imported.clear();
+        for (const name of next) imported.add(name);
+        changed.add(file);
+      }
+    } else if (TEXT_ASSET.test(file.fileName)) {
+      const before = text(file.source);
+      const after = replace(before);
+      if (after !== before) file.source = after;
+    }
+    const fileName = replace(file.fileName);
+    if (fileName !== file.fileName) file.fileName = fileName;
+  }
+  return changed;
+}
+function renameRewritten(files, sheetRenames, names) {
+  const affected = repoint(files, sheetRenames);
+  const chunks = files.filter((f) => f.type === "chunk");
+  const byName = new Map(chunks.map((c) => [c.fileName, c]));
+  const imported = (c) => [...c.imports, ...c.dynamicImports].flatMap((name) => byName.get(name) ?? []);
+  for (let grew = true; grew; ) {
+    grew = false;
+    for (const chunk of chunks) {
+      if (!affected.has(chunk) && imported(chunk).some((c) => affected.has(c))) {
+        affected.add(chunk);
+        grew = true;
+      }
+    }
+  }
+  const identity = (c) => [c.code, ...c.viteMetadata?.importedCss ?? []].join("\0");
+  const chunkRenames = /* @__PURE__ */ new Map();
+  for (const chunk of affected) {
+    const reached = /* @__PURE__ */ new Set([chunk]);
+    const toVisit = [chunk];
+    while (toVisit.length) {
+      for (const next of imported(toVisit.pop())) {
+        if (!reached.has(next)) {
+          reached.add(next);
+          toVisit.push(next);
+        }
+      }
+    }
+    reached.delete(chunk);
+    const others = [...reached].sort((a, b) => a.fileName < b.fileName ? -1 : 1);
+    const fileNames = chunk.isEntry ? names.entryFileNames : names.chunkFileNames;
+    const pattern = typeof fileNames === "string" ? fileNames : fileNames({
+      name: chunk.name,
+      isEntry: chunk.isEntry,
+      isDynamicEntry: chunk.isDynamicEntry,
+      facadeModuleId: chunk.facadeModuleId ?? void 0,
+      moduleIds: chunk.moduleIds,
+      exports: chunk.exports
+    });
+    const renamed = hashedFileName(chunk.fileName, pattern, [chunk, ...others].map(identity).join("\0\0"));
+    if (renamed !== null && renamed !== chunk.fileName) chunkRenames.set(chunk.fileName, renamed);
+  }
+  if (chunkRenames.size > 0) repoint(files, chunkRenames);
+}
+function entrySheets(files) {
+  const chunks = new Map(files.flatMap((f) => f.type === "chunk" ? [[f.fileName, f]] : []));
+  const sheets = /* @__PURE__ */ new Set();
+  const seen = /* @__PURE__ */ new Set();
+  const toVisit = [...chunks.values()].filter((c) => c.isEntry);
+  while (toVisit.length) {
+    const chunk = toVisit.pop();
+    if (seen.has(chunk.fileName)) continue;
+    seen.add(chunk.fileName);
+    for (const sheet of chunk.viteMetadata?.importedCss ?? []) sheets.add(sheet);
+    for (const name of chunk.imports) {
+      const imported = chunks.get(name);
+      if (imported) toVisit.push(imported);
+    }
+  }
+  return sheets;
+}
+function rewriteBundle(bundle, { substitute = true, keep = [] }, names) {
+  const files = Object.values(bundle);
+  const assets = files.filter((f) => f.type === "asset");
+  const sheets = assets.filter((f) => f.fileName.endsWith(".css"));
+  if (sheets.length === 0) return null;
+  const css = sheets.map((f) => text(f.source));
+  const js = [
+    ...files.flatMap((f) => f.type === "chunk" ? [f.code] : []),
+    ...assets.filter((f) => /\.[cm]?js$/.test(f.fileName)).map((f) => text(f.source))
+  ];
+  const html = assets.filter((f) => f.fileName.endsWith(".html")).map((f) => text(f.source));
+  const loadedWithPage = entrySheets(files);
+  const entries = sheets.flatMap((sheet, i) => loadedWithPage.has(sheet.fileName) ? [i] : []);
+  const analysis = analyze({ css, js, html, keep, entries });
+  const values = substitute ? staticValues(analysis) : null;
+  let bytesSaved = 0;
+  const renames = /* @__PURE__ */ new Map();
+  const { assetFileNames } = names;
+  sheets.forEach((sheet, i) => {
+    const rewritten = rewrite(css[i], i, analysis, { substitute }, values);
+    bytesSaved += Buffer.byteLength(css[i]) - Buffer.byteLength(rewritten);
+    if (rewritten === css[i]) return;
+    sheet.source = rewritten;
+    const pattern = typeof assetFileNames === "string" ? assetFileNames : assetFileNames({ type: "asset", names: sheet.names, originalFileNames: sheet.originalFileNames, source: rewritten });
+    const renamed = hashedFileName(sheet.fileName, pattern, rewritten);
+    if (renamed !== null && renamed !== sheet.fileName) renames.set(sheet.fileName, renamed);
+  });
+  if (renames.size > 0) renameRewritten(files, renames, names);
+  let propertiesAfter = 0;
+  for (const property of analysis.values()) {
+    if (property.reached && (property.dynamic || !substitute)) propertiesAfter += 1;
+  }
+  return { propertiesBefore: analysis.size, propertiesAfter, bytesSaved };
+}
+function formatReport({ propertiesBefore, propertiesAfter, bytesSaved }) {
+  const kB = (Math.abs(bytesSaved) / 1e3).toFixed(1);
+  return `live-tokens: the production CSS declares ${propertiesAfter.toLocaleString("en-US")} of ${propertiesBefore.toLocaleString("en-US")} custom properties and is ${kB} kB ${bytesSaved >= 0 ? "smaller" : "larger"}.`;
+}
+
 // vite-plugin/themeFileApi.ts
 import { fileURLToPath as fileURLToPath2 } from "url";
 var PKG_VERSION = (() => {
@@ -524,7 +1020,7 @@ function themeFileApi(opts) {
     }
     return { body: lines.join("\n"), colorsAndTypeVarCount, componentOverrideCount };
   }
-  const bakeFingerprint = (body) => createHash("sha256").update(body).digest("hex").slice(0, 16);
+  const bakeFingerprint = (body) => createHash2("sha256").update(body).digest("hex").slice(0, 16);
   const BAKE_FINGERPRINT_LINE = /^\/\* Bake fingerprint: ([0-9a-f]+) \*\/$/m;
   function regenerateTokensCss() {
     const { body, colorsAndTypeVarCount, componentOverrideCount } = renderTokensCss();
@@ -1698,6 +2194,7 @@ data: ${JSON.stringify(state)}
   const isEditorOwnedJson = (file) => file.endsWith(".json") && path3.resolve(file).startsWith(dataDirs.dataDir + path3.sep);
   let buildLogger = null;
   let buildChecked = false;
+  let productionCssLogger = null;
   return {
     name: "theme-file-api",
     config() {
@@ -1712,6 +2209,7 @@ data: ${JSON.stringify(state)}
     },
     configResolved(config) {
       buildLogger = config.command === "build" && opts.checks !== false ? config.logger : null;
+      productionCssLogger = config.command === "build" && opts.productionCss !== false ? config.logger : null;
     },
     async buildStart() {
       if (!buildLogger || buildChecked) return;
@@ -1719,6 +2217,15 @@ data: ${JSON.stringify(state)}
       const failure = await checkBeforeBuild({ root: process.cwd(), logger: buildLogger });
       if (failure) this.error(failure);
     },
+    generateBundle: {
+      // After Vite's own hooks, so the bundle holds the minified CSS and index.html.
+      order: "post",
+      handler(output, bundle) {
+        if (!productionCssLogger) return;
+        const report = rewriteBundle(bundle, opts.productionCss || {}, output);
+        if (report) productionCssLogger.info(formatReport(report));
+      }
+    },
     configureServer(server) {
       legacyLayout = detectLegacyLayout({
         dataDir: dataDirs.dataDir,