@tenphi/tasty 0.0.0-snapshot.05c1c22

package/dist/hooks/useKeyframes.js

@@ -0,0 +1,64 @@
+import { keyframes } from "../injector/index.js";
+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;
+	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(() => {
+		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;
+		const result = keyframes(stepsData, {
+			name: opts?.name,
+			root: opts?.root
+		});
+		renderResultRef.current = result;
+		return result.toString();
+	}, [
+		stepsData,
+		opts?.name,
+		opts?.root,
+		ssrCollector
+	]);
+	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
+	]);
+	return name;
+}
+//#endregion
+export { useKeyframes };
+
+//# sourceMappingURL=useKeyframes.js.map

package/dist/hooks/useKeyframes.js.map

@@ -0,0 +1 @@
+{"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,KAAA;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.d.ts

@@ -0,0 +1,79 @@
+//#region src/hooks/useProperty.d.ts
+interface UsePropertyOptions {
+  /**
+   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').
+   * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
+   */
+  syntax?: string;
+  /**
+   * Whether the property inherits from parent elements
+   * @default true
+   */
+  inherits?: boolean;
+  /**
+   * Initial value for the property.
+   * For color tokens (#name), this defaults to 'transparent' if not specified.
+   */
+  initialValue?: string | number;
+  /**
+   * Shadow root or document to inject into
+   */
+  root?: Document | ShadowRoot;
+}
+/**
+ * Hook to 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.
+ *
+ * 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)
+ *
+ * @param name - The property token ($name, #name) or CSS property name (--name)
+ * @param options - Property configuration
+ *
+ * @example Basic property with token syntax
+ * ```tsx
+ * function Spinner() {
+ *   useProperty('$rotation', {
+ *     syntax: '<angle>',
+ *     inherits: false,
+ *     initialValue: '0deg',
+ *   });
+ *
+ *   return <div className="spinner" />;
+ * }
+ * ```
+ *
+ * @example Color property with token syntax (auto-sets syntax)
+ * ```tsx
+ * function MyComponent() {
+ *   useProperty('#theme', {
+ *     initialValue: 'red', // syntax: '<color>' is auto-set
+ *   });
+ *
+ *   // Now --theme-color can be animated with CSS transitions
+ *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;
+ * }
+ * ```
+ *
+ * @example Legacy format (still supported)
+ * ```tsx
+ * function ResizableBox() {
+ *   useProperty('--box-size', {
+ *     syntax: '<length>',
+ *     initialValue: '100px',
+ *   });
+ *
+ *   return <div style={{ width: 'var(--box-size)' }} />;
+ * }
+ * ```
+ */
+declare function useProperty(name: string, options?: UsePropertyOptions): void;
+//#endregion
+export { UsePropertyOptions, useProperty };
+//# sourceMappingURL=useProperty.d.ts.map

package/dist/hooks/useProperty.js

@@ -0,0 +1,109 @@
+import { getGlobalInjector } from "../config.js";
+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
+/**
+* Hook to 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.
+*
+* 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)
+*
+* @param name - The property token ($name, #name) or CSS property name (--name)
+* @param options - Property configuration
+*
+* @example Basic property with token syntax
+* ```tsx
+* function Spinner() {
+*   useProperty('$rotation', {
+*     syntax: '<angle>',
+*     inherits: false,
+*     initialValue: '0deg',
+*   });
+*
+*   return <div className="spinner" />;
+* }
+* ```
+*
+* @example Color property with token syntax (auto-sets syntax)
+* ```tsx
+* function MyComponent() {
+*   useProperty('#theme', {
+*     initialValue: 'red', // syntax: '<color>' is auto-set
+*   });
+*
+*   // Now --theme-color can be animated with CSS transitions
+*   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;
+* }
+* ```
+*
+* @example Legacy format (still supported)
+* ```tsx
+* function ResizableBox() {
+*   useProperty('--box-size', {
+*     syntax: '<length>',
+*     initialValue: '100px',
+*   });
+*
+*   return <div style={{ width: 'var(--box-size)' }} />;
+* }
+* ```
+*/
+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`);
+			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
+		});
+	}, [
+		name,
+		optionsKey,
+		options?.root
+	]);
+}
+//#endregion
+export { useProperty };
+
+//# sourceMappingURL=useProperty.js.map

package/dist/hooks/useProperty.js.map

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,53 @@
+//#region src/hooks/useRawCSS.d.ts
+interface UseRawCSSOptions {
+  root?: Document | ShadowRoot;
+}
+/**
+ * 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
+export { useRawCSS };
+//# sourceMappingURL=useRawCSS.d.ts.map

package/dist/hooks/useRawCSS.js

@@ -0,0 +1,35 @@
+import { injectRawCSS } from "../injector/index.js";
+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?.();
+		if (!css.trim()) {
+			disposeRef.current = null;
+			return;
+		}
+		const { dispose } = injectRawCSS(css, opts);
+		disposeRef.current = dispose;
+		return () => {
+			disposeRef.current?.();
+			disposeRef.current = null;
+		};
+	}, [css, opts?.root]);
+}
+//#endregion
+export { useRawCSS };
+
+//# sourceMappingURL=useRawCSS.js.map

package/dist/hooks/useRawCSS.js.map

@@ -0,0 +1 @@
+{"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,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,MAAM,cAER,YAAa,cAA+B,GAAI,cAElD,YAAa,QAAQ,EAAE,GAAI,CAAC,aAAa,CAC1C;AAGD,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,IAAI,MAAM,CAAE;EAElC,MAAM,MAAM,OAAO,IAAI,OAAO,GAAG,IAAI,MAAM,GAAG,GAAG;AACjD,eAAa,cAAc,KAAK,IAAI;IACnC,CAAC,cAAc,IAAI,CAAC;CAEvB,MAAM,aAAa,OAA4B,KAAK;AAGpD,0BAAyB;AACvB,aAAW,WAAW;AAEtB,MAAI,CAAC,IAAI,MAAM,EAAE;AACf,cAAW,UAAU;AACrB;;EAGF,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,aAAW,UAAU;AAErB,eAAa;AACX,cAAW,WAAW;AACtB,cAAW,UAAU;;IAEtB,CAAC,KAAK,MAAM,KAAK,CAAC"}

package/dist/hooks/useStyles.d.ts

@@ -0,0 +1,45 @@
+import { Styles } from "../styles/types.js";
+
+//#region src/hooks/useStyles.d.ts
+/**
+ * Tasty styles object to generate CSS classes for.
+ * Can be undefined or empty object for no styles.
+ */
+type UseStylesOptions = Styles | undefined;
+interface UseStylesResult {
+  /**
+   * Generated className(s) to apply to the element.
+   * Can be empty string if no styles are provided.
+   * With chunking enabled, may contain multiple space-separated class names.
+   */
+  className: string;
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { className } = useStyles({
+ *     padding: '2x',
+ *     fill: '#purple',
+ *     radius: '1r',
+ *   });
+ *
+ *   return <div className={className}>Styled content</div>;
+ * }
+ * ```
+ */
+declare function useStyles(styles: UseStylesOptions): UseStylesResult;
+//#endregion
+export { UseStylesOptions, UseStylesResult, useStyles };
+//# sourceMappingURL=useStyles.d.ts.map

package/dist/hooks/useStyles.js

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