@tenphi/tasty 0.0.0-snapshot.c8bdaeb → 0.0.0-snapshot.c8c7b2a

package/dist/hooks/useRawCSS.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRawCSS.js","names":[],"sources":["../../src/hooks/useRawCSS.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { injectRawCSS } from '../injector';\n\ninterface UseRawCSSOptions {\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to inject raw CSS text directly without parsing.\n * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.\n *\n * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts\n * with tasty's chunked style sheets.\n *\n * @example Static CSS string\n * ```tsx\n * function GlobalStyles() {\n *   useRawCSS(`\n *     body {\n *       margin: 0;\n *       padding: 0;\n *       font-family: sans-serif;\n *     }\n *   `);\n *\n *   return null;\n * }\n * ```\n *\n * @example Factory function with dependencies (like useMemo)\n * ```tsx\n * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {\n *   useRawCSS(() => `\n *     :root {\n *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};\n *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};\n *     }\n *   `, [theme]);\n *\n *   return null;\n * }\n * ```\n *\n * @example With options\n * ```tsx\n * function ShadowStyles({ shadowRoot }) {\n *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });\n *   return null;\n * }\n * ```\n */\n\n// Overload 1: Static CSS string\nexport function useRawCSS(css: string, options?: UseRawCSSOptions): void;\n\n// Overload 2: Factory function with dependencies\nexport function useRawCSS(\n  factory: () => string,\n  deps: readonly unknown[],\n  options?: UseRawCSSOptions,\n): void;\n\n// Implementation\nexport function useRawCSS(\n  cssOrFactory: string | (() => string),\n  depsOrOptions?: readonly unknown[] | UseRawCSSOptions,\n  options?: UseRawCSSOptions,\n): void {\n  // Detect which overload is being used\n  const isFactory = typeof cssOrFactory === 'function';\n\n  // Parse arguments based on overload\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseRawCSSOptions | undefined);\n\n  // Memoize CSS - for factory functions, use provided deps; for strings, use the string itself\n  const css = useMemo(\n    () =>\n      isFactory ? (cssOrFactory as () => string)() : (cssOrFactory as string),\n\n    isFactory ? (deps ?? []) : [cssOrFactory],\n  );\n\n  const disposeRef = useRef<(() => void) | null>(null);\n\n  useInsertionEffect(() => {\n    // Dispose previous injection if any\n    disposeRef.current?.();\n\n    if (!css.trim()) {\n      disposeRef.current = null;\n      return;\n    }\n\n    // Inject new CSS\n    const { dispose } = injectRawCSS(css, opts);\n    disposeRef.current = dispose;\n\n    // Cleanup on unmount or when css changes\n    return () => {\n      disposeRef.current?.();\n      disposeRef.current = null;\n    };\n  }, [css, opts?.root]);\n}\n"],"mappings":";;;;AAgEA,SAAgB,UACd,cACA,eACA,SACM;CAEN,MAAM,YAAY,OAAO,iBAAiB;CAG1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,MAAM,cAER,YAAa,cAA+B,GAAI,cAElD,YAAa,QAAQ,EAAE,GAAI,CAAC,aAAa,CAC1C;CAED,MAAM,aAAa,OAA4B,KAAK;AAEpD,0BAAyB;AAEvB,aAAW,WAAW;AAEtB,MAAI,CAAC,IAAI,MAAM,EAAE;AACf,cAAW,UAAU;AACrB;;EAIF,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,aAAW,UAAU;AAGrB,eAAa;AACX,cAAW,WAAW;AACtB,cAAW,UAAU;;IAEtB,CAAC,KAAK,MAAM,KAAK,CAAC"}
+{"version":3,"file":"useRawCSS.js","names":[],"sources":["../../src/hooks/useRawCSS.ts"],"sourcesContent":["import { injectRawCSS } from '../injector';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\nimport { depsEqual } from '../utils/deps-equal';\nimport { hashString } from '../utils/hash';\n\ninterface UseRawCSSOptions {\n  /**\n   * Shadow root or document to inject into.\n   * Note: `root` is not part of the update-tracking comparison — changing\n   * only the root for the same id/content will not re-inject.\n   */\n  root?: Document | ShadowRoot;\n  /**\n   * Stable identifier for update tracking (client-only). When provided,\n   * changing the CSS content will dispose the previous injection and inject\n   * the new one. Without an id, deduplication is purely content-based (same\n   * CSS is injected only once). In RSC mode, renders are single-pass so\n   * update tracking does not apply.\n   */\n  id?: string;\n}\n\ninterface ClientEntry {\n  contentKey: string;\n  dispose: () => void;\n}\n\nconst clientEntries = new Map<string, ClientEntry>();\nconst clientContentDedup = new Set<string>();\nconst factoryDepsCache = new Map<string, readonly unknown[]>();\n\n/* @internal — used only for tests */\nexport function _resetRawCSSCache(): void {\n  clientEntries.clear();\n  clientContentDedup.clear();\n  factoryDepsCache.clear();\n}\n\n// Overload 1: Static CSS string\nexport function useRawCSS(css: string, options?: UseRawCSSOptions): void;\n\n// Overload 2: Factory function with dependencies\nexport function useRawCSS(\n  factory: () => string,\n  deps: readonly unknown[],\n  options?: UseRawCSSOptions,\n): void;\n\n/**\n * Inject raw CSS text directly without parsing.\n * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.\n *\n * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts\n * with tasty's chunked style sheets.\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\n *\n * Injected styles are permanent — they are not cleaned up on component unmount.\n * Use the `id` option for update tracking when styles change over the\n * component lifecycle.\n *\n * @example Static CSS string\n * ```tsx\n * function GlobalStyles() {\n *   useRawCSS(`\n *     body {\n *       margin: 0;\n *       padding: 0;\n *       font-family: sans-serif;\n *     }\n *   `);\n *\n *   return null;\n * }\n * ```\n *\n * @example Factory function with dependencies\n * ```tsx\n * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {\n *   useRawCSS(() => `\n *     :root {\n *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};\n *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};\n *     }\n *   `, [theme], { id: 'theme-vars' });\n *\n *   return null;\n * }\n * ```\n *\n * @example With options\n * ```tsx\n * function ShadowStyles({ shadowRoot }) {\n *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });\n *   return null;\n * }\n * ```\n */\nexport function useRawCSS(\n  cssOrFactory: string | (() => string),\n  depsOrOptions?: readonly unknown[] | UseRawCSSOptions,\n  options?: UseRawCSSOptions,\n): void {\n  const isFactory = typeof cssOrFactory === 'function';\n\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseRawCSSOptions | undefined);\n\n  const target = getStyleTarget();\n\n  // Client deps cache: skip factory re-evaluation when deps haven't changed\n  if (isFactory && deps && opts?.id && target.mode === 'client') {\n    const cachedDeps = factoryDepsCache.get(opts.id);\n    if (cachedDeps && depsEqual(cachedDeps, deps)) {\n      return;\n    }\n  }\n\n  const css = isFactory\n    ? (cssOrFactory as () => string)()\n    : (cssOrFactory as string);\n\n  if (!css.trim()) return;\n\n  if (target.mode === 'ssr') {\n    const key = opts?.id ? `raw:${opts.id}` : `raw:${hashString(css)}`;\n    target.collector.collectRawCSS(key, css);\n    return;\n  }\n\n  if (target.mode === 'rsc') {\n    const key = opts?.id ? `__raw:${opts.id}` : `__raw:${hashString(css)}`;\n    pushRSCCSS(target.cache, key, css);\n    return;\n  }\n\n  // Client path\n  const id = opts?.id;\n\n  if (id) {\n    const existing = clientEntries.get(id);\n    if (existing) {\n      if (existing.contentKey === css) return;\n      existing.dispose();\n    }\n\n    const { dispose } = injectRawCSS(css, opts);\n    clientEntries.set(id, { contentKey: css, dispose });\n    if (deps) factoryDepsCache.set(id, deps);\n  } else {\n    const contentKey = hashString(css);\n    if (clientContentDedup.has(contentKey)) return;\n    clientContentDedup.add(contentKey);\n    injectRawCSS(css, opts);\n  }\n}\n"],"mappings":";;;;;AA2BA,MAAM,gCAAgB,IAAI,KAA0B;AACpD,MAAM,qCAAqB,IAAI,KAAa;AAC5C,MAAM,mCAAmB,IAAI,KAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqE9D,SAAgB,UACd,cACA,eACA,SACM;CACN,MAAM,YAAY,OAAO,iBAAiB;CAE1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAEL,MAAM,SAAS,gBAAgB;AAG/B,KAAI,aAAa,QAAQ,MAAM,MAAM,OAAO,SAAS,UAAU;EAC7D,MAAM,aAAa,iBAAiB,IAAI,KAAK,GAAG;AAChD,MAAI,cAAc,UAAU,YAAY,KAAK,CAC3C;;CAIJ,MAAM,MAAM,YACP,cAA+B,GAC/B;AAEL,KAAI,CAAC,IAAI,MAAM,CAAE;AAEjB,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,MAAM,MAAM,KAAK,OAAO,KAAK,OAAO,OAAO,WAAW,IAAI;AAChE,SAAO,UAAU,cAAc,KAAK,IAAI;AACxC;;AAGF,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,MAAM,MAAM,KAAK,SAAS,KAAK,OAAO,SAAS,WAAW,IAAI;AACpE,aAAW,OAAO,OAAO,KAAK,IAAI;AAClC;;CAIF,MAAM,KAAK,MAAM;AAEjB,KAAI,IAAI;EACN,MAAM,WAAW,cAAc,IAAI,GAAG;AACtC,MAAI,UAAU;AACZ,OAAI,SAAS,eAAe,IAAK;AACjC,YAAS,SAAS;;EAGpB,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,gBAAc,IAAI,IAAI;GAAE,YAAY;GAAK;GAAS,CAAC;AACnD,MAAI,KAAM,kBAAiB,IAAI,IAAI,KAAK;QACnC;EACL,MAAM,aAAa,WAAW,IAAI;AAClC,MAAI,mBAAmB,IAAI,WAAW,CAAE;AACxC,qBAAmB,IAAI,WAAW;AAClC,eAAa,KAAK,KAAK"}

package/dist/hooks/useStyles.d.ts

@@ -16,10 +16,10 @@ interface UseStylesResult {
 }
 /**
  * Hook to generate CSS classes from Tasty styles.
- * Handles style rendering, className allocation, and CSS injection.
+ * Thin wrapper around `computeStyles()` that adds React context-based
+ * SSR collector discovery for backward compatibility with TastyRegistry.
  *
- * Uses chunking to split styles into logical groups for better caching
- * and CSS reuse across components.
+ * For hook-free usage (e.g. in server components), use `computeStyles()` directly.
  *
  * @example
  * ```tsx

package/dist/hooks/useStyles.js

@@ -1,87 +1,13 @@
-import { stringifyStyles } from "../utils/styles.js";
-import { extractLocalProperties, hasLocalProperties } from "../properties/index.js";
-import { getGlobalKeyframes, hasGlobalKeyframes } from "../config.js";
-import { CHUNK_NAMES, categorizeStyleKeys } from "../chunks/definitions.js";
-import { generateChunkCacheKey } from "../chunks/cacheKey.js";
-import { renderStylesForChunk } from "../chunks/renderChunk.js";
-import { allocateClassName, 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 { useInsertionEffect, useMemo, useRef } from "react";
-
+import { computeStyles } from "../compute-styles.js";
+import { TastySSRContext } from "../ssr/context.js";
+import { useContext } from "react";
 //#region src/hooks/useStyles.ts
 /**
-* Check if styles contain @starting-style rules.
-*
-* @starting-style CSS cannot be applied via multiple class names because
-* of cascade - later rules override earlier ones. When @starting is detected,
-* we combine top-level styles into a single chunk but keep sub-element styles
-* in their own chunk for better caching.
-*/
-function containsStartingStyle(styleKey) {
-	return styleKey.includes("@starting");
-}
-/**
-* Render, cache-key, and allocate a className for a single chunk.
-* Returns a ProcessedChunk, or null if the chunk produces no CSS rules.
-*/
-function processChunk(styles, chunkName, styleKeys) {
-	if (styleKeys.length === 0) return null;
-	const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);
-	if (renderResult.rules.length === 0) return null;
-	const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);
-	const { className } = allocateClassName(cacheKey);
-	return {
-		name: chunkName,
-		styleKeys,
-		cacheKey,
-		renderResult,
-		className
-	};
-}
-/**
-* Merge chunk map entries for @starting-style partial chunking.
-*
-* All non-subcomponent chunks are merged into a single COMBINED entry,
-* while SUBCOMPONENTS stays separate. This preserves CSS cascade for
-* @starting-style while still allowing sub-element styles to cache independently.
-*/
-function mergeChunksForStartingStyle(chunkMap) {
-	const merged = /* @__PURE__ */ new Map();
-	const combinedKeys = [];
-	for (const [chunkName, keys] of chunkMap) if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) merged.set(CHUNK_NAMES.SUBCOMPONENTS, keys);
-	else combinedKeys.push(...keys);
-	if (combinedKeys.length > 0) {
-		const result = /* @__PURE__ */ new Map();
-		result.set(CHUNK_NAMES.COMBINED, combinedKeys);
-		for (const [k, v] of merged) result.set(k, v);
-		return result;
-	}
-	return merged;
-}
-/**
-* 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);
-}
-/**
 * Hook to generate CSS classes from Tasty styles.
-* Handles style rendering, className allocation, and CSS injection.
+* Thin wrapper around `computeStyles()` that adds React context-based
+* SSR collector discovery for backward compatibility with TastyRegistry.
 *
-* Uses chunking to split styles into logical groups for better caching
-* and CSS reuse across components.
+* For hook-free usage (e.g. in server components), use `computeStyles()` directly.
 *
 * @example
 * ```tsx
@@ -97,73 +23,9 @@ function getUsedKeyframes(styles) {
 * ```
 */
 function useStyles(styles) {
-	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 || Object.keys(resolvedStyles).length === 0) 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 [];
-		let chunkMap = categorizeStyleKeys(currentStyles);
-		if (containsStartingStyle(styleKey)) chunkMap = mergeChunksForStartingStyle(chunkMap);
-		const chunks = [];
-		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;
-		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;
-		}
-		if (currentStyles && hasLocalProperties(currentStyles)) {
-			const localProperties = extractLocalProperties(currentStyles);
-			if (localProperties) for (const [token, definition] of Object.entries(localProperties)) property(token, definition);
-		}
-		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, { ssrCollector: useContext(TastySSRContext) });
 }
-
 //#endregion
 export { useStyles };
+
 //# sourceMappingURL=useStyles.js.map

package/dist/hooks/useStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport {\n  categorizeStyleKeys,\n  CHUNK_NAMES,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from '../chunks';\nimport { getGlobalKeyframes, hasGlobalKeyframes } from '../config';\nimport { allocateClassName, inject, keyframes, property } from '../injector';\nimport type { KeyframesSteps } from '../injector/types';\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 type { Styles } from '../styles/types';\nimport { resolveRecipes } from '../utils/resolve-recipes';\nimport { stringifyStyles } from '../utils/styles';\n\n/**\n * Check if styles contain @starting-style rules.\n *\n * @starting-style CSS cannot be applied via multiple class names because\n * of cascade - later rules override earlier ones. When @starting is detected,\n * we combine top-level styles into a single chunk but keep sub-element styles\n * in their own chunk for better caching.\n */\nfunction containsStartingStyle(styleKey: string): boolean {\n  return styleKey.includes('@starting');\n}\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 */\nfunction processChunk(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);\n  if (renderResult.rules.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const { className } = allocateClassName(cacheKey);\n\n  return { name: chunkName, styleKeys, cacheKey, renderResult, className };\n}\n\n/**\n * Merge chunk map entries for @starting-style partial chunking.\n *\n * All non-subcomponent chunks are merged into a single COMBINED entry,\n * while SUBCOMPONENTS stays separate. This preserves CSS cascade for\n * @starting-style while still allowing sub-element styles to cache independently.\n */\nfunction mergeChunksForStartingStyle(\n  chunkMap: Map<string, string[]>,\n): Map<string, string[]> {\n  const merged = new Map<string, string[]>();\n  const combinedKeys: string[] = [];\n\n  for (const [chunkName, keys] of chunkMap) {\n    if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) {\n      merged.set(CHUNK_NAMES.SUBCOMPONENTS, keys);\n    } else {\n      combinedKeys.push(...keys);\n    }\n  }\n\n  if (combinedKeys.length > 0) {\n    // Insert COMBINED first so it appears before SUBCOMPONENTS\n    const result = new Map<string, string[]>();\n    result.set(CHUNK_NAMES.COMBINED, combinedKeys);\n    for (const [k, v] of merged) {\n      result.set(k, v);\n    }\n    return result;\n  }\n\n  return merged;\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 * Hook to generate CSS classes from Tasty styles.\n * Handles style rendering, className allocation, and CSS injection.\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  // 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 || Object.keys(resolvedStyles).length === 0) {\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    let chunkMap = categorizeStyleKeys(\n      currentStyles as Record<string, unknown>,\n    );\n\n    // Partial chunking for styles containing @starting-style rules.\n    // @starting-style CSS cannot work with multiple class names due to cascade,\n    // so we merge all top-level chunks into one but keep sub-element styles separate.\n    if (containsStartingStyle(styleKey)) {\n      chunkMap = mergeChunksForStartingStyle(chunkMap);\n    }\n\n    // Process each chunk: render → cache key → allocate className\n    const chunks: ProcessedChunk[] = [];\n\n    for (const [chunkName, chunkStyleKeys] of chunkMap) {\n      const chunk = processChunk(currentStyles, chunkName, chunkStyleKeys);\n      if (chunk) {\n        chunks.push(chunk);\n      }\n    }\n\n    return chunks;\n  }, [styleKey]);\n\n  // Inject styles in insertion effect (avoids render phase side effects)\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    // 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    // Register local @properties if defined (no dispose needed - properties are permanent)\n    // Token formats: $name → --name, #name → --name-color (with auto syntax: '<color>')\n    // The injector.property() handles token parsing and auto-settings internally\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          // Pass the token directly - injector handles parsing\n          property(token, definition);\n        }\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":";;;;;;;;;;;;;;;;;;;;AAiCA,SAAS,sBAAsB,UAA2B;AACxD,QAAO,SAAS,SAAS,YAAY;;;;;;AAiCvC,SAAS,aACP,QACA,WACA,WACuB;AACvB,KAAI,UAAU,WAAW,EAAG,QAAO;CAEnC,MAAM,eAAe,qBAAqB,QAAQ,WAAW,UAAU;AACvE,KAAI,aAAa,MAAM,WAAW,EAAG,QAAO;CAE5C,MAAM,WAAW,sBAAsB,QAAQ,WAAW,UAAU;CACpE,MAAM,EAAE,cAAc,kBAAkB,SAAS;AAEjD,QAAO;EAAE,MAAM;EAAW;EAAW;EAAU;EAAc;EAAW;;;;;;;;;AAU1E,SAAS,4BACP,UACuB;CACvB,MAAM,yBAAS,IAAI,KAAuB;CAC1C,MAAM,eAAyB,EAAE;AAEjC,MAAK,MAAM,CAAC,WAAW,SAAS,SAC9B,KAAI,cAAc,YAAY,cAC5B,QAAO,IAAI,YAAY,eAAe,KAAK;KAE3C,cAAa,KAAK,GAAG,KAAK;AAI9B,KAAI,aAAa,SAAS,GAAG;EAE3B,MAAM,yBAAS,IAAI,KAAuB;AAC1C,SAAO,IAAI,YAAY,UAAU,aAAa;AAC9C,OAAK,MAAM,CAAC,GAAG,MAAM,OACnB,QAAO,IAAI,GAAG,EAAE;AAElB,SAAO;;AAGT,QAAO;;;;;;;;;;;AAYT,SAAS,iBACP,QACuC;CAEvC,MAAM,WAAW,kBAAkB,OAAO;CAC1C,MAAM,YAAY,oBAAoB;AACtC,KAAI,CAAC,YAAY,CAAC,UAAW,QAAO;CAGpC,MAAM,YAAY,gCAAgC,OAAO;AACzD,KAAI,UAAU,SAAS,EAAG,QAAO;AAQjC,QAAO,oBAHc,eAFP,WAAW,sBAAsB,OAAO,GAAG,MAC1C,YAAY,oBAAoB,GAAG,KACA,EAGT,UAAU;;;;;;;;;;;;;;;;;;;;;;AAuBrD,SAAgB,UAAU,QAA2C;CAEnE,MAAM,aAAa,OAAuB,EAAE,CAAC;CAG7C,MAAM,YAAY,OAAoD;EACpE,KAAK;EACL,QAAQ;EACT,CAAC;CAGF,MAAM,iBAAiB,cAAc;AACnC,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,eAAe,OAAO;IAC5B,CAAC,OAAO,CAAC;CAGZ,MAAM,WAAW,cAAc;AAC7B,MAAI,CAAC,kBAAkB,OAAO,KAAK,eAAe,CAAC,WAAW,EAC5D,QAAO;AAET,SAAO,gBAAgB,eAAe;IACrC,CAAC,eAAe,CAAC;AAGpB,KAAI,UAAU,QAAQ,QAAQ,SAC5B,WAAU,UAAU;EAAE,KAAK;EAAU,QAAQ;EAAgB;CAK/D,MAAM,kBAAoC,cAAc;EACtD,MAAM,gBAAgB,UAAU,QAAQ;AACxC,MAAI,CAAC,YAAY,CAAC,cAChB,QAAO,EAAE;EAIX,IAAI,WAAW,oBACb,cACD;AAKD,MAAI,sBAAsB,SAAS,CACjC,YAAW,4BAA4B,SAAS;EAIlD,MAAM,SAA2B,EAAE;AAEnC,OAAK,MAAM,CAAC,WAAW,mBAAmB,UAAU;GAClD,MAAM,QAAQ,aAAa,eAAe,WAAW,eAAe;AACpE,OAAI,MACF,QAAO,KAAK,MAAM;;AAItB,SAAO;IACN,CAAC,SAAS,CAAC;AAGd,0BAAyB;AAEvB,aAAW,QAAQ,SAAS,YAAY,WAAW,CAAC;AACpD,aAAW,UAAU,EAAE;AAGvB,MAAI,gBAAgB,WAAW,EAC7B;EAGF,MAAM,gBAAgB,UAAU,QAAQ;EAGxC,MAAM,gBAAgB,gBAClB,iBAAiB,cAAc,GAC/B;EAGJ,IAAI,UAAsC;AAE1C,MAAI,eAAe;AACjB,6BAAU,IAAI,KAAK;AACnB,QAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,cAAc,EAAE;IACzD,MAAM,SAAS,UAAU,OAAO,EAAE,MAAM,CAAC;IACzC,MAAM,eAAe,OAAO,UAAU;AAEtC,QAAI,iBAAiB,KACnB,SAAQ,IAAI,MAAM,aAAa;AAEjC,eAAW,QAAQ,KAAK,OAAO,QAAQ;;AAGzC,OAAI,QAAQ,SAAS,EACnB,WAAU;;AAQd,MAAI,iBAAiB,mBAAmB,cAAc,EAAE;GACtD,MAAM,kBAAkB,uBAAuB,cAAc;AAC7D,OAAI,gBACF,MAAK,MAAM,CAAC,OAAO,eAAe,OAAO,QAAQ,gBAAgB,CAE/D,UAAS,OAAO,WAAW;;AAMjC,OAAK,MAAM,SAAS,gBAClB,KAAI,MAAM,aAAa,MAAM,SAAS,GAAG;GASvC,MAAM,EAAE,YAAY,OAPE,UAClB,MAAM,aAAa,MAAM,KAAK,UAAU;IACtC,GAAG;IACH,cAAc,sBAAsB,KAAK,cAAc,QAAS;IACjE,EAAE,GACH,MAAM,aAAa,OAEmB,EACxC,UAAU,MAAM,UACjB,CAAC;AACF,cAAW,QAAQ,KAAK,QAAQ;;AAIpC,eAAa;AACX,cAAW,QAAQ,SAAS,YAAY,WAAW,CAAC;AACpD,cAAW,UAAU,EAAE;;IAExB,CAAC,gBAAgB,CAAC;AAOrB,QAAO,EACL,WALgB,cAAc;AAC9B,SAAO,gBAAgB,KAAK,UAAU,MAAM,UAAU,CAAC,KAAK,IAAI;IAC/D,CAAC,gBAAgB,CAAC,EAIpB"}
+{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport { computeStyles } from '../compute-styles';\nimport { TastySSRContext } from '../ssr/context';\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 * Hook to generate CSS classes from Tasty styles.\n * Thin wrapper around `computeStyles()` that adds React context-based\n * SSR collector discovery for backward compatibility with TastyRegistry.\n *\n * For hook-free usage (e.g. in server components), use `computeStyles()` directly.\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, { ssrCollector: useContext(TastySSRContext) });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,UAAU,QAA2C;AACnE,QAAO,cAAc,QAAQ,EAAE,cAAc,WAAW,gBAAgB,EAAE,CAAC"}

package/dist/index.d.ts

@@ -1,30 +1,36 @@
-import { CacheMetrics, DisposeFunction, 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";
-import { AtRuleContext, ParsedAdvancedState, StateParserContext, createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
-import { COMPUTE_FUNC_MAP, CSSMap, CUSTOM_UNITS, ComputeModel, DIRECTIONS, ParsedColor, RawStyleHandler, STATE_OPERATORS, STATE_OPERATOR_LIST, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "./utils/styles.js";
-import { NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames } from "./styles/types.js";
+import { getNamedColorHex, getRgbValuesFromRgbaString, hexToRgb, hslToRgbValues, strToRgb } from "./utils/color-math.js";
+import { CSSMap, CUSTOM_UNITS, DIRECTIONS, ParsedColor, RawStyleHandler, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleValue, StyleValueStateMap, customFunc, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, normalizeColorTokenValue, parseColor, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, stringifyStyles } from "./utils/styles.js";
+import { ConfigTokenValue, ConfigTokens, NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames } from "./styles/types.js";
 import { ConditionNode } from "./pipeline/conditions.js";
+import { AtRuleContext, ParsedAdvancedState, StateParserContext, createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
 import { ParseStateKeyOptions, parseStateKey } from "./pipeline/parseStateKey.js";
 import { RenderResult, StyleResult, isSelector, renderStyles } from "./pipeline/index.js";
 import { SheetManager } from "./injector/sheet-manager.js";
 import { StyleInjector } from "./injector/injector.js";
+import { ColorSpace } from "./utils/color-space.js";
+import { TypographyPreset, TypographyTokenValue, generateTypographyTokens } from "./utils/typography.js";
 import { TastyPlugin, TastyPluginFactory } from "./plugins/types.js";
-import { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
+import { TastyConfig, configure, getConfig, getGlobalCounterStyle, getGlobalFontFace, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
 import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
 import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
-import { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "./injector/index.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, 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";
 import { useKeyframes } from "./hooks/useKeyframes.js";
 import { UsePropertyOptions, useProperty } from "./hooks/useProperty.js";
+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 { 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, 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";
@@ -32,11 +38,8 @@ 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 { hslToRgbValues, processTokens, stringifyTokens } from "./utils/process-tokens.js";
-import { TypographyPreset } from "./tokens/typography.js";
-import { generateTypographyTokens } from "./utils/typography.js";
+import { processTokens } from "./utils/process-tokens.js";
 import { tastyDebug } from "./debug.js";
-import "./core/index.js";
 import { CSSProperties as CSSProperties$1 } from "react";
 
 //#region src/index.d.ts
@@ -44,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, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CSSMap, CSSProperties, CUSTOM_UNITS, CacheMetrics, ChunkInfo, ChunkName, ColorStyleProps, ComputeModel, ConditionNode, ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParseStateKeyOptions, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, RootRegistry, RuleInfo, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, 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, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, 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, TypographyTokenValue, 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, 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

@@ -1,33 +1,36 @@
+import { getNamedColorHex, getRgbValuesFromRgbaString, hexToRgb, hslToRgbValues, strToRgb } from "./utils/color-math.js";
 import { Bucket } from "./parser/types.js";
 import { StyleParser } from "./parser/parser.js";
 import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
-import { createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
-import { hslToRgbValues, processTokens, stringifyTokens } from "./utils/process-tokens.js";
-import { COMPUTE_FUNC_MAP, CUSTOM_UNITS, DIRECTIONS, STATE_OPERATORS, STATE_OPERATOR_LIST, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "./utils/styles.js";
+import { CUSTOM_UNITS, DIRECTIONS, customFunc, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, normalizeColorTokenValue, parseColor, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, stringifyStyles } from "./utils/styles.js";
+import { deprecationWarning, warn } from "./utils/warnings.js";
 import { styleHandlers } from "./styles/predefined.js";
 import { SheetManager } from "./injector/sheet-manager.js";
 import { StyleInjector } from "./injector/injector.js";
+import { createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
 import { parseStateKey } from "./pipeline/parseStateKey.js";
 import { isSelector, renderStyles } from "./pipeline/index.js";
-import { configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
+import { generateTypographyTokens } from "./utils/typography.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, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "./injector/index.js";
+import { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, 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 { deprecationWarning, warn } from "./utils/warnings.js";
-import { generateTypographyTokens } from "./utils/typography.js";
+import { processTokens } from "./utils/process-tokens.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";
-
-export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+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, 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, 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,18 +1,9 @@
-import { CacheMetrics, DisposeFunction, 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;
-};
 /**
  * Inject styles and return className with dispose function
  */
@@ -117,6 +108,24 @@ declare function property(name: string, options?: PropertyOptions): void;
 declare function isPropertyDefined(name: string, options?: {
   root?: Document | ShadowRoot;
 }): boolean;
+/**
+ * Inject a CSS @font-face rule.
+ *
+ * Permanent and global — no dispose or ref-counting.
+ * Deduplicates by content hash (family + descriptors).
+ */
+declare function fontFace(family: string, descriptors: FontFaceDescriptors, options?: {
+  root?: Document | ShadowRoot;
+}): void;
+/**
+ * Inject a CSS @counter-style rule.
+ *
+ * Permanent and global — no dispose or ref-counting.
+ * Deduplicates by name (first definition wins).
+ */
+declare function counterStyle(name: string, descriptors: CounterStyleDescriptors, options?: {
+  root?: Document | ShadowRoot;
+}): void;
 /**
  * Get CSS text from all sheets (for SSR)
  */
@@ -134,6 +143,22 @@ 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 usage for GC.
+ * When the global touch counter reaches `touchInterval`, schedules GC.
+ */
+declare function touch(className: string, options?: {
+  root?: Document | ShadowRoot;
+}): void;
+/**
+ * Synchronous garbage collection of unused styles.
+ * Evicts the oldest unused styles when usageMap exceeds capacity.
+ * With `{ force: true }`, removes ALL unused styles regardless of capacity.
+ *
+ * @returns Number of styles evicted.
+ */
+declare function gc(options?: GCOptions): number;
 /**
  * Check if we're currently running in a test environment
  */
@@ -153,5 +178,5 @@ declare function destroy(root?: Document | ShadowRoot): void;
  */
 declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
 //#endregion
-export { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property };
+export { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, touch };
 //# sourceMappingURL=index.d.ts.map

package/dist/injector/index.js

@@ -1,20 +1,14 @@
-import { SheetManager } from "./sheet-manager.js";
+import "./sheet-manager.js";
 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);
-}
-/**
 * 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
@@ -93,6 +87,24 @@ function isPropertyDefined(name, options) {
 	return getGlobalInjector().isPropertyDefined(name, options);
 }
 /**
+* Inject a CSS @font-face rule.
+*
+* Permanent and global — no dispose or ref-counting.
+* Deduplicates by content hash (family + descriptors).
+*/
+function fontFace(family, descriptors, options) {
+	return getGlobalInjector().fontFace(family, descriptors, options);
+}
+/**
+* Inject a CSS @counter-style rule.
+*
+* Permanent and global — no dispose or ref-counting.
+* Deduplicates by name (first definition wins).
+*/
+function counterStyle(name, descriptors, options) {
+	return getGlobalInjector().counterStyle(name, descriptors, options);
+}
+/**
 * Get CSS text from all sheets (for SSR)
 */
 function getCssText(options) {
@@ -107,7 +119,7 @@ function getCssTextForNode(node, options) {
 	const readClasses = (el) => {
 		const cls = el.getAttribute("class");
 		if (!cls) return;
-		for (const token of cls.split(/\s+/)) if (/^t\d+$/.test(token)) classSet.add(token);
+		for (const token of cls.split(/\s+/)) if (/^t[a-z0-9]+$/.test(token)) classSet.add(token);
 	};
 	if (node.getAttribute) readClasses(node);
 	const elements = node.querySelectorAll ? node.querySelectorAll("[class]") : [];
@@ -121,6 +133,25 @@ 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 usage for GC.
+* When the global touch counter reaches `touchInterval`, schedules GC.
+*/
+function touch(className, options) {
+	if (!getConfig().gc) return;
+	getGlobalInjector().touch(className, options);
+}
+/**
+* Synchronous garbage collection of unused styles.
+* Evicts the oldest unused styles when usageMap exceeds capacity.
+* With `{ force: true }`, removes ALL unused styles regardless of capacity.
+*
+* @returns Number of styles evicted.
+*/
+function gc(options) {
+	return getGlobalInjector().gc(options);
+}
+/**
 * Check if we're currently running in a test environment
 */
 function getIsTestEnvironment() {
@@ -148,7 +179,7 @@ function createInjector(config = {}) {
 		...config
 	});
 }
-
 //#endregion
-export { allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property };
+export { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, 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  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 * 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 * 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} from './types';\n\nexport { StyleInjector } from './injector';\nexport { SheetManager } from './sheet-manager';\n"],"mappings":";;;;;;;;AAoBA,SAAgB,kBACd,UACA,SACiD;AACjD,QAAO,mBAAmB,CAAC,kBAAkB,UAAU,QAAQ;;;;;AAMjE,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;;;;;AAM7D,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[a-z0-9]+$/.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 usage for GC.\n * When the global touch counter reaches `touchInterval`, schedules 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 * Evicts the oldest unused styles when usageMap exceeds capacity.\n * With `{ force: true }`, removes ALL unused styles regardless of capacity.\n *\n * @returns Number of styles evicted.\n */\nexport function gc(options?: GCOptions): number {\n  return getGlobalInjector().gc(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,eAAe,KAAK,MAAM,CAAE,UAAS,IAAI,MAAM;;AAKvD,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;;;;;;;AAQ1C,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;;;;;AAMxC,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"}