@tenphi/tasty 1.4.2 → 1.5.0

package/dist/hooks/useProperty.js

@@ -1,20 +1,21 @@
 import { getGlobalInjector } from "../config.js";
+import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
 import { formatPropertyCSS } from "../ssr/format-property.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
-import { useInsertionEffect, useMemo } from "react";
 //#region src/hooks/useProperty.ts
 /**
-* Hook to register a CSS @property custom property.
+* Register a CSS @property custom property.
 * This enables advanced features like animating custom properties.
 *
 * Note: @property rules are global and persistent once defined.
-* The hook ensures the property is only registered once per root.
+* The function ensures the property is only registered once per root.
 *
 * Accepts tasty token syntax for the property name:
 * - `$name` → defines `--name`
 * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
 * - `--name` → defines `--name` (legacy format)
 *
+* Works in all environments: client, SSR with collector, and React Server Components.
+*
 * @param name - The property token ($name, #name) or CSS property name (--name)
 * @param options - Property configuration
 *
@@ -56,51 +57,38 @@ import { useInsertionEffect, useMemo } from "react";
 * ```
 */
 function useProperty(name, options) {
-	const ssrCollector = getRegisteredSSRCollector();
-	const optionsKey = useMemo(() => {
-		if (!options) return "";
-		return JSON.stringify({
-			syntax: options.syntax,
-			inherits: options.inherits,
-			initialValue: options.initialValue
-		});
-	}, [
-		options?.syntax,
-		options?.inherits,
-		options?.initialValue
-	]);
-	useMemo(() => {
-		if (!ssrCollector || !name) return;
-		ssrCollector.collectInternals();
+	if (!name) {
+		console.warn(`[Tasty] useProperty: property name is required`);
+		return;
+	}
+	const target = getStyleTarget();
+	if (target.mode === "ssr") {
+		target.collector.collectInternals();
 		const css = formatPropertyCSS(name, {
 			syntax: options?.syntax,
 			inherits: options?.inherits,
 			initialValue: options?.initialValue
 		});
-		if (css) ssrCollector.collectProperty(name, css);
-	}, [
-		ssrCollector,
-		name,
-		optionsKey
-	]);
-	useInsertionEffect(() => {
-		if (!name) {
-			console.warn(`[Tasty] useProperty: property name is required`);
-			return;
-		}
-		const injector = getGlobalInjector();
-		if (injector.isPropertyDefined(name, { root: options?.root })) return;
-		injector.property(name, {
+		if (css) target.collector.collectProperty(name, css);
+		return;
+	}
+	if (target.mode === "rsc") {
+		const css = formatPropertyCSS(name, {
 			syntax: options?.syntax,
 			inherits: options?.inherits,
-			initialValue: options?.initialValue,
-			root: options?.root
+			initialValue: options?.initialValue
 		});
-	}, [
-		name,
-		optionsKey,
-		options?.root
-	]);
+		if (css) pushRSCCSS(target.cache, `__prop:${name}`, css);
+		return;
+	}
+	const injector = getGlobalInjector();
+	if (injector.isPropertyDefined(name, { root: options?.root })) return;
+	injector.property(name, {
+		syntax: options?.syntax,
+		inherits: options?.inherits,
+		initialValue: options?.initialValue,
+		root: options?.root
+	});
 }
 //#endregion
 export { useProperty };

package/dist/hooks/useProperty.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProperty.js","names":[],"sources":["../../src/hooks/useProperty.ts"],"sourcesContent":["import { useInsertionEffect, useMemo } from 'react';\n\nimport { getGlobalInjector } from '../config';\nimport { formatPropertyCSS } from '../ssr/format-property';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\nexport interface UsePropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').\n   * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.\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   * For color tokens (#name), this defaults to 'transparent' if not specified.\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to register 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 * The hook ensures the property is only registered once per root.\n *\n * Accepts tasty token syntax for the property name:\n * - `$name` → defines `--name`\n * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')\n * - `--name` → defines `--name` (legacy format)\n *\n * @param name - The property token ($name, #name) or CSS property name (--name)\n * @param options - Property configuration\n *\n * @example Basic property with token syntax\n * ```tsx\n * function Spinner() {\n *   useProperty('$rotation', {\n *     syntax: '<angle>',\n *     inherits: false,\n *     initialValue: '0deg',\n *   });\n *\n *   return <div className=\"spinner\" />;\n * }\n * ```\n *\n * @example Color property with token syntax (auto-sets syntax)\n * ```tsx\n * function MyComponent() {\n *   useProperty('#theme', {\n *     initialValue: 'red', // syntax: '<color>' is auto-set\n *   });\n *\n *   // Now --theme-color can be animated with CSS transitions\n *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;\n * }\n * ```\n *\n * @example Legacy format (still supported)\n * ```tsx\n * function ResizableBox() {\n *   useProperty('--box-size', {\n *     syntax: '<length>',\n *     initialValue: '100px',\n *   });\n *\n *   return <div style={{ width: 'var(--box-size)' }} />;\n * }\n * ```\n */\nexport function useProperty(name: string, options?: UsePropertyOptions): void {\n  const ssrCollector = getRegisteredSSRCollector();\n\n  // Memoize the options to create a stable dependency\n  const optionsKey = useMemo(() => {\n    if (!options) return '';\n    return JSON.stringify({\n      syntax: options.syntax,\n      inherits: options.inherits,\n      initialValue: options.initialValue,\n    });\n  }, [options?.syntax, options?.inherits, options?.initialValue]);\n\n  // SSR path: collect @property CSS during render\n  useMemo(() => {\n    if (!ssrCollector || !name) return;\n\n    ssrCollector.collectInternals();\n\n    const css = formatPropertyCSS(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n    });\n    if (css) {\n      ssrCollector.collectProperty(name, css);\n    }\n  }, [ssrCollector, name, optionsKey]);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    if (!name) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.warn(`[Tasty] useProperty: property name is required`);\n      }\n      return;\n    }\n\n    const injector = getGlobalInjector();\n\n    if (injector.isPropertyDefined(name, { root: options?.root })) {\n      return;\n    }\n\n    injector.property(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n      root: options?.root,\n    });\n  }, [name, optionsKey, options?.root]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAgB,YAAY,MAAc,SAAoC;CAC5E,MAAM,eAAe,2BAA2B;CAGhD,MAAM,aAAa,cAAc;AAC/B,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,KAAK,UAAU;GACpB,QAAQ,QAAQ;GAChB,UAAU,QAAQ;GAClB,cAAc,QAAQ;GACvB,CAAC;IACD;EAAC,SAAS;EAAQ,SAAS;EAAU,SAAS;EAAa,CAAC;AAG/D,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,KAAM;AAE5B,eAAa,kBAAkB;EAE/B,MAAM,MAAM,kBAAkB,MAAM;GAClC,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACxB,CAAC;AACF,MAAI,IACF,cAAa,gBAAgB,MAAM,IAAI;IAExC;EAAC;EAAc;EAAM;EAAW,CAAC;AAGpC,0BAAyB;AACvB,MAAI,CAAC,MAAM;AAEP,WAAQ,KAAK,iDAAiD;AAEhE;;EAGF,MAAM,WAAW,mBAAmB;AAEpC,MAAI,SAAS,kBAAkB,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC,CAC3D;AAGF,WAAS,SAAS,MAAM;GACtB,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACvB,MAAM,SAAS;GAChB,CAAC;IACD;EAAC;EAAM;EAAY,SAAS;EAAK,CAAC"}
+{"version":3,"file":"useProperty.js","names":[],"sources":["../../src/hooks/useProperty.ts"],"sourcesContent":["import { getGlobalInjector } from '../config';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\nimport { formatPropertyCSS } from '../ssr/format-property';\n\nexport interface UsePropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').\n   * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.\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   * For color tokens (#name), this defaults to 'transparent' if not specified.\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Register 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 * The function ensures the property is only registered once per root.\n *\n * Accepts tasty token syntax for the property name:\n * - `$name` → defines `--name`\n * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')\n * - `--name` → defines `--name` (legacy format)\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\n *\n * @param name - The property token ($name, #name) or CSS property name (--name)\n * @param options - Property configuration\n *\n * @example Basic property with token syntax\n * ```tsx\n * function Spinner() {\n *   useProperty('$rotation', {\n *     syntax: '<angle>',\n *     inherits: false,\n *     initialValue: '0deg',\n *   });\n *\n *   return <div className=\"spinner\" />;\n * }\n * ```\n *\n * @example Color property with token syntax (auto-sets syntax)\n * ```tsx\n * function MyComponent() {\n *   useProperty('#theme', {\n *     initialValue: 'red', // syntax: '<color>' is auto-set\n *   });\n *\n *   // Now --theme-color can be animated with CSS transitions\n *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;\n * }\n * ```\n *\n * @example Legacy format (still supported)\n * ```tsx\n * function ResizableBox() {\n *   useProperty('--box-size', {\n *     syntax: '<length>',\n *     initialValue: '100px',\n *   });\n *\n *   return <div style={{ width: 'var(--box-size)' }} />;\n * }\n * ```\n */\nexport function useProperty(name: string, options?: UsePropertyOptions): void {\n  if (!name) {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(`[Tasty] useProperty: property name is required`);\n    }\n    return;\n  }\n\n  const target = getStyleTarget();\n\n  if (target.mode === 'ssr') {\n    target.collector.collectInternals();\n\n    const css = formatPropertyCSS(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n    });\n    if (css) {\n      target.collector.collectProperty(name, css);\n    }\n    return;\n  }\n\n  if (target.mode === 'rsc') {\n    const css = formatPropertyCSS(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n    });\n    if (css) {\n      pushRSCCSS(target.cache, `__prop:${name}`, css);\n    }\n    return;\n  }\n\n  const injector = getGlobalInjector();\n\n  if (injector.isPropertyDefined(name, { root: options?.root })) {\n    return;\n  }\n\n  injector.property(name, {\n    syntax: options?.syntax,\n    inherits: options?.inherits,\n    initialValue: options?.initialValue,\n    root: options?.root,\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAgB,YAAY,MAAc,SAAoC;AAC5E,KAAI,CAAC,MAAM;AAEP,UAAQ,KAAK,iDAAiD;AAEhE;;CAGF,MAAM,SAAS,gBAAgB;AAE/B,KAAI,OAAO,SAAS,OAAO;AACzB,SAAO,UAAU,kBAAkB;EAEnC,MAAM,MAAM,kBAAkB,MAAM;GAClC,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACxB,CAAC;AACF,MAAI,IACF,QAAO,UAAU,gBAAgB,MAAM,IAAI;AAE7C;;AAGF,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,MAAM,kBAAkB,MAAM;GAClC,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACxB,CAAC;AACF,MAAI,IACF,YAAW,OAAO,OAAO,UAAU,QAAQ,IAAI;AAEjD;;CAGF,MAAM,WAAW,mBAAmB;AAEpC,KAAI,SAAS,kBAAkB,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC,CAC3D;AAGF,UAAS,SAAS,MAAM;EACtB,QAAQ,SAAS;EACjB,UAAU,SAAS;EACnB,cAAc,SAAS;EACvB,MAAM,SAAS;EAChB,CAAC"}

package/dist/hooks/useRawCSS.d.ts

@@ -1,51 +1,20 @@
 //#region src/hooks/useRawCSS.d.ts
 interface UseRawCSSOptions {
+  /**
+   * Shadow root or document to inject into.
+   * Note: `root` is not part of the update-tracking comparison — changing
+   * only the root for the same id/content will not re-inject.
+   */
   root?: Document | ShadowRoot;
+  /**
+   * Stable identifier for update tracking (client-only). When provided,
+   * changing the CSS content will dispose the previous injection and inject
+   * the new one. Without an id, deduplication is purely content-based (same
+   * CSS is injected only once). In RSC mode, renders are single-pass so
+   * update tracking does not apply.
+   */
+  id?: string;
 }
-/**
- * Hook to inject raw CSS text directly without parsing.
- * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.
- *
- * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts
- * with tasty's chunked style sheets.
- *
- * @example Static CSS string
- * ```tsx
- * function GlobalStyles() {
- *   useRawCSS(`
- *     body {
- *       margin: 0;
- *       padding: 0;
- *       font-family: sans-serif;
- *     }
- *   `);
- *
- *   return null;
- * }
- * ```
- *
- * @example Factory function with dependencies (like useMemo)
- * ```tsx
- * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {
- *   useRawCSS(() => `
- *     :root {
- *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};
- *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};
- *     }
- *   `, [theme]);
- *
- *   return null;
- * }
- * ```
- *
- * @example With options
- * ```tsx
- * function ShadowStyles({ shadowRoot }) {
- *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });
- *   return null;
- * }
- * ```
- */
 declare function useRawCSS(css: string, options?: UseRawCSSOptions): void;
 declare function useRawCSS(factory: () => string, deps: readonly unknown[], options?: UseRawCSSOptions): void;
 //#endregion

package/dist/hooks/useRawCSS.js

@@ -1,32 +1,101 @@
 import { injectRawCSS } from "../injector/index.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
+import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
+import { hashString } from "../utils/hash.js";
+import { depsEqual } from "../utils/deps-equal.js";
 //#region src/hooks/useRawCSS.ts
+const clientEntries = /* @__PURE__ */ new Map();
+const clientContentDedup = /* @__PURE__ */ new Set();
+const factoryDepsCache = /* @__PURE__ */ new Map();
+/**
+* Inject raw CSS text directly without parsing.
+* This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.
+*
+* The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts
+* with tasty's chunked style sheets.
+*
+* Works in all environments: client, SSR with collector, and React Server Components.
+*
+* Injected styles are permanent — they are not cleaned up on component unmount.
+* Use the `id` option for update tracking when styles change over the
+* component lifecycle.
+*
+* @example Static CSS string
+* ```tsx
+* function GlobalStyles() {
+*   useRawCSS(`
+*     body {
+*       margin: 0;
+*       padding: 0;
+*       font-family: sans-serif;
+*     }
+*   `);
+*
+*   return null;
+* }
+* ```
+*
+* @example Factory function with dependencies
+* ```tsx
+* function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {
+*   useRawCSS(() => `
+*     :root {
+*       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};
+*       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};
+*     }
+*   `, [theme], { id: 'theme-vars' });
+*
+*   return null;
+* }
+* ```
+*
+* @example With options
+* ```tsx
+* function ShadowStyles({ shadowRoot }) {
+*   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });
+*   return null;
+* }
+* ```
+*/
 function useRawCSS(cssOrFactory, depsOrOptions, options) {
-	const ssrCollector = getRegisteredSSRCollector();
 	const isFactory = typeof cssOrFactory === "function";
 	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
 	const opts = isFactory ? options : depsOrOptions;
-	const css = useMemo(() => isFactory ? cssOrFactory() : cssOrFactory, isFactory ? deps ?? [] : [cssOrFactory]);
-	useMemo(() => {
-		if (!ssrCollector || !css.trim()) return;
-		const key = `raw:${css.length}:${css.slice(0, 64)}`;
-		ssrCollector.collectRawCSS(key, css);
-	}, [ssrCollector, css]);
-	const disposeRef = useRef(null);
-	useInsertionEffect(() => {
-		disposeRef.current?.();
-		if (!css.trim()) {
-			disposeRef.current = null;
-			return;
+	const target = getStyleTarget();
+	if (isFactory && deps && opts?.id && target.mode === "client") {
+		const cachedDeps = factoryDepsCache.get(opts.id);
+		if (cachedDeps && depsEqual(cachedDeps, deps)) return;
+	}
+	const css = isFactory ? cssOrFactory() : cssOrFactory;
+	if (!css.trim()) return;
+	if (target.mode === "ssr") {
+		const key = opts?.id ? `raw:${opts.id}` : `raw:${hashString(css)}`;
+		target.collector.collectRawCSS(key, css);
+		return;
+	}
+	if (target.mode === "rsc") {
+		const key = opts?.id ? `__raw:${opts.id}` : `__raw:${hashString(css)}`;
+		pushRSCCSS(target.cache, key, css);
+		return;
+	}
+	const id = opts?.id;
+	if (id) {
+		const existing = clientEntries.get(id);
+		if (existing) {
+			if (existing.contentKey === css) return;
+			existing.dispose();
 		}
 		const { dispose } = injectRawCSS(css, opts);
-		disposeRef.current = dispose;
-		return () => {
-			disposeRef.current?.();
-			disposeRef.current = null;
-		};
-	}, [css, opts?.root]);
+		clientEntries.set(id, {
+			contentKey: css,
+			dispose
+		});
+		if (deps) factoryDepsCache.set(id, deps);
+	} else {
+		const contentKey = hashString(css);
+		if (clientContentDedup.has(contentKey)) return;
+		clientContentDedup.add(contentKey);
+		injectRawCSS(css, opts);
+	}
 }
 //#endregion
 export { useRawCSS };

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';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\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  const ssrCollector = getRegisteredSSRCollector();\n\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  // SSR path: collect raw CSS during render\n  useMemo(() => {\n    if (!ssrCollector || !css.trim()) return;\n\n    const key = `raw:${css.length}:${css.slice(0, 64)}`;\n    ssrCollector.collectRawCSS(key, css);\n  }, [ssrCollector, css]);\n\n  const disposeRef = useRef<(() => void) | null>(null);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    disposeRef.current?.();\n\n    if (!css.trim()) {\n      disposeRef.current = null;\n      return;\n    }\n\n    const { dispose } = injectRawCSS(css, opts);\n    disposeRef.current = dispose;\n\n    return () => {\n      disposeRef.current?.();\n      disposeRef.current = null;\n    };\n  }, [css, opts?.root]);\n}\n"],"mappings":";;;;AAiEA,SAAgB,UACd,cACA,eACA,SACM;CACN,MAAM,eAAe,2BAA2B;CAGhD,MAAM,YAAY,OAAO,iBAAiB;CAG1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,MAAM,cAER,YAAa,cAA+B,GAAI,cAElD,YAAa,QAAQ,EAAE,GAAI,CAAC,aAAa,CAC1C;AAGD,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,IAAI,MAAM,CAAE;EAElC,MAAM,MAAM,OAAO,IAAI,OAAO,GAAG,IAAI,MAAM,GAAG,GAAG;AACjD,eAAa,cAAc,KAAK,IAAI;IACnC,CAAC,cAAc,IAAI,CAAC;CAEvB,MAAM,aAAa,OAA4B,KAAK;AAGpD,0BAAyB;AACvB,aAAW,WAAW;AAEtB,MAAI,CAAC,IAAI,MAAM,EAAE;AACf,cAAW,UAAU;AACrB;;EAGF,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,aAAW,UAAU;AAErB,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/index.d.ts

@@ -29,7 +29,7 @@ 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, maybeGC, property, touch } from "./injector/index.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";
@@ -47,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, 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 };
+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, 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,7 +13,7 @@ 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 { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch } 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";
@@ -33,4 +33,4 @@ 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, 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 };
+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

@@ -145,25 +145,20 @@ declare function getCssTextForNode(node: ParentNode | Element | DocumentFragment
 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.
+ * 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.
- * Scans the DOM for live classNames (never evicts them), then evicts
- * absent styles whose age exceeds their popularity-weighted TTL.
+ * 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;
-/**
- * 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
  */
@@ -183,5 +178,5 @@ declare function destroy(root?: Document | ShadowRoot): void;
  */
 declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
 //#endregion
-export { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch };
+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

@@ -134,7 +134,8 @@ function 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.
+* 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;
@@ -142,8 +143,8 @@ function 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.
+* Evicts the oldest unused styles when usageMap exceeds capacity.
+* With `{ force: true }`, removes ALL unused styles regardless of capacity.
 *
 * @returns Number of styles evicted.
 */
@@ -151,14 +152,6 @@ 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() {
@@ -187,6 +180,6 @@ function createInjector(config = {}) {
 	});
 }
 //#endregion
-export { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch };
+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  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"}
+{"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 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,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;;;;;;;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"}

package/dist/injector/injector.d.ts

@@ -7,8 +7,6 @@ declare class StyleInjector {
   private sheetManager;
   private config;
   private globalRuleCounter;
-  private lastGCTime;
-  private backgroundSweepTimeout;
   private pendingGCHandle;
   /** @internal — exposed for debug utilities only */
   get _sheetManager(): SheetManager;
@@ -158,33 +156,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.
+   * When the global touch counter reaches `touchInterval`, schedules a GC
+   * via `requestIdleCallback`.
    * No-op on the server.
    */
   touch(className: string, options?: {
     root?: Document | ShadowRoot;
   }): void;
+  /**
+   * Schedule a GC via `requestIdleCallback` (or synchronously as fallback).
+   * Runs GC on all active roots. Avoids double-scheduling via `pendingGCHandle`.
+   */
+  private scheduleGC;
   /**
    * 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.
+   * 1. Quick upper-bound check: skip if unused count can't exceed capacity.
+   * 2. Scans the DOM for live tasty classNames (safety guard).
+   * 3. With `force: true`: deletes all unused entries inline.
+   *    Without `force`: collects unused, sorts oldest-first, evicts over capacity.
    *
    * @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
    */