@barocss/kit 0.5.0 → 0.7.0

package/dist/index.d.ts

@@ -181,6 +181,8 @@ export declare type AstNode = {
 
  export declare function comment(text: string, source?: string): AstNode;
 
+ export declare function compareKeys(a: RuleKey, b: RuleKey): number;
+
  export declare interface Config {
      prefix?: string;
      cssVarPrefix?: string;
@@ -217,6 +219,15 @@ export declare type AstNode = {
       * clear caches that belong to another context.
       */
      clearCacheOnContextChange?: boolean;
+     /**
+      * #287: static custom utilities, the runtime mirror of a stylesheet's static `@utility name { ... }`.
+      * Name → declarations (property → value; CSS custom properties allowed). Each one is registered on
+      * this context only; variants and `!` apply as usual. A name equal to a built-in extends it like
+      * `@utility` in Tailwind 4: the built-in declarations are emitted first, then the custom ones (a later
+      * duplicate property wins). An entry with an invalid name, property or value is skipped whole.
+      * @example utilities: { 'max-w-app': { 'max-width': '72rem', 'margin-inline': 'auto' } }
+      */
+     utilities?: CustomUtilities;
      [key: string]: unknown;
  }
 
@@ -235,6 +246,12 @@ export declare type AstNode = {
 
  export declare function createContext(configObj: Config): Context;
 
+ /** #287: static custom utilities by class name. */
+ export declare type CustomUtilities = Record<string, CustomUtilityDeclarations>;
+
+ /** #287: declarations of one static custom utility (property → value). */
+ export declare type CustomUtilityDeclarations = Record<string, string | number>;
+
  export declare function decl(prop: string, value: string | [string, string][], source?: string): AstNode;
 
  export declare type DeclPath = PathNode[];
@@ -268,20 +285,6 @@ export declare type AstNode = {
 
  export declare function functionalModifier(match: ModifierRegistration['match'], modifySelector: ModifierRegistration['modifySelector'], wrap?: ModifierRegistration['wrap'], options?: Partial<ModifierRegistration>, ctx?: Context): void;
 
- /**
-  * functionalUtility: A helper that registers dynamic utilities (theme, arbitrary, custom, negative, fraction, etc.) directly
-  *
-  * Example:
-  *   functionalUtility({
-  *     name: 'z',
-  *     supportsNegative: true,
-  *     themeKeys: ['--z-index'],
-  *     handleBareValue: ({ value }) => isPositiveInteger(value) ? value : null,
-  *     handle: (value) => [decl('z-index', value)],
-  *     description: 'z-index utility',
-  *     category: 'layout',
-  *   });
-  */
  export declare function functionalUtility(opts: FunctionalUtilityOptions, ctx?: Context): void;
 
  export declare type FunctionalUtilityExtra = {
@@ -420,6 +423,12 @@ export declare type AstNode = {
       * handleNegativeBareValue: ({ value }) => isPositiveInteger(value) ? value : null,
       * ```
       */
+     /**
+      * #261: the utility uses the spacing scale, so a named `theme.spacing` key (`p-gutter`) resolves to
+      * `var(--spacing-<key>)` (negative: `calc(var(--spacing-<key>) * -1)`), as in Tailwind 4. Only tried
+      * after the bare-value handler rejects the value, so built-in keywords keep precedence.
+      */
+     spacingKeys?: boolean;
      handleNegativeBareValue?: (args: {
          value: string;
          ctx: Context;
@@ -552,6 +561,13 @@ export declare type AstNode = {
 
    export declare function getUtility(ctx?: Context): UtilityRegistration[];
 
+   /**
+    * #273: true when an emitted selector or at-rule prelude contains a comment opener or closer outside a CSS escape.
+    * Backslash-escape pairs are skipped, so an escaped `\/` or `\*` from a class name never counts. Used by the
+    * serializer on the final, composed string, where adjacent pieces that were each safe alone can join into one.
+    */
+   export declare function hasCommentDelimiter(text: string): boolean;
+
    /**
     * #224: true when a utility value (or a whole utility token) cannot change the structure of the declaration block it
     * is pasted into. Rejects, outside quotes: `{`, `}`, `;`, unbalanced or mismatched ()/[], and a quote left open.
@@ -771,6 +787,13 @@ export declare type AstNode = {
         * @param cls - The CSS class name to mark as processed
         */
        markProcessed(cls: string): void;
+       /**
+        * 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: string): void;
        /**
         * Process classes synchronously and update BrowserRuntime cache
         * This method is used by ChangeDetector for scan operations
@@ -973,6 +996,27 @@ export declare type AstNode = {
 
     export declare function rule(selector: string, nodes: AstNode[], source?: string): AstNode;
 
+    /**
+     * Tailwind-compatible cascade order for runtime-inserted rules (#254); shared by @barocss/server (#267).
+     *
+     * The runtime discovers classes in DOM order, so without sorting `lg:px-8`
+     * seen before `sm:px-6` would land earlier and lose at >= 1024px. Each rule
+     * gets a sort key derived from its leading `@media` / `@container` preludes:
+     *
+     *   0  base, state media (hover), motion/contrast, unknown
+     *   1  max-* breakpoints        (larger width first)
+     *   2  min-* breakpoints        (smaller width first)
+     *   3  @max-* container queries (larger width first)
+     *   4  @min-* container queries (smaller width first)
+     *   5  orientation, dark (prefers-color-scheme), print, forced-colors
+     *
+     * Nested at-rules (e.g. `sm:dark:`) contribute one key pair per level, so
+     * `sm:` < `sm:dark:` < `md:`. Equal keys keep discovery order.
+     */
+    export declare type RuleKey = number[];
+
+    export declare function ruleSortKey(rule: string): RuleKey;
+
     /** Internal hook for caches owned by contexts. */
     export declare function setContextCacheReset(reset: () => void): void;
 
@@ -1087,6 +1131,9 @@ export declare type AstNode = {
      */
     export declare function tokenize(className: string): Token[];
 
+    /** Index after the last key <= `key` (stable upper bound) in sorted `keys`. */
+    export declare function upperBound(keys: RuleKey[], key: RuleKey): number;
+
     /**
      * Utility cache management
      */

package/dist/index.js

@@ -337,6 +337,11 @@ function staticUtility(name, decls, opts, ctx) {
     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({
     name: opts.name,
@@ -405,14 +410,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 [];
       }
@@ -547,14 +555,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);
@@ -564,6 +581,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;
@@ -623,6 +644,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);
@@ -770,6 +803,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 = "") {
@@ -833,6 +867,7 @@ function astToCss(ast, baseSelector, opts, _indent = "") {
             }).join(", ");
           }
         }
+        if (!isSafePrelude(selector)) return "";
         if (minify) {
           const css = `${indent}${selector}{${astToCss(
             node.nodes,
@@ -857,6 +892,7 @@ ${astToCss(
         }
       }
       case "style-rule": {
+        if (!isSafePrelude(node.selector)) return "";
         if (minify) {
           const css = `${indent}${node.selector} {${astToCss(
             node.nodes,
@@ -881,6 +917,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,
@@ -934,7 +971,7 @@ function rootToCss(nodes, opts) {
       if (isSafeDecl(node.prop, node.value)) {
         list.push(minify ? `${node.prop}:${node.value};` : `${node.prop}: ${node.value};`);
       }
-    } else if (node.type === "at-rule") {
+    } else if (node.type === "at-rule" && isSafePrelude(node.name) && isSafePrelude(node.params)) {
       if (minify) {
         const body = node.nodes.filter((child) => child.type === "decl" && isSafeDecl(child.prop, child.value)).map((child) => child.type === "decl" ? `${child.prop}:${child.value};` : "").join("");
         list.push(`@${node.name} ${node.params}{${body}}`);
@@ -1071,24 +1108,41 @@ function animationToCssVars(animations) {
   }
   return result;
 }
-function keyframesToCss(keyframes) {
-  if (!keyframes) return "";
-  let css = "";
-  for (const name in keyframes) {
-    const frames = keyframes[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 css;
+  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 [...names].map((n) => keyframesBlock(n, all[n])).filter(Boolean);
 }
 function transitionTimingFunctionToCssVars(transition) {
   const result = {};
@@ -1156,7 +1210,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),
@@ -1165,8 +1219,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"]);
@@ -1521,7 +1580,11 @@ function generateCss(classList, ctx, opts) {
     }
     return result;
   }).join(opts?.minify ? "" : "\n");
-  const rootRules = [...new Set(allAtRootNodes.filter((node) => node.type === "at-rule").map((node) => rootToCss([node], { minify: opts?.minify })))];
+  const rootRules = [.../* @__PURE__ */ new Set([
+    ...allAtRootNodes.filter((node) => node.type === "at-rule").map((node) => rootToCss([node], { minify: opts?.minify })),
+    // #274: the @keyframes the class rules reference, once per sheet.
+    ...referencedKeyframes(results, ctx)
+  ])];
   const rootDeclarations = [...new Set(allAtRootNodes.filter((node) => node.type === "decl").map((node) => rootToCss([node], { minify: opts?.minify })).filter((decl2) => decl2 !== ""))];
   const rootCss = [
     ...rootRules,
@@ -1579,6 +1642,7 @@ function generateCssRules(classList, ctx, opts) {
       const css = rootToCss([node]);
       rootCssList.push(css);
     }
+    rootCssList.push(...referencedKeyframes(cssList.join("\n"), ctx));
     return {
       cls,
       ast: allCleanAst,
@@ -1841,6 +1905,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
@@ -1860,6 +1933,48 @@ class IncrementalParser {
     return Array.from(this.processedClasses);
   }
 }
+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, raw2] of Object.entries(decls)) {
+    if (typeof raw2 !== "string" && typeof raw2 !== "number") return null;
+    const value = String(raw2).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 */
 /* ================================= */
@@ -2645,7 +2760,6 @@ function getPreflightCSS(level = true) {
   return "";
 }
 const defaultConfig = {
-  prefix: "barocss-",
   darkMode: "media"
   // same as default
 };
@@ -2747,9 +2861,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) {
@@ -2803,6 +2915,7 @@ function createContext(configObj) {
     }
   };
   initializeContextState(ctx, getUtility(), getModifier());
+  registerCustomUtilities(ctx, configObj.utilities);
   return ctx;
 }
 function jsonToAst(input, ctx) {
@@ -3387,6 +3500,7 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
 ].forEach(([name, prop]) => {
   functionalUtility({
     name: `scroll-${name}`,
+    spacingKeys: true,
     prop,
     supportsArbitrary: true,
     supportsCustomProperty: true,
@@ -3414,6 +3528,7 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
 ].forEach(([name, prop]) => {
   functionalUtility({
     name: `scroll-${name}`,
+    spacingKeys: true,
     prop,
     supportsArbitrary: true,
     supportsCustomProperty: true,
@@ -3572,10 +3687,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})`)];
     }
@@ -4947,6 +5064,7 @@ staticUtility("sticky", [["position", "sticky"]], { category: "layout" });
   staticUtility(`-${name}-px`, [[prop, "-1px"]], { category: "layout" });
   functionalUtility({
     name,
+    spacingKeys: true,
     prop,
     supportsNegative: true,
     supportsFraction: true,
@@ -4977,6 +5095,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]
@@ -4993,6 +5112,7 @@ functionalUtility({
 });
 functionalUtility({
   name: "gap-y",
+  spacingKeys: true,
   prop: "row-gap",
   supportsArbitrary: true,
   // gap-y-[10vw]
@@ -5009,6 +5129,7 @@ functionalUtility({
 });
 functionalUtility({
   name: "gap",
+  spacingKeys: true,
   prop: "gap",
   supportsArbitrary: true,
   // gap-[10vw]
@@ -5526,6 +5647,7 @@ functionalUtility({
 ].forEach(([name, prop]) => {
   staticUtility(`${name}-px`, [[prop, "1px"]], { category: "spacing" });
   functionalUtility({
+    spacingKeys: true,
     name,
     prop,
     supportsArbitrary: true,
@@ -5550,6 +5672,7 @@ functionalUtility({
   staticUtility(`${name}-px`, [[prop, "1px"]], { category: "spacing" });
   staticUtility(`-${name}-px`, [[prop, "-1px"]], { category: "spacing" });
   functionalUtility({
+    spacingKeys: true,
     name,
     prop,
     supportsNegative: true,
@@ -5580,6 +5703,7 @@ const SPACE_SELECTOR = ":where(& > :not(:last-child))";
     () => rule(SPACE_SELECTOR, [decl(rev, "1")])
   ], { category: "spacing" });
   functionalUtility({
+    spacingKeys: true,
     name,
     supportsNegative: true,
     supportsArbitrary: true,
@@ -5629,6 +5753,7 @@ const SPACE_SELECTOR = ":where(& > :not(:last-child))";
   staticUtility(name, [["width", value]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "w",
   prop: "width",
   supportsArbitrary: true,
@@ -5661,6 +5786,7 @@ functionalUtility({
   staticUtility(name, [["width", w], ["height", h]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "size",
   supportsArbitrary: true,
   supportsCustomProperty: true,
@@ -5700,6 +5826,7 @@ functionalUtility({
   staticUtility(name, [["height", value]]);
 });
 functionalUtility({
+  spacingKeys: true,
   name: "h",
   prop: "height",
   supportsArbitrary: true,
@@ -5730,6 +5857,7 @@ functionalUtility({
   staticUtility(name, [["min-height", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "min-h",
   prop: "min-height",
   supportsArbitrary: true,
@@ -5760,6 +5888,7 @@ functionalUtility({
   staticUtility(name, [["max-height", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "max-h",
   prop: "max-height",
   supportsArbitrary: true,
@@ -5806,6 +5935,7 @@ functionalUtility({
   staticUtility(name, [["min-width", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "min-w",
   prop: "min-width",
   supportsArbitrary: true,
@@ -5841,6 +5971,7 @@ functionalUtility({
   staticUtility(name, [["max-width", value]], { category: "sizing" });
 });
 functionalUtility({
+  spacingKeys: true,
   name: "max-w",
   prop: "max-width",
   supportsArbitrary: true,
@@ -8264,6 +8395,51 @@ functionalModifier(
   },
   void 0
 );
+const LEADING_AT = /^\s*@(media|container)\s+([^{]*)\{/;
+const LATE_MEDIA = /prefers-color-scheme|\bprint\b|forced-colors|orientation/;
+const MIN_W = /(?:min-width\s*:\s*|width\s*>=?\s*)([\d.]+)(px|rem|em)?/;
+const MAX_W = /(?:max-width\s*:\s*|width\s*<=?\s*)([\d.]+)(px|rem|em)?/;
+function toPx(n, unit) {
+  const v = parseFloat(n);
+  return unit === "rem" || unit === "em" ? v * 16 : v;
+}
+function preludeKey(kind, prelude) {
+  const container = kind === "container";
+  const min = MIN_W.exec(prelude);
+  if (min) return [container ? 4 : 2, toPx(min[1], min[2])];
+  const max = MAX_W.exec(prelude);
+  if (max) return [container ? 3 : 1, -toPx(max[1], max[2])];
+  if (!container && LATE_MEDIA.test(prelude)) return [5, 0];
+  return [0, 0];
+}
+function ruleSortKey(rule2) {
+  const key = [];
+  let rest = rule2;
+  let m;
+  while (m = LEADING_AT.exec(rest)) {
+    const [g, v] = preludeKey(m[1], m[2]);
+    key.push(g, v);
+    rest = rest.slice(m[0].length);
+  }
+  return key;
+}
+function compareKeys(a, b) {
+  const n = Math.min(a.length, b.length);
+  for (let i = 0; i < n; i++) {
+    if (a[i] !== b[i]) return a[i] - b[i];
+  }
+  return a.length - b.length;
+}
+function upperBound(keys, key) {
+  let lo = 0;
+  let hi = keys.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (compareKeys(keys[mid], key) <= 0) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
 export {
   AstCache,
   IncrementalParser,
@@ -8279,6 +8455,7 @@ export {
   clearAstCache,
   collectDeclPaths,
   comment,
+  compareKeys,
   configGetter,
   createContext,
   decl,
@@ -8296,6 +8473,7 @@ export {
   getModifier,
   getPreflightCSS,
   getUtility,
+  hasCommentDelimiter,
   hasCommentToken,
   hasPreset,
   isDebug,
@@ -8317,6 +8495,7 @@ export {
   resolveTheme,
   rootToCss,
   rule,
+  ruleSortKey,
   setContextCacheReset,
   setDebug,
   staticModifier,
@@ -8325,6 +8504,7 @@ export {
   themeGetter,
   themeToCssVars,
   tokenize,
+  upperBound,
   utilityCache
 };
 //# sourceMappingURL=index.js.map