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

package/dist/hooks/useGlobalStyles.js

@@ -1,15 +1,29 @@
+import { hashString } from "../utils/hash.js";
 import { renderStyles } from "../pipeline/index.js";
+import { getConfig } from "../config.js";
 import { injectGlobal } from "../injector/index.js";
+import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
+import { collectAutoInferredProperties, collectAutoInferredPropertiesRSC } from "../ssr/collect-auto-properties.js";
 import { resolveRecipes } from "../utils/resolve-recipes.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
-
+import { formatGlobalRules } from "../ssr/format-global-rules.js";
 //#region src/hooks/useGlobalStyles.ts
+const clientGlobalEntries = /* @__PURE__ */ new Map();
 /**
-* Hook to inject global styles for a given selector.
+* Inject global styles for a given selector.
 * Useful for styling elements by selector without generating classNames.
 *
+* SSR-aware: when a ServerStyleCollector is available, CSS is collected
+* during the render phase instead of being injected into the DOM.
+*
+* 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.
+*
 * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
 * @param styles - Tasty styles object
+* @param options - Optional settings including `id` for update tracking
 *
 * @example
 * ```tsx
@@ -24,33 +38,51 @@ import { useInsertionEffect, useMemo, useRef } from "react";
 * }
 * ```
 */
-function useGlobalStyles(selector, styles) {
-	const disposeRef = useRef(null);
-	const resolvedStyles = useMemo(() => {
-		if (!styles) return styles;
-		return resolveRecipes(styles);
-	}, [styles]);
-	const styleResults = useMemo(() => {
-		if (!resolvedStyles) return [];
-		if (!selector) {
-			console.warn("[Tasty] useGlobalStyles: selector is required and cannot be empty. Styles will not be injected.");
-			return [];
+function useGlobalStyles(selector, styles, options) {
+	if (!styles) return;
+	if (!selector) {
+		console.warn("[Tasty] useGlobalStyles: selector is required and cannot be empty. Styles will not be injected.");
+		return;
+	}
+	const target = getStyleTarget();
+	if (target.mode === "client") {
+		const slotKey = options?.id ?? selector;
+		const stylesKey = JSON.stringify(styles);
+		const existing = clientGlobalEntries.get(slotKey);
+		if (existing && existing.stylesKey === stylesKey) return;
+	}
+	const resolvedStyles = resolveRecipes(styles);
+	const styleResults = renderStyles(resolvedStyles, selector);
+	if (styleResults.length === 0) return;
+	if (target.mode === "ssr") {
+		target.collector.collectInternals();
+		const css = formatGlobalRules(styleResults);
+		if (css) {
+			const key = options?.id ? `global:${options.id}` : `global:${selector}:${hashString(css)}`;
+			target.collector.collectGlobalStyles(key, css);
 		}
-		return renderStyles(resolvedStyles, selector);
-	}, [resolvedStyles, selector]);
-	useInsertionEffect(() => {
-		disposeRef.current?.();
-		if (styleResults.length > 0) {
-			const { dispose } = injectGlobal(styleResults);
-			disposeRef.current = dispose;
-		} else disposeRef.current = null;
-		return () => {
-			disposeRef.current?.();
-			disposeRef.current = null;
-		};
-	}, [styleResults]);
+		if (getConfig().autoPropertyTypes !== false) collectAutoInferredProperties(styleResults, target.collector, resolvedStyles);
+		return;
+	}
+	if (target.mode === "rsc") {
+		const css = formatGlobalRules(styleResults);
+		if (css) {
+			const key = options?.id ? `__global:${options.id}` : `__global:${selector}:${hashString(css)}`;
+			pushRSCCSS(target.cache, key, css);
+		}
+		if (getConfig().autoPropertyTypes !== false) collectAutoInferredPropertiesRSC(styleResults, target.cache, resolvedStyles);
+		return;
+	}
+	const slotKey = options?.id ?? selector;
+	const existing = clientGlobalEntries.get(slotKey);
+	if (existing) existing.dispose();
+	const { dispose } = injectGlobal(styleResults);
+	clientGlobalEntries.set(slotKey, {
+		stylesKey: JSON.stringify(styles),
+		dispose
+	});
 }
-
 //#endregion
 export { useGlobalStyles };
+
 //# sourceMappingURL=useGlobalStyles.js.map

package/dist/hooks/useGlobalStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalStyles.js","names":[],"sources":["../../src/hooks/useGlobalStyles.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { injectGlobal } from '../injector';\nimport type { StyleResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport type { Styles } from '../styles/types';\nimport { resolveRecipes } from '../utils/resolve-recipes';\n\n/**\n * Hook to inject global styles for a given selector.\n * Useful for styling elements by selector without generating classNames.\n *\n * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')\n * @param styles - Tasty styles object\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   useGlobalStyles('.card', {\n *     padding: '2x',\n *     radius: '1r',\n *     fill: '#white',\n *   });\n *\n *   return <div className=\"card\">Content</div>;\n * }\n * ```\n */\nexport function useGlobalStyles(selector: string, styles?: Styles): void {\n  const disposeRef = useRef<(() => void) | null>(null);\n\n  // Resolve recipes before rendering (zero overhead if no recipes configured)\n  const resolvedStyles = useMemo(() => {\n    if (!styles) return styles;\n    return resolveRecipes(styles);\n  }, [styles]);\n\n  // Render styles with the provided selector\n  // Note: renderStyles overload with selector string returns StyleResult[] directly\n  const styleResults = useMemo((): StyleResult[] => {\n    if (!resolvedStyles) return [];\n\n    // Validate selector - empty string would cause renderStyles to return RenderResult instead of StyleResult[]\n    if (!selector) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.warn(\n          '[Tasty] useGlobalStyles: selector is required and cannot be empty. ' +\n            'Styles will not be injected.',\n        );\n      }\n      return [];\n    }\n\n    const result = renderStyles(resolvedStyles, selector);\n    // When a non-empty selector is provided, renderStyles returns StyleResult[]\n    return result as StyleResult[];\n  }, [resolvedStyles, selector]);\n\n  // Inject as global styles\n  useInsertionEffect(() => {\n    disposeRef.current?.();\n\n    if (styleResults.length > 0) {\n      const { dispose } = injectGlobal(styleResults);\n      disposeRef.current = dispose;\n    } else {\n      disposeRef.current = null;\n    }\n\n    return () => {\n      disposeRef.current?.();\n      disposeRef.current = null;\n    };\n  }, [styleResults]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,gBAAgB,UAAkB,QAAuB;CACvE,MAAM,aAAa,OAA4B,KAAK;CAGpD,MAAM,iBAAiB,cAAc;AACnC,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,eAAe,OAAO;IAC5B,CAAC,OAAO,CAAC;CAIZ,MAAM,eAAe,cAA6B;AAChD,MAAI,CAAC,eAAgB,QAAO,EAAE;AAG9B,MAAI,CAAC,UAAU;AAEX,WAAQ,KACN,kGAED;AAEH,UAAO,EAAE;;AAKX,SAFe,aAAa,gBAAgB,SAAS;IAGpD,CAAC,gBAAgB,SAAS,CAAC;AAG9B,0BAAyB;AACvB,aAAW,WAAW;AAEtB,MAAI,aAAa,SAAS,GAAG;GAC3B,MAAM,EAAE,YAAY,aAAa,aAAa;AAC9C,cAAW,UAAU;QAErB,YAAW,UAAU;AAGvB,eAAa;AACX,cAAW,WAAW;AACtB,cAAW,UAAU;;IAEtB,CAAC,aAAa,CAAC"}
+{"version":3,"file":"useGlobalStyles.js","names":[],"sources":["../../src/hooks/useGlobalStyles.ts"],"sourcesContent":["import { getConfig } from '../config';\nimport { injectGlobal } from '../injector';\nimport type { StyleResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\nimport {\n  collectAutoInferredProperties,\n  collectAutoInferredPropertiesRSC,\n} from '../ssr/collect-auto-properties';\nimport { formatGlobalRules } from '../ssr/format-global-rules';\nimport type { Styles } from '../styles/types';\nimport { hashString } from '../utils/hash';\nimport { resolveRecipes } from '../utils/resolve-recipes';\n\ninterface UseGlobalStylesOptions {\n  /**\n   * Stable identifier for update tracking (client-only). When provided,\n   * changing the styles will dispose the previous injection and inject the\n   * new one. Without an id, the selector is used as the slot key.\n   * In RSC mode, renders are single-pass so update tracking does not apply.\n   */\n  id?: string;\n}\n\ninterface ClientGlobalEntry {\n  stylesKey: string;\n  dispose: () => void;\n}\n\nconst clientGlobalEntries = new Map<string, ClientGlobalEntry>();\n\n/* @internal — used only for tests */\nexport function _resetGlobalStylesCache(): void {\n  clientGlobalEntries.clear();\n}\n\n/**\n * Inject global styles for a given selector.\n * Useful for styling elements by selector without generating classNames.\n *\n * SSR-aware: when a ServerStyleCollector is available, CSS is collected\n * during the render phase instead of being injected into the DOM.\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 * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')\n * @param styles - Tasty styles object\n * @param options - Optional settings including `id` for update tracking\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   useGlobalStyles('.card', {\n *     padding: '2x',\n *     radius: '1r',\n *     fill: '#white',\n *   });\n *\n *   return <div className=\"card\">Content</div>;\n * }\n * ```\n */\nexport function useGlobalStyles(\n  selector: string,\n  styles?: Styles,\n  options?: UseGlobalStylesOptions,\n): void {\n  if (!styles) return;\n\n  if (!selector) {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        '[Tasty] useGlobalStyles: selector is required and cannot be empty. ' +\n          'Styles will not be injected.',\n      );\n    }\n    return;\n  }\n\n  const target = getStyleTarget();\n\n  // Client fast path: skip resolveRecipes/renderStyles if styles haven't changed\n  if (target.mode === 'client') {\n    const slotKey = options?.id ?? selector;\n    const stylesKey = JSON.stringify(styles);\n    const existing = clientGlobalEntries.get(slotKey);\n    if (existing && existing.stylesKey === stylesKey) return;\n  }\n\n  const resolvedStyles = resolveRecipes(styles);\n\n  const styleResults = renderStyles(resolvedStyles, selector) as StyleResult[];\n\n  if (styleResults.length === 0) return;\n\n  if (target.mode === 'ssr') {\n    target.collector.collectInternals();\n\n    const css = formatGlobalRules(styleResults);\n    if (css) {\n      const key = options?.id\n        ? `global:${options.id}`\n        : `global:${selector}:${hashString(css)}`;\n      target.collector.collectGlobalStyles(key, css);\n    }\n\n    if (getConfig().autoPropertyTypes !== false) {\n      collectAutoInferredProperties(\n        styleResults,\n        target.collector,\n        resolvedStyles,\n      );\n    }\n    return;\n  }\n\n  if (target.mode === 'rsc') {\n    const css = formatGlobalRules(styleResults);\n    if (css) {\n      const key = options?.id\n        ? `__global:${options.id}`\n        : `__global:${selector}:${hashString(css)}`;\n      pushRSCCSS(target.cache, key, css);\n    }\n\n    if (getConfig().autoPropertyTypes !== false) {\n      collectAutoInferredPropertiesRSC(\n        styleResults,\n        target.cache,\n        resolvedStyles,\n      );\n    }\n    return;\n  }\n\n  // Client path\n  const slotKey = options?.id ?? selector;\n\n  const existing = clientGlobalEntries.get(slotKey);\n  if (existing) {\n    existing.dispose();\n  }\n\n  const { dispose } = injectGlobal(styleResults);\n  clientGlobalEntries.set(slotKey, {\n    stylesKey: JSON.stringify(styles),\n    dispose,\n  });\n}\n"],"mappings":";;;;;;;;;AA6BA,MAAM,sCAAsB,IAAI,KAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqChE,SAAgB,gBACd,UACA,QACA,SACM;AACN,KAAI,CAAC,OAAQ;AAEb,KAAI,CAAC,UAAU;AAEX,UAAQ,KACN,kGAED;AAEH;;CAGF,MAAM,SAAS,gBAAgB;AAG/B,KAAI,OAAO,SAAS,UAAU;EAC5B,MAAM,UAAU,SAAS,MAAM;EAC/B,MAAM,YAAY,KAAK,UAAU,OAAO;EACxC,MAAM,WAAW,oBAAoB,IAAI,QAAQ;AACjD,MAAI,YAAY,SAAS,cAAc,UAAW;;CAGpD,MAAM,iBAAiB,eAAe,OAAO;CAE7C,MAAM,eAAe,aAAa,gBAAgB,SAAS;AAE3D,KAAI,aAAa,WAAW,EAAG;AAE/B,KAAI,OAAO,SAAS,OAAO;AACzB,SAAO,UAAU,kBAAkB;EAEnC,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,KAAK;GACP,MAAM,MAAM,SAAS,KACjB,UAAU,QAAQ,OAClB,UAAU,SAAS,GAAG,WAAW,IAAI;AACzC,UAAO,UAAU,oBAAoB,KAAK,IAAI;;AAGhD,MAAI,WAAW,CAAC,sBAAsB,MACpC,+BACE,cACA,OAAO,WACP,eACD;AAEH;;AAGF,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,KAAK;GACP,MAAM,MAAM,SAAS,KACjB,YAAY,QAAQ,OACpB,YAAY,SAAS,GAAG,WAAW,IAAI;AAC3C,cAAW,OAAO,OAAO,KAAK,IAAI;;AAGpC,MAAI,WAAW,CAAC,sBAAsB,MACpC,kCACE,cACA,OAAO,OACP,eACD;AAEH;;CAIF,MAAM,UAAU,SAAS,MAAM;CAE/B,MAAM,WAAW,oBAAoB,IAAI,QAAQ;AACjD,KAAI,SACF,UAAS,SAAS;CAGpB,MAAM,EAAE,YAAY,aAAa,aAAa;AAC9C,qBAAoB,IAAI,SAAS;EAC/B,WAAW,KAAK,UAAU,OAAO;EACjC;EACD,CAAC"}

package/dist/hooks/useKeyframes.d.ts

@@ -6,8 +6,10 @@ interface UseKeyframesOptions {
   root?: Document | ShadowRoot;
 }
 /**
- * Hook to inject CSS @keyframes and return the generated animation name.
- * Handles keyframes injection with proper cleanup on unmount or dependency changes.
+ * Inject CSS @keyframes and return the generated animation name.
+ * Deduplicates by content — identical steps always return the same name.
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
  *
  * @example Basic usage - steps object is the dependency
  * ```tsx

package/dist/hooks/useKeyframes.js

@@ -1,54 +1,55 @@
+import { hashString } from "../utils/hash.js";
 import { keyframes } from "../injector/index.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
-
+import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
+import { formatKeyframesCSS } from "../ssr/format-keyframes.js";
+import { depsEqual } from "../utils/deps-equal.js";
 //#region src/hooks/useKeyframes.ts
+const clientContentToName = /* @__PURE__ */ new Map();
+const factoryDepsCache = /* @__PURE__ */ new Map();
 function useKeyframes(stepsOrFactory, depsOrOptions, options) {
 	const isFactory = typeof stepsOrFactory === "function";
 	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
 	const opts = isFactory ? options : depsOrOptions;
-	const stepsData = useMemo(() => {
-		const steps = isFactory ? stepsOrFactory() : stepsOrFactory;
-		if (!steps || Object.keys(steps).length === 0) return null;
-		return steps;
-	}, isFactory ? deps ?? [] : [stepsOrFactory]);
-	const renderResultRef = useRef(null);
-	const effectResultRef = useRef(null);
-	const name = useMemo(() => {
-		renderResultRef.current?.dispose();
-		renderResultRef.current = null;
-		if (!stepsData) return "";
-		const result = keyframes(stepsData, {
-			name: opts?.name,
-			root: opts?.root
-		});
-		renderResultRef.current = result;
-		return result.toString();
-	}, [
-		stepsData,
-		opts?.name,
-		opts?.root
-	]);
-	useInsertionEffect(() => {
-		effectResultRef.current?.dispose();
-		effectResultRef.current = null;
-		if (stepsData) effectResultRef.current = keyframes(stepsData, {
-			name: opts?.name,
-			root: opts?.root
-		});
-		return () => {
-			effectResultRef.current?.dispose();
-			effectResultRef.current = null;
-			renderResultRef.current?.dispose();
-			renderResultRef.current = null;
-		};
-	}, [
-		stepsData,
-		opts?.name,
-		opts?.root
-	]);
+	const target = getStyleTarget();
+	if (isFactory && deps && opts?.name && target.mode === "client") {
+		const cached = factoryDepsCache.get(opts.name);
+		if (cached && depsEqual(cached.deps, deps)) return cached.name;
+	}
+	const steps = isFactory ? stepsOrFactory() : stepsOrFactory;
+	if (!steps || Object.keys(steps).length === 0) return "";
+	if (target.mode === "ssr") {
+		const actualName = target.collector.allocateKeyframeName(opts?.name);
+		const css = formatKeyframesCSS(actualName, steps);
+		target.collector.collectKeyframes(actualName, css);
+		return actualName;
+	}
+	if (target.mode === "rsc") {
+		const serializedContent = JSON.stringify(steps);
+		const key = `__kf:${opts?.name ?? ""}:${serializedContent}`;
+		const existingName = target.cache.generatedNames.get(key);
+		if (existingName) return existingName;
+		const actualName = opts?.name ?? `k${hashString(serializedContent)}`;
+		const css = formatKeyframesCSS(actualName, steps);
+		pushRSCCSS(target.cache, key, css);
+		target.cache.generatedNames.set(key, actualName);
+		return actualName;
+	}
+	const serializedContent = JSON.stringify(steps);
+	const cacheKey = `${opts?.name ?? ""}:${serializedContent}`;
+	const cachedName = clientContentToName.get(cacheKey);
+	if (cachedName) return cachedName;
+	const name = keyframes(steps, {
+		name: opts?.name,
+		root: opts?.root
+	}).toString();
+	clientContentToName.set(cacheKey, name);
+	if (deps && opts?.name) factoryDepsCache.set(opts.name, {
+		deps,
+		name
+	});
 	return name;
 }
-
 //#endregion
 export { useKeyframes };
+
 //# sourceMappingURL=useKeyframes.js.map

package/dist/hooks/useKeyframes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyframes.js","names":[],"sources":["../../src/hooks/useKeyframes.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { keyframes } from '../injector';\nimport type { KeyframesResult, KeyframesSteps } from '../injector/types';\n\ninterface UseKeyframesOptions {\n  name?: string;\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to inject CSS @keyframes and return the generated animation name.\n * Handles keyframes injection with proper cleanup on unmount or dependency changes.\n *\n * @example Basic usage - steps object is the dependency\n * ```tsx\n * function MyComponent() {\n *   const bounce = useKeyframes({\n *     '0%': { transform: 'scale(1)' },\n *     '50%': { transform: 'scale(1.1)' },\n *     '100%': { transform: 'scale(1)' },\n *   });\n *\n *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;\n * }\n * ```\n *\n * @example With custom name\n * ```tsx\n * function MyComponent() {\n *   const fadeIn = useKeyframes(\n *     { from: { opacity: 0 }, to: { opacity: 1 } },\n *     { name: 'fadeIn' }\n *   );\n *\n *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;\n * }\n * ```\n *\n * @example Factory function with dependencies\n * ```tsx\n * function MyComponent({ scale }: { scale: number }) {\n *   const pulse = useKeyframes(\n *     () => ({\n *       '0%': { transform: 'scale(1)' },\n *       '100%': { transform: `scale(${scale})` },\n *     }),\n *     [scale]\n *   );\n *\n *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;\n * }\n * ```\n */\n\n// Overload 1: Static steps object\nexport function useKeyframes(\n  steps: KeyframesSteps,\n  options?: UseKeyframesOptions,\n): string;\n\n// Overload 2: Factory function with dependencies\nexport function useKeyframes(\n  factory: () => KeyframesSteps,\n  deps: readonly unknown[],\n  options?: UseKeyframesOptions,\n): string;\n\n// Implementation\nexport function useKeyframes(\n  stepsOrFactory: KeyframesSteps | (() => KeyframesSteps),\n  depsOrOptions?: readonly unknown[] | UseKeyframesOptions,\n  options?: UseKeyframesOptions,\n): string {\n  // Detect which overload is being used\n  const isFactory = typeof stepsOrFactory === '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 UseKeyframesOptions | undefined);\n\n  // Memoize the keyframes steps to get a stable reference\n  const stepsData = useMemo(\n    () => {\n      const steps = isFactory\n        ? (stepsOrFactory as () => KeyframesSteps)()\n        : (stepsOrFactory as KeyframesSteps);\n\n      if (!steps || Object.keys(steps).length === 0) {\n        return null;\n      }\n\n      return steps;\n    },\n\n    isFactory ? (deps ?? []) : [stepsOrFactory],\n  );\n\n  // Store keyframes results for cleanup - we need to track both the render-time\n  // injection (for the name) and the effect-time injection (for Strict Mode safety)\n  const renderResultRef = useRef<KeyframesResult | null>(null);\n  const effectResultRef = useRef<KeyframesResult | null>(null);\n\n  // Inject keyframes during render to ensure the animation name is available\n  // immediately. The keyframes() function uses reference counting internally,\n  // so multiple calls with the same content are deduplicated.\n  const name = useMemo(() => {\n    // Dispose previous render-time result if deps changed\n    renderResultRef.current?.dispose();\n    renderResultRef.current = null;\n\n    if (!stepsData) {\n      return '';\n    }\n\n    // Inject keyframes synchronously\n    const result = keyframes(stepsData, {\n      name: opts?.name,\n      root: opts?.root,\n    });\n\n    renderResultRef.current = result;\n\n    return result.toString();\n  }, [stepsData, opts?.name, opts?.root]);\n\n  // Handle injection and cleanup in useInsertionEffect to properly support\n  // React 18+ Strict Mode double-invocation (mount → unmount → mount).\n  // The effect setup re-injects the keyframes if cleanup was called, ensuring\n  // the CSS exists after Strict Mode remounts.\n  useInsertionEffect(() => {\n    // Dispose previous effect-time result\n    effectResultRef.current?.dispose();\n    effectResultRef.current = null;\n\n    // Re-inject keyframes. This ensures the CSS exists after Strict Mode cleanup.\n    // The keyframes() function uses reference counting, so this is idempotent\n    // if the CSS wasn't disposed.\n    if (stepsData) {\n      const result = keyframes(stepsData, {\n        name: opts?.name,\n        root: opts?.root,\n      });\n      effectResultRef.current = result;\n    }\n\n    // Cleanup on unmount or when dependencies change.\n    // Dispose both the effect-time and render-time results to properly\n    // decrement the reference count.\n    return () => {\n      effectResultRef.current?.dispose();\n      effectResultRef.current = null;\n      renderResultRef.current?.dispose();\n      renderResultRef.current = null;\n    };\n  }, [stepsData, opts?.name, opts?.root]);\n\n  return name;\n}\n"],"mappings":";;;;AAqEA,SAAgB,aACd,gBACA,eACA,SACQ;CAER,MAAM,YAAY,OAAO,mBAAmB;CAG5C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,YAAY,cACV;EACJ,MAAM,QAAQ,YACT,gBAAyC,GACzC;AAEL,MAAI,CAAC,SAAS,OAAO,KAAK,MAAM,CAAC,WAAW,EAC1C,QAAO;AAGT,SAAO;IAGT,YAAa,QAAQ,EAAE,GAAI,CAAC,eAAe,CAC5C;CAID,MAAM,kBAAkB,OAA+B,KAAK;CAC5D,MAAM,kBAAkB,OAA+B,KAAK;CAK5D,MAAM,OAAO,cAAc;AAEzB,kBAAgB,SAAS,SAAS;AAClC,kBAAgB,UAAU;AAE1B,MAAI,CAAC,UACH,QAAO;EAIT,MAAM,SAAS,UAAU,WAAW;GAClC,MAAM,MAAM;GACZ,MAAM,MAAM;GACb,CAAC;AAEF,kBAAgB,UAAU;AAE1B,SAAO,OAAO,UAAU;IACvB;EAAC;EAAW,MAAM;EAAM,MAAM;EAAK,CAAC;AAMvC,0BAAyB;AAEvB,kBAAgB,SAAS,SAAS;AAClC,kBAAgB,UAAU;AAK1B,MAAI,UAKF,iBAAgB,UAJD,UAAU,WAAW;GAClC,MAAM,MAAM;GACZ,MAAM,MAAM;GACb,CAAC;AAOJ,eAAa;AACX,mBAAgB,SAAS,SAAS;AAClC,mBAAgB,UAAU;AAC1B,mBAAgB,SAAS,SAAS;AAClC,mBAAgB,UAAU;;IAE3B;EAAC;EAAW,MAAM;EAAM,MAAM;EAAK,CAAC;AAEvC,QAAO"}
+{"version":3,"file":"useKeyframes.js","names":[],"sources":["../../src/hooks/useKeyframes.ts"],"sourcesContent":["import { keyframes } from '../injector';\nimport type { KeyframesSteps } from '../injector/types';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\nimport { formatKeyframesCSS } from '../ssr/format-keyframes';\nimport { depsEqual } from '../utils/deps-equal';\nimport { hashString } from '../utils/hash';\n\ninterface UseKeyframesOptions {\n  name?: string;\n  root?: Document | ShadowRoot;\n}\n\nconst clientContentToName = new Map<string, string>();\n\ninterface FactoryDepsEntry {\n  deps: readonly unknown[];\n  name: string;\n}\n\nconst factoryDepsCache = new Map<string, FactoryDepsEntry>();\n\n/* @internal — used only for tests */\nexport function _resetKeyframesCache(): void {\n  clientContentToName.clear();\n  factoryDepsCache.clear();\n}\n\n/**\n * Inject CSS @keyframes and return the generated animation name.\n * Deduplicates by content — identical steps always return the same name.\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\n *\n * @example Basic usage - steps object is the dependency\n * ```tsx\n * function MyComponent() {\n *   const bounce = useKeyframes({\n *     '0%': { transform: 'scale(1)' },\n *     '50%': { transform: 'scale(1.1)' },\n *     '100%': { transform: 'scale(1)' },\n *   });\n *\n *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;\n * }\n * ```\n *\n * @example With custom name\n * ```tsx\n * function MyComponent() {\n *   const fadeIn = useKeyframes(\n *     { from: { opacity: 0 }, to: { opacity: 1 } },\n *     { name: 'fadeIn' }\n *   );\n *\n *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;\n * }\n * ```\n *\n * @example Factory function with dependencies\n * ```tsx\n * function MyComponent({ scale }: { scale: number }) {\n *   const pulse = useKeyframes(\n *     () => ({\n *       '0%': { transform: 'scale(1)' },\n *       '100%': { transform: `scale(${scale})` },\n *     }),\n *     [scale]\n *   );\n *\n *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;\n * }\n * ```\n */\n\n// Overload 1: Static steps object\nexport function useKeyframes(\n  steps: KeyframesSteps,\n  options?: UseKeyframesOptions,\n): string;\n\n// Overload 2: Factory function with dependencies\nexport function useKeyframes(\n  factory: () => KeyframesSteps,\n  deps: readonly unknown[],\n  options?: UseKeyframesOptions,\n): string;\n\n// Implementation\nexport function useKeyframes(\n  stepsOrFactory: KeyframesSteps | (() => KeyframesSteps),\n  depsOrOptions?: readonly unknown[] | UseKeyframesOptions,\n  options?: UseKeyframesOptions,\n): string {\n  const isFactory = typeof stepsOrFactory === 'function';\n\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseKeyframesOptions | 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?.name && target.mode === 'client') {\n    const cached = factoryDepsCache.get(opts.name);\n    if (cached && depsEqual(cached.deps, deps)) {\n      return cached.name;\n    }\n  }\n\n  const steps = isFactory\n    ? (stepsOrFactory as () => KeyframesSteps)()\n    : (stepsOrFactory as KeyframesSteps);\n\n  if (!steps || Object.keys(steps).length === 0) {\n    return '';\n  }\n\n  if (target.mode === 'ssr') {\n    const actualName = target.collector.allocateKeyframeName(opts?.name);\n    const css = formatKeyframesCSS(actualName, steps);\n    target.collector.collectKeyframes(actualName, css);\n    return actualName;\n  }\n\n  if (target.mode === 'rsc') {\n    const serializedContent = JSON.stringify(steps);\n    const key = `__kf:${opts?.name ?? ''}:${serializedContent}`;\n\n    const existingName = target.cache.generatedNames.get(key);\n    if (existingName) return existingName;\n\n    const actualName = opts?.name ?? `k${hashString(serializedContent)}`;\n    const css = formatKeyframesCSS(actualName, steps);\n    pushRSCCSS(target.cache, key, css);\n    target.cache.generatedNames.set(key, actualName);\n    return actualName;\n  }\n\n  // Client path: stable name via content-based dedup\n  const serializedContent = JSON.stringify(steps);\n  const cacheKey = `${opts?.name ?? ''}:${serializedContent}`;\n\n  const cachedName = clientContentToName.get(cacheKey);\n  if (cachedName) {\n    return cachedName;\n  }\n\n  const result = keyframes(steps, {\n    name: opts?.name,\n    root: opts?.root,\n  });\n\n  const name = result.toString();\n  clientContentToName.set(cacheKey, name);\n\n  if (deps && opts?.name) {\n    factoryDepsCache.set(opts.name, { deps, name });\n  }\n\n  return name;\n}\n"],"mappings":";;;;;;AAYA,MAAM,sCAAsB,IAAI,KAAqB;AAOrD,MAAM,mCAAmB,IAAI,KAA+B;AAqE5D,SAAgB,aACd,gBACA,eACA,SACQ;CACR,MAAM,YAAY,OAAO,mBAAmB;CAE5C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAEL,MAAM,SAAS,gBAAgB;AAG/B,KAAI,aAAa,QAAQ,MAAM,QAAQ,OAAO,SAAS,UAAU;EAC/D,MAAM,SAAS,iBAAiB,IAAI,KAAK,KAAK;AAC9C,MAAI,UAAU,UAAU,OAAO,MAAM,KAAK,CACxC,QAAO,OAAO;;CAIlB,MAAM,QAAQ,YACT,gBAAyC,GACzC;AAEL,KAAI,CAAC,SAAS,OAAO,KAAK,MAAM,CAAC,WAAW,EAC1C,QAAO;AAGT,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,aAAa,OAAO,UAAU,qBAAqB,MAAM,KAAK;EACpE,MAAM,MAAM,mBAAmB,YAAY,MAAM;AACjD,SAAO,UAAU,iBAAiB,YAAY,IAAI;AAClD,SAAO;;AAGT,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,oBAAoB,KAAK,UAAU,MAAM;EAC/C,MAAM,MAAM,QAAQ,MAAM,QAAQ,GAAG,GAAG;EAExC,MAAM,eAAe,OAAO,MAAM,eAAe,IAAI,IAAI;AACzD,MAAI,aAAc,QAAO;EAEzB,MAAM,aAAa,MAAM,QAAQ,IAAI,WAAW,kBAAkB;EAClE,MAAM,MAAM,mBAAmB,YAAY,MAAM;AACjD,aAAW,OAAO,OAAO,KAAK,IAAI;AAClC,SAAO,MAAM,eAAe,IAAI,KAAK,WAAW;AAChD,SAAO;;CAIT,MAAM,oBAAoB,KAAK,UAAU,MAAM;CAC/C,MAAM,WAAW,GAAG,MAAM,QAAQ,GAAG,GAAG;CAExC,MAAM,aAAa,oBAAoB,IAAI,SAAS;AACpD,KAAI,WACF,QAAO;CAQT,MAAM,OALS,UAAU,OAAO;EAC9B,MAAM,MAAM;EACZ,MAAM,MAAM;EACb,CAAC,CAEkB,UAAU;AAC9B,qBAAoB,IAAI,UAAU,KAAK;AAEvC,KAAI,QAAQ,MAAM,KAChB,kBAAiB,IAAI,KAAK,MAAM;EAAE;EAAM;EAAM,CAAC;AAGjD,QAAO"}

package/dist/hooks/useProperty.d.ts

@@ -22,17 +22,19 @@ interface UsePropertyOptions {
   root?: Document | ShadowRoot;
 }
 /**
- * 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
  *

package/dist/hooks/useProperty.js

@@ -1,19 +1,21 @@
 import { getGlobalInjector } from "../config.js";
-import { useInsertionEffect, useMemo } from "react";
-
+import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
+import { formatPropertyCSS } from "../ssr/format-property.js";
 //#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
 *
@@ -55,37 +57,40 @@ import { useInsertionEffect, useMemo } from "react";
 * ```
 */
 function useProperty(name, options) {
-	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 (!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,
-			root: options?.root
+			initialValue: options?.initialValue
 		});
-	}, [
-		name,
-		useMemo(() => {
-			if (!options) return "";
-			return JSON.stringify({
-				syntax: options.syntax,
-				inherits: options.inherits,
-				initialValue: options.initialValue
-			});
-		}, [
-			options?.syntax,
-			options?.inherits,
-			options?.initialValue
-		]),
-		options?.root
-	]);
+		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
+		});
+		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 };
+
 //# sourceMappingURL=useProperty.js.map

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';\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  // 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  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    // Check if already defined (properties are persistent)\n    // The injector handles token parsing internally\n    if (injector.isPropertyDefined(name, { root: options?.root })) {\n      return;\n    }\n\n    // Register the property\n    // The injector handles $name, #name, --name parsing and auto-sets\n    // syntax for color tokens\n    injector.property(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n      root: options?.root,\n    });\n\n    // No cleanup - @property rules are global and persistent\n    // Re-registering is a no-op anyway due to the isPropertyDefined check\n  }, [name, optionsKey, options?.root]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,SAAgB,YAAY,MAAc,SAAoC;AAW5E,0BAAyB;AACvB,MAAI,CAAC,MAAM;AAEP,WAAQ,KAAK,iDAAiD;AAEhE;;EAGF,MAAM,WAAW,mBAAmB;AAIpC,MAAI,SAAS,kBAAkB,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC,CAC3D;AAMF,WAAS,SAAS,MAAM;GACtB,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACvB,MAAM,SAAS;GAChB,CAAC;IAID;EAAC;EArCe,cAAc;AAC/B,OAAI,CAAC,QAAS,QAAO;AACrB,UAAO,KAAK,UAAU;IACpB,QAAQ,QAAQ;IAChB,UAAU,QAAQ;IAClB,cAAc,QAAQ;IACvB,CAAC;KACD;GAAC,SAAS;GAAQ,SAAS;GAAU,SAAS;GAAa,CAAC;EA8BzC,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,28 +1,103 @@
+import { hashString } from "../utils/hash.js";
 import { injectRawCSS } from "../injector/index.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
-
+import { getStyleTarget, pushRSCCSS } from "../rsc-cache.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 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]);
-	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 };
+
 //# sourceMappingURL=useRawCSS.js.map