@barocss/browser 0.0.1 → 0.4.0

package/dist/cdn/barocss.js

@@ -27,16 +27,158 @@ function property(name, initialValue, syntax, source) {
   }
   return atRule("property", name, nodes, source);
 }
+class AstCache {
+  constructor() {
+    this.cache = /* @__PURE__ */ new Map();
+    this.maxSize = 1e3;
+  }
+  // Prevent memory leaks
+  set(key, ast) {
+    if (this.cache.size >= this.maxSize) {
+      const firstKey = this.cache.keys().next().value;
+      if (firstKey) {
+        this.cache.delete(firstKey);
+      }
+    }
+    this.cache.set(key, ast);
+  }
+  get(key) {
+    return this.cache.get(key);
+  }
+  has(key) {
+    return this.cache.has(key);
+  }
+  clear() {
+    this.cache.clear();
+  }
+  getStats() {
+    return {
+      size: this.cache.size,
+      maxSize: this.maxSize,
+      hitRate: this.cache.size / this.maxSize
+    };
+  }
+}
+const astCache = new AstCache();
+class ParseResultCache {
+  constructor() {
+    this.cache = /* @__PURE__ */ new Map();
+    this.maxSize = 2e3;
+  }
+  // Prevent memory leaks
+  set(key, result) {
+    if (this.cache.size >= this.maxSize) {
+      const firstKey = this.cache.keys().next().value;
+      if (firstKey) {
+        this.cache.delete(firstKey);
+      }
+    }
+    this.cache.set(key, result);
+  }
+  get(key) {
+    return this.cache.get(key);
+  }
+  has(key) {
+    return this.cache.has(key);
+  }
+  clear() {
+    this.cache.clear();
+  }
+  getStats() {
+    return {
+      size: this.cache.size,
+      maxSize: this.maxSize,
+      hitRate: this.cache.size / this.maxSize
+    };
+  }
+}
+const parseResultCache = new ParseResultCache();
+class UtilityCache {
+  constructor() {
+    this.cache = /* @__PURE__ */ new Map();
+    this.maxSize = 1e3;
+  }
+  // Prevent memory leaks
+  set(key, value) {
+    if (this.cache.size >= this.maxSize) {
+      const firstKey = this.cache.keys().next().value;
+      if (firstKey) {
+        this.cache.delete(firstKey);
+      }
+    }
+    this.cache.set(key, value);
+  }
+  get(key) {
+    return this.cache.get(key);
+  }
+  has(key) {
+    return this.cache.has(key);
+  }
+  clear() {
+    this.cache.clear();
+  }
+  getStats() {
+    return {
+      size: this.cache.size,
+      maxSize: this.maxSize,
+      hitRate: this.cache.size / this.maxSize
+    };
+  }
+}
+const utilityCache = new UtilityCache();
+let resetContextCaches;
+function setContextCacheReset(reset) {
+  resetContextCaches = reset;
+}
+function clearAllCaches() {
+  astCache.clear();
+  parseResultCache.clear();
+  utilityCache.clear();
+  resetContextCaches?.();
+  console.log("[clearAllCaches] All caches cleared");
+}
+const states = /* @__PURE__ */ new WeakMap();
+let cacheGeneration = 0;
+setContextCacheReset(() => {
+  cacheGeneration += 1;
+});
+function initializeContextState(ctx, utilities, modifiers) {
+  states.set(ctx, {
+    utilities: [...utilities],
+    modifiers: [...modifiers],
+    astCache: new AstCache(),
+    parseResultCache: new ParseResultCache(),
+    utilityCache: new UtilityCache(),
+    failures: /* @__PURE__ */ new Set(),
+    cacheGeneration
+  });
+}
+function getContextState(ctx) {
+  const state = states.get(ctx);
+  if (state && state.cacheGeneration !== cacheGeneration) {
+    clearContextCaches(ctx);
+    state.cacheGeneration = cacheGeneration;
+  }
+  return state;
+}
+function clearContextCaches(ctx) {
+  const state = states.get(ctx);
+  if (!state) return;
+  state.astCache.clear();
+  state.parseResultCache.clear();
+  state.utilityCache.clear();
+  state.failures.clear();
+}
 const utilityRegistry = [];
-function registerUtility(util) {
+function registerUtility(util, ctx) {
   utilityRegistry.push(util);
 }
-function getUtility() {
-  return utilityRegistry;
+function getUtility(ctx) {
+  return ctx && getContextState(ctx)?.utilities || utilityRegistry;
 }
 const modifierRegistry = [];
-function staticModifier(name, selectors, options = {}) {
-  modifierRegistry.push({
+function staticModifier(name, selectors, options = {}, ctx) {
+  registerModifier({
     match: (mod) => mod === name,
     modifySelector: ({ ..._rest }) => {
       return selectors.map((sel) => ({
@@ -47,11 +189,14 @@ function staticModifier(name, selectors, options = {}) {
     ...options
   });
 }
-function functionalModifier(match, modifySelector, wrap, options = {}) {
-  modifierRegistry.push({ match, modifySelector, wrap, ...options });
+function functionalModifier(match, modifySelector, wrap, options = {}, ctx) {
+  registerModifier({ match, modifySelector, wrap, ...options });
 }
-function getModifier() {
-  return modifierRegistry;
+function registerModifier(modifier, ctx) {
+  modifierRegistry.push(modifier);
+}
+function getModifier(ctx) {
+  return ctx && getContextState(ctx)?.modifiers || modifierRegistry;
 }
 const ESCAPE_REGEX = /[^A-Za-z0-9_-]/g;
 function escapeClassName(className) {
@@ -90,7 +235,7 @@ function escapeClassName(className) {
     return "\\" + c;
   });
 }
-function staticUtility(name, decls, opts) {
+function staticUtility(name, decls, opts, ctx) {
   registerUtility({
     name,
     match: (className) => {
@@ -119,11 +264,11 @@ function staticUtility(name, decls, opts) {
     priority: opts?.priority
   });
 }
-function functionalUtility(opts) {
+function functionalUtility(opts, ctx) {
   registerUtility({
     name: opts.name,
     match: (className) => className.startsWith(opts.name + "-"),
-    handler: (value, ctx, token, _options) => {
+    handler: (value, ctx2, token, _options) => {
       let finalValue = value;
       const parsedUtility = token;
       const extra = {
@@ -139,7 +284,7 @@ function functionalUtility(opts) {
       if (opts.supportsArbitrary && parsedUtility.arbitrary) {
         const processedValue = finalValue.replace(/_/g, " ");
         if (opts.handle) {
-          const result = opts.handle(processedValue, ctx, token, extra);
+          const result = opts.handle(processedValue, ctx2, token, extra);
           if (result) return result;
         }
         if (opts.prop) {
@@ -149,12 +294,12 @@ function functionalUtility(opts) {
       }
       if (opts.supportsCustomProperty && parsedUtility.customProperty) {
         if (opts.handleCustomProperty) {
-          const result = opts.handleCustomProperty(finalValue, ctx, token, extra);
+          const result = opts.handleCustomProperty(finalValue, ctx2, token, extra);
           return result;
         }
         const customValue = `var(${finalValue})`;
         if (opts.handle) {
-          const result = opts.handle(customValue, ctx, token, extra);
+          const result = opts.handle(customValue, ctx2, token, extra);
           if (result) return result;
         }
         if (opts.prop) {
@@ -163,12 +308,12 @@ function functionalUtility(opts) {
         return [];
       }
       let themeValue;
-      if (opts.themeKey && ctx.theme) {
-        themeValue = ctx.theme(opts.themeKey, finalValue);
+      if (opts.themeKey && ctx2.theme) {
+        themeValue = ctx2.theme(opts.themeKey, finalValue);
       }
-      if (!themeValue && opts.themeKeys && ctx.theme) {
+      if (!themeValue && opts.themeKeys && ctx2.theme) {
         for (const key of opts.themeKeys) {
-          themeValue = ctx.theme(key, finalValue);
+          themeValue = ctx2.theme(key, finalValue);
           if (themeValue !== void 0) break;
         }
       }
@@ -179,7 +324,7 @@ function functionalUtility(opts) {
           return [decl(opts.prop, finalValue)];
         }
         if (opts.handle) {
-          const result = opts.handle(finalValue, ctx, token, extra);
+          const result = opts.handle(finalValue, ctx2, token, extra);
           if (result) return result;
         }
         return [];
@@ -188,16 +333,16 @@ function functionalUtility(opts) {
         finalValue = value;
       }
       if (parsedUtility.negative && opts.supportsNegative && opts.handleNegativeBareValue) {
-        const bare = opts.handleNegativeBareValue({ value: String(finalValue).replace(/^-/, ""), ctx, token, extra });
+        const bare = opts.handleNegativeBareValue({ value: String(finalValue).replace(/^-/, ""), ctx: ctx2, token, extra });
         if (bare == null) return [];
         finalValue = bare;
       } else if (opts.handleBareValue) {
-        const bare = opts.handleBareValue({ value: finalValue, ctx, token, extra });
+        const bare = opts.handleBareValue({ value: finalValue, ctx: ctx2, token, extra });
         if (bare == null) return [];
         finalValue = bare;
       }
       if (opts.handle) {
-        const result = opts.handle(finalValue, ctx, token, extra);
+        const result = opts.handle(finalValue, ctx2, token, extra);
         if (result) return result;
       }
       if (opts.prop) {
@@ -245,117 +390,13 @@ function tokenize(className) {
   }
   return tokens;
 }
-class AstCache {
-  constructor() {
-    this.cache = /* @__PURE__ */ new Map();
-    this.maxSize = 1e3;
-  }
-  // Prevent memory leaks
-  set(key, ast) {
-    if (this.cache.size >= this.maxSize) {
-      const firstKey = this.cache.keys().next().value;
-      if (firstKey) {
-        this.cache.delete(firstKey);
-      }
-    }
-    this.cache.set(key, ast);
-  }
-  get(key) {
-    return this.cache.get(key);
-  }
-  has(key) {
-    return this.cache.has(key);
-  }
-  clear() {
-    this.cache.clear();
-  }
-  getStats() {
-    return {
-      size: this.cache.size,
-      maxSize: this.maxSize,
-      hitRate: this.cache.size / this.maxSize
-    };
-  }
-}
-const astCache = new AstCache();
-class ParseResultCache {
-  constructor() {
-    this.cache = /* @__PURE__ */ new Map();
-    this.maxSize = 2e3;
-  }
-  // Prevent memory leaks
-  set(key, result) {
-    if (this.cache.size >= this.maxSize) {
-      const firstKey = this.cache.keys().next().value;
-      if (firstKey) {
-        this.cache.delete(firstKey);
-      }
-    }
-    this.cache.set(key, result);
+function isUtilityPrefix(str, ctx) {
+  const cache = ctx && getContextState(ctx)?.utilityCache || utilityCache;
+  if (cache.has(str)) {
+    return cache.get(str);
   }
-  get(key) {
-    return this.cache.get(key);
-  }
-  has(key) {
-    return this.cache.has(key);
-  }
-  clear() {
-    this.cache.clear();
-  }
-  getStats() {
-    return {
-      size: this.cache.size,
-      maxSize: this.maxSize,
-      hitRate: this.cache.size / this.maxSize
-    };
-  }
-}
-const parseResultCache = new ParseResultCache();
-class UtilityCache {
-  constructor() {
-    this.cache = /* @__PURE__ */ new Map();
-    this.maxSize = 1e3;
-  }
-  // Prevent memory leaks
-  set(key, value) {
-    if (this.cache.size >= this.maxSize) {
-      const firstKey = this.cache.keys().next().value;
-      if (firstKey) {
-        this.cache.delete(firstKey);
-      }
-    }
-    this.cache.set(key, value);
-  }
-  get(key) {
-    return this.cache.get(key);
-  }
-  has(key) {
-    return this.cache.has(key);
-  }
-  clear() {
-    this.cache.clear();
-  }
-  getStats() {
-    return {
-      size: this.cache.size,
-      maxSize: this.maxSize,
-      hitRate: this.cache.size / this.maxSize
-    };
-  }
-}
-const utilityCache = new UtilityCache();
-function clearAllCaches() {
-  astCache.clear();
-  parseResultCache.clear();
-  utilityCache.clear();
-  console.log("[clearAllCaches] All caches cleared");
-}
-function isUtilityPrefix(str) {
-  if (utilityCache.has(str)) {
-    return utilityCache.get(str);
-  }
-  const utilities = getUtility();
-  const modifiers = getModifier();
+  const utilities = getUtility(ctx);
+  const modifiers = getModifier(ctx);
   const candidateUtilities = utilities.filter((util) => {
     const prefix = util.name;
     return str.startsWith(prefix + "-") || str === prefix || str.startsWith(prefix);
@@ -367,12 +408,13 @@ function isUtilityPrefix(str) {
   });
   const isModifier = candidateModifiers.some((mod) => mod.match(str, {}));
   const result = isUtility && !isModifier;
-  utilityCache.set(str, result);
+  cache.set(str, result);
   return result;
 }
-function parseClassName(className) {
-  if (parseResultCache.has(className)) {
-    return parseResultCache.get(className);
+function parseClassName(className, ctx) {
+  const cache = ctx && getContextState(ctx)?.parseResultCache || parseResultCache;
+  if (cache.has(className)) {
+    return cache.get(className);
   }
   let important = false;
   let realClassName = className;
@@ -381,38 +423,38 @@ function parseClassName(className) {
     realClassName = className.slice(1);
   }
   const tokens = tokenize(realClassName);
-  const result = parseTokens(tokens);
+  const result = parseTokens(tokens, ctx);
   if (result.utility) {
     result.utility.important = important;
   }
-  parseResultCache.set(className, result);
+  cache.set(className, result);
   return result;
 }
-function parseTokens(tokens) {
+function parseTokens(tokens, ctx) {
   const modifiers = [];
   let utility = null;
   if (tokens.length === 0) {
     return { modifiers, utility: null };
   }
   if (tokens.length === 1) {
-    utility = parseUtility(tokens[0].value);
+    utility = parseUtility(tokens[0].value, ctx);
   } else if (tokens.length === 2) {
     const firstToken = tokens[0];
     const secondToken = tokens[1];
-    const isFirstUtility = isUtilityPrefix(firstToken.value);
+    const isFirstUtility = isUtilityPrefix(firstToken.value, ctx);
     if (isFirstUtility) {
-      utility = parseUtility(firstToken.value);
+      utility = parseUtility(firstToken.value, ctx);
       const parsed = parseModifier(secondToken.value);
       if (parsed) modifiers.push(parsed);
     } else {
       const parsed = parseModifier(firstToken.value);
       if (parsed) modifiers.push(parsed);
-      utility = parseUtility(secondToken.value);
+      utility = parseUtility(secondToken.value, ctx);
     }
   } else {
-    const isFirstUtility = isUtilityPrefix(tokens[0].value);
+    const isFirstUtility = isUtilityPrefix(tokens[0].value, ctx);
     if (isFirstUtility) {
-      utility = parseUtility(tokens[0].value);
+      utility = parseUtility(tokens[0].value, ctx);
       for (let i = 1; i < tokens.length; i++) {
         const parsed = parseModifier(tokens[i].value);
         if (parsed) modifiers.push(parsed);
@@ -422,7 +464,7 @@ function parseTokens(tokens) {
         const parsed = parseModifier(tokens[i].value);
         if (parsed) modifiers.push(parsed);
       }
-      utility = parseUtility(tokens[tokens.length - 1].value);
+      utility = parseUtility(tokens[tokens.length - 1].value, ctx);
     }
   }
   return { modifiers, utility };
@@ -442,7 +484,7 @@ function parseModifier(value) {
 function nameSort(a, b) {
   return b.name.length - a.name.length;
 }
-function parseUtility(value) {
+function parseUtility(value, ctx) {
   let prefix = "";
   let utilityValue = "";
   let arbitrary = false;
@@ -469,8 +511,7 @@ function parseUtility(value) {
     utilityValue = utilityValue.replace(/\)$/, "");
     customProperty = true;
   } else {
-    const utilities = getUtility();
-    const sortedUtilities = utilities.sort(nameSort);
+    const sortedUtilities = [...getUtility(ctx)].sort(nameSort);
     let matchedUtility = sortedUtilities.find((p) => value === p.name);
     if (matchedUtility) {
       prefix = matchedUtility.name;
@@ -681,7 +722,7 @@ ${node.nodes.map((node2) => {
   }).join("\n");
   return result;
 }
-const failureCache = /* @__PURE__ */ new Map();
+const failureCache = /* @__PURE__ */ new Set();
 function collectDeclPaths(nodes = [], path = []) {
   let result = [];
   for (const node of nodes) {
@@ -845,32 +886,29 @@ function extractAtRootNodes(nodes, parent, atRootNodes = []) {
   }
 }
 function parseClassToAst(fullClassName, ctx) {
-  if (failureCache.has(fullClassName)) {
+  const state = getContextState(ctx);
+  const failures = state?.failures || failureCache;
+  const cache = state?.astCache || astCache;
+  if (failures.has(fullClassName)) {
     return [];
   }
-  const contextHash = JSON.stringify({
-    darkMode: ctx.config("darkMode"),
-    darkModeSelector: ctx.config("darkModeSelector"),
-    theme: ctx.theme
-  });
-  const cacheKey = `${fullClassName}:${contextHash}`;
-  if (astCache.has(cacheKey)) {
-    return astCache.get(cacheKey);
+  if (cache.has(fullClassName)) {
+    return cache.get(fullClassName);
   }
-  const { modifiers, utility } = parseClassName(fullClassName);
+  const { modifiers, utility } = parseClassName(fullClassName, ctx);
   if (!utility) {
     console.warn(`[BAROCSS] Invalid class name format: "${fullClassName}"`);
-    failureCache.set(fullClassName, true);
+    failures.add(fullClassName);
     return [];
   }
-  const utilReg = getUtility().find((u) => {
+  const utilReg = getUtility(ctx).find((u) => {
     const fullClassName2 = utility.value ? `${utility.prefix}-${utility.value}` : utility.prefix;
     return u.match(fullClassName2);
   });
   if (!utilReg) {
     const utilityName = utility.value ? `${utility.prefix}-${utility.value}` : utility.prefix;
     console.warn(`[BAROCSS] Unknown utility class: "${utilityName}" in "${fullClassName}"`);
-    failureCache.set(fullClassName, true);
+    failures.add(fullClassName);
     return [];
   }
   let value = utility.value;
@@ -880,10 +918,11 @@ function parseClassToAst(fullClassName, ctx) {
   const selector = "&";
   for (let i = 0; i < modifiers.length; i++) {
     const variant = modifiers[i];
-    const plugin = getModifier().find((p) => p.match(variant.type, ctx));
+    const plugin = getModifier(ctx).find((p) => p.match(variant.type, ctx));
     if (!plugin) {
       console.warn(`[BAROCSS] Unknown variant: "${variant.type}" in "${fullClassName}"`);
-      continue;
+      failures.add(fullClassName);
+      return [];
     }
     if (plugin.wrap) {
       const items = plugin.wrap(variant, ctx);
@@ -891,7 +930,6 @@ function parseClassToAst(fullClassName, ctx) {
         type: "wrap",
         items
       });
-      continue;
     }
     if (plugin.modifySelector) {
       const result = plugin.modifySelector({
@@ -902,9 +940,10 @@ function parseClassToAst(fullClassName, ctx) {
         variantChain: modifiers,
         index: i
       });
+      if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) continue;
       if (typeof result === "string" && result.includes("&")) {
         wrappers.push({ type: "rule", selector: result });
-      } else if (typeof result === "object" && result.selector) {
+      } else if (typeof result === "object" && !Array.isArray(result) && result.selector) {
         const wrappingType = result.wrappingType || "rule";
         wrappers.push({
           type: wrappingType,
@@ -928,10 +967,7 @@ function parseClassToAst(fullClassName, ctx) {
   for (let i = wrappers.length - 1; i >= 0; i--) {
     const wrap = wrappers[i];
     if (wrap.type === "wrap") {
-      ast = wrap.items.map((item) => ({
-        ...item,
-        nodes: Array.isArray(ast) ? ast : [ast]
-      }));
+      ast = wrap.items.map((item) => item.type === "rule" || item.type === "style-rule" || item.type === "at-rule" || item.type === "at-root" ? { ...item, nodes: [...item.nodes || [], ...ast] } : item);
     } else if (wrap.type === "style-rule") {
       ast = [
         {
@@ -965,18 +1001,28 @@ function parseClassToAst(fullClassName, ctx) {
   const atRootNodes = [];
   extractAtRootNodes(ast, void 0, atRootNodes);
   ast = [...atRootNodes, ...ast].filter(Boolean);
-  astCache.set(cacheKey, ast);
+  cache.set(fullClassName, ast);
   return ast;
 }
+function clearAstCache(ctx) {
+  if (ctx) {
+    clearContextCaches(ctx);
+  } else {
+    clearAllCaches();
+    failureCache.clear();
+  }
+}
 function generateCssRules(classList, ctx, opts) {
-  const options = {
-    minify: opts?.minify
-  };
   return classList.split(/\s+/).filter((cls) => {
     if (!cls) return false;
     return true;
   }).map((cls) => {
     const ast = parseClassToAst(cls, ctx);
+    const parsedResult = (getContextState(ctx)?.parseResultCache || parseResultCache).get(cls);
+    const options = {
+      minify: opts?.minify,
+      important: parsedResult?.utility?.important ?? false
+    };
     const cleanAst = optimizeAst(ast);
     const allAtRootNodes = cleanAst.filter(
       (node) => node.type === "at-root" && !node.source
@@ -1090,7 +1136,7 @@ class IncrementalParser {
       return null;
     }
     try {
-      const parseResult = parseClassName(className);
+      const parseResult = parseClassName(className, this.ctx);
       if (!parseResult.utility) {
         return null;
       }
@@ -1223,7 +1269,7 @@ class IncrementalParser {
       processedClasses: this.processedClasses.size,
       pendingClasses: this.pendingClasses.size,
       cacheStats: {
-        ast: astCache.getStats(),
+        ast: (getContextState(this.ctx)?.astCache || astCache).getStats(),
         css: {}
         // No CSS cache, so return empty object
       }
@@ -1879,18 +1925,6 @@ const defaultTheme = {
   animationVars,
   blur
 };
-function normalizePrefix(prefix) {
-  let p = prefix.trim();
-  if (!p.startsWith("--")) p = `--${p}`;
-  if (!p.endsWith("-")) p = `${p}-`;
-  return p;
-}
-function setVarPrefix(prefix) {
-  if (typeof prefix !== "string" || prefix.trim() === "") {
-    return;
-  }
-  normalizePrefix(prefix);
-}
 function escapeKey(key) {
   return key.replace(".", "\\.");
 }
@@ -2793,7 +2827,7 @@ function deepMerge(base, override) {
   }
   return result;
 }
-let staticInProgress;
+const themeLookupsInProgress = /* @__PURE__ */ new WeakMap();
 function themeGetter(themeObj, ...path) {
   const theme = (...args) => themeGetter(themeObj, ...args);
   let keys = [];
@@ -2813,26 +2847,28 @@ function themeGetter(themeObj, ...path) {
     }
   }
   if (keys.length === 0) return void 0;
-  staticInProgress = staticInProgress || /* @__PURE__ */ new Set();
-  const pathKey = keys.join(".");
-  if (staticInProgress?.has(pathKey)) return void 0;
-  staticInProgress?.add(pathKey);
-  let value = themeObj[keys[0]];
-  if (typeof value === "function") {
-    value = value(theme);
+  let inProgress = themeLookupsInProgress.get(themeObj);
+  if (!inProgress) {
+    inProgress = /* @__PURE__ */ new Set();
+    themeLookupsInProgress.set(themeObj, inProgress);
   }
-  for (let i = 1; i < keys.length; i++) {
-    if (value == null) {
-      staticInProgress?.delete(pathKey);
-      return void 0;
+  const pathKey = keys.join(".");
+  if (inProgress.has(pathKey)) return void 0;
+  inProgress.add(pathKey);
+  try {
+    let value = themeObj[keys[0]];
+    if (typeof value === "function") {
+      value = value(theme);
     }
-    value = value[keys[i]];
-  }
-  staticInProgress?.delete(pathKey);
-  if (typeof value === "function") {
-    return void 0;
+    for (let i = 1; i < keys.length; i++) {
+      if (value == null) return void 0;
+      value = value[keys[i]];
+    }
+    if (typeof value === "function") return void 0;
+    return value;
+  } finally {
+    inProgress.delete(pathKey);
   }
-  return value;
 }
 function configGetter(config, ...path) {
   let keys = [];
@@ -2880,11 +2916,7 @@ function createContext(configObj) {
     ],
     ...configObj
   };
-  setVarPrefix(configWithDefaults.cssVarPrefix || "--bcss-");
   const themeObj = resolveTheme(configWithDefaults);
-  if (configObj.clearCacheOnContextChange !== false) {
-    clearAllCaches();
-  }
   const ctx = {
     hasPreset: (category, preset) => {
       const result = hasPreset(themeObj, category, preset);
@@ -2918,11 +2950,13 @@ function createContext(configObj) {
           ...values
         };
       } else ;
+      clearContextCaches(ctx);
     },
     getPreflightCSS: (level = true) => {
       return getPreflightCSS(level);
     }
   };
+  initializeContextState(ctx, getUtility(), getModifier());
   return ctx;
 }
 function parseFraction(input) {
@@ -4262,7 +4296,7 @@ functionalUtility({
     ["--baro-ring-inset", "inset"],
     ["--baro-ring-offset-width", "0px"],
     ["--baro-ring-offset-color", "#fff"],
-    ["--baro-inset-ring-color", "rgb(59 130 246 / 0.5)"],
+    ["--baro-inset-ring-color", "currentcolor"],
     [
       "--baro-inset-ring-shadow",
       `var(--baro-ring-inset) 0 0 0 calc(${px} + var(--baro-ring-offset-width)) var(--baro-inset-ring-color, currentcolor)`
@@ -4270,7 +4304,7 @@ functionalUtility({
     ["--baro-ring-offset-shadow", `0 0 #0000`],
     [
       "box-shadow",
-      "var(--baro-inset-shadow), var(--baro-inset-ring-shadow), var(--baro-ring-offset-shadow), var(--baro-ring-shadow), var(--baro-shadow)"
+      "var(--baro-inset-shadow, 0 0 #0000), var(--baro-inset-ring-shadow), var(--baro-ring-offset-shadow, 0 0 #0000), var(--baro-ring-shadow, 0 0 #0000), var(--baro-shadow, 0 0 #0000)"
     ]
   ]);
 });
@@ -4588,6 +4622,18 @@ functionalUtility({
   description: "mask-size utility (static, arbitrary, custom property supported)",
   category: "effects"
 });
+functionalUtility({
+  name: "mask-linear-from",
+  handleBareValue: ({ value }) => /^(?:100|[1-9]?\d)%$/.test(value) ? value : null,
+  handle: (value) => [
+    decl("mask-image", "var(--tw-mask-linear), var(--tw-mask-radial, linear-gradient(#fff, #fff)), var(--tw-mask-conic, linear-gradient(#fff, #fff))"),
+    decl("mask-composite", "intersect"),
+    decl("--tw-mask-linear-stops", "var(--tw-mask-linear-position, 0deg), var(--tw-mask-linear-from-color, black) var(--tw-mask-linear-from-position, 0%), var(--tw-mask-linear-to-color, transparent) var(--tw-mask-linear-to-position, 100%)"),
+    decl("--tw-mask-linear", "linear-gradient(var(--tw-mask-linear-stops))"),
+    decl("--tw-mask-linear-from-position", value)
+  ],
+  category: "effects"
+});
 functionalUtility({
   name: "mask",
   supportsArbitrary: true,
@@ -7378,7 +7424,11 @@ functionalUtility({
 });
 staticUtility("forced-color-adjust-auto", [["forced-color-adjust", "auto"]], { category: "accessibility" });
 staticUtility("forced-color-adjust-none", [["forced-color-adjust", "none"]], { category: "accessibility" });
-staticModifier("hover", ["&:hover"], { order: 50, source: "pseudo" });
+staticModifier("hover", ["&:hover"], {
+  order: 50,
+  source: "pseudo",
+  wrap: () => [atRule("media", "(hover: hover)", [])]
+});
 staticModifier("focus", ["&:focus"], { order: 50, source: "pseudo" });
 staticModifier("active", ["&:active"], { order: 50, source: "pseudo" });
 staticModifier("visited", ["&:visited"], { order: 50, source: "pseudo" });
@@ -8258,6 +8308,9 @@ class StylePartitionManager {
   getCategoryPartition(category) {
     return this.categoryPartitions.get(category);
   }
+  hasDetachedPartitions() {
+    return [...this.partitions, ...this.categoryPartitions.values()].some((partition) => !partition.styleElement.isConnected);
+  }
   /**
    * Escape CSS rule text
    * - Properly escape special characters
@@ -8404,6 +8457,7 @@ class StylePartitionManager {
       }
     });
     this.partitions = [];
+    this.categoryPartitions.clear();
     this.partitionCounter = 0;
     this.classToPartitionMap.clear();
     this.classToCategoryPartitionMap.clear();
@@ -8429,10 +8483,12 @@ class ChangeDetector {
    */
   constructor(incrementalParser, BrowserRuntime2) {
     this.observer = null;
-    this.processedElements = /* @__PURE__ */ new WeakSet();
     this.incrementalParser = incrementalParser;
     this.BrowserRuntime = BrowserRuntime2;
   }
+  setParser(parser) {
+    this.incrementalParser = parser;
+  }
   /**
    * Starts observing DOM changes for new CSS classes
    * 
@@ -8472,7 +8528,7 @@ class ChangeDetector {
         }
         if (mutation.type === "childList") {
           mutation.addedNodes.forEach((node) => {
-            if (node instanceof HTMLElement) {
+            if (node instanceof Element) {
               this.processElement(node, newClasses);
               node.querySelectorAll("[class]").forEach((el) => {
                 this.processElement(el, newClasses);
@@ -8537,17 +8593,14 @@ class ChangeDetector {
    * 
    * This method is called for each element discovered during DOM mutations.
    * It:
-   * - Checks if the element has already been processed
    * - Extracts all class names from the element's className
    * - Filters out already processed classes
    * - Adds new classes to the collection for batch processing
-   * - Marks the element as processed to avoid duplicates
    * 
    * @param element - The HTML element to process
    * @param newClasses - Set to collect newly discovered class names
    */
   processElement(element, newClasses) {
-    if (this.processedElements.has(element)) return;
     if (element.className) {
       const classes = normalizeClassNameList(element.className);
       classes.forEach((cls) => {
@@ -8556,7 +8609,6 @@ class ChangeDetector {
         }
       });
     }
-    this.processedElements.add(element);
   }
   /**
    * Stops observing DOM changes and cleans up resources
@@ -8653,11 +8705,19 @@ class BrowserRuntime {
    * Public method to apply parser results, update internal caches, and inject CSS
    */
   applyParseResults(results, _opts) {
+    if (this.isDestroyed) return;
+    if (this.getInsertionPoint().isConnected && this.stylePartitionManager.hasDetachedPartitions()) {
+      const existingResults = Array.from(this.cache.values());
+      this.reset();
+      results = [...existingResults, ...results];
+      results.forEach((result) => this.incrementalParser.markProcessed(result.cls));
+    }
     const cssRules = [];
     const rootCssRules = [];
     for (const result of results) {
       if (result.css && Array.isArray(result.cssList)) {
         cssRules.push(result);
+        this.cache.set(result.cls, result);
       }
       if (result.rootCss && Array.isArray(result.rootCssList)) {
         for (const rootCss of result.rootCssList) {
@@ -8708,46 +8768,64 @@ class BrowserRuntime {
    * Get comprehensive cache statistics
    */
   getCacheStats() {
+    const incremental = this.incrementalParser.getStats();
     return {
       runtime: {
         cachedClasses: this.cache.size,
         rootCacheSize: this.rootCache.size
       },
-      ast: astCache.getStats(),
-      incremental: this.incrementalParser.getStats()
+      ast: incremental.cacheStats.ast,
+      incremental
     };
   }
   /**
    * Clear all caches (useful for debugging or memory management)
    */
   clearCaches() {
+    if (this.isDestroyed) return;
     this.cache.clear();
     this.rootCache.clear();
-    astCache.clear();
+    clearAstCache(this.context);
     this.incrementalParser.clearProcessed();
     this.stylePartitionManager.cleanup();
+    this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`);
+    this.injectPreflightCSS();
+    this.ensureCssVars();
   }
   reset() {
+    if (this.isDestroyed) return;
     this.cache.clear();
     this.rootCache.clear();
+    this.incrementalParser.clearProcessed();
     this.stylePartitionManager.cleanup();
+    this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`);
+    this.injectPreflightCSS();
+    this.ensureCssVars();
   }
   updateConfig(newConfig) {
+    if (this.isDestroyed) return;
+    const existingClasses = Array.from(this.cache.keys());
     this.options.config = newConfig;
     this.context = createContext(newConfig);
-    const existingClasses = Array.from(this.cache.keys());
+    this.incrementalParser = new IncrementalParser(this.context);
+    this.changeDetector.setParser(this.incrementalParser);
     this.reset();
     if (existingClasses.length > 0) {
       this.addClass(existingClasses);
     }
   }
   removeClass(classes) {
-    const classList = this.normalizeClasses(classes);
-    for (const cls of classList) {
-      this.cache.delete(cls);
-    }
+    if (this.isDestroyed) return;
+    const classList = new Set(this.normalizeClasses(classes));
+    const retainedResults = Array.from(this.cache.values()).filter((result) => !classList.has(result.cls));
+    if (retainedResults.length === this.cache.size) return;
+    this.reset();
+    retainedResults.forEach((result) => this.incrementalParser.markProcessed(result.cls));
+    this.applyParseResults(retainedResults);
   }
   destroy() {
+    if (this.isDestroyed) return;
+    this.changeDetector.disconnect();
     this.stylePartitionManager.cleanup();
     this.cache.clear();
     this.rootCache.clear();