@tenphi/tasty 0.0.0-snapshot.26b4630 → 0.0.0-snapshot.2705ab9

package/dist/hooks/useGlobalStyles.js

@@ -1,13 +1,21 @@
 import { renderStyles } from "../pipeline/index.js";
+import { getConfig } from "../config.js";
 import { injectGlobal } from "../injector/index.js";
 import { resolveRecipes } from "../utils/resolve-recipes.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
+import { collectAutoInferredProperties } from "../ssr/collect-auto-properties.js";
+import { resolveSSRCollector } from "./resolve-ssr-collector.js";
+import { TastySSRContext } from "../ssr/context.js";
+import { formatGlobalRules } from "../ssr/format-global-rules.js";
+import { useContext, useInsertionEffect, useMemo, useRef } from "react";
 
 //#region src/hooks/useGlobalStyles.ts
 /**
 * Hook to 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.
+*
 * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
 * @param styles - Tasty styles object
 *
@@ -25,6 +33,7 @@ import { useInsertionEffect, useMemo, useRef } from "react";
 * ```
 */
 function useGlobalStyles(selector, styles) {
+	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
 	const disposeRef = useRef(null);
 	const resolvedStyles = useMemo(() => {
 		if (!styles) return styles;
@@ -38,6 +47,20 @@ function useGlobalStyles(selector, styles) {
 		}
 		return renderStyles(resolvedStyles, selector);
 	}, [resolvedStyles, selector]);
+	useMemo(() => {
+		if (!ssrCollector || styleResults.length === 0) return;
+		ssrCollector.collectInternals();
+		const css = formatGlobalRules(styleResults);
+		if (css) {
+			const key = `global:${selector}:${css.length}:${css.slice(0, 64)}`;
+			ssrCollector.collectGlobalStyles(key, css);
+		}
+		if (getConfig().autoPropertyTypes !== false) collectAutoInferredProperties(styleResults, ssrCollector, resolvedStyles);
+	}, [
+		ssrCollector,
+		styleResults,
+		selector
+	]);
 	useInsertionEffect(() => {
 		disposeRef.current?.();
 		if (styleResults.length > 0) {

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 { useContext, useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { getConfig } from '../config';\nimport { injectGlobal } from '../injector';\nimport type { StyleResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { collectAutoInferredProperties } from '../ssr/collect-auto-properties';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\nimport { formatGlobalRules } from '../ssr/format-global-rules';\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 * SSR-aware: when a ServerStyleCollector is available, CSS is collected\n * during the render phase instead of being injected into the DOM.\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 ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\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    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    return result as StyleResult[];\n  }, [resolvedStyles, selector]);\n\n  // SSR path: collect CSS during render\n  useMemo(() => {\n    if (!ssrCollector || styleResults.length === 0) return;\n\n    ssrCollector.collectInternals();\n\n    const css = formatGlobalRules(styleResults);\n    if (css) {\n      const key = `global:${selector}:${css.length}:${css.slice(0, 64)}`;\n      ssrCollector.collectGlobalStyles(key, css);\n    }\n\n    if (getConfig().autoPropertyTypes !== false) {\n      collectAutoInferredProperties(styleResults, ssrCollector, resolvedStyles);\n    }\n  }, [ssrCollector, styleResults, selector]);\n\n  // Client path: inject via DOM\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,gBAAgB,UAAkB,QAAuB;CAEvE,MAAM,eAAe,oBADG,WAAW,gBAAgB,CACM;CAEzD,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;AAE9B,MAAI,CAAC,UAAU;AAEX,WAAQ,KACN,kGAED;AAEH,UAAO,EAAE;;AAIX,SADe,aAAa,gBAAgB,SAAS;IAEpD,CAAC,gBAAgB,SAAS,CAAC;AAG9B,eAAc;AACZ,MAAI,CAAC,gBAAgB,aAAa,WAAW,EAAG;AAEhD,eAAa,kBAAkB;EAE/B,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,KAAK;GACP,MAAM,MAAM,UAAU,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI,MAAM,GAAG,GAAG;AAChE,gBAAa,oBAAoB,KAAK,IAAI;;AAG5C,MAAI,WAAW,CAAC,sBAAsB,MACpC,+BAA8B,cAAc,cAAc,eAAe;IAE1E;EAAC;EAAc;EAAc;EAAS,CAAC;AAG1C,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"}

package/dist/hooks/useKeyframes.js

@@ -1,8 +1,12 @@
 import { keyframes } from "../injector/index.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
+import { resolveSSRCollector } from "./resolve-ssr-collector.js";
+import { TastySSRContext } from "../ssr/context.js";
+import { formatKeyframesCSS } from "../ssr/format-keyframes.js";
+import { useContext, useInsertionEffect, useMemo, useRef } from "react";
 
 //#region src/hooks/useKeyframes.ts
 function useKeyframes(stepsOrFactory, depsOrOptions, options) {
+	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
 	const isFactory = typeof stepsOrFactory === "function";
 	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
 	const opts = isFactory ? options : depsOrOptions;
@@ -14,9 +18,15 @@ function useKeyframes(stepsOrFactory, depsOrOptions, options) {
 	const renderResultRef = useRef(null);
 	const effectResultRef = useRef(null);
 	const name = useMemo(() => {
+		if (!stepsData) return "";
+		if (ssrCollector) {
+			const actualName = ssrCollector.allocateKeyframeName(opts?.name);
+			const css = formatKeyframesCSS(actualName, stepsData);
+			ssrCollector.collectKeyframes(actualName, css);
+			return actualName;
+		}
 		renderResultRef.current?.dispose();
 		renderResultRef.current = null;
-		if (!stepsData) return "";
 		const result = keyframes(stepsData, {
 			name: opts?.name,
 			root: opts?.root
@@ -26,7 +36,8 @@ function useKeyframes(stepsOrFactory, depsOrOptions, options) {
 	}, [
 		stepsData,
 		opts?.name,
-		opts?.root
+		opts?.root,
+		ssrCollector
 	]);
 	useInsertionEffect(() => {
 		effectResultRef.current?.dispose();

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 { useContext, useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { keyframes } from '../injector';\nimport type { KeyframesResult, KeyframesSteps } from '../injector/types';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\nimport { formatKeyframesCSS } from '../ssr/format-keyframes';\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  const ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\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 (client only)\n  const renderResultRef = useRef<KeyframesResult | null>(null);\n  const effectResultRef = useRef<KeyframesResult | null>(null);\n\n  const name = useMemo(() => {\n    if (!stepsData) {\n      return '';\n    }\n\n    // SSR path: format and collect, return name without DOM injection\n    if (ssrCollector) {\n      const actualName = ssrCollector.allocateKeyframeName(opts?.name);\n      const css = formatKeyframesCSS(actualName, stepsData);\n      ssrCollector.collectKeyframes(actualName, css);\n      return actualName;\n    }\n\n    // Client path: inject keyframes synchronously for immediate name availability\n    renderResultRef.current?.dispose();\n    renderResultRef.current = null;\n\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, ssrCollector]);\n\n  // Client path: handle Strict Mode double-invocation and cleanup\n  useInsertionEffect(() => {\n    effectResultRef.current?.dispose();\n    effectResultRef.current = null;\n\n    if (stepsData) {\n      const result = keyframes(stepsData, {\n        name: opts?.name,\n        root: opts?.root,\n      });\n      effectResultRef.current = result;\n    }\n\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":";;;;;;;AAwEA,SAAgB,aACd,gBACA,eACA,SACQ;CAER,MAAM,eAAe,oBADG,WAAW,gBAAgB,CACM;CAGzD,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;CAGD,MAAM,kBAAkB,OAA+B,KAAK;CAC5D,MAAM,kBAAkB,OAA+B,KAAK;CAE5D,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,UACH,QAAO;AAIT,MAAI,cAAc;GAChB,MAAM,aAAa,aAAa,qBAAqB,MAAM,KAAK;GAChE,MAAM,MAAM,mBAAmB,YAAY,UAAU;AACrD,gBAAa,iBAAiB,YAAY,IAAI;AAC9C,UAAO;;AAIT,kBAAgB,SAAS,SAAS;AAClC,kBAAgB,UAAU;EAE1B,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;EAAM;EAAa,CAAC;AAGrD,0BAAyB;AACvB,kBAAgB,SAAS,SAAS;AAClC,kBAAgB,UAAU;AAE1B,MAAI,UAKF,iBAAgB,UAJD,UAAU,WAAW;GAClC,MAAM,MAAM;GACZ,MAAM,MAAM;GACb,CAAC;AAIJ,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"}

package/dist/hooks/useProperty.js

@@ -1,5 +1,8 @@
 import { getGlobalInjector } from "../config.js";
-import { useInsertionEffect, useMemo } from "react";
+import { formatPropertyCSS } from "../ssr/format-property.js";
+import { resolveSSRCollector } from "./resolve-ssr-collector.js";
+import { TastySSRContext } from "../ssr/context.js";
+import { useContext, useInsertionEffect, useMemo } from "react";
 
 //#region src/hooks/useProperty.ts
 /**
@@ -55,6 +58,33 @@ import { useInsertionEffect, useMemo } from "react";
 * ```
 */
 function useProperty(name, options) {
+	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
+	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();
+		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`);
@@ -70,18 +100,7 @@ function useProperty(name, options) {
 		});
 	}, [
 		name,
-		useMemo(() => {
-			if (!options) return "";
-			return JSON.stringify({
-				syntax: options.syntax,
-				inherits: options.inherits,
-				initialValue: options.initialValue
-			});
-		}, [
-			options?.syntax,
-			options?.inherits,
-			options?.initialValue
-		]),
+		optionsKey,
 		options?.root
 	]);
 }

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 { useContext, useInsertionEffect, useMemo } from 'react';\n\nimport { getGlobalInjector } from '../config';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\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 * 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 ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAgB,YAAY,MAAc,SAAoC;CAE5E,MAAM,eAAe,oBADG,WAAW,gBAAgB,CACM;CAGzD,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"}

package/dist/hooks/useRawCSS.js

@@ -1,12 +1,20 @@
 import { injectRawCSS } from "../injector/index.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
+import { resolveSSRCollector } from "./resolve-ssr-collector.js";
+import { TastySSRContext } from "../ssr/context.js";
+import { useContext, useInsertionEffect, useMemo, useRef } from "react";
 
 //#region src/hooks/useRawCSS.ts
 function useRawCSS(cssOrFactory, depsOrOptions, options) {
+	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
 	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?.();

package/dist/hooks/useRawCSS.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRawCSS.js","names":[],"sources":["../../src/hooks/useRawCSS.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { injectRawCSS } from '../injector';\n\ninterface UseRawCSSOptions {\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to inject raw CSS text directly without parsing.\n * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.\n *\n * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts\n * with tasty's chunked style sheets.\n *\n * @example Static CSS string\n * ```tsx\n * function GlobalStyles() {\n *   useRawCSS(`\n *     body {\n *       margin: 0;\n *       padding: 0;\n *       font-family: sans-serif;\n *     }\n *   `);\n *\n *   return null;\n * }\n * ```\n *\n * @example Factory function with dependencies (like useMemo)\n * ```tsx\n * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {\n *   useRawCSS(() => `\n *     :root {\n *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};\n *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};\n *     }\n *   `, [theme]);\n *\n *   return null;\n * }\n * ```\n *\n * @example With options\n * ```tsx\n * function ShadowStyles({ shadowRoot }) {\n *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });\n *   return null;\n * }\n * ```\n */\n\n// Overload 1: Static CSS string\nexport function useRawCSS(css: string, options?: UseRawCSSOptions): void;\n\n// Overload 2: Factory function with dependencies\nexport function useRawCSS(\n  factory: () => string,\n  deps: readonly unknown[],\n  options?: UseRawCSSOptions,\n): void;\n\n// Implementation\nexport function useRawCSS(\n  cssOrFactory: string | (() => string),\n  depsOrOptions?: readonly unknown[] | UseRawCSSOptions,\n  options?: UseRawCSSOptions,\n): void {\n  // Detect which overload is being used\n  const isFactory = typeof cssOrFactory === 'function';\n\n  // Parse arguments based on overload\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseRawCSSOptions | undefined);\n\n  // Memoize CSS - for factory functions, use provided deps; for strings, use the string itself\n  const css = useMemo(\n    () =>\n      isFactory ? (cssOrFactory as () => string)() : (cssOrFactory as string),\n\n    isFactory ? (deps ?? []) : [cssOrFactory],\n  );\n\n  const disposeRef = useRef<(() => void) | null>(null);\n\n  useInsertionEffect(() => {\n    // Dispose previous injection if any\n    disposeRef.current?.();\n\n    if (!css.trim()) {\n      disposeRef.current = null;\n      return;\n    }\n\n    // Inject new CSS\n    const { dispose } = injectRawCSS(css, opts);\n    disposeRef.current = dispose;\n\n    // Cleanup on unmount or when css changes\n    return () => {\n      disposeRef.current?.();\n      disposeRef.current = null;\n    };\n  }, [css, opts?.root]);\n}\n"],"mappings":";;;;AAgEA,SAAgB,UACd,cACA,eACA,SACM;CAEN,MAAM,YAAY,OAAO,iBAAiB;CAG1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,MAAM,cAER,YAAa,cAA+B,GAAI,cAElD,YAAa,QAAQ,EAAE,GAAI,CAAC,aAAa,CAC1C;CAED,MAAM,aAAa,OAA4B,KAAK;AAEpD,0BAAyB;AAEvB,aAAW,WAAW;AAEtB,MAAI,CAAC,IAAI,MAAM,EAAE;AACf,cAAW,UAAU;AACrB;;EAIF,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,aAAW,UAAU;AAGrB,eAAa;AACX,cAAW,WAAW;AACtB,cAAW,UAAU;;IAEtB,CAAC,KAAK,MAAM,KAAK,CAAC"}
+{"version":3,"file":"useRawCSS.js","names":[],"sources":["../../src/hooks/useRawCSS.ts"],"sourcesContent":["import { useContext, useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { injectRawCSS } from '../injector';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\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 ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\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":";;;;;;AAkEA,SAAgB,UACd,cACA,eACA,SACM;CAEN,MAAM,eAAe,oBADG,WAAW,gBAAgB,CACM;CAGzD,MAAM,YAAY,OAAO,iBAAiB;CAG1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,MAAM,cAER,YAAa,cAA+B,GAAI,cAElD,YAAa,QAAQ,EAAE,GAAI,CAAC,aAAa,CAC1C;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"}

package/dist/hooks/useStyles.d.ts

@@ -18,6 +18,11 @@ interface UseStylesResult {
  * Hook to generate CSS classes from Tasty styles.
  * Handles style rendering, className allocation, and CSS injection.
  *
+ * SSR-aware: when a ServerStyleCollector is available (via React context
+ * or AsyncLocalStorage), CSS is collected during the render phase instead
+ * of being injected into the DOM. useInsertionEffect does not run on the
+ * server, so the collector path is the only active path during SSR.
+ *
  * Uses chunking to split styles into logical groups for better caching
  * and CSS reuse across components.
  *

package/dist/hooks/useStyles.js

@@ -1,35 +1,38 @@
-import { stringifyStyles } from "../utils/styles.js";
 import { extractLocalProperties, hasLocalProperties } from "../properties/index.js";
-import { getGlobalKeyframes, hasGlobalKeyframes } from "../config.js";
-import { CHUNK_NAMES, categorizeStyleKeys } from "../chunks/definitions.js";
+import { stringifyStyles } from "../utils/styles.js";
+import { extractLocalFontFace, fontFaceContentHash, formatFontFaceRule, hasLocalFontFace } from "../font-face/index.js";
+import { extractLocalCounterStyle, formatCounterStyleRule, hasLocalCounterStyle } from "../counter-style/index.js";
+import { getConfig, getGlobalKeyframes, hasGlobalKeyframes } from "../config.js";
+import { categorizeStyleKeys } from "../chunks/definitions.js";
 import { generateChunkCacheKey } from "../chunks/cacheKey.js";
 import { renderStylesForChunk } from "../chunks/renderChunk.js";
-import { allocateClassName, inject, keyframes, property } from "../injector/index.js";
+import { allocateClassName, counterStyle, fontFace, inject, keyframes, property } from "../injector/index.js";
 import { resolveRecipes } from "../utils/resolve-recipes.js";
 import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames } from "../keyframes/index.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
+import { formatPropertyCSS } from "../ssr/format-property.js";
+import { collectAutoInferredProperties } from "../ssr/collect-auto-properties.js";
+import { resolveSSRCollector } from "./resolve-ssr-collector.js";
+import { TastySSRContext } from "../ssr/context.js";
+import { formatKeyframesCSS } from "../ssr/format-keyframes.js";
+import { hasKeys } from "../utils/has-keys.js";
+import { useContext, useInsertionEffect, useMemo, useRef } from "react";
 
 //#region src/hooks/useStyles.ts
 /**
-* Check if styles contain @starting-style rules.
-*
-* @starting-style CSS cannot be applied via multiple class names because
-* of cascade - later rules override earlier ones. When @starting is detected,
-* we combine top-level styles into a single chunk but keep sub-element styles
-* in their own chunk for better caching.
-*/
-function containsStartingStyle(styleKey) {
-	return styleKey.includes("@starting");
-}
-/**
 * Render, cache-key, and allocate a className for a single chunk.
 * Returns a ProcessedChunk, or null if the chunk produces no CSS rules.
+*
+* Always runs the pipeline and calls allocateClassName. The inject()
+* call in useInsertionEffect handles all edge cases: placeholders from
+* abandoned concurrent renders, hydration hits (ruleIndex -2), and
+* runtime cache hits (already injected). The pipeline's own LRU cache
+* makes repeated calls for identical styles cheap.
 */
 function processChunk(styles, chunkName, styleKeys) {
 	if (styleKeys.length === 0) return null;
-	const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);
-	if (renderResult.rules.length === 0) return null;
 	const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);
+	const renderResult = renderStylesForChunk(styles, chunkName, styleKeys, cacheKey);
+	if (renderResult.rules.length === 0) return null;
 	const { className } = allocateClassName(cacheKey);
 	return {
 		name: chunkName,
@@ -40,26 +43,6 @@ function processChunk(styles, chunkName, styleKeys) {
 	};
 }
 /**
-* Merge chunk map entries for @starting-style partial chunking.
-*
-* All non-subcomponent chunks are merged into a single COMBINED entry,
-* while SUBCOMPONENTS stays separate. This preserves CSS cascade for
-* @starting-style while still allowing sub-element styles to cache independently.
-*/
-function mergeChunksForStartingStyle(chunkMap) {
-	const merged = /* @__PURE__ */ new Map();
-	const combinedKeys = [];
-	for (const [chunkName, keys] of chunkMap) if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) merged.set(CHUNK_NAMES.SUBCOMPONENTS, keys);
-	else combinedKeys.push(...keys);
-	if (combinedKeys.length > 0) {
-		const result = /* @__PURE__ */ new Map();
-		result.set(CHUNK_NAMES.COMBINED, combinedKeys);
-		for (const [k, v] of merged) result.set(k, v);
-		return result;
-	}
-	return merged;
-}
-/**
 * Get keyframes that are actually used in styles.
 * Returns null if no keyframes are used (fast path for zero overhead).
 *
@@ -77,9 +60,44 @@ function getUsedKeyframes(styles) {
 	return filterUsedKeyframes(mergeKeyframes(hasLocal ? extractLocalKeyframes(styles) : null, hasGlobal ? getGlobalKeyframes() : null), usedNames);
 }
 /**
+* Process a chunk on the SSR path: allocate via collector, render, collect CSS.
+* Returns null if the chunk produces no CSS rules.
+*/
+function processChunkSSR(collector, styles, chunkName, styleKeys) {
+	if (styleKeys.length === 0) return null;
+	const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);
+	const { className, isNewAllocation } = collector.allocateClassName(cacheKey);
+	if (isNewAllocation) {
+		const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);
+		if (renderResult.rules.length > 0) {
+			collector.collectChunk(cacheKey, className, renderResult.rules);
+			return {
+				name: chunkName,
+				styleKeys,
+				cacheKey,
+				renderResult,
+				className
+			};
+		}
+		return null;
+	}
+	return {
+		name: chunkName,
+		styleKeys,
+		cacheKey,
+		renderResult: { rules: [] },
+		className
+	};
+}
+/**
 * Hook to generate CSS classes from Tasty styles.
 * Handles style rendering, className allocation, and CSS injection.
 *
+* SSR-aware: when a ServerStyleCollector is available (via React context
+* or AsyncLocalStorage), CSS is collected during the render phase instead
+* of being injected into the DOM. useInsertionEffect does not run on the
+* server, so the collector path is the only active path during SSR.
+*
 * Uses chunking to split styles into logical groups for better caching
 * and CSS reuse across components.
 *
@@ -97,6 +115,7 @@ function getUsedKeyframes(styles) {
 * ```
 */
 function useStyles(styles) {
+	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
 	const disposeRef = useRef([]);
 	const stylesRef = useRef({
 		key: "",
@@ -107,7 +126,7 @@ function useStyles(styles) {
 		return resolveRecipes(styles);
 	}, [styles]);
 	const styleKey = useMemo(() => {
-		if (!resolvedStyles || Object.keys(resolvedStyles).length === 0) return "";
+		if (!resolvedStyles || !hasKeys(resolvedStyles)) return "";
 		return stringifyStyles(resolvedStyles);
 	}, [resolvedStyles]);
 	if (stylesRef.current.key !== styleKey) stylesRef.current = {
@@ -117,10 +136,49 @@ function useStyles(styles) {
 	const processedChunks = useMemo(() => {
 		const currentStyles = stylesRef.current.styles;
 		if (!styleKey || !currentStyles) return [];
-		let chunkMap = categorizeStyleKeys(currentStyles);
-		if (containsStartingStyle(styleKey)) chunkMap = mergeChunksForStartingStyle(chunkMap);
+		const chunkMap = categorizeStyleKeys(currentStyles);
 		const chunks = [];
-		for (const [chunkName, chunkStyleKeys] of chunkMap) {
+		if (ssrCollector) {
+			ssrCollector.collectInternals();
+			for (const [chunkName, chunkStyleKeys] of chunkMap) {
+				const chunk = processChunkSSR(ssrCollector, currentStyles, chunkName, chunkStyleKeys);
+				if (chunk) chunks.push(chunk);
+			}
+			const usedKeyframes = getUsedKeyframes(currentStyles);
+			if (usedKeyframes) for (const [name, steps] of Object.entries(usedKeyframes)) {
+				const css = formatKeyframesCSS(name, steps);
+				ssrCollector.collectKeyframes(name, css);
+			}
+			if (hasLocalProperties(currentStyles)) {
+				const localProperties = extractLocalProperties(currentStyles);
+				if (localProperties) for (const [token, definition] of Object.entries(localProperties)) {
+					const css = formatPropertyCSS(token, definition);
+					if (css) ssrCollector.collectProperty(token, css);
+				}
+			}
+			if (hasLocalFontFace(currentStyles)) {
+				const localFontFace = extractLocalFontFace(currentStyles);
+				if (localFontFace) for (const [family, input] of Object.entries(localFontFace)) {
+					const descriptors = Array.isArray(input) ? input : [input];
+					for (const desc of descriptors) {
+						const hash = fontFaceContentHash(family, desc);
+						const css = formatFontFaceRule(family, desc);
+						ssrCollector.collectFontFace(hash, css);
+					}
+				}
+			}
+			if (hasLocalCounterStyle(currentStyles)) {
+				const localCounterStyle = extractLocalCounterStyle(currentStyles);
+				if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) {
+					const css = formatCounterStyleRule(name, descriptors);
+					ssrCollector.collectCounterStyle(name, css);
+				}
+			}
+			if (getConfig().autoPropertyTypes !== false) {
+				const allRules = chunks.flatMap((c) => c.renderResult.rules);
+				if (allRules.length > 0) collectAutoInferredProperties(allRules, ssrCollector, currentStyles);
+			}
+		} else for (const [chunkName, chunkStyleKeys] of chunkMap) {
 			const chunk = processChunk(currentStyles, chunkName, chunkStyleKeys);
 			if (chunk) chunks.push(chunk);
 		}
@@ -131,6 +189,21 @@ function useStyles(styles) {
 		disposeRef.current = [];
 		if (processedChunks.length === 0) return;
 		const currentStyles = stylesRef.current.styles;
+		if (currentStyles && hasLocalProperties(currentStyles)) {
+			const localProperties = extractLocalProperties(currentStyles);
+			if (localProperties) for (const [token, definition] of Object.entries(localProperties)) property(token, definition);
+		}
+		if (currentStyles && hasLocalFontFace(currentStyles)) {
+			const localFontFace = extractLocalFontFace(currentStyles);
+			if (localFontFace) for (const [family, input] of Object.entries(localFontFace)) {
+				const descriptors = Array.isArray(input) ? input : [input];
+				for (const desc of descriptors) fontFace(family, desc);
+			}
+		}
+		if (currentStyles && hasLocalCounterStyle(currentStyles)) {
+			const localCounterStyle = extractLocalCounterStyle(currentStyles);
+			if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) counterStyle(name, descriptors);
+		}
 		const usedKeyframes = currentStyles ? getUsedKeyframes(currentStyles) : null;
 		let nameMap = null;
 		if (usedKeyframes) {
@@ -143,10 +216,6 @@ function useStyles(styles) {
 			}
 			if (nameMap.size === 0) nameMap = null;
 		}
-		if (currentStyles && hasLocalProperties(currentStyles)) {
-			const localProperties = extractLocalProperties(currentStyles);
-			if (localProperties) for (const [token, definition] of Object.entries(localProperties)) property(token, definition);
-		}
 		for (const chunk of processedChunks) if (chunk.renderResult.rules.length > 0) {
 			const { dispose } = inject(nameMap ? chunk.renderResult.rules.map((rule) => ({
 				...rule,

package/dist/hooks/useStyles.js.map

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