@barocss/kit 0.6.0 → 0.7.0

package/dist/index.d.ts

@@ -219,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;
  }
 
@@ -237,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[];

package/dist/index.js

@@ -555,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);
@@ -572,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;
@@ -1095,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 `@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 = {};
@@ -1180,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),
@@ -1550,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,
@@ -1608,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,
@@ -1898,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 */
 /* ================================= */
@@ -2683,7 +2760,6 @@ function getPreflightCSS(level = true) {
   return "";
 }
 const defaultConfig = {
-  prefix: "barocss-",
   darkMode: "media"
   // same as default
 };
@@ -2785,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) {
@@ -2841,6 +2915,7 @@ function createContext(configObj) {
     }
   };
   initializeContextState(ctx, getUtility(), getModifier());
+  registerCustomUtilities(ctx, configObj.utilities);
   return ctx;
 }
 function jsonToAst(input, ctx) {
@@ -3612,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})`)];
     }