@tenphi/tasty 1.2.0 → 1.4.0

package/dist/hooks/useStyles.js

@@ -1,104 +1,11 @@
-import { extractLocalProperties, hasLocalProperties } from "../properties/index.js";
-import { stringifyStyles } from "../utils/styles.js";
-import { extractLocalFontFace, fontFaceContentHash, formatFontFaceRule, hasLocalFontFace } from "../font-face/index.js";
-import { extractLocalCounterStyle, formatCounterStyleRule, hasLocalCounterStyle } from "../counter-style/index.js";
-import { getConfig, getGlobalKeyframes, hasGlobalKeyframes } from "../config.js";
-import { categorizeStyleKeys } from "../chunks/definitions.js";
-import { generateChunkCacheKey } from "../chunks/cacheKey.js";
-import { renderStylesForChunk } from "../chunks/renderChunk.js";
-import { allocateClassName, counterStyle, fontFace, inject, keyframes, property } from "../injector/index.js";
-import { resolveRecipes } from "../utils/resolve-recipes.js";
-import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames } from "../keyframes/index.js";
-import { formatPropertyCSS } from "../ssr/format-property.js";
-import { collectAutoInferredProperties } from "../ssr/collect-auto-properties.js";
-import { resolveSSRCollector } from "./resolve-ssr-collector.js";
-import { TastySSRContext } from "../ssr/context.js";
-import { formatKeyframesCSS } from "../ssr/format-keyframes.js";
-import { hasKeys } from "../utils/has-keys.js";
-import { useContext, useInsertionEffect, useMemo, useRef } from "react";
+import { computeStyles } from "../compute-styles.js";
 //#region src/hooks/useStyles.ts
 /**
-* Render, cache-key, and allocate a className for a single chunk.
-* Returns a ProcessedChunk, or null if the chunk produces no CSS rules.
+* Generate CSS classes from Tasty styles.
+* Thin re-export of `computeStyles()` kept for backward compatibility.
 *
-* Always runs the pipeline and calls allocateClassName. The inject()
-* call in useInsertionEffect handles all edge cases: placeholders from
-* abandoned concurrent renders, hydration hits (ruleIndex -2), and
-* runtime cache hits (already injected). The pipeline's own LRU cache
-* makes repeated calls for identical styles cheap.
-*/
-function processChunk(styles, chunkName, styleKeys) {
-	if (styleKeys.length === 0) return null;
-	const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);
-	const renderResult = renderStylesForChunk(styles, chunkName, styleKeys, cacheKey);
-	if (renderResult.rules.length === 0) return null;
-	const { className } = allocateClassName(cacheKey);
-	return {
-		name: chunkName,
-		styleKeys,
-		cacheKey,
-		renderResult,
-		className
-	};
-}
-/**
-* Get keyframes that are actually used in styles.
-* Returns null if no keyframes are used (fast path for zero overhead).
-*
-* Optimization order:
-* 1. Check if any keyframes are defined (local or global) - if not, return null
-* 2. Extract animation names from styles - if none, return null
-* 3. Merge and filter keyframes to only used ones
-*/
-function getUsedKeyframes(styles) {
-	const hasLocal = hasLocalKeyframes(styles);
-	const hasGlobal = hasGlobalKeyframes();
-	if (!hasLocal && !hasGlobal) return null;
-	const usedNames = extractAnimationNamesFromStyles(styles);
-	if (usedNames.size === 0) return null;
-	return filterUsedKeyframes(mergeKeyframes(hasLocal ? extractLocalKeyframes(styles) : null, hasGlobal ? getGlobalKeyframes() : null), usedNames);
-}
-/**
-* Process a chunk on the SSR path: allocate via collector, render, collect CSS.
-* Returns null if the chunk produces no CSS rules.
-*/
-function processChunkSSR(collector, styles, chunkName, styleKeys) {
-	if (styleKeys.length === 0) return null;
-	const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);
-	const { className, isNewAllocation } = collector.allocateClassName(cacheKey);
-	if (isNewAllocation) {
-		const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);
-		if (renderResult.rules.length > 0) {
-			collector.collectChunk(cacheKey, className, renderResult.rules);
-			return {
-				name: chunkName,
-				styleKeys,
-				cacheKey,
-				renderResult,
-				className
-			};
-		}
-		return null;
-	}
-	return {
-		name: chunkName,
-		styleKeys,
-		cacheKey,
-		renderResult: { rules: [] },
-		className
-	};
-}
-/**
-* Hook to generate CSS classes from Tasty styles.
-* Handles style rendering, className allocation, and CSS injection.
-*
-* SSR-aware: when a ServerStyleCollector is available (via React context
-* or AsyncLocalStorage), CSS is collected during the render phase instead
-* of being injected into the DOM. useInsertionEffect does not run on the
-* server, so the collector path is the only active path during SSR.
-*
-* Uses chunking to split styles into logical groups for better caching
-* and CSS reuse across components.
+* Unlike a React hook, this is a plain function and can be called
+* from both client components and React Server Components.
 *
 * @example
 * ```tsx
@@ -114,122 +21,7 @@ function processChunkSSR(collector, styles, chunkName, styleKeys) {
 * ```
 */
 function useStyles(styles) {
-	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
-	const disposeRef = useRef([]);
-	const stylesRef = useRef({
-		key: "",
-		styles: void 0
-	});
-	const resolvedStyles = useMemo(() => {
-		if (!styles) return styles;
-		return resolveRecipes(styles);
-	}, [styles]);
-	const styleKey = useMemo(() => {
-		if (!resolvedStyles || !hasKeys(resolvedStyles)) return "";
-		return stringifyStyles(resolvedStyles);
-	}, [resolvedStyles]);
-	if (stylesRef.current.key !== styleKey) stylesRef.current = {
-		key: styleKey,
-		styles: resolvedStyles
-	};
-	const processedChunks = useMemo(() => {
-		const currentStyles = stylesRef.current.styles;
-		if (!styleKey || !currentStyles) return [];
-		const chunkMap = categorizeStyleKeys(currentStyles);
-		const chunks = [];
-		if (ssrCollector) {
-			ssrCollector.collectInternals();
-			for (const [chunkName, chunkStyleKeys] of chunkMap) {
-				const chunk = processChunkSSR(ssrCollector, currentStyles, chunkName, chunkStyleKeys);
-				if (chunk) chunks.push(chunk);
-			}
-			const usedKeyframes = getUsedKeyframes(currentStyles);
-			if (usedKeyframes) for (const [name, steps] of Object.entries(usedKeyframes)) {
-				const css = formatKeyframesCSS(name, steps);
-				ssrCollector.collectKeyframes(name, css);
-			}
-			if (hasLocalProperties(currentStyles)) {
-				const localProperties = extractLocalProperties(currentStyles);
-				if (localProperties) for (const [token, definition] of Object.entries(localProperties)) {
-					const css = formatPropertyCSS(token, definition);
-					if (css) ssrCollector.collectProperty(token, css);
-				}
-			}
-			if (hasLocalFontFace(currentStyles)) {
-				const localFontFace = extractLocalFontFace(currentStyles);
-				if (localFontFace) for (const [family, input] of Object.entries(localFontFace)) {
-					const descriptors = Array.isArray(input) ? input : [input];
-					for (const desc of descriptors) {
-						const hash = fontFaceContentHash(family, desc);
-						const css = formatFontFaceRule(family, desc);
-						ssrCollector.collectFontFace(hash, css);
-					}
-				}
-			}
-			if (hasLocalCounterStyle(currentStyles)) {
-				const localCounterStyle = extractLocalCounterStyle(currentStyles);
-				if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) {
-					const css = formatCounterStyleRule(name, descriptors);
-					ssrCollector.collectCounterStyle(name, css);
-				}
-			}
-			if (getConfig().autoPropertyTypes !== false) {
-				const allRules = chunks.flatMap((c) => c.renderResult.rules);
-				if (allRules.length > 0) collectAutoInferredProperties(allRules, ssrCollector, currentStyles);
-			}
-		} else for (const [chunkName, chunkStyleKeys] of chunkMap) {
-			const chunk = processChunk(currentStyles, chunkName, chunkStyleKeys);
-			if (chunk) chunks.push(chunk);
-		}
-		return chunks;
-	}, [styleKey]);
-	useInsertionEffect(() => {
-		disposeRef.current.forEach((dispose) => dispose?.());
-		disposeRef.current = [];
-		if (processedChunks.length === 0) return;
-		const currentStyles = stylesRef.current.styles;
-		if (currentStyles && hasLocalProperties(currentStyles)) {
-			const localProperties = extractLocalProperties(currentStyles);
-			if (localProperties) for (const [token, definition] of Object.entries(localProperties)) property(token, definition);
-		}
-		if (currentStyles && hasLocalFontFace(currentStyles)) {
-			const localFontFace = extractLocalFontFace(currentStyles);
-			if (localFontFace) for (const [family, input] of Object.entries(localFontFace)) {
-				const descriptors = Array.isArray(input) ? input : [input];
-				for (const desc of descriptors) fontFace(family, desc);
-			}
-		}
-		if (currentStyles && hasLocalCounterStyle(currentStyles)) {
-			const localCounterStyle = extractLocalCounterStyle(currentStyles);
-			if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) counterStyle(name, descriptors);
-		}
-		const usedKeyframes = currentStyles ? getUsedKeyframes(currentStyles) : null;
-		let nameMap = null;
-		if (usedKeyframes) {
-			nameMap = /* @__PURE__ */ new Map();
-			for (const [name, steps] of Object.entries(usedKeyframes)) {
-				const result = keyframes(steps, { name });
-				const injectedName = result.toString();
-				if (injectedName !== name) nameMap.set(name, injectedName);
-				disposeRef.current.push(result.dispose);
-			}
-			if (nameMap.size === 0) nameMap = null;
-		}
-		for (const chunk of processedChunks) if (chunk.renderResult.rules.length > 0) {
-			const { dispose } = inject(nameMap ? chunk.renderResult.rules.map((rule) => ({
-				...rule,
-				declarations: replaceAnimationNames(rule.declarations, nameMap)
-			})) : chunk.renderResult.rules, { cacheKey: chunk.cacheKey });
-			disposeRef.current.push(dispose);
-		}
-		return () => {
-			disposeRef.current.forEach((dispose) => dispose?.());
-			disposeRef.current = [];
-		};
-	}, [processedChunks]);
-	return { className: useMemo(() => {
-		return processedChunks.map((chunk) => chunk.className).join(" ");
-	}, [processedChunks]) };
+	return computeStyles(styles);
 }
 //#endregion
 export { useStyles };

package/dist/hooks/useStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { useContext, useInsertionEffect, useMemo, useRef } from 'react';\n\nimport {\n  categorizeStyleKeys,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from '../chunks';\nimport { getConfig, getGlobalKeyframes, hasGlobalKeyframes } from '../config';\nimport {\n  allocateClassName,\n  counterStyle,\n  fontFace,\n  inject,\n  keyframes,\n  property,\n} from '../injector';\nimport type { FontFaceDescriptors, KeyframesSteps } from '../injector/types';\nimport {\n  extractLocalCounterStyle,\n  formatCounterStyleRule,\n  hasLocalCounterStyle,\n} from '../counter-style';\nimport {\n  extractLocalFontFace,\n  fontFaceContentHash,\n  formatFontFaceRule,\n  hasLocalFontFace,\n} from '../font-face';\nimport {\n  extractAnimationNamesFromStyles,\n  extractLocalKeyframes,\n  filterUsedKeyframes,\n  hasLocalKeyframes,\n  mergeKeyframes,\n  replaceAnimationNames,\n} from '../keyframes';\nimport type { RenderResult } from '../pipeline';\nimport { extractLocalProperties, hasLocalProperties } from '../properties';\nimport { collectAutoInferredProperties } from '../ssr/collect-auto-properties';\nimport type { ServerStyleCollector } from '../ssr/collector';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\nimport { formatKeyframesCSS } from '../ssr/format-keyframes';\nimport { formatPropertyCSS } from '../ssr/format-property';\nimport type { Styles } from '../styles/types';\nimport { hasKeys } from '../utils/has-keys';\nimport { resolveRecipes } from '../utils/resolve-recipes';\nimport { stringifyStyles } from '../utils/styles';\n\n/**\n * Tasty styles object to generate CSS classes for.\n * Can be undefined or empty object for no styles.\n */\nexport type UseStylesOptions = Styles | undefined;\n\nexport interface UseStylesResult {\n  /**\n   * Generated className(s) to apply to the element.\n   * Can be empty string if no styles are provided.\n   * With chunking enabled, may contain multiple space-separated class names.\n   */\n  className: string;\n}\n\n/**\n * Information about a processed chunk\n */\ninterface ProcessedChunk {\n  name: string;\n  styleKeys: string[];\n  cacheKey: string;\n  renderResult: RenderResult;\n  className: string;\n}\n\n/**\n * Render, cache-key, and allocate a className for a single chunk.\n * Returns a ProcessedChunk, or null if the chunk produces no CSS rules.\n *\n * Always runs the pipeline and calls allocateClassName. The inject()\n * call in useInsertionEffect handles all edge cases: placeholders from\n * abandoned concurrent renders, hydration hits (ruleIndex -2), and\n * runtime cache hits (already injected). The pipeline's own LRU cache\n * makes repeated calls for identical styles cheap.\n */\nfunction processChunk(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const renderResult = renderStylesForChunk(\n    styles,\n    chunkName,\n    styleKeys,\n    cacheKey,\n  );\n  if (renderResult.rules.length === 0) return null;\n\n  const { className } = allocateClassName(cacheKey);\n\n  return { name: chunkName, styleKeys, cacheKey, renderResult, className };\n}\n\n/**\n * Get keyframes that are actually used in styles.\n * Returns null if no keyframes are used (fast path for zero overhead).\n *\n * Optimization order:\n * 1. Check if any keyframes are defined (local or global) - if not, return null\n * 2. Extract animation names from styles - if none, return null\n * 3. Merge and filter keyframes to only used ones\n */\nfunction getUsedKeyframes(\n  styles: Styles,\n): Record<string, KeyframesSteps> | null {\n  // Fast path: no keyframes defined anywhere\n  const hasLocal = hasLocalKeyframes(styles);\n  const hasGlobal = hasGlobalKeyframes();\n  if (!hasLocal && !hasGlobal) return null;\n\n  // Extract animation names from styles (not from rendered CSS - faster)\n  const usedNames = extractAnimationNamesFromStyles(styles);\n  if (usedNames.size === 0) return null;\n\n  // Merge local and global keyframes\n  const local = hasLocal ? extractLocalKeyframes(styles) : null;\n  const global = hasGlobal ? getGlobalKeyframes() : null;\n  const allKeyframes = mergeKeyframes(local, global);\n\n  // Filter to only used keyframes\n  return filterUsedKeyframes(allKeyframes, usedNames);\n}\n\n/**\n * Process a chunk on the SSR path: allocate via collector, render, collect CSS.\n * Returns null if the chunk produces no CSS rules.\n */\nfunction processChunkSSR(\n  collector: ServerStyleCollector,\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const { className, isNewAllocation } = collector.allocateClassName(cacheKey);\n\n  if (isNewAllocation) {\n    const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);\n    if (renderResult.rules.length > 0) {\n      collector.collectChunk(cacheKey, className, renderResult.rules);\n      return {\n        name: chunkName,\n        styleKeys,\n        cacheKey,\n        renderResult,\n        className,\n      };\n    }\n    return null;\n  }\n\n  return {\n    name: chunkName,\n    styleKeys,\n    cacheKey,\n    renderResult: { rules: [] },\n    className,\n  };\n}\n\n/**\n * Hook to generate CSS classes from Tasty styles.\n * Handles style rendering, className allocation, and CSS injection.\n *\n * SSR-aware: when a ServerStyleCollector is available (via React context\n * or AsyncLocalStorage), CSS is collected during the render phase instead\n * of being injected into the DOM. useInsertionEffect does not run on the\n * server, so the collector path is the only active path during SSR.\n *\n * Uses chunking to split styles into logical groups for better caching\n * and CSS reuse across components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { className } = useStyles({\n *     padding: '2x',\n *     fill: '#purple',\n *     radius: '1r',\n *   });\n *\n *   return <div className={className}>Styled content</div>;\n * }\n * ```\n */\nexport function useStyles(styles: UseStylesOptions): UseStylesResult {\n  const ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\n  // Array of dispose functions for each chunk\n  const disposeRef = useRef<(() => void)[]>([]);\n\n  // Store styles by their stringified key to avoid recomputing when only reference changes\n  const stylesRef = useRef<{ key: string; styles: Styles | undefined }>({\n    key: '',\n    styles: undefined,\n  });\n\n  // Resolve recipes before any processing (zero overhead if no recipes configured)\n  const resolvedStyles = useMemo(() => {\n    if (!styles) return styles;\n    return resolveRecipes(styles);\n  }, [styles]);\n\n  // Compute style key - this is a primitive string that captures style content\n  const styleKey = useMemo(() => {\n    if (!resolvedStyles || !hasKeys(resolvedStyles)) {\n      return '';\n    }\n    return stringifyStyles(resolvedStyles);\n  }, [resolvedStyles]);\n\n  // Update ref when styleKey changes (content actually changed)\n  if (stylesRef.current.key !== styleKey) {\n    stylesRef.current = { key: styleKey, styles: resolvedStyles };\n  }\n\n  // Process chunks: categorize, generate cache keys, render, and allocate classNames\n  // Only depends on styleKey (primitive), not styles object reference\n  const processedChunks: ProcessedChunk[] = useMemo(() => {\n    const currentStyles = stylesRef.current.styles;\n    if (!styleKey || !currentStyles) {\n      return [];\n    }\n\n    // Categorize style keys into chunks\n    const chunkMap = categorizeStyleKeys(\n      currentStyles as Record<string, unknown>,\n    );\n\n    const chunks: ProcessedChunk[] = [];\n\n    if (ssrCollector) {\n      // Ensure internal @property and :root token CSS is included\n      ssrCollector.collectInternals();\n\n      // SERVER PATH: allocate via collector, collect CSS\n      for (const [chunkName, chunkStyleKeys] of chunkMap) {\n        const chunk = processChunkSSR(\n          ssrCollector,\n          currentStyles,\n          chunkName,\n          chunkStyleKeys,\n        );\n        if (chunk) chunks.push(chunk);\n      }\n\n      // Collect keyframes on the server\n      const usedKeyframes = getUsedKeyframes(currentStyles);\n      if (usedKeyframes) {\n        for (const [name, steps] of Object.entries(usedKeyframes)) {\n          const css = formatKeyframesCSS(name, steps);\n          ssrCollector.collectKeyframes(name, css);\n        }\n      }\n\n      // Collect explicit @property rules on the server\n      if (hasLocalProperties(currentStyles)) {\n        const localProperties = extractLocalProperties(currentStyles);\n        if (localProperties) {\n          for (const [token, definition] of Object.entries(localProperties)) {\n            const css = formatPropertyCSS(token, definition);\n            if (css) {\n              ssrCollector.collectProperty(token, css);\n            }\n          }\n        }\n      }\n\n      // Collect @font-face rules on the server\n      if (hasLocalFontFace(currentStyles)) {\n        const localFontFace = extractLocalFontFace(currentStyles);\n        if (localFontFace) {\n          for (const [family, input] of Object.entries(localFontFace)) {\n            const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n              ? input\n              : [input];\n            for (const desc of descriptors) {\n              const hash = fontFaceContentHash(family, desc);\n              const css = formatFontFaceRule(family, desc);\n              ssrCollector.collectFontFace(hash, css);\n            }\n          }\n        }\n      }\n\n      // Collect @counter-style rules on the server\n      if (hasLocalCounterStyle(currentStyles)) {\n        const localCounterStyle = extractLocalCounterStyle(currentStyles);\n        if (localCounterStyle) {\n          for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n            const css = formatCounterStyleRule(name, descriptors);\n            ssrCollector.collectCounterStyle(name, css);\n          }\n        }\n      }\n\n      // Auto-infer @property types from rendered declarations (SSR).\n      // On the client this happens inside StyleInjector.inject(), which\n      // runs in useInsertionEffect and therefore never executes on the server.\n      if (getConfig().autoPropertyTypes !== false) {\n        const allRules = chunks.flatMap((c) => c.renderResult.rules);\n        if (allRules.length > 0) {\n          collectAutoInferredProperties(allRules, ssrCollector, currentStyles);\n        }\n      }\n    } else {\n      // CLIENT PATH: unchanged behavior\n      for (const [chunkName, chunkStyleKeys] of chunkMap) {\n        const chunk = processChunk(currentStyles, chunkName, chunkStyleKeys);\n        if (chunk) chunks.push(chunk);\n      }\n    }\n\n    return chunks;\n  }, [styleKey]);\n\n  // Inject styles in insertion effect (avoids render phase side effects).\n  // Does NOT run on the server — the SSR path above handles collection.\n  useInsertionEffect(() => {\n    // Cleanup all previous disposals\n    disposeRef.current.forEach((dispose) => dispose?.());\n    disposeRef.current = [];\n\n    // Fast path: no chunks to inject\n    if (processedChunks.length === 0) {\n      return;\n    }\n\n    const currentStyles = stylesRef.current.styles;\n\n    // Register explicit @properties first so they take precedence over auto-inference\n    // that happens during keyframe and style chunk injection.\n    // Token formats: $name → --name, #name → --name-color (with auto syntax: '<color>')\n    // Note: Global properties are injected once when styles are first generated (see markStylesGenerated)\n    if (currentStyles && hasLocalProperties(currentStyles)) {\n      const localProperties = extractLocalProperties(currentStyles);\n      if (localProperties) {\n        for (const [token, definition] of Object.entries(localProperties)) {\n          property(token, definition);\n        }\n      }\n    }\n\n    // Inject @font-face rules (permanent, no cleanup needed)\n    if (currentStyles && hasLocalFontFace(currentStyles)) {\n      const localFontFace = extractLocalFontFace(currentStyles);\n      if (localFontFace) {\n        for (const [family, input] of Object.entries(localFontFace)) {\n          const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n            ? input\n            : [input];\n          for (const desc of descriptors) {\n            fontFace(family, desc);\n          }\n        }\n      }\n    }\n\n    // Inject @counter-style rules (permanent, no cleanup needed)\n    if (currentStyles && hasLocalCounterStyle(currentStyles)) {\n      const localCounterStyle = extractLocalCounterStyle(currentStyles);\n      if (localCounterStyle) {\n        for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n          counterStyle(name, descriptors);\n        }\n      }\n    }\n\n    // Get keyframes that are actually used (returns null if none - zero overhead)\n    const usedKeyframes = currentStyles\n      ? getUsedKeyframes(currentStyles)\n      : null;\n\n    // Inject keyframes and build name map (only if we have keyframes)\n    let nameMap: Map<string, string> | null = null;\n\n    if (usedKeyframes) {\n      nameMap = new Map();\n      for (const [name, steps] of Object.entries(usedKeyframes)) {\n        const result = keyframes(steps, { name });\n        const injectedName = result.toString();\n        // Only add to map if name differs (optimization for replacement check)\n        if (injectedName !== name) {\n          nameMap.set(name, injectedName);\n        }\n        disposeRef.current.push(result.dispose);\n      }\n      // Clear map if no replacements needed\n      if (nameMap.size === 0) {\n        nameMap = null;\n      }\n    }\n\n    // Inject each chunk\n    for (const chunk of processedChunks) {\n      if (chunk.renderResult.rules.length > 0) {\n        // Replace animation names only if needed\n        const rulesToInject = nameMap\n          ? chunk.renderResult.rules.map((rule) => ({\n              ...rule,\n              declarations: replaceAnimationNames(rule.declarations, nameMap!),\n            }))\n          : chunk.renderResult.rules;\n\n        const { dispose } = inject(rulesToInject, {\n          cacheKey: chunk.cacheKey,\n        });\n        disposeRef.current.push(dispose);\n      }\n    }\n\n    return () => {\n      disposeRef.current.forEach((dispose) => dispose?.());\n      disposeRef.current = [];\n    };\n  }, [processedChunks]);\n\n  // Combine all chunk classNames\n  const className = useMemo(() => {\n    return processedChunks.map((chunk) => chunk.className).join(' ');\n  }, [processedChunks]);\n\n  return {\n    className,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { computeStyles } from '../compute-styles';\nimport type { Styles } from '../styles/types';\n\n/**\n * Tasty styles object to generate CSS classes for.\n * Can be undefined or empty object for no styles.\n */\nexport type UseStylesOptions = Styles | undefined;\n\nexport interface UseStylesResult {\n  /**\n   * Generated className(s) to apply to the element.\n   * Can be empty string if no styles are provided.\n   * With chunking enabled, may contain multiple space-separated class names.\n   */\n  className: string;\n}\n\n/**\n * Generate CSS classes from Tasty styles.\n * Thin re-export of `computeStyles()` kept for backward compatibility.\n *\n * Unlike a React hook, this is a plain function and can be called\n * from both client components and React Server Components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { className } = useStyles({\n *     padding: '2x',\n *     fill: '#purple',\n *     radius: '1r',\n *   });\n *\n *   return <div className={className}>Styled content</div>;\n * }\n * ```\n */\nexport function useStyles(styles: UseStylesOptions): UseStylesResult {\n  return computeStyles(styles);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,UAAU,QAA2C;AACnE,QAAO,cAAc,OAAO"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "./injector/types.js";
+import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, GCConfig, GCOptions, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule, StyleUsage } from "./injector/types.js";
 import { CSSProperties } from "./utils/css-types.js";
 import { Bucket, ParserOptions, ProcessedStyle, StyleDetails, StyleDetailsPart, UnitHandler } from "./parser/types.js";
 import { StyleParser } from "./parser/parser.js";
@@ -18,7 +18,7 @@ import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
 import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
 import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
 import { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, InnerStyleProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens } from "./types.js";
-import { AllBasePropsWithMods, Element, ElementsDefinition, ModPropDef, ModPropsInput, ResolveModPropDef, ResolveModProps, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty } from "./tasty.js";
+import { AllBasePropsWithMods, Element, ElementsDefinition, ModPropDef, ModPropsInput, ResolveModPropDef, ResolveModProps, ResolveTokenProps, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, TokenPropsInput, VariantMap, WithVariant, tasty } from "./tasty.js";
 import { UseStylesOptions, UseStylesResult, useStyles } from "./hooks/useStyles.js";
 import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
 import { useRawCSS } from "./hooks/useRawCSS.js";
@@ -28,7 +28,8 @@ import { useFontFace } from "./hooks/useFontFace.js";
 import { useCounterStyle } from "./hooks/useCounterStyle.js";
 import { getDisplayName } from "./utils/get-display-name.js";
 import { styleHandlers } from "./styles/predefined.js";
-import { PropertyOptions, allocateClassName, cleanup, counterStyle, createInjector, destroy, fontFace, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, trackRef } from "./injector/index.js";
+import { ComputeStylesOptions, ComputeStylesResult, computeStyles } from "./compute-styles.js";
+import { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch } from "./injector/index.js";
 import { filterBaseProps } from "./utils/filter-base-props.js";
 import { color } from "./utils/colors.js";
 import { _modAttrs } from "./utils/mod-attrs.js";
@@ -36,7 +37,7 @@ import { dotize } from "./utils/dotize.js";
 import { mergeStyles } from "./utils/merge-styles.js";
 import { resolveRecipes } from "./utils/resolve-recipes.js";
 import { deprecationWarning, warn } from "./utils/warnings.js";
-import { processTokens, stringifyTokens } from "./utils/process-tokens.js";
+import { processTokens } from "./utils/process-tokens.js";
 import { TypographyPreset, generateTypographyTokens } from "./utils/typography.js";
 import { tastyDebug } from "./debug.js";
 import { CSSProperties as CSSProperties$1 } from "react";
@@ -46,5 +47,5 @@ declare module './utils/css-types' {
   interface CSSProperties extends CSSProperties$1 {}
 }
 //#endregion
-export { type AllBaseProps, type AllBasePropsWithMods, AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CSSMap, CSSProperties, CUSTOM_UNITS, CacheMetrics, ChunkInfo, ChunkName, ColorSpace, ColorStyleProps, ConditionNode, ConfigTokenValue, ConfigTokens, ContainerStyleProps, CounterStyleDescriptors, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, FontFaceDescriptors, FontFaceInput, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, type ModPropDef, type ModPropsInput, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParseStateKeyOptions, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, type ResolveModPropDef, type ResolveModProps, RootRegistry, RuleInfo, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, StyleValue, StyleValueStateMap, Styles, StylesInterface, StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, SuffixForSelector, TEXT_STYLES, TagName, TastyConfig, type TastyElementOptions, type TastyElementProps, TastyExtensionConfig, TastyNamedColors, TastyPlugin, TastyPluginFactory, TastyPresetNames, type TastyProps, TastyThemeNames, TextStyleProps, TokenValue, Tokens, TypographyPreset, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, type VariantMap, type WithVariant, allocateClassName, categorizeStyleKeys, cleanup, color, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, tasty, tastyDebug, trackRef, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+export { type AllBaseProps, type AllBasePropsWithMods, AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CSSMap, CSSProperties, CUSTOM_UNITS, CacheMetrics, ChunkInfo, ChunkName, ColorSpace, ColorStyleProps, ComputeStylesOptions, ComputeStylesResult, ConditionNode, ConfigTokenValue, ConfigTokens, ContainerStyleProps, CounterStyleDescriptors, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, FontFaceDescriptors, FontFaceInput, GCConfig, GCOptions, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, type ModPropDef, type ModPropsInput, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParseStateKeyOptions, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, type ResolveModPropDef, type ResolveModProps, type ResolveTokenProps, RootRegistry, RuleInfo, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, StyleUsage, StyleValue, StyleValueStateMap, Styles, StylesInterface, StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, SuffixForSelector, TEXT_STYLES, TagName, TastyConfig, type TastyElementOptions, type TastyElementProps, TastyExtensionConfig, TastyNamedColors, TastyPlugin, TastyPluginFactory, TastyPresetNames, type TastyProps, TastyThemeNames, TextStyleProps, type TokenPropsInput, TokenValue, Tokens, TypographyPreset, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, type VariantMap, type WithVariant, categorizeStyleKeys, cleanup, color, computeStyles, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, gc, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, maybeGC, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -13,23 +13,24 @@ import { isSelector, renderStyles } from "./pipeline/index.js";
 import { configure, getConfig, getGlobalCounterStyle, getGlobalFontFace, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
 import { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
 import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
-import { allocateClassName, cleanup, counterStyle, createInjector, destroy, fontFace, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, trackRef } from "./injector/index.js";
+import { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch } from "./injector/index.js";
+import { mergeStyles } from "./utils/merge-styles.js";
+import { resolveRecipes } from "./utils/resolve-recipes.js";
+import { computeStyles } from "./compute-styles.js";
 import { filterBaseProps } from "./utils/filter-base-props.js";
 import { color } from "./utils/colors.js";
 import { _modAttrs } from "./utils/mod-attrs.js";
 import { dotize } from "./utils/dotize.js";
-import { mergeStyles } from "./utils/merge-styles.js";
-import { resolveRecipes } from "./utils/resolve-recipes.js";
-import { processTokens, stringifyTokens } from "./utils/process-tokens.js";
+import { processTokens } from "./utils/process-tokens.js";
 import { generateTypographyTokens } from "./utils/typography.js";
 import { tastyDebug } from "./debug.js";
-import { useStyles } from "./hooks/useStyles.js";
 import { getDisplayName } from "./utils/get-display-name.js";
 import { Element, tasty } from "./tasty.js";
+import { useStyles } from "./hooks/useStyles.js";
 import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
 import { useRawCSS } from "./hooks/useRawCSS.js";
 import { useKeyframes } from "./hooks/useKeyframes.js";
 import { useProperty } from "./hooks/useProperty.js";
 import { useFontFace } from "./hooks/useFontFace.js";
 import { useCounterStyle } from "./hooks/useCounterStyle.js";
-export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, allocateClassName, categorizeStyleKeys, cleanup, color, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, tasty, tastyDebug, trackRef, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, categorizeStyleKeys, cleanup, color, computeStyles, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, gc, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, maybeGC, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };

package/dist/injector/index.d.ts

@@ -1,26 +1,9 @@
-import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, GlobalInjectResult, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "./types.js";
+import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, GCConfig, GCOptions, GlobalInjectResult, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule, StyleUsage } from "./types.js";
 import { StyleResult } from "../pipeline/index.js";
 import { SheetManager } from "./sheet-manager.js";
 import { StyleInjector } from "./injector.js";
 
 //#region src/injector/index.d.ts
-/**
- * Allocate a className for a cacheKey without injecting styles yet
- */
-declare function allocateClassName(cacheKey: string, options?: {
-  root?: Document | ShadowRoot;
-}): {
-  className: string;
-  isNewAllocation: boolean;
-};
-/**
- * Track a reference to an already-injected cacheKey (refCount + dispose).
- * Used on cache hits (SSR hydration or runtime reuse) where the pipeline
- * was skipped. Returns null if the cacheKey is not in the cache.
- */
-declare function trackRef(cacheKey: string, options?: {
-  root?: Document | ShadowRoot;
-}): InjectResult | null;
 /**
  * Inject styles and return className with dispose function
  */
@@ -160,6 +143,27 @@ declare function getCssTextForNode(node: ParentNode | Element | DocumentFragment
  * Force cleanup of unused rules
  */
 declare function cleanup(root?: Document | ShadowRoot): void;
+/**
+ * Record a render-time usage hit for one or more classNames.
+ * Used internally by computeStyles and tasty() to track style popularity for GC.
+ */
+declare function touch(className: string, options?: {
+  root?: Document | ShadowRoot;
+}): void;
+/**
+ * Synchronous garbage collection of unused styles.
+ * Scans the DOM for live classNames (never evicts them), then evicts
+ * absent styles whose age exceeds their popularity-weighted TTL.
+ *
+ * @returns Number of styles evicted.
+ */
+declare function gc(options?: GCOptions): number;
+/**
+ * Event-driven GC with cooldown.
+ * Skips if called within the configured cooldown of the last run.
+ * Schedules via requestIdleCallback when available.
+ */
+declare function maybeGC(options?: GCOptions): void;
 /**
  * Check if we're currently running in a test environment
  */
@@ -179,5 +183,5 @@ declare function destroy(root?: Document | ShadowRoot): void;
  */
 declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
 //#endregion
-export { PropertyOptions, allocateClassName, cleanup, counterStyle, createInjector, destroy, fontFace, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, trackRef };
+export { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch };
 //# sourceMappingURL=index.d.ts.map

package/dist/injector/index.js

@@ -3,25 +3,12 @@ import { StyleInjector } from "./injector.js";
 import { getConfig, getGlobalInjector, isTestEnvironment, markStylesGenerated } from "../config.js";
 //#region src/injector/index.ts
 /**
-* Allocate a className for a cacheKey without injecting styles yet
-*/
-function allocateClassName(cacheKey, options) {
-	return getGlobalInjector().allocateClassName(cacheKey, options);
-}
-/**
-* Track a reference to an already-injected cacheKey (refCount + dispose).
-* Used on cache hits (SSR hydration or runtime reuse) where the pipeline
-* was skipped. Returns null if the cacheKey is not in the cache.
-*/
-function trackRef(cacheKey, options) {
-	return getGlobalInjector().trackRef(cacheKey, options);
-}
-/**
 * Inject styles and return className with dispose function
 */
 function inject(rules, options) {
+	const injector = getGlobalInjector();
 	markStylesGenerated();
-	return getGlobalInjector().inject(rules, options);
+	return injector.inject(rules, options);
 }
 /**
 * Inject global rules that should not reserve tasty class names
@@ -146,6 +133,32 @@ function cleanup(root) {
 	return getGlobalInjector().cleanup(root);
 }
 /**
+* Record a render-time usage hit for one or more classNames.
+* Used internally by computeStyles and tasty() to track style popularity for GC.
+*/
+function touch(className, options) {
+	if (!getConfig().gc) return;
+	getGlobalInjector().touch(className, options);
+}
+/**
+* Synchronous garbage collection of unused styles.
+* Scans the DOM for live classNames (never evicts them), then evicts
+* absent styles whose age exceeds their popularity-weighted TTL.
+*
+* @returns Number of styles evicted.
+*/
+function gc(options) {
+	return getGlobalInjector().gc(options);
+}
+/**
+* Event-driven GC with cooldown.
+* Skips if called within the configured cooldown of the last run.
+* Schedules via requestIdleCallback when available.
+*/
+function maybeGC(options) {
+	return getGlobalInjector().maybeGC(options);
+}
+/**
 * Check if we're currently running in a test environment
 */
 function getIsTestEnvironment() {
@@ -174,6 +187,6 @@ function createInjector(config = {}) {
 	});
 }
 //#endregion
-export { allocateClassName, cleanup, counterStyle, createInjector, destroy, fontFace, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, trackRef };
+export { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch };
 
 //# sourceMappingURL=index.js.map

package/dist/injector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/injector/index.ts"],"sourcesContent":["import {\n  getConfig,\n  getGlobalInjector,\n  isTestEnvironment,\n  markStylesGenerated,\n} from '../config';\nimport type { StyleResult } from '../pipeline';\n\nimport { StyleInjector } from './injector';\nimport type {\n  CounterStyleDescriptors,\n  FontFaceDescriptors,\n  GlobalInjectResult,\n  InjectResult,\n  KeyframesResult,\n  KeyframesSteps,\n  StyleInjectorConfig,\n} from './types';\n\n/**\n * Allocate a className for a cacheKey without injecting styles yet\n */\nexport function allocateClassName(\n  cacheKey: string,\n  options?: { root?: Document | ShadowRoot },\n): { className: string; isNewAllocation: boolean } {\n  return getGlobalInjector().allocateClassName(cacheKey, options);\n}\n\n/**\n * Track a reference to an already-injected cacheKey (refCount + dispose).\n * Used on cache hits (SSR hydration or runtime reuse) where the pipeline\n * was skipped. Returns null if the cacheKey is not in the cache.\n */\nexport function trackRef(\n  cacheKey: string,\n  options?: { root?: Document | ShadowRoot },\n): InjectResult | null {\n  return getGlobalInjector().trackRef(cacheKey, options);\n}\n\n/**\n * Inject styles and return className with dispose function\n */\nexport function inject(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot; cacheKey?: string },\n): InjectResult {\n  // Mark that styles have been generated (prevents configuration changes)\n  markStylesGenerated();\n\n  return getGlobalInjector().inject(rules, options);\n}\n\n/**\n * Inject global rules that should not reserve tasty class names\n */\nexport function injectGlobal(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot },\n): GlobalInjectResult {\n  return getGlobalInjector().injectGlobal(rules, options);\n}\n\n/**\n * Inject raw CSS text directly without parsing\n * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.\n * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.\n *\n * @example\n * ```tsx\n * // Inject raw CSS\n * const { dispose } = injectRawCSS(`\n *   body { margin: 0; padding: 0; }\n *   .my-class { color: red; }\n * `);\n *\n * // Later, remove the injected CSS\n * dispose();\n * ```\n */\nexport function injectRawCSS(\n  css: string,\n  options?: { root?: Document | ShadowRoot },\n): { dispose: () => void } {\n  return getGlobalInjector().injectRawCSS(css, options);\n}\n\n/**\n * Get raw CSS text for SSR\n */\nexport function getRawCSSText(options?: {\n  root?: Document | ShadowRoot;\n}): string {\n  return getGlobalInjector().getRawCSSText(options);\n}\n\n/**\n * Inject keyframes and return object with toString() and dispose()\n */\nexport function keyframes(\n  steps: KeyframesSteps,\n  nameOrOptions?: string | { root?: Document | ShadowRoot; name?: string },\n): KeyframesResult {\n  return getGlobalInjector().keyframes(steps, nameOrOptions);\n}\n\nexport interface PropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax\n   */\n  syntax?: string;\n  /**\n   * Whether the property inherits from parent elements\n   * @default true\n   */\n  inherits?: boolean;\n  /**\n   * Initial value for the property\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Define a CSS @property custom property.\n * This enables advanced features like animating custom properties.\n *\n * Note: @property rules are global and persistent once defined.\n * Re-registering the same property name is a no-op.\n *\n * @param name - The custom property name (must start with --)\n * @param options - Property configuration\n *\n * @example\n * ```ts\n * // Define a color property that can be animated\n * property('--my-color', {\n *   syntax: '<color>',\n *   initialValue: 'red',\n * });\n *\n * // Define an angle property\n * property('--rotation', {\n *   syntax: '<angle>',\n *   inherits: false,\n *   initialValue: '0deg',\n * });\n * ```\n */\nexport function property(name: string, options?: PropertyOptions): void {\n  return getGlobalInjector().property(name, options);\n}\n\n/**\n * Check if a CSS @property has already been defined\n *\n * @param name - The custom property name to check\n * @param options - Options including root\n */\nexport function isPropertyDefined(\n  name: string,\n  options?: { root?: Document | ShadowRoot },\n): boolean {\n  return getGlobalInjector().isPropertyDefined(name, options);\n}\n\n/**\n * Inject a CSS @font-face rule.\n *\n * Permanent and global — no dispose or ref-counting.\n * Deduplicates by content hash (family + descriptors).\n */\nexport function fontFace(\n  family: string,\n  descriptors: FontFaceDescriptors,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  return getGlobalInjector().fontFace(family, descriptors, options);\n}\n\n/**\n * Inject a CSS @counter-style rule.\n *\n * Permanent and global — no dispose or ref-counting.\n * Deduplicates by name (first definition wins).\n */\nexport function counterStyle(\n  name: string,\n  descriptors: CounterStyleDescriptors,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  return getGlobalInjector().counterStyle(name, descriptors, options);\n}\n\n/**\n * Get CSS text from all sheets (for SSR)\n */\nexport function getCssText(options?: { root?: Document | ShadowRoot }): string {\n  return getGlobalInjector().getCssText(options);\n}\n\n/**\n * Collect only CSS used by a rendered subtree (like jest-styled-components).\n * Pass the container returned by render(...).\n */\nexport function getCssTextForNode(\n  node: ParentNode | Element | DocumentFragment,\n  options?: { root?: Document | ShadowRoot },\n): string {\n  // Collect tasty-generated class names (t<number>) from the subtree\n  const classSet = new Set<string>();\n\n  const readClasses = (el: Element) => {\n    const cls = el.getAttribute('class');\n    if (!cls) return;\n    for (const token of cls.split(/\\s+/)) {\n      if (/^t\\d+$/.test(token)) classSet.add(token);\n    }\n  };\n\n  // Include node itself if it's an Element\n  if ((node as Element).getAttribute) {\n    readClasses(node as Element);\n  }\n  // Walk descendants\n  const elements = (node as ParentNode).querySelectorAll\n    ? (node as ParentNode).querySelectorAll('[class]')\n    : ([] as unknown as NodeListOf<Element>);\n  if (elements) elements.forEach(readClasses);\n\n  return getGlobalInjector().getCssTextForClasses(classSet, options);\n}\n\n/**\n * Force cleanup of unused rules\n */\nexport function cleanup(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().cleanup(root);\n}\n\n/**\n * Check if we're currently running in a test environment\n */\nexport function getIsTestEnvironment(): boolean {\n  return isTestEnvironment();\n}\n\n/**\n * Get the global injector instance for debugging\n */\nexport const injector = {\n  get instance() {\n    return getGlobalInjector();\n  },\n};\n\n/**\n * Destroy all resources and clean up\n */\nexport function destroy(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().destroy(root);\n}\n\n/**\n * Create a new isolated injector instance\n */\nexport function createInjector(\n  config: Partial<StyleInjectorConfig> = {},\n): StyleInjector {\n  const defaultConfig = getConfig();\n\n  const fullConfig: StyleInjectorConfig = {\n    ...defaultConfig,\n    // Auto-enable forceTextInjection in test environments\n    forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),\n    ...config,\n  };\n\n  return new StyleInjector(fullConfig);\n}\n\n// Re-export types\nexport type {\n  StyleInjectorConfig,\n  InjectResult,\n  DisposeFunction,\n  RuleInfo,\n  SheetInfo,\n  RootRegistry,\n  StyleRule,\n  KeyframesInfo,\n  KeyframesResult,\n  KeyframesSteps,\n  KeyframesCacheEntry,\n  CacheMetrics,\n  RawCSSResult,\n  PropertyDefinition,\n  FontFaceDescriptors,\n  FontFaceInput,\n  CounterStyleDescriptors,\n} from './types';\n\nexport { StyleInjector } from './injector';\nexport { SheetManager } from './sheet-manager';\n"],"mappings":";;;;;;;AAsBA,SAAgB,kBACd,UACA,SACiD;AACjD,QAAO,mBAAmB,CAAC,kBAAkB,UAAU,QAAQ;;;;;;;AAQjE,SAAgB,SACd,UACA,SACqB;AACrB,QAAO,mBAAmB,CAAC,SAAS,UAAU,QAAQ;;;;;AAMxD,SAAgB,OACd,OACA,SACc;AAEd,sBAAqB;AAErB,QAAO,mBAAmB,CAAC,OAAO,OAAO,QAAQ;;;;;AAMnD,SAAgB,aACd,OACA,SACoB;AACpB,QAAO,mBAAmB,CAAC,aAAa,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;AAoBzD,SAAgB,aACd,KACA,SACyB;AACzB,QAAO,mBAAmB,CAAC,aAAa,KAAK,QAAQ;;;;;AAMvD,SAAgB,cAAc,SAEnB;AACT,QAAO,mBAAmB,CAAC,cAAc,QAAQ;;;;;AAMnD,SAAgB,UACd,OACA,eACiB;AACjB,QAAO,mBAAmB,CAAC,UAAU,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkD5D,SAAgB,SAAS,MAAc,SAAiC;AACtE,QAAO,mBAAmB,CAAC,SAAS,MAAM,QAAQ;;;;;;;;AASpD,SAAgB,kBACd,MACA,SACS;AACT,QAAO,mBAAmB,CAAC,kBAAkB,MAAM,QAAQ;;;;;;;;AAS7D,SAAgB,SACd,QACA,aACA,SACM;AACN,QAAO,mBAAmB,CAAC,SAAS,QAAQ,aAAa,QAAQ;;;;;;;;AASnE,SAAgB,aACd,MACA,aACA,SACM;AACN,QAAO,mBAAmB,CAAC,aAAa,MAAM,aAAa,QAAQ;;;;;AAMrE,SAAgB,WAAW,SAAoD;AAC7E,QAAO,mBAAmB,CAAC,WAAW,QAAQ;;;;;;AAOhD,SAAgB,kBACd,MACA,SACQ;CAER,MAAM,2BAAW,IAAI,KAAa;CAElC,MAAM,eAAe,OAAgB;EACnC,MAAM,MAAM,GAAG,aAAa,QAAQ;AACpC,MAAI,CAAC,IAAK;AACV,OAAK,MAAM,SAAS,IAAI,MAAM,MAAM,CAClC,KAAI,SAAS,KAAK,MAAM,CAAE,UAAS,IAAI,MAAM;;AAKjD,KAAK,KAAiB,aACpB,aAAY,KAAgB;CAG9B,MAAM,WAAY,KAAoB,mBACjC,KAAoB,iBAAiB,UAAU,GAC/C,EAAE;AACP,KAAI,SAAU,UAAS,QAAQ,YAAY;AAE3C,QAAO,mBAAmB,CAAC,qBAAqB,UAAU,QAAQ;;;;;AAMpE,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;AAM1C,SAAgB,uBAAgC;AAC9C,QAAO,mBAAmB;;;;;AAM5B,MAAa,WAAW,EACtB,IAAI,WAAW;AACb,QAAO,mBAAmB;GAE7B;;;;AAKD,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;AAM1C,SAAgB,eACd,SAAuC,EAAE,EAC1B;AAUf,QAAO,IAAI,cAP6B;EACtC,GAHoB,WAAW;EAK/B,oBAAoB,OAAO,sBAAsB,mBAAmB;EACpE,GAAG;EACJ,CAEmC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/injector/index.ts"],"sourcesContent":["import {\n  getConfig,\n  getGlobalInjector,\n  isTestEnvironment,\n  markStylesGenerated,\n} from '../config';\nimport type { StyleResult } from '../pipeline';\n\nimport { StyleInjector } from './injector';\nimport type {\n  CounterStyleDescriptors,\n  FontFaceDescriptors,\n  GCOptions,\n  GlobalInjectResult,\n  InjectResult,\n  KeyframesResult,\n  KeyframesSteps,\n  StyleInjectorConfig,\n} from './types';\n\n/**\n * Inject styles and return className with dispose function\n */\nexport function inject(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot; cacheKey?: string },\n): InjectResult {\n  const injector = getGlobalInjector();\n\n  markStylesGenerated();\n\n  return injector.inject(rules, options);\n}\n\n/**\n * Inject global rules that should not reserve tasty class names\n */\nexport function injectGlobal(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot },\n): GlobalInjectResult {\n  return getGlobalInjector().injectGlobal(rules, options);\n}\n\n/**\n * Inject raw CSS text directly without parsing\n * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.\n * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.\n *\n * @example\n * ```tsx\n * // Inject raw CSS\n * const { dispose } = injectRawCSS(`\n *   body { margin: 0; padding: 0; }\n *   .my-class { color: red; }\n * `);\n *\n * // Later, remove the injected CSS\n * dispose();\n * ```\n */\nexport function injectRawCSS(\n  css: string,\n  options?: { root?: Document | ShadowRoot },\n): { dispose: () => void } {\n  return getGlobalInjector().injectRawCSS(css, options);\n}\n\n/**\n * Get raw CSS text for SSR\n */\nexport function getRawCSSText(options?: {\n  root?: Document | ShadowRoot;\n}): string {\n  return getGlobalInjector().getRawCSSText(options);\n}\n\n/**\n * Inject keyframes and return object with toString() and dispose()\n */\nexport function keyframes(\n  steps: KeyframesSteps,\n  nameOrOptions?: string | { root?: Document | ShadowRoot; name?: string },\n): KeyframesResult {\n  return getGlobalInjector().keyframes(steps, nameOrOptions);\n}\n\nexport interface PropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax\n   */\n  syntax?: string;\n  /**\n   * Whether the property inherits from parent elements\n   * @default true\n   */\n  inherits?: boolean;\n  /**\n   * Initial value for the property\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Define a CSS @property custom property.\n * This enables advanced features like animating custom properties.\n *\n * Note: @property rules are global and persistent once defined.\n * Re-registering the same property name is a no-op.\n *\n * @param name - The custom property name (must start with --)\n * @param options - Property configuration\n *\n * @example\n * ```ts\n * // Define a color property that can be animated\n * property('--my-color', {\n *   syntax: '<color>',\n *   initialValue: 'red',\n * });\n *\n * // Define an angle property\n * property('--rotation', {\n *   syntax: '<angle>',\n *   inherits: false,\n *   initialValue: '0deg',\n * });\n * ```\n */\nexport function property(name: string, options?: PropertyOptions): void {\n  return getGlobalInjector().property(name, options);\n}\n\n/**\n * Check if a CSS @property has already been defined\n *\n * @param name - The custom property name to check\n * @param options - Options including root\n */\nexport function isPropertyDefined(\n  name: string,\n  options?: { root?: Document | ShadowRoot },\n): boolean {\n  return getGlobalInjector().isPropertyDefined(name, options);\n}\n\n/**\n * Inject a CSS @font-face rule.\n *\n * Permanent and global — no dispose or ref-counting.\n * Deduplicates by content hash (family + descriptors).\n */\nexport function fontFace(\n  family: string,\n  descriptors: FontFaceDescriptors,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  return getGlobalInjector().fontFace(family, descriptors, options);\n}\n\n/**\n * Inject a CSS @counter-style rule.\n *\n * Permanent and global — no dispose or ref-counting.\n * Deduplicates by name (first definition wins).\n */\nexport function counterStyle(\n  name: string,\n  descriptors: CounterStyleDescriptors,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  return getGlobalInjector().counterStyle(name, descriptors, options);\n}\n\n/**\n * Get CSS text from all sheets (for SSR)\n */\nexport function getCssText(options?: { root?: Document | ShadowRoot }): string {\n  return getGlobalInjector().getCssText(options);\n}\n\n/**\n * Collect only CSS used by a rendered subtree (like jest-styled-components).\n * Pass the container returned by render(...).\n */\nexport function getCssTextForNode(\n  node: ParentNode | Element | DocumentFragment,\n  options?: { root?: Document | ShadowRoot },\n): string {\n  // Collect tasty-generated class names (t<number>) from the subtree\n  const classSet = new Set<string>();\n\n  const readClasses = (el: Element) => {\n    const cls = el.getAttribute('class');\n    if (!cls) return;\n    for (const token of cls.split(/\\s+/)) {\n      if (/^t\\d+$/.test(token)) classSet.add(token);\n    }\n  };\n\n  // Include node itself if it's an Element\n  if ((node as Element).getAttribute) {\n    readClasses(node as Element);\n  }\n  // Walk descendants\n  const elements = (node as ParentNode).querySelectorAll\n    ? (node as ParentNode).querySelectorAll('[class]')\n    : ([] as unknown as NodeListOf<Element>);\n  if (elements) elements.forEach(readClasses);\n\n  return getGlobalInjector().getCssTextForClasses(classSet, options);\n}\n\n/**\n * Force cleanup of unused rules\n */\nexport function cleanup(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().cleanup(root);\n}\n\n/**\n * Record a render-time usage hit for one or more classNames.\n * Used internally by computeStyles and tasty() to track style popularity for GC.\n */\nexport function touch(\n  className: string,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  if (!getConfig().gc) return;\n  getGlobalInjector().touch(className, options);\n}\n\n/**\n * Synchronous garbage collection of unused styles.\n * Scans the DOM for live classNames (never evicts them), then evicts\n * absent styles whose age exceeds their popularity-weighted TTL.\n *\n * @returns Number of styles evicted.\n */\nexport function gc(options?: GCOptions): number {\n  return getGlobalInjector().gc(options);\n}\n\n/**\n * Event-driven GC with cooldown.\n * Skips if called within the configured cooldown of the last run.\n * Schedules via requestIdleCallback when available.\n */\nexport function maybeGC(options?: GCOptions): void {\n  return getGlobalInjector().maybeGC(options);\n}\n\n/**\n * Check if we're currently running in a test environment\n */\nexport function getIsTestEnvironment(): boolean {\n  return isTestEnvironment();\n}\n\n/**\n * Get the global injector instance for debugging\n */\nexport const injector = {\n  get instance() {\n    return getGlobalInjector();\n  },\n};\n\n/**\n * Destroy all resources and clean up\n */\nexport function destroy(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().destroy(root);\n}\n\n/**\n * Create a new isolated injector instance\n */\nexport function createInjector(\n  config: Partial<StyleInjectorConfig> = {},\n): StyleInjector {\n  const defaultConfig = getConfig();\n\n  const fullConfig: StyleInjectorConfig = {\n    ...defaultConfig,\n    // Auto-enable forceTextInjection in test environments\n    forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),\n    ...config,\n  };\n\n  return new StyleInjector(fullConfig);\n}\n\n// Re-export types\nexport type {\n  StyleInjectorConfig,\n  InjectResult,\n  DisposeFunction,\n  RuleInfo,\n  SheetInfo,\n  RootRegistry,\n  StyleRule,\n  KeyframesInfo,\n  KeyframesResult,\n  KeyframesSteps,\n  KeyframesCacheEntry,\n  CacheMetrics,\n  RawCSSResult,\n  PropertyDefinition,\n  FontFaceDescriptors,\n  FontFaceInput,\n  CounterStyleDescriptors,\n  StyleUsage,\n  GCConfig,\n  GCOptions,\n} from './types';\n\nexport { StyleInjector } from './injector';\nexport { SheetManager } from './sheet-manager';\n"],"mappings":";;;;;;;AAuBA,SAAgB,OACd,OACA,SACc;CACd,MAAM,WAAW,mBAAmB;AAEpC,sBAAqB;AAErB,QAAO,SAAS,OAAO,OAAO,QAAQ;;;;;AAMxC,SAAgB,aACd,OACA,SACoB;AACpB,QAAO,mBAAmB,CAAC,aAAa,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;AAoBzD,SAAgB,aACd,KACA,SACyB;AACzB,QAAO,mBAAmB,CAAC,aAAa,KAAK,QAAQ;;;;;AAMvD,SAAgB,cAAc,SAEnB;AACT,QAAO,mBAAmB,CAAC,cAAc,QAAQ;;;;;AAMnD,SAAgB,UACd,OACA,eACiB;AACjB,QAAO,mBAAmB,CAAC,UAAU,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkD5D,SAAgB,SAAS,MAAc,SAAiC;AACtE,QAAO,mBAAmB,CAAC,SAAS,MAAM,QAAQ;;;;;;;;AASpD,SAAgB,kBACd,MACA,SACS;AACT,QAAO,mBAAmB,CAAC,kBAAkB,MAAM,QAAQ;;;;;;;;AAS7D,SAAgB,SACd,QACA,aACA,SACM;AACN,QAAO,mBAAmB,CAAC,SAAS,QAAQ,aAAa,QAAQ;;;;;;;;AASnE,SAAgB,aACd,MACA,aACA,SACM;AACN,QAAO,mBAAmB,CAAC,aAAa,MAAM,aAAa,QAAQ;;;;;AAMrE,SAAgB,WAAW,SAAoD;AAC7E,QAAO,mBAAmB,CAAC,WAAW,QAAQ;;;;;;AAOhD,SAAgB,kBACd,MACA,SACQ;CAER,MAAM,2BAAW,IAAI,KAAa;CAElC,MAAM,eAAe,OAAgB;EACnC,MAAM,MAAM,GAAG,aAAa,QAAQ;AACpC,MAAI,CAAC,IAAK;AACV,OAAK,MAAM,SAAS,IAAI,MAAM,MAAM,CAClC,KAAI,SAAS,KAAK,MAAM,CAAE,UAAS,IAAI,MAAM;;AAKjD,KAAK,KAAiB,aACpB,aAAY,KAAgB;CAG9B,MAAM,WAAY,KAAoB,mBACjC,KAAoB,iBAAiB,UAAU,GAC/C,EAAE;AACP,KAAI,SAAU,UAAS,QAAQ,YAAY;AAE3C,QAAO,mBAAmB,CAAC,qBAAqB,UAAU,QAAQ;;;;;AAMpE,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;;AAO1C,SAAgB,MACd,WACA,SACM;AACN,KAAI,CAAC,WAAW,CAAC,GAAI;AACrB,oBAAmB,CAAC,MAAM,WAAW,QAAQ;;;;;;;;;AAU/C,SAAgB,GAAG,SAA6B;AAC9C,QAAO,mBAAmB,CAAC,GAAG,QAAQ;;;;;;;AAQxC,SAAgB,QAAQ,SAA2B;AACjD,QAAO,mBAAmB,CAAC,QAAQ,QAAQ;;;;;AAM7C,SAAgB,uBAAgC;AAC9C,QAAO,mBAAmB;;;;;AAM5B,MAAa,WAAW,EACtB,IAAI,WAAW;AACb,QAAO,mBAAmB;GAE7B;;;;AAKD,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;AAM1C,SAAgB,eACd,SAAuC,EAAE,EAC1B;AAUf,QAAO,IAAI,cAP6B;EACtC,GAHoB,WAAW;EAK/B,oBAAoB,OAAO,sBAAsB,mBAAmB;EACpE,GAAG;EACJ,CAEmC"}

package/dist/injector/injector.d.ts

@@ -1,4 +1,4 @@
-import { CacheMetrics, CounterStyleDescriptors, FontFaceDescriptors, GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, StyleInjectorConfig } from "./types.js";
+import { CacheMetrics, CounterStyleDescriptors, FontFaceDescriptors, GCOptions, GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, StyleInjectorConfig } from "./types.js";
 import { StyleResult } from "../pipeline/index.js";
 import { SheetManager } from "./sheet-manager.js";
 
@@ -6,8 +6,10 @@ import { SheetManager } from "./sheet-manager.js";
 declare class StyleInjector {
   private sheetManager;
   private config;
-  private cleanupScheduled;
   private globalRuleCounter;
+  private lastGCTime;
+  private backgroundSweepTimeout;
+  private pendingGCHandle;
   /** @internal — exposed for debug utilities only */
   get _sheetManager(): SheetManager;
   constructor(config?: StyleInjectorConfig);
@@ -60,7 +62,7 @@ declare class StyleInjector {
     root?: Document | ShadowRoot;
   }): InjectResult | null;
   /**
-   * Dispose of a className
+   * Dispose of a className (decrements refCount only).
    */
   private dispose;
   /**
@@ -156,6 +158,33 @@ declare class StyleInjector {
    * Dispose keyframes
    */
   private disposeKeyframes;
+  private static readonly TOUCH_THROTTLE_MS;
+  private static readonly TASTY_CLASS_RE;
+  /**
+   * Record a render-time usage hit for one or more classNames.
+   * Handles space-separated multi-chunk classNames.
+   * No-op on the server.
+   */
+  touch(className: string, options?: {
+    root?: Document | ShadowRoot;
+  }): void;
+  /**
+   * Synchronous garbage collection.
+   *
+   * 1. Scans the DOM for live tasty classNames (safety guard).
+   * 2. Scores each non-live className via popularity-weighted TTL.
+   * 3. Marks evictable styles with refCount = 0 and deletes them.
+   * 4. Optionally enforces a hard `cacheCapacity` cap.
+   *
+   * @returns Number of styles evicted.
+   */
+  gc(options?: GCOptions): number;
+  /**
+   * Event-driven GC with cooldown.
+   * Skips if called within `cooldown` ms of the last run.
+   * Schedules the actual GC via `requestIdleCallback` when available.
+   */
+  maybeGC(options?: GCOptions): void;
   /**
    * Destroy all resources for a root
    */