@barocss/browser 0.5.0 → 0.7.0

package/dist/cdn/barocss.js

@@ -178,8 +178,12 @@ function clearContextCaches(ctx) {
 }
 const utilityRegistry = [];
 function registerUtility(util, ctx) {
-  utilityRegistry.push(util);
-  {
+  const state = ctx && getContextState(ctx);
+  if (ctx && !state) throw new Error("Utility registration requires a context from createContext");
+  (state?.utilities || utilityRegistry).push(util);
+  if (ctx) {
+    clearContextCaches(ctx);
+  } else {
     parseResultCache.clear();
     utilityCache.clear();
   }
@@ -273,7 +277,12 @@ function staticUtility(name, decls, opts, ctx) {
     description: opts?.description,
     category: opts?.category,
     priority: opts?.priority
-  });
+  }, ctx);
+}
+function spacingKeyValue(ctx, key, negative) {
+  if (key === "px" || !/^[a-zA-Z][\w-]*$/.test(key) || ctx.theme("spacing", key) == null) return null;
+  const ref = `var(--spacing-${key})`;
+  return negative ? `calc(${ref} * -1)` : ref;
 }
 function functionalUtility(opts, ctx) {
   registerUtility({
@@ -343,14 +352,17 @@ function functionalUtility(opts, ctx) {
       if (opts.supportsFraction && /^-?\d+\/\d+$/.test(value)) {
         finalValue = value;
       }
+      const spacingKey = opts.spacingKeys ? spacingKeyValue(ctx2, String(finalValue).replace(/^-/, ""), !!parsedUtility.negative) : null;
       if (parsedUtility.negative && opts.supportsNegative && opts.handleNegativeBareValue) {
-        const bare = opts.handleNegativeBareValue({ value: String(finalValue).replace(/^-/, ""), ctx: ctx2, token, extra });
+        const bare = opts.handleNegativeBareValue({ value: String(finalValue).replace(/^-/, ""), ctx: ctx2, token, extra }) ?? spacingKey;
         if (bare == null) return [];
         finalValue = bare;
       } else if (opts.handleBareValue) {
-        const bare = opts.handleBareValue({ value: finalValue, ctx: ctx2, token, extra });
+        const bare = opts.handleBareValue({ value: finalValue, ctx: ctx2, token, extra }) ?? spacingKey;
         if (bare == null) return [];
         finalValue = bare;
+      } else if (spacingKey) {
+        finalValue = spacingKey;
       } else if (!/^-?(\d|\.\d)/.test(String(finalValue))) {
         return [];
       }
@@ -366,7 +378,7 @@ function functionalUtility(opts, ctx) {
     description: opts.description,
     category: opts.category,
     priority: opts.priority
-  });
+  }, ctx);
 }
 const MATH_FNS = /* @__PURE__ */ new Set(["calc", "min", "max", "clamp"]);
 function expandThemeFunctions(value) {
@@ -485,14 +497,23 @@ function parseClassName(className, ctx) {
   if (cache.has(className)) {
     return cache.get(className);
   }
-  let important = false;
   let realClassName = className;
-  if (className.startsWith("!")) {
+  const classPrefix = ctx ? configuredClassPrefix(ctx) : "";
+  if (classPrefix) {
+    if (!className.startsWith(classPrefix + ":")) {
+      const none = { modifiers: [], utility: null };
+      cache.set(className, none);
+      return none;
+    }
+    realClassName = className.slice(classPrefix.length + 1);
+  }
+  let important = false;
+  if (realClassName.startsWith("!")) {
     important = true;
-    realClassName = className.slice(1);
-  } else if (className.length > 1 && className.endsWith("!")) {
+    realClassName = realClassName.slice(1);
+  } else if (realClassName.length > 1 && realClassName.endsWith("!")) {
     important = true;
-    realClassName = className.slice(0, -1);
+    realClassName = realClassName.slice(0, -1);
   }
   const tokens = tokenize(realClassName);
   const result = parseTokens(tokens, ctx);
@@ -502,6 +523,10 @@ function parseClassName(className, ctx) {
   cache.set(className, result);
   return result;
 }
+function configuredClassPrefix(ctx) {
+  const configured = ctx.config("prefix");
+  return typeof configured === "string" && /^[a-z]+$/.test(configured) ? configured : "";
+}
 function parseTokens(tokens, ctx) {
   const modifiers = [];
   let utility = null;
@@ -561,6 +586,18 @@ function isSafeVariantToken(value) {
 function hasCommentToken(value) {
   return value.includes("/*") || value.includes("*/");
 }
+function hasCommentDelimiter(text) {
+  for (let i = 0; i < text.length - 1; i++) {
+    const c = text[i];
+    if (c === "\\") {
+      i++;
+      continue;
+    }
+    const n = text[i + 1];
+    if (c === "/" && n === "*" || c === "*" && n === "/") return true;
+  }
+  return false;
+}
 function isStructureSafeValue(value) {
   if (hasCommentToken(value)) return false;
   return isSafeVariantValue(value, true);
@@ -708,6 +745,7 @@ function parseUtility(value, ctx) {
     priority
   };
 }
+const isSafePrelude = (text) => !hasCommentDelimiter(String(text ?? ""));
 const isSafeDecl = (prop, value) => isStructureSafeValue(String(prop)) && isStructureSafeValue(String(value ?? ""));
 const importantPrefix = "!important";
 function astToCss(ast, baseSelector, opts, _indent = "") {
@@ -771,6 +809,7 @@ function astToCss(ast, baseSelector, opts, _indent = "") {
             }).join(", ");
           }
         }
+        if (!isSafePrelude(selector)) return "";
         if (minify) {
           const css = `${indent}${selector}{${astToCss(
             node.nodes,
@@ -795,6 +834,7 @@ ${astToCss(
         }
       }
       case "style-rule": {
+        if (!isSafePrelude(node.selector)) return "";
         if (minify) {
           const css = `${indent}${node.selector} {${astToCss(
             node.nodes,
@@ -819,6 +859,7 @@ ${astToCss(
         }
       }
       case "at-rule": {
+        if (!isSafePrelude(node.name) || !isSafePrelude(node.params)) return "";
         if (minify) {
           const css = `${indent}@${node.name} ${node.params}{${astToCss(
             node.nodes,
@@ -871,7 +912,7 @@ function rootToCss(nodes, opts) {
       if (isSafeDecl(node.prop, node.value)) {
         list.push(`${node.prop}: ${node.value};`);
       }
-    } else if (node.type === "at-rule") {
+    } else if (node.type === "at-rule" && isSafePrelude(node.name) && isSafePrelude(node.params)) {
       {
         list.push(
           `@${node.name} ${node.params} {
@@ -1005,24 +1046,41 @@ function animationToCssVars(animations2) {
   }
   return result;
 }
-function keyframesToCss(keyframes2) {
-  if (!keyframes2) return "";
-  let css = "";
-  for (const name in keyframes2) {
-    const frames = keyframes2[name];
-    css += `@keyframes ${name} {
+const COMMENT_OR_BLOCK = /\/\*|\*\/|[{};]/;
+function keyframesBlock(name, frames) {
+  if (!name || COMMENT_OR_BLOCK.test(name) || /\s/.test(name) || !frames || typeof frames !== "object") return "";
+  let body = "";
+  for (const [step, props] of Object.entries(frames)) {
+    if (COMMENT_OR_BLOCK.test(step) || !props || typeof props !== "object") return "";
+    let decls = "";
+    for (const [prop, value] of Object.entries(props)) {
+      const v2 = String(value);
+      if (COMMENT_OR_BLOCK.test(prop) || COMMENT_OR_BLOCK.test(v2)) return "";
+      decls += `    ${prop}: ${v2};
 `;
-    for (const step in frames) {
-      css += `  ${step} {`;
-      const props = frames[step];
-      for (const prop in props) {
-        css += ` ${prop}: ${props[prop]};`;
-      }
-      css += " }\n";
     }
-    css += "}\n";
+    body += `  ${step} {
+${decls}  }
+`;
+  }
+  return `@keyframes ${name} {
+${body}}`;
+}
+function referencedKeyframes(css, ctx) {
+  if (!css.includes("animation")) return [];
+  const all = ctx.theme("keyframes");
+  if (!all || typeof all !== "object") return [];
+  const names = /* @__PURE__ */ new Set();
+  for (const m of css.matchAll(/(?:^|[\s;{])animation(?:-name)?\s*:\s*([^;}]+)/g)) {
+    const value = m[1].replace(/var\(--animate-([\w-]+)\)/g, (whole, key) => {
+      const v2 = ctx.theme("animations", key) ?? ctx.theme("animation", key);
+      return typeof v2 === "string" ? v2 : whole;
+    });
+    for (const word of value.split(/[\s,()]+/)) {
+      if (word && Object.prototype.hasOwnProperty.call(all, word)) names.add(word);
+    }
   }
-  return css;
+  return [...names].map((n) => keyframesBlock(n, all[n])).filter(Boolean);
 }
 function transitionTimingFunctionToCssVars(transition) {
   const result = {};
@@ -1090,7 +1148,7 @@ function themeToCssVarsAll(theme) {
     ...borderRadiusToCssVars(theme.borderRadius),
     ...zIndexToCssVars(theme.zIndex),
     ...opacityToCssVars(theme.opacity),
-    ...animationToCssVars(theme.animations),
+    ...animationToCssVars({ ...theme.animations, ...theme.animation }),
     ...transitionTimingFunctionToCssVars(theme.transitionTimingFunction),
     ...transitionDurationToCssVars(theme.transitionDuration),
     ...transitionDelayToCssVars(theme.transitionDelay),
@@ -1099,8 +1157,13 @@ function themeToCssVarsAll(theme) {
     // keyframes handled separately
   };
 }
+function isSelfReferencingVar(name, value) {
+  if (typeof value !== "string") return false;
+  const m = /^var\(\s*(--[\w-]+)\s*(?:,[\s\S]*)?\)$/.exec(value.trim());
+  return !!m && m[1] === name.trim();
+}
 function toCssVarsBlock(vars, extra = "") {
-  return ":root,:host {\n" + Object.entries(vars).map(([k, v2]) => `  ${k}: ${v2};`).join("\n") + "\n}\n" + extra + "\n";
+  return ":root,:host {\n" + Object.entries(vars).filter(([k, v2]) => !isSelfReferencingVar(k, v2)).map(([k, v2]) => `  ${k}: ${v2};`).join("\n") + "\n}\n" + extra + "\n";
 }
 const BARO_VAR = /--baro-/g;
 const PREFIXED_KEYS = /* @__PURE__ */ new Set(["prop", "value", "params", "selector", "nodes", "items"]);
@@ -1451,6 +1514,7 @@ function generateCssRules(classList, ctx, opts) {
       const css = rootToCss([node]);
       rootCssList.push(css);
     }
+    rootCssList.push(...referencedKeyframes(cssList.join("\n"), ctx));
     return {
       cls,
       ast: allCleanAst,
@@ -1713,6 +1777,15 @@ class IncrementalParser {
   markProcessed(cls) {
     this.processedClasses.add(cls);
   }
+  /**
+   * Forgets that a class was processed, so a later request generates it again
+   * (used when the browser runtime reclaims an unused class's rules, #269).
+   *
+   * @param cls - The CSS class name to forget
+   */
+  unmarkProcessed(cls) {
+    this.processedClasses.delete(cls);
+  }
   /**
    * Process classes synchronously and update BrowserRuntime cache
    * This method is used by ChangeDetector for scan operations
@@ -2238,11 +2311,7 @@ const keyframes = {
     }
   },
   ping: {
-    "75%": {
-      transform: "scale(2)",
-      opacity: "0"
-    },
-    "100%": {
+    "75%, 100%": {
       transform: "scale(2)",
       opacity: "0"
     }
@@ -2252,14 +2321,15 @@ const keyframes = {
       opacity: "0.5"
     }
   },
+  // #274: Tailwind 4.1.13's frames (0%/100% share the up position; 50% is the floor).
   bounce: {
-    "0%": {
+    "0%, 100%": {
       transform: "translateY(-25%)",
-      "animation-timing-function": "cubic-bezier(0.8,0,1,1)"
+      "animation-timing-function": "cubic-bezier(0.8, 0, 1, 1)"
     },
-    "100%": {
+    "50%": {
       transform: "none",
-      "animation-timing-function": "cubic-bezier(0,0,0.2,1)"
+      "animation-timing-function": "cubic-bezier(0, 0, 0.2, 1)"
     }
   }
 };
@@ -2334,6 +2404,48 @@ const defaultTheme = {
   // Tailwind 4.1.13 --aspect-* (aspect-video → var(--aspect-video))
   aspect: { video: "16 / 9" }
 };
+const customUtilityName = /^[A-Za-z_][A-Za-z0-9_-]*$/;
+const customUtilityProp = /^(--[A-Za-z0-9_-]+|-?[A-Za-z][A-Za-z0-9-]*)$/;
+function validateCustomUtility(name, decls) {
+  if (typeof name !== "string" || !customUtilityName.test(name)) return null;
+  if (!decls || typeof decls !== "object" || Array.isArray(decls)) return null;
+  const out = [];
+  for (const [prop, raw] of Object.entries(decls)) {
+    if (typeof raw !== "string" && typeof raw !== "number") return null;
+    const value = String(raw).trim();
+    if (!customUtilityProp.test(prop) || !value || !isStructureSafeValue(value) || hasCommentDelimiter(value)) return null;
+    out.push([prop, value]);
+  }
+  return out.length ? out : null;
+}
+function registerCustomUtilities(ctx, utilities) {
+  if (!utilities || typeof utilities !== "object" || Array.isArray(utilities)) return;
+  const list = getUtility(ctx);
+  const builtins = [...list];
+  const before = list.length;
+  for (const [name, decls] of Object.entries(utilities)) {
+    const safe = validateCustomUtility(name, decls);
+    if (!safe) {
+      debugWarn(`[BAROCSS] Ignoring invalid custom utility "${name}"`);
+      continue;
+    }
+    const shadowed = builtins.filter((u) => u.match(name));
+    registerUtility({
+      name,
+      category: "custom",
+      match: (className) => className === name,
+      handler: (value, c, token) => {
+        let base = [];
+        for (const reg of shadowed) {
+          base = reg.handler(value, c, token, reg) || [];
+          if (base.length > 0) break;
+        }
+        return [...base, ...safe.map(([prop, v]) => decl(prop, v))];
+      }
+    }, ctx);
+  }
+  if (list.length > before) list.unshift(...list.splice(before));
+}
 const preflightMinimalCSS = `
 /* BaroCSS Preflight - Minimal Reset */
 /* ================================= */
@@ -3216,9 +3328,7 @@ function resolveTheme(config) {
 }
 function themeToCssVars(theme) {
   const vars = themeToCssVarsAll(theme);
-  const result = toCssVarsBlock(vars, `
-${keyframesToCss(theme.keyframes || {})}
-`);
+  const result = toCssVarsBlock(vars);
   return result;
 }
 function createContext(configObj) {
@@ -3272,6 +3382,7 @@ function createContext(configObj) {
     }
   };
   initializeContextState(ctx, getUtility(), getModifier());
+  registerCustomUtilities(ctx, configObj.utilities);
   return ctx;
 }
 function parseFraction(input) {
@@ -3682,6 +3793,7 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
 ].forEach(([name, prop]) => {
   functionalUtility({
     name: `scroll-${name}`,
+    spacingKeys: true,
     prop,
     supportsArbitrary: true,
     supportsCustomProperty: true,
@@ -3709,6 +3821,7 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
 ].forEach(([name, prop]) => {
   functionalUtility({
     name: `scroll-${name}`,
+    spacingKeys: true,
     prop,
     supportsArbitrary: true,
     supportsCustomProperty: true,
@@ -3867,10 +3980,12 @@ staticUtility("animate-bounce", [["animation", "var(--animate-bounce)"]], { cate
 staticUtility("animate-none", [["animation", "none"]], { category: "transitions" });
 functionalUtility({
   name: "animate",
-  prop: "animation",
+  // #274: theme.animations (and Tailwind's theme.animation) names, e.g. theme.extend.animation.wiggle.
+  themeKeys: ["animations", "animation"],
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handle: (value, ctx, token) => {
+  handle: (value, ctx, token, extra) => {
+    if (extra?.realThemeValue) return [decl("animation", `var(--animate-${extra.realThemeValue})`)];
     if (token.customProperty) {
       return [decl("animation", `var(${value})`)];
     }
@@ -5242,6 +5357,7 @@ staticUtility("sticky", [["position", "sticky"]], { category: "layout" });
   staticUtility(`-${name}-px`, [[prop, "-1px"]], { category: "layout" });
   functionalUtility({
     name,
+    spacingKeys: true,
     prop,
     supportsNegative: true,
     supportsFraction: true,
@@ -5272,6 +5388,7 @@ staticUtility("invisible", [["visibility", "hidden"]], { category: "layout" });
 staticUtility("collapse", [["visibility", "collapse"]], { category: "layout" });
 functionalUtility({
   name: "gap-x",
+  spacingKeys: true,
   prop: "column-gap",
   supportsArbitrary: true,
   // gap-x-[10vw]
@@ -5288,6 +5405,7 @@ functionalUtility({
 });
 functionalUtility({
   name: "gap-y",
+  spacingKeys: true,
   prop: "row-gap",
   supportsArbitrary: true,
   // gap-y-[10vw]
@@ -5304,6 +5422,7 @@ functionalUtility({
 });
 functionalUtility({
   name: "gap",
+  spacingKeys: true,
   prop: "gap",
   supportsArbitrary: true,
   // gap-[10vw]
@@ -5821,6 +5940,7 @@ functionalUtility({
 ].forEach(([name, prop]) => {
   staticUtility(`${name}-px`, [[prop, "1px"]], { category: "spacing" });
   functionalUtility({
+    spacingKeys: true,
     name,
     prop,
     supportsArbitrary: true,
@@ -5845,6 +5965,7 @@ functionalUtility({
   staticUtility(`${name}-px`, [[prop, "1px"]], { category: "spacing" });
   staticUtility(`-${name}-px`, [[prop, "-1px"]], { category: "spacing" });
   functionalUtility({
+    spacingKeys: true,
     name,
     prop,
     supportsNegative: true,
@@ -5875,6 +5996,7 @@ const SPACE_SELECTOR = ":where(& > :not(:last-child))";
     () => rule(SPACE_SELECTOR, [decl(rev, "1")])
   ], { category: "spacing" });
   functionalUtility({
+    spacingKeys: true,
     name,
     supportsNegative: true,
     supportsArbitrary: true,
@@ -5924,6 +6046,7 @@ const SPACE_SELECTOR = ":where(& > :not(:last-child))";
   staticUtility(name, [["width", value]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "w",
   prop: "width",
   supportsArbitrary: true,
@@ -5956,6 +6079,7 @@ functionalUtility({
   staticUtility(name, [["width", w], ["height", h]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "size",
   supportsArbitrary: true,
   supportsCustomProperty: true,
@@ -5995,6 +6119,7 @@ functionalUtility({
   staticUtility(name, [["height", value]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "h",
   prop: "height",
   supportsArbitrary: true,
@@ -6025,6 +6150,7 @@ functionalUtility({
   staticUtility(name, [["min-height", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "min-h",
   prop: "min-height",
   supportsArbitrary: true,
@@ -6055,6 +6181,7 @@ functionalUtility({
   staticUtility(name, [["max-height", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "max-h",
   prop: "max-height",
   supportsArbitrary: true,
@@ -6101,6 +6228,7 @@ functionalUtility({
   staticUtility(name, [["min-width", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "min-w",
   prop: "min-width",
   supportsArbitrary: true,
@@ -6136,6 +6264,7 @@ functionalUtility({
   staticUtility(name, [["max-width", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "max-w",
   prop: "max-width",
   supportsArbitrary: true,
@@ -8795,6 +8924,41 @@ class StylePartitionManager {
     }
     return { success, failed };
   }
+  /**
+   * Remove one generated rule (#269 GC). Keeps `styles`, the #254 `keys` and the
+   * sheet's cssRules parallel: one deleteRule at the rule's index, or a text
+   * rebuild when the sheet isn't solely ours / has no CSSOM. Returns whether
+   * the rule was found.
+   */
+  removeRule(rule2, category) {
+    let partition;
+    if (category) {
+      if (this.classToCategoryPartitionMap.get(rule2) !== category) return false;
+      partition = this.categoryPartitions.get(category);
+    } else {
+      const partitionIndex = this.classToPartitionMap.get(rule2);
+      partition = partitionIndex === void 0 ? void 0 : this.partitions[partitionIndex];
+    }
+    if (!partition) return false;
+    const index = partition.styles.indexOf(rule2);
+    if (index === -1) return false;
+    const sheet = partition.styleElement.sheet;
+    const inSync = !!sheet && sheet.cssRules.length === partition.styles.length;
+    partition.styles.splice(index, 1);
+    partition.keys?.splice(index, 1);
+    if (inSync && sheet) {
+      sheet.deleteRule(index);
+    } else {
+      partition.styleElement.textContent = partition.styles.length ? partition.styles.join("\n") + "\n" : "";
+    }
+    if (category) this.classToCategoryPartitionMap.delete(rule2);
+    else this.classToPartitionMap.delete(rule2);
+    return true;
+  }
+  /** Number of generated (non-root, non-preflight) rules currently held. */
+  get ruleCount() {
+    return this.classToPartitionMap.size + this.classToCategoryPartitionMap.size;
+  }
   /**
    * 특정 규칙이 어느 파티션에 있는지 찾기
    */
@@ -8860,10 +9024,14 @@ class ChangeDetector {
    */
   constructor(incrementalParser, BrowserRuntime2, getCategory = (cls) => parseClassName(cls).utility?.category) {
     this.observer = null;
+    this.gc = null;
     this.incrementalParser = incrementalParser;
     this.BrowserRuntime = BrowserRuntime2;
     this.getCategory = getCategory;
   }
+  setGc(gc) {
+    this.gc = gc;
+  }
   setParser(parser) {
     this.incrementalParser = parser;
   }
@@ -8890,9 +9058,19 @@ class ChangeDetector {
     if (this.observer) {
       this.observer.disconnect();
     }
+    this.gc?.setRoot(root);
     this.observer = new MutationObserver((mutations) => {
       const newClasses = /* @__PURE__ */ new Set();
+      const gc = this.gc;
       mutations.forEach((mutation) => {
+        if (gc) {
+          if (mutation.type === "attributes") {
+            gc.reconcile(mutation.target);
+          } else if (mutation.type === "childList") {
+            mutation.removedNodes.forEach((node) => gc.reconcileTree(node));
+            mutation.addedNodes.forEach((node) => gc.reconcileTree(node));
+          }
+        }
         if (mutation.type === "attributes" && mutation.attributeName === "class" && root.contains(mutation.target)) {
           const target = mutation.target;
           if (target.className) {
@@ -8923,6 +9101,7 @@ class ChangeDetector {
       } else {
         this.BrowserRuntime?.applyParseResults([]);
       }
+      gc?.afterBatch();
     });
     this.observer.observe(root, {
       attributes: true,
@@ -9010,7 +9189,7 @@ class ChangeDetector {
 function unescapeCssIdent(s) {
   return s.replace(/\\([0-9a-fA-F]{1,6})\s?|\\(.)/g, (_m, hex, ch) => hex ? String.fromCodePoint(parseInt(hex, 16)) : ch);
 }
-const LEADING_CLASS = /^\s*\.((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w-]|[^\x00-\x7F])+)/;
+const LEADING_CLASS = /^\s*(?::(?:where|is)\(\s*)?\.((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w-]|[^\x00-\x7F])+)/;
 function splitTopLevel(sel) {
   const parts = [];
   let depth = 0, start = 0;
@@ -9027,6 +9206,17 @@ function splitTopLevel(sel) {
   parts.push(sel.slice(start));
   return parts;
 }
+function collectKeyframeNames(rules, out = /* @__PURE__ */ new Set()) {
+  for (const rule2 of Array.from(rules)) {
+    if (rule2.type === 7 && typeof rule2.name === "string") {
+      out.add(rule2.name);
+      continue;
+    }
+    const inner = rule2.cssRules;
+    if (inner && inner.length) collectKeyframeNames(inner, out);
+  }
+  return out;
+}
 function collectLeadingClasses(rules, out = /* @__PURE__ */ new Set()) {
   for (const rule2 of Array.from(rules)) {
     const selectorText = rule2.selectorText;
@@ -9041,6 +9231,116 @@ function collectLeadingClasses(rules, out = /* @__PURE__ */ new Set()) {
   }
   return out;
 }
+class ClassGc {
+  constructor(host, graceMs, maxRules, now = () => Date.now()) {
+    this.host = host;
+    this.graceMs = graceMs;
+    this.maxRules = maxRules;
+    this.now = now;
+    this.counts = /* @__PURE__ */ new Map();
+    this.counted = /* @__PURE__ */ new WeakMap();
+    this.candidates = /* @__PURE__ */ new Map();
+    this.timer = null;
+    this.root = null;
+  }
+  /** Start counting for a new root: count every element currently inside it. */
+  setRoot(root) {
+    this.counts.clear();
+    this.counted = /* @__PURE__ */ new WeakMap();
+    this.candidates.clear();
+    this.cancel();
+    this.root = root;
+    this.reconcileTree(root);
+  }
+  count(cls) {
+    return this.counts.get(cls) ?? 0;
+  }
+  /** Re-count `el` and (optionally) all its descendants from their current state. */
+  reconcileTree(node) {
+    if (node.nodeType !== 1) return;
+    const el = node;
+    this.reconcile(el);
+    el.querySelectorAll("[class]").forEach((child) => this.reconcile(child));
+  }
+  reconcile(el) {
+    const root = this.root;
+    const live = !!root && root.contains(el);
+    const next = live ? Array.from(new Set(normalizeClassNameList(el.getAttribute("class")))) : [];
+    const prev = this.counted.get(el);
+    if (!prev && next.length === 0) return;
+    const prevSet = new Set(prev ?? []);
+    const nextSet = new Set(next);
+    for (const cls of nextSet) {
+      if (prevSet.has(cls)) continue;
+      const c = (this.counts.get(cls) ?? 0) + 1;
+      this.counts.set(cls, c);
+      this.candidates.delete(cls);
+    }
+    for (const cls of prevSet) {
+      if (nextSet.has(cls)) continue;
+      const c = (this.counts.get(cls) ?? 0) - 1;
+      if (c > 0) {
+        this.counts.set(cls, c);
+      } else {
+        this.counts.delete(cls);
+        this.candidates.delete(cls);
+        this.candidates.set(cls, this.now());
+      }
+    }
+    if (next.length) this.counted.set(el, next);
+    else this.counted.delete(el);
+  }
+  /** Call after a mutation batch has been counted and its classes inserted. */
+  afterBatch() {
+    if (this.candidates.size === 0) return;
+    if (this.host.cachedCount() > this.maxRules) {
+      this.schedule(0);
+    } else {
+      this.schedule(this.graceMs);
+    }
+  }
+  schedule(delay) {
+    if (this.timer !== null) {
+      if (delay > 0) return;
+      clearTimeout(this.timer);
+    }
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      this.sweep();
+    }, delay);
+  }
+  /** Reclaim candidates whose grace period elapsed (plus LRU overflow). Public for tests. */
+  sweep() {
+    const now = this.now();
+    const overflow = Math.max(0, this.host.cachedCount() - this.maxRules);
+    const doomed = [];
+    let evicted = 0;
+    for (const [cls, since] of this.candidates) {
+      const expired = now - since >= this.graceMs;
+      if (!expired && evicted >= overflow) continue;
+      this.candidates.delete(cls);
+      if (this.count(cls) > 0 || this.inDom(cls) || this.host.isPermanent(cls)) continue;
+      doomed.push(cls);
+      if (!expired) evicted++;
+    }
+    if (doomed.length) this.host.reclaim(doomed);
+    if (this.candidates.size) this.schedule(this.graceMs);
+  }
+  inDom(cls) {
+    const root = this.root;
+    if (!root) return false;
+    const doc = root.ownerDocument ?? document;
+    return root.classList.contains(cls) || doc.documentElement.classList.contains(cls) || doc.getElementsByClassName(cls).length > 0;
+  }
+  cancel() {
+    if (this.timer !== null) clearTimeout(this.timer);
+    this.timer = null;
+  }
+  stats() {
+    return { trackedClasses: this.counts.size, candidates: this.candidates.size };
+  }
+}
+const SSR_STYLE_SELECTOR = "style[data-barocss-ssr]";
 const LAYER_ORDER = "@layer theme, base, components, utilities;";
 class BrowserRuntime {
   constructor(options = {}) {
@@ -9048,7 +9348,14 @@ class BrowserRuntime {
     this.rootCache = /* @__PURE__ */ new Set();
     this.isDestroyed = false;
     this.existing = null;
+    this.existingKeyframes = /* @__PURE__ */ new Set();
     this.existingSheetCount = -1;
+    this.pinned = /* @__PURE__ */ new Set();
+    this.gc = null;
+    this.reclaimedCount = 0;
+    this.ssrRules = [];
+    this.ssrClasses = /* @__PURE__ */ new Set();
+    this.observedOnce = false;
     this.getCategory = (cls) => parseClassName(cls, this.context).utility?.category;
     const defaultConfig = {};
     this.options = {
@@ -9056,12 +9363,23 @@ class BrowserRuntime {
       styleId: options.styleId || "barocss-runtime",
       insertionPoint: options.insertionPoint || "head",
       maxRulesPerPartition: options.maxRulesPerPartition || 50,
-      skipExisting: options.skipExisting ?? false
+      skipExisting: options.skipExisting ?? false,
+      gc: options.gc ?? true,
+      gcGraceMs: options.gcGraceMs ?? 3e3,
+      maxRules: options.maxRules ?? Infinity
     };
     this.context = createContext(this.options.config);
     this.incrementalParser = new IncrementalParser(this.context);
     this.changeDetector = new ChangeDetector(this.incrementalParser, this, this.getCategory);
     this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`, this.getCategory);
+    if (this.options.gc) {
+      this.gc = new ClassGc({
+        reclaim: (classes) => this.reclaim(classes),
+        isPermanent: (cls) => this.isPermanent(cls),
+        cachedCount: () => this.cache.size
+      }, this.options.gcGraceMs, this.options.maxRules);
+      this.changeDetector.setGc(this.gc);
+    }
     this.init();
   }
   // Debugging and logging helpers
@@ -9076,6 +9394,44 @@ class BrowserRuntime {
     console.log("[BrowserRuntime] init");
     this.injectPreflightCSS();
     this.ensureCssVars();
+    this.adoptSsrSheets();
+  }
+  /**
+   * #268: adopt the class rules of server-rendered `<style data-barocss-ssr>` sheets in <head>, at startup
+   * (constructor and the first observe()). Each rule moves
+   * (same task, so no paint in between) into the partition its class would get if generated here, at
+   * its #254 sorted position, so a later client `sm:` rule lands before a server `lg:` rule. Its classes
+   * are never regenerated and never reclaimed. `:root`, `@property` and `@keyframes` stay in the sheet.
+   */
+  adoptSsrSheets() {
+    if (typeof document === "undefined") return;
+    const adopted = [];
+    if (!document.head) return;
+    for (const el of Array.from(document.head.querySelectorAll(`${SSR_STYLE_SELECTOR}:not([data-barocss-adopted])`))) {
+      const sheet = el.sheet;
+      if (!sheet) continue;
+      el.setAttribute("data-barocss-adopted", "");
+      const moved = [];
+      for (let i = sheet.cssRules.length - 1; i >= 0; i--) {
+        const rule2 = sheet.cssRules[i];
+        const classes = collectLeadingClasses([rule2]);
+        if (classes.size === 0) continue;
+        classes.forEach((cls) => this.ssrClasses.add(cls));
+        moved.unshift({ css: rule2.cssText, cls: classes.values().next().value });
+        sheet.deleteRule(i);
+      }
+      adopted.push(...moved);
+    }
+    if (adopted.length === 0) return;
+    this.ssrRules.push(...adopted);
+    this.insertSsrRules(adopted);
+  }
+  insertSsrRules(rules) {
+    for (const { css, cls } of rules) {
+      const category = this.getCategory(cls);
+      if (category) this.stylePartitionManager.addCategoryRule(css, category);
+      else this.stylePartitionManager.addRule(css);
+    }
   }
   injectPreflightCSS() {
     const level = this.options.config.preflight ?? true;
@@ -9113,7 +9469,8 @@ ${preflightCSS}
    */
   addClass(classes) {
     if (this.isDestroyed) return;
-    const classList = this.normalizeClasses(classes);
+    const classList = this.normalizeClasses(classes).filter(Boolean);
+    classList.forEach((cls) => this.pinned.add(cls));
     this.processClasses(classList);
   }
   /**
@@ -9142,6 +9499,7 @@ ${preflightCSS}
       results = [...existingResults, ...results];
       results.forEach((result) => this.incrementalParser.markProcessed(result.cls));
     }
+    if (this.ssrClasses.size > 0) results = results.filter((result) => !this.ssrClasses.has(result.cls));
     if (this.options.skipExisting && results.length > 0 && typeof document !== "undefined") {
       const existing = this.getExistingClasses();
       results = results.filter((result) => !existing.has(result.cls));
@@ -9149,6 +9507,7 @@ ${preflightCSS}
     if (results.length === 0) return;
     const cssRules = [];
     const rootCssRules = [];
+    const pageKeyframes = this.options.skipExisting && typeof document !== "undefined" ? (this.getExistingClasses(), this.existingKeyframes) : null;
     for (const result of results) {
       if (result.css && Array.isArray(result.cssList)) {
         cssRules.push(result);
@@ -9156,6 +9515,10 @@ ${preflightCSS}
       }
       if (result.rootCss && Array.isArray(result.rootCssList)) {
         for (const rootCss of result.rootCssList) {
+          if (pageKeyframes?.size) {
+            const kf = /^\s*@keyframes\s+([^\s{]+)/.exec(rootCss)?.[1];
+            if (kf && pageKeyframes.has(kf)) continue;
+          }
           if (!this.rootCache.has(rootCss)) {
             this.rootCache.add(rootCss);
             rootCssRules.push(rootCss);
@@ -9174,14 +9537,46 @@ ${preflightCSS}
       rootCssCount: rootCssRules.length
     });
   }
+  /** #269: a class that must never be reclaimed. */
+  isPermanent(cls) {
+    if (this.pinned.has(cls) || this.ssrClasses.has(cls)) return true;
+    if (typeof document === "undefined") return true;
+    return this.getExistingClasses().has(cls);
+  }
+  /**
+   * #269: delete the generated rules of classes no live element uses. Root/@property/@keyframes rules stay
+   * (they are shared and harmless); a rule text another cached class still emits is kept.
+   */
+  reclaim(classes) {
+    if (this.isDestroyed) return;
+    const victims = classes.filter((cls) => this.cache.has(cls));
+    if (victims.length === 0) return;
+    const results = victims.map((cls) => this.cache.get(cls));
+    victims.forEach((cls) => {
+      this.cache.delete(cls);
+      this.incrementalParser.unmarkProcessed(cls);
+    });
+    const stillUsed = /* @__PURE__ */ new Set();
+    for (const result of this.cache.values()) result.cssList.forEach((css) => stillUsed.add(css));
+    for (const result of results) {
+      const category = this.getCategory(result.cls);
+      for (const css of result.cssList) {
+        if (!stillUsed.has(css)) this.stylePartitionManager.removeRule(css, category);
+      }
+    }
+    this.reclaimedCount += victims.length;
+  }
   /** Class names defined by the page's own stylesheets (BaroCSS's sheets and cross-origin sheets excluded). */
   getExistingClasses() {
+    const own = new Set(Array.from(document.querySelectorAll("style[data-barocss]"), (s) => s.sheet));
     const sheets = Array.from(document.styleSheets).filter((sheet) => {
+      if (own.has(sheet)) return false;
       const owner = sheet.ownerNode;
       return !(owner && typeof owner.hasAttribute === "function" && (owner.hasAttribute("data-barocss") || (owner.id || "").startsWith(this.options.styleId)));
     });
     if (this.existing && sheets.length === this.existingSheetCount) return this.existing;
     const out = /* @__PURE__ */ new Set();
+    const keyframes2 = /* @__PURE__ */ new Set();
     for (const sheet of sheets) {
       let rules;
       try {
@@ -9190,7 +9585,9 @@ ${preflightCSS}
         continue;
       }
       collectLeadingClasses(rules, out);
+      collectKeyframeNames(rules, keyframes2);
     }
+    this.existingKeyframes = keyframes2;
     this.existing = out;
     this.existingSheetCount = sheets.length;
     return out;
@@ -9199,6 +9596,10 @@ ${preflightCSS}
    * MutationObserver instance method to automatically call addClass when class attributes change in DOM
    */
   observe(root = document.body, options) {
+    if (!this.observedOnce) {
+      this.observedOnce = true;
+      this.adoptSsrSheets();
+    }
     return this.changeDetector.observe(root, options);
   }
   normalizeClasses(classes) {
@@ -9228,7 +9629,10 @@ ${preflightCSS}
     return {
       runtime: {
         cachedClasses: this.cache.size,
-        rootCacheSize: this.rootCache.size
+        rootCacheSize: this.rootCache.size,
+        ruleCount: this.stylePartitionManager.ruleCount,
+        reclaimedClasses: this.reclaimedCount,
+        gc: this.gc?.stats() ?? null
       },
       ast: incremental.cacheStats.ast,
       incremental
@@ -9247,6 +9651,7 @@ ${preflightCSS}
     this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`, this.getCategory);
     this.injectPreflightCSS();
     this.ensureCssVars();
+    this.insertSsrRules(this.ssrRules);
   }
   reset() {
     if (this.isDestroyed) return;
@@ -9257,6 +9662,7 @@ ${preflightCSS}
     this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`, this.getCategory);
     this.injectPreflightCSS();
     this.ensureCssVars();
+    this.insertSsrRules(this.ssrRules);
   }
   updateConfig(newConfig) {
     if (this.isDestroyed) return;
@@ -9282,6 +9688,7 @@ ${preflightCSS}
   destroy() {
     if (this.isDestroyed) return;
     this.changeDetector.disconnect();
+    this.gc?.cancel();
     this.stylePartitionManager.cleanup();
     this.cache.clear();
     this.rootCache.clear();
@@ -9398,6 +9805,7 @@ export {
   BrowserRuntime,
   ChangeDetector,
   LAYER_ORDER,
+  SSR_STYLE_SELECTOR,
   StylePartitionManager,
   baroBoot,
   baroStart,