@tenphi/tasty 0.0.0-snapshot.15d87ac → 0.0.0-snapshot.1865bfd

package/README.md

@@ -42,7 +42,7 @@ On top of that foundation, Tasty gives teams a governed styling model: a CSS-lik
 ### Supporting capabilities
 
 - **Typed style props and mod props** — `styleProps` exposes selected CSS properties as typed React props (`<Space flow="row" gap="2x">`); `modProps` does the same for modifier keys (`<Button isLoading size="large">`). Both support state maps and full TypeScript autocomplete. See [Style Props](#style-props) and [Mod Props](#mod-props).
-- **Runtime, SSR, and zero-runtime options** — Use `tasty()` for runtime React components, add SSR integrations when your framework renders that runtime on the server, or use `tastyStatic()` when you specifically want build-time extraction instead of runtime styling.
+- **Server-compatible by default, zero client JS in server-only contexts** — All `tasty()` components and style functions are hook-free. In server-only rendering (Next.js RSC, Astro without islands, SSG), they produce zero client JavaScript with the full feature set. Add SSR integration only when your app also has client-side hydration. Use `tastyStatic()` only when you need build-time extraction without React.
 - **Broad modern CSS coverage** — Media queries, container queries, `@supports`, `:has()`, `@starting-style`, `@property`, `@keyframes`, and more. Features that do not fit the component model (such as `@layer` and `!important`) are intentionally left out.
 - **Performance and caching** — Runtime mode injects CSS on demand, reuses chunks aggressively, and relies on multi-level caching so large component systems stay practical.
 - **TypeScript-first and AI-friendly** — Style definitions are declarative, structurally consistent, and fully typed, which helps both humans and tooling understand advanced stateful styles without hidden cascade logic.
@@ -188,7 +188,7 @@ Use `configure()` once when your app or design system needs shared aliases, toke
 </Space>
 ```
 
-See [Style Props](#style-props) and [Mod Props](#mod-props) below, or the full reference in [Runtime API](docs/runtime.md#style-props).
+See [Style Props](#style-props) and [Mod Props](#mod-props) below, or the full reference in [React API](docs/react-api.md#style-props).
 
 ## Choose a Styling Approach
 
@@ -196,10 +196,11 @@ Once you understand the component model, pick the rendering mode that matches yo
 
 | Approach | Entry point | Best for | Trade-off |
 |----------|-------------|----------|-----------|
-| **Runtime** | `@tenphi/tasty` | Interactive apps with reusable stateful components and design systems | Full feature set; CSS is generated on demand at runtime |
-| **Zero-runtime** | `@tenphi/tasty/static` | Static sites, SSG, landing pages | Requires the Babel plugin; no component-level `styleProps` or runtime-only APIs |
+| **Runtime (default)** | `tasty()` from `@tenphi/tasty` | All React apps — server-rendered by default, zero client JS until you need interactivity | Full feature set; CSS computed during React rendering (server or client) |
+| **Runtime + SSR integration** | Add `@tenphi/tasty/ssr/*` | Apps with client-side hydration (Next.js client components, Astro islands) | Adds CSS deduplication, FOUC prevention, and client cache hydration |
+| **Zero-runtime** | `tastyStatic()` from `@tenphi/tasty/static` | Non-React frameworks or when you need build-time extraction without React | Requires the Babel plugin; no component-level `styleProps` or runtime-only APIs |
 
-If your framework can execute runtime React code on the server, you can also add **SSR on top of runtime** with `@tenphi/tasty/ssr/*`. This uses the same `tasty()` pipeline, but collects CSS during server rendering and hydrates the cache on the client. That is the model for Next.js, generic React SSR, and Astro islands. See [Getting Started](docs/getting-started.md#choosing-a-rendering-mode), [Zero Runtime](docs/tasty-static.md), and [Server-Side Rendering](docs/ssr.md).
+All `tasty()` components are hook-free and work as React Server Components. In server-only contexts — Next.js RSC without `'use client'`, Astro without `client:*` directives, and other SSG setups — they produce the same end result as `tastyStatic()` (static HTML + CSS, zero client JavaScript) but with the full feature set including `styleProps`, sub-elements, and variants. SSR integration is only needed when your app also has client-side rendering. See [Getting Started](docs/getting-started.md#choosing-a-rendering-mode), [Zero Runtime](docs/tasty-static.md), and [Server-Side Rendering](docs/ssr.md).
 
 ## How It Actually Works
 
@@ -347,7 +348,7 @@ Every style property accepts a state mapping object. Keys can be combined with b
 | Feature query | `@supports(display: grid)` | `@supports (display: grid)` |
 | Entry animation | `@starting` | `@starting-style` |
 
-Combine with `&` (AND), `|` (OR), `!` (NOT):
+Combine with `&` (AND), `|` (OR), `!` (NOT), `^` (XOR):
 
 ```tsx
 fill: {
@@ -363,7 +364,7 @@ Compound components can style inner parts from the parent definition with capita
 
 Sub-elements share the root state context by default, so keys like `:hover`, modifiers, root states, and media queries resolve as one coordinated styling block. Use `@own(...)` when a sub-element should react to its own state, and use the `$` selector affix when you need precise descendant targeting.
 
-See [Runtime API - Sub-element Styling](docs/runtime.md#sub-element-styling), [Style DSL - Advanced States](docs/dsl.md#advanced-states--prefix), and [Methodology](docs/methodology.md#component-architecture-root--sub-elements).
+See [React API - Sub-element Styling](docs/react-api.md#sub-element-styling), [Style DSL - Advanced States](docs/dsl.md#advanced-states--prefix), and [Methodology](docs/methodology.md#component-architecture-root--sub-elements).
 
 ### Style Props
 
@@ -378,7 +379,7 @@ const Space = tasty({
 <Space flow="row" gap={{ '': '2x', '@tablet': '4x' }}>
 ```
 
-See [Runtime API - Style Props](docs/runtime.md#style-props) and [Methodology - styleProps](docs/methodology.md#styleprops-as-the-public-api).
+See [React API - Style Props](docs/react-api.md#style-props) and [Methodology - styleProps](docs/methodology.md#styleprops-as-the-public-api).
 
 ### Mod Props
 
@@ -397,13 +398,13 @@ const Button = tasty({
 <Button isLoading size="lg">Submit</Button>
 ```
 
-See [Runtime API - Mod Props](docs/runtime.md#mod-props) and [Methodology - modProps](docs/methodology.md#modprops-and-mods).
+See [React API - Mod Props](docs/react-api.md#mod-props) and [Methodology - modProps](docs/methodology.md#modprops-and-mods).
 
 ### Variants
 
 Variants let one component expose named visual versions without pre-generating a separate class for every possible combination. In runtime mode, Tasty emits only the variant CSS that is actually used.
 
-See [Runtime API - Variants](docs/runtime.md#variants).
+See [React API - Variants](docs/react-api.md#variants).
 
 ### Recipes
 
@@ -427,11 +428,11 @@ Use explicit `@properties` only when you need to override defaults such as `inhe
 
 See [Style DSL - Properties (`@property`)](docs/dsl.md#properties-property).
 
-### React Hooks
+### Style Functions
 
-When you do not need a full component wrapper, use the hooks directly: `useStyles` for local class names, `useGlobalStyles` for selector-scoped global CSS, `useRawCSS` for raw rules, plus `useKeyframes` and `useProperty` for animation and custom-property primitives.
+When you do not need a full component wrapper, use the style functions directly: `useStyles` for local class names, `useGlobalStyles` for selector-scoped global CSS, `useRawCSS` for raw rules, plus `useKeyframes`, `useProperty`, `useFontFace`, and `useCounterStyle` for animation, custom-property, font, and counter-style primitives. All style functions are hook-free and work in React Server Components.
 
-See [Runtime API - Hooks](docs/runtime.md#hooks).
+See [React API - Style Functions](docs/react-api.md#style-functions).
 
 ### Zero-Runtime Mode
 
@@ -441,15 +442,19 @@ See [Zero Runtime (tastyStatic)](docs/tasty-static.md) and [Getting Started - Ch
 
 ### `tasty` vs `tastyStatic`
 
-`tasty()` returns React components and injects CSS on demand at runtime. `tastyStatic()` returns class names and extracts CSS during the build. Both share the same DSL, tokens, units, state mappings, and recipes, so the main choice is runtime flexibility versus build-time extraction.
+`tasty()` returns React components that compute CSS during rendering. In server-only contexts, this produces static HTML + CSS with zero client JavaScript — the same end result as `tastyStatic()` but with the full feature set. `tastyStatic()` returns class names and extracts CSS during the build via a Babel plugin, with no React dependency at runtime. Both share the same DSL, tokens, units, state mappings, and recipes. Use `tasty()` as the default for any React-based setup; use `tastyStatic()` when you need build-time extraction without React.
 
-See [Zero Runtime (tastyStatic)](docs/tasty-static.md), [Runtime API](docs/runtime.md), and [Comparison - Build-time vs runtime](docs/comparison.md#build-time-vs-runtime).
+See [Zero Runtime (tastyStatic)](docs/tasty-static.md), [React API](docs/react-api.md), and [Comparison - Build-time vs runtime](docs/comparison.md#build-time-vs-runtime).
 
 ### Server-Side Rendering
 
-SSR layers on top of runtime `tasty()` rather than introducing a separate styling model. Existing components stay unchanged while Tasty collects CSS during server rendering and hydrates the cache on the client.
+`tasty()` components already work on the server without any SSR integration — they are hook-free and render as React Server Components by default. In server-only contexts (Next.js RSC, Astro without islands), they produce zero client JavaScript with the full feature set.
 
-Use `@tenphi/tasty/ssr/next` for Next.js App Router, `@tenphi/tasty/ssr/astro` for Astro, or the core SSR API for other React SSR setups.
+SSR integration (`TastyRegistry`, `tastyIntegration`) adds CSS batching, deduplication across component trees, FOUC prevention, and client cache hydration. Use it when your app also has client-side rendering:
+
+- `@tenphi/tasty/ssr/next` for Next.js App Router (mixed server + client components)
+- `@tenphi/tasty/ssr/astro` for Astro (with or without islands)
+- The core SSR API for other React SSR setups
 
 See the [full SSR guide](docs/ssr.md).
 
@@ -457,7 +462,7 @@ See the [full SSR guide](docs/ssr.md).
 
 | Import | Description | Platform |
 |--------|-------------|----------|
-| `@tenphi/tasty` | Runtime style engine (`tasty`, hooks, `configure`) | Browser |
+| `@tenphi/tasty` | Runtime style engine (`tasty`, style functions, `configure`) | Browser |
 | `@tenphi/tasty/static` | Zero-runtime static styles (`tastyStatic`) | Browser |
 | `@tenphi/tasty/core` | Lower-level internals (config, parser, pipeline, injector, style handlers) for tooling and advanced use | Browser / Node |
 | `@tenphi/tasty/babel-plugin` | Babel plugin for zero-runtime CSS extraction | Node |
@@ -465,7 +470,8 @@ See the [full SSR guide](docs/ssr.md).
 | `@tenphi/tasty/next` | Next.js integration wrapper | Node |
 | `@tenphi/tasty/ssr` | Core SSR API (collector, context, hydration) | Node |
 | `@tenphi/tasty/ssr/next` | Next.js App Router SSR integration | Node |
-| `@tenphi/tasty/ssr/astro` | Astro middleware + auto-hydration | Node / Browser |
+| `@tenphi/tasty/ssr/astro` | Astro integration + middleware | Node |
+| `@tenphi/tasty/ssr/astro-client` | Astro client-side cache hydration | Browser |
 
 ## Browser Requirements
 
@@ -605,7 +611,7 @@ Start from the docs hub if you want the shortest path to the right guide for you
 ### Reference
 
 - **[Style DSL](docs/dsl.md)** — The Tasty style language: state maps, tokens, units, color syntax, extending semantics, recipes, keyframes, and @property
-- **[Runtime API](docs/runtime.md)** — React-specific API: `tasty()` factory, component props, variants, sub-elements, and hooks
+- **[React API](docs/react-api.md)** — React-specific API: `tasty()` factory, component props, variants, sub-elements, and style functions
 - **[Configuration](docs/configuration.md)** — Global configuration: tokens, recipes, custom units, style handlers, and TypeScript extensions
 - **[Style Properties](docs/styles.md)** — Complete reference for all enhanced style properties: syntax, values, modifiers, and recommendations
 

package/dist/chunks/definitions.js.map

@@ -1 +1 @@
-{"version":3,"file":"definitions.js","names":[],"sources":["../../src/chunks/definitions.ts"],"sourcesContent":["/**\n * Style chunk definitions for CSS chunking optimization.\n *\n * Styles are grouped into chunks based on:\n * 1. Handler dependencies - styles that share a handler MUST be in the same chunk\n * 2. Logical grouping - related styles grouped for better cache reuse\n *\n * See STYLE_CHUNKING_SPEC.md for detailed rationale.\n *\n * ============================================================================\n * ⚠️  CRITICAL ARCHITECTURAL CONSTRAINT: NO CROSS-CHUNK HANDLER DEPENDENCIES\n * ============================================================================\n *\n * Style handlers declare their dependencies via `__lookupStyles` array.\n * This creates a dependency graph where handlers read multiple style props.\n *\n * **ALL styles in a handler's `__lookupStyles` MUST be in the SAME chunk.**\n *\n * Why this matters:\n * 1. Each chunk computes a cache key from ONLY its own style values\n * 2. If a handler reads a style from another chunk, that value isn't in the cache key\n * 3. Changing the cross-chunk style won't invalidate this chunk's cache\n * 4. Result: stale CSS output or incorrect cache hits\n *\n * Example of a violation:\n * ```\n * // flowStyle.__lookupStyles = ['display', 'flow']\n * // If 'display' is in DISPLAY chunk and 'flow' is in LAYOUT chunk:\n * // - User sets { display: 'grid', flow: 'column' }\n * // - LAYOUT chunk caches CSS with flow=column, display=grid\n * // - User changes to { display: 'flex', flow: 'column' }\n * // - LAYOUT chunk cache key unchanged (only has 'flow')\n * // - Returns stale CSS computed with display=grid!\n * ```\n *\n * Before adding/moving styles, verify:\n * 1. Find all handlers that use this style (grep for the style name in __lookupStyles)\n * 2. Ensure ALL styles from each handler's __lookupStyles are in the same chunk\n * ============================================================================\n */\n\nimport { isSelector } from '../pipeline';\n\n// ============================================================================\n// Chunk Style Lists\n// ============================================================================\n\n/**\n * Appearance chunk - visual styling with independent handlers\n */\nexport const APPEARANCE_CHUNK_STYLES = [\n  'fill', // fillStyle (independent)\n  'color', // colorStyle (independent)\n  'opacity', // independent\n  'border', // borderStyle (independent)\n  'radius', // radiusStyle (independent)\n  'outline', // outlineStyle: outline ↔ outlineOffset\n  'outlineOffset', // outlineStyle: outline ↔ outlineOffset\n  'shadow', // shadowStyle (independent)\n  'fade', // fadeStyle (independent)\n] as const;\n\n/**\n * Font chunk - typography styles\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ presetStyle: preset, fontSize, lineHeight, letterSpacing, textTransform,\n *    fontWeight, fontStyle, font\n */\nexport const FONT_CHUNK_STYLES = [\n  // All from presetStyle handler - MUST stay together\n  'preset',\n  'font',\n  'fontWeight',\n  'fontStyle',\n  'fontSize',\n  'lineHeight',\n  'letterSpacing',\n  'textTransform',\n  // Independent text styles grouped for cohesion\n  'fontFamily', // independent alias (logical grouping with font styles)\n  'textAlign',\n  'textDecoration',\n  'wordBreak',\n  'wordWrap',\n  'boldFontWeight',\n] as const;\n\n/**\n * Dimension chunk - sizing and spacing\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left, paddingBlock/Inline\n * ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left, marginBlock/Inline\n * ⚠️ widthStyle: width, minWidth, maxWidth\n * ⚠️ heightStyle: height, minHeight, maxHeight\n */\nexport const DIMENSION_CHUNK_STYLES = [\n  // All from paddingStyle handler - MUST stay together\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n  // All from marginStyle handler - MUST stay together\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n  // widthStyle handler - MUST stay together\n  'width',\n  'minWidth',\n  'maxWidth',\n  // heightStyle handler - MUST stay together\n  'height',\n  'minHeight',\n  'maxHeight',\n  'flexBasis',\n  'flexGrow',\n  'flexShrink',\n  'flex',\n] as const;\n\n/**\n * Display chunk - display mode, layout flow, text overflow, and scrollbar\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ displayStyle: display, hide, textOverflow, overflow, whiteSpace\n * ⚠️ flowStyle: display, flow\n * ⚠️ gapStyle: display, flow, gap\n * ⚠️ scrollbarStyle: scrollbar, overflow\n */\nexport const DISPLAY_CHUNK_STYLES = [\n  // displayStyle handler\n  'display',\n  'hide',\n  'textOverflow',\n  'overflow', // also used by scrollbarStyle\n  'whiteSpace',\n  // flowStyle handler (requires display)\n  'flow',\n  // gapStyle handler (requires display, flow)\n  'gap',\n  // scrollbarStyle handler (requires overflow)\n  'scrollbar',\n] as const;\n\n/**\n * Layout chunk - flex/grid alignment and grid templates\n *\n * Note: flow and gap are in DISPLAY chunk due to handler dependencies\n * (flowStyle and gapStyle both require 'display' prop).\n */\nexport const LAYOUT_CHUNK_STYLES = [\n  // Alignment styles (all independent handlers)\n  'placeItems',\n  'placeContent',\n  'alignItems',\n  'alignContent',\n  'justifyItems',\n  'justifyContent',\n  'align', // alignStyle (independent)\n  'justify', // justifyStyle (independent)\n  'place', // placeStyle (independent)\n  'columnGap',\n  'rowGap',\n  // Grid template styles\n  'gridColumns',\n  'gridRows',\n  'gridTemplate',\n  'gridAreas',\n  'gridAutoFlow',\n  'gridAutoColumns',\n  'gridAutoRows',\n] as const;\n\n/**\n * Position chunk - element positioning\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ insetStyle: inset, insetBlock, insetInline, top, right, bottom, left\n */\nexport const POSITION_CHUNK_STYLES = [\n  'position',\n  // All from insetStyle handler - MUST stay together\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'zIndex',\n  'gridArea',\n  'gridColumn',\n  'gridRow',\n  'order',\n  'placeSelf',\n  'alignSelf',\n  'justifySelf',\n  'transform',\n  'transition',\n  'animation',\n] as const;\n\n// ============================================================================\n// Chunk Names\n// ============================================================================\n\nexport const CHUNK_NAMES = {\n  /** Special chunk for styles that cannot be split */\n  COMBINED: 'combined',\n  SUBCOMPONENTS: 'subcomponents',\n  APPEARANCE: 'appearance',\n  FONT: 'font',\n  DIMENSION: 'dimension',\n  DISPLAY: 'display',\n  LAYOUT: 'layout',\n  POSITION: 'position',\n  MISC: 'misc',\n} as const;\n\nexport type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];\n\n// ============================================================================\n// Style-to-Chunk Lookup Map (O(1) categorization)\n// ============================================================================\n\n/**\n * Pre-computed map for O(1) style-to-chunk lookup.\n * Built once at module load time.\n */\nexport const STYLE_TO_CHUNK = new Map<string, ChunkName>();\n\n// Populate the lookup map\nfunction populateStyleToChunkMap() {\n  for (const style of APPEARANCE_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.APPEARANCE);\n  }\n  for (const style of FONT_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.FONT);\n  }\n  for (const style of DIMENSION_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DIMENSION);\n  }\n  for (const style of DISPLAY_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DISPLAY);\n  }\n  for (const style of LAYOUT_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.LAYOUT);\n  }\n  for (const style of POSITION_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.POSITION);\n  }\n}\n\n// Initialize at module load\npopulateStyleToChunkMap();\n\n// ============================================================================\n// Chunk Priority Order\n// ============================================================================\n\n/**\n * Chunk processing order. This ensures deterministic className allocation\n * regardless of style key order in the input.\n */\nconst CHUNK_ORDER: readonly string[] = [\n  CHUNK_NAMES.APPEARANCE,\n  CHUNK_NAMES.FONT,\n  CHUNK_NAMES.DIMENSION,\n  CHUNK_NAMES.DISPLAY,\n  CHUNK_NAMES.LAYOUT,\n  CHUNK_NAMES.POSITION,\n  CHUNK_NAMES.MISC,\n  CHUNK_NAMES.SUBCOMPONENTS,\n] as const;\n\n/**\n * Map from chunk name to its priority index for sorting.\n */\nconst _CHUNK_PRIORITY = new Map<string, number>(\n  CHUNK_ORDER.map((name, index) => [name, index]),\n);\n\n// ============================================================================\n// Chunk Info Interface\n// ============================================================================\n\nexport interface ChunkInfo {\n  /** Name of the chunk */\n  name: ChunkName | string;\n  /** Style keys belonging to this chunk */\n  styleKeys: string[];\n}\n\n// ============================================================================\n// Style Categorization\n// ============================================================================\n\n/**\n * Categorize style keys into chunks.\n *\n * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless\n * of the order of keys in the input styles object.\n *\n * @param styles - The styles object to categorize\n * @returns Map of chunk name to array of style keys in that chunk (in priority order)\n */\nexport function categorizeStyleKeys(\n  styles: Record<string, unknown>,\n): Map<string, string[]> {\n  // First pass: collect keys into chunks (unordered)\n  const chunkData: Record<string, string[]> = {};\n  const keys = Object.keys(styles);\n\n  for (const key of keys) {\n    // Skip the $ helper key (used for selector combinators)\n    // Skip @keyframes and @properties (processed separately in useStyles)\n    // Skip recipe (resolved before pipeline by resolveRecipes)\n    if (\n      key === '$' ||\n      key === '@keyframes' ||\n      key === '@properties' ||\n      key === '@fontFace' ||\n      key === '@counterStyle' ||\n      key === 'recipe'\n    ) {\n      continue;\n    }\n\n    if (isSelector(key)) {\n      // All selectors go into the subcomponents chunk\n      if (!chunkData[CHUNK_NAMES.SUBCOMPONENTS]) {\n        chunkData[CHUNK_NAMES.SUBCOMPONENTS] = [];\n      }\n      chunkData[CHUNK_NAMES.SUBCOMPONENTS].push(key);\n    } else {\n      // Look up the chunk for this style, default to misc\n      const chunkName = STYLE_TO_CHUNK.get(key) ?? CHUNK_NAMES.MISC;\n      if (!chunkData[chunkName]) {\n        chunkData[chunkName] = [];\n      }\n      chunkData[chunkName].push(key);\n    }\n  }\n\n  // Second pass: build ordered Map based on CHUNK_ORDER\n  const orderedChunks = new Map<string, string[]>();\n\n  // Add chunks in priority order\n  for (const chunkName of CHUNK_ORDER) {\n    if (chunkData[chunkName] && chunkData[chunkName].length > 0) {\n      // Sort keys within chunk for consistent cache key generation\n      orderedChunks.set(chunkName, chunkData[chunkName].sort());\n    }\n  }\n\n  // Handle any unknown chunks (shouldn't happen, but be defensive)\n  for (const chunkName of Object.keys(chunkData)) {\n    if (!orderedChunks.has(chunkName)) {\n      orderedChunks.set(chunkName, chunkData[chunkName].sort());\n    }\n  }\n\n  return orderedChunks;\n}\n"],"mappings":"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"}
+{"version":3,"file":"definitions.js","names":[],"sources":["../../src/chunks/definitions.ts"],"sourcesContent":["/**\n * Style chunk definitions for CSS chunking optimization.\n *\n * Styles are grouped into chunks based on:\n * 1. Handler dependencies - styles that share a handler MUST be in the same chunk\n * 2. Logical grouping - related styles grouped for better cache reuse\n *\n * See STYLE_CHUNKING_SPEC.md for detailed rationale.\n *\n * ============================================================================\n * ⚠️  CRITICAL ARCHITECTURAL CONSTRAINT: NO CROSS-CHUNK HANDLER DEPENDENCIES\n * ============================================================================\n *\n * Style handlers declare their dependencies via `__lookupStyles` array.\n * This creates a dependency graph where handlers read multiple style props.\n *\n * **ALL styles in a handler's `__lookupStyles` MUST be in the SAME chunk.**\n *\n * Why this matters:\n * 1. Each chunk computes a cache key from ONLY its own style values\n * 2. If a handler reads a style from another chunk, that value isn't in the cache key\n * 3. Changing the cross-chunk style won't invalidate this chunk's cache\n * 4. Result: stale CSS output or incorrect cache hits\n *\n * Example of a violation:\n * ```\n * // flowStyle.__lookupStyles = ['display', 'flow']\n * // If 'display' is in DISPLAY chunk and 'flow' is in LAYOUT chunk:\n * // - User sets { display: 'grid', flow: 'column' }\n * // - LAYOUT chunk caches CSS with flow=column, display=grid\n * // - User changes to { display: 'flex', flow: 'column' }\n * // - LAYOUT chunk cache key unchanged (only has 'flow')\n * // - Returns stale CSS computed with display=grid!\n * ```\n *\n * Before adding/moving styles, verify:\n * 1. Find all handlers that use this style (grep for the style name in __lookupStyles)\n * 2. Ensure ALL styles from each handler's __lookupStyles are in the same chunk\n * ============================================================================\n */\n\nimport { isSelector } from '../pipeline';\n\n// ============================================================================\n// Chunk Style Lists\n// ============================================================================\n\n/**\n * Appearance chunk - visual styling with independent handlers\n */\nexport const APPEARANCE_CHUNK_STYLES = [\n  'fill', // fillStyle (independent)\n  'color', // colorStyle (independent)\n  'opacity', // independent\n  'border', // borderStyle (independent)\n  'radius', // radiusStyle (independent)\n  'outline', // outlineStyle: outline ↔ outlineOffset\n  'outlineOffset', // outlineStyle: outline ↔ outlineOffset\n  'shadow', // shadowStyle (independent)\n  'fade', // fadeStyle (independent)\n] as const;\n\n/**\n * Font chunk - typography styles\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ presetStyle: preset, fontSize, lineHeight, letterSpacing, textTransform,\n *    fontWeight, fontStyle, font\n */\nexport const FONT_CHUNK_STYLES = [\n  // All from presetStyle handler - MUST stay together\n  'preset',\n  'font',\n  'fontWeight',\n  'fontStyle',\n  'fontSize',\n  'lineHeight',\n  'letterSpacing',\n  'textTransform',\n  // Independent text styles grouped for cohesion\n  'fontFamily', // independent alias (logical grouping with font styles)\n  'textAlign',\n  'textDecoration',\n  'wordBreak',\n  'wordWrap',\n  'boldFontWeight',\n] as const;\n\n/**\n * Dimension chunk - sizing and spacing\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left, paddingBlock/Inline\n * ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left, marginBlock/Inline\n * ⚠️ widthStyle: width, minWidth, maxWidth\n * ⚠️ heightStyle: height, minHeight, maxHeight\n */\nexport const DIMENSION_CHUNK_STYLES = [\n  // All from paddingStyle handler - MUST stay together\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n  // All from marginStyle handler - MUST stay together\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n  // widthStyle handler - MUST stay together\n  'width',\n  'minWidth',\n  'maxWidth',\n  // heightStyle handler - MUST stay together\n  'height',\n  'minHeight',\n  'maxHeight',\n  'flexBasis',\n  'flexGrow',\n  'flexShrink',\n  'flex',\n] as const;\n\n/**\n * Display chunk - display mode, layout flow, text overflow, and scrollbar\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ displayStyle: display, hide, textOverflow, overflow, whiteSpace\n * ⚠️ flowStyle: display, flow\n * ⚠️ gapStyle: display, flow, gap\n * ⚠️ scrollbarStyle: scrollbar, overflow\n */\nexport const DISPLAY_CHUNK_STYLES = [\n  // displayStyle handler\n  'display',\n  'hide',\n  'textOverflow',\n  'overflow', // also used by scrollbarStyle\n  'whiteSpace',\n  // flowStyle handler (requires display)\n  'flow',\n  // gapStyle handler (requires display, flow)\n  'gap',\n  // scrollbarStyle handler (requires overflow)\n  'scrollbar',\n] as const;\n\n/**\n * Layout chunk - flex/grid alignment and grid templates\n *\n * Note: flow and gap are in DISPLAY chunk due to handler dependencies\n * (flowStyle and gapStyle both require 'display' prop).\n */\nexport const LAYOUT_CHUNK_STYLES = [\n  // Alignment styles (all independent handlers)\n  'placeItems',\n  'placeContent',\n  'alignItems',\n  'alignContent',\n  'justifyItems',\n  'justifyContent',\n  'align', // placementStyle\n  'justify', // placementStyle\n  'place', // placementStyle\n  'columnGap',\n  'rowGap',\n  // Grid template styles\n  'gridColumns',\n  'gridRows',\n  'gridTemplate',\n  'gridAreas',\n  'gridAutoFlow',\n  'gridAutoColumns',\n  'gridAutoRows',\n] as const;\n\n/**\n * Position chunk - element positioning\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ insetStyle: inset, insetBlock, insetInline, top, right, bottom, left\n */\nexport const POSITION_CHUNK_STYLES = [\n  'position',\n  // All from insetStyle handler - MUST stay together\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'zIndex',\n  'gridArea',\n  'gridColumn',\n  'gridRow',\n  'order',\n  'placeSelf',\n  'alignSelf',\n  'justifySelf',\n  'transform',\n  'transition',\n  'animation',\n] as const;\n\n// ============================================================================\n// Chunk Names\n// ============================================================================\n\nexport const CHUNK_NAMES = {\n  /** Special chunk for styles that cannot be split */\n  COMBINED: 'combined',\n  SUBCOMPONENTS: 'subcomponents',\n  APPEARANCE: 'appearance',\n  FONT: 'font',\n  DIMENSION: 'dimension',\n  DISPLAY: 'display',\n  LAYOUT: 'layout',\n  POSITION: 'position',\n  MISC: 'misc',\n} as const;\n\nexport type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];\n\n// ============================================================================\n// Style-to-Chunk Lookup Map (O(1) categorization)\n// ============================================================================\n\n/**\n * Pre-computed map for O(1) style-to-chunk lookup.\n * Built once at module load time.\n */\nexport const STYLE_TO_CHUNK = new Map<string, ChunkName>();\n\n// Populate the lookup map\nfunction populateStyleToChunkMap() {\n  for (const style of APPEARANCE_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.APPEARANCE);\n  }\n  for (const style of FONT_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.FONT);\n  }\n  for (const style of DIMENSION_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DIMENSION);\n  }\n  for (const style of DISPLAY_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DISPLAY);\n  }\n  for (const style of LAYOUT_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.LAYOUT);\n  }\n  for (const style of POSITION_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.POSITION);\n  }\n}\n\n// Initialize at module load\npopulateStyleToChunkMap();\n\n// ============================================================================\n// Chunk Priority Order\n// ============================================================================\n\n/**\n * Chunk processing order. This ensures deterministic className allocation\n * regardless of style key order in the input.\n */\nconst CHUNK_ORDER: readonly string[] = [\n  CHUNK_NAMES.APPEARANCE,\n  CHUNK_NAMES.FONT,\n  CHUNK_NAMES.DIMENSION,\n  CHUNK_NAMES.DISPLAY,\n  CHUNK_NAMES.LAYOUT,\n  CHUNK_NAMES.POSITION,\n  CHUNK_NAMES.MISC,\n  CHUNK_NAMES.SUBCOMPONENTS,\n] as const;\n\n/**\n * Map from chunk name to its priority index for sorting.\n */\nconst _CHUNK_PRIORITY = new Map<string, number>(\n  CHUNK_ORDER.map((name, index) => [name, index]),\n);\n\n// ============================================================================\n// Chunk Info Interface\n// ============================================================================\n\nexport interface ChunkInfo {\n  /** Name of the chunk */\n  name: ChunkName | string;\n  /** Style keys belonging to this chunk */\n  styleKeys: string[];\n}\n\n// ============================================================================\n// Style Categorization\n// ============================================================================\n\n/**\n * Categorize style keys into chunks.\n *\n * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless\n * of the order of keys in the input styles object.\n *\n * @param styles - The styles object to categorize\n * @returns Map of chunk name to array of style keys in that chunk (in priority order)\n */\nexport function categorizeStyleKeys(\n  styles: Record<string, unknown>,\n): Map<string, string[]> {\n  // First pass: collect keys into chunks (unordered)\n  const chunkData: Record<string, string[]> = {};\n  const keys = Object.keys(styles);\n\n  for (const key of keys) {\n    // Skip the $ helper key (used for selector combinators)\n    // Skip @keyframes and @properties (processed separately in useStyles)\n    // Skip recipe (resolved before pipeline by resolveRecipes)\n    if (\n      key === '$' ||\n      key === '@keyframes' ||\n      key === '@properties' ||\n      key === '@fontFace' ||\n      key === '@counterStyle' ||\n      key === 'recipe'\n    ) {\n      continue;\n    }\n\n    if (isSelector(key)) {\n      // All selectors go into the subcomponents chunk\n      if (!chunkData[CHUNK_NAMES.SUBCOMPONENTS]) {\n        chunkData[CHUNK_NAMES.SUBCOMPONENTS] = [];\n      }\n      chunkData[CHUNK_NAMES.SUBCOMPONENTS].push(key);\n    } else {\n      // Look up the chunk for this style, default to misc\n      const chunkName = STYLE_TO_CHUNK.get(key) ?? CHUNK_NAMES.MISC;\n      if (!chunkData[chunkName]) {\n        chunkData[chunkName] = [];\n      }\n      chunkData[chunkName].push(key);\n    }\n  }\n\n  // Second pass: build ordered Map based on CHUNK_ORDER\n  const orderedChunks = new Map<string, string[]>();\n\n  // Add chunks in priority order\n  for (const chunkName of CHUNK_ORDER) {\n    if (chunkData[chunkName] && chunkData[chunkName].length > 0) {\n      // Sort keys within chunk for consistent cache key generation\n      orderedChunks.set(chunkName, chunkData[chunkName].sort());\n    }\n  }\n\n  // Handle any unknown chunks (shouldn't happen, but be defensive)\n  for (const chunkName of Object.keys(chunkData)) {\n    if (!orderedChunks.has(chunkName)) {\n      orderedChunks.set(chunkName, chunkData[chunkName].sort());\n    }\n  }\n\n  return orderedChunks;\n}\n"],"mappings":"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"}

package/dist/compute-styles.d.ts

@@ -0,0 +1,31 @@
+import { Styles } from "./styles/types.js";
+import { ServerStyleCollector } from "./ssr/collector.js";
+
+//#region src/compute-styles.d.ts
+interface ComputeStylesResult {
+  className: string;
+  /** CSS text to emit as an inline <style> tag (RSC mode only). */
+  css?: string;
+}
+interface ComputeStylesOptions {
+  ssrCollector?: ServerStyleCollector | null;
+}
+/**
+ * Synchronous, hook-free style computation.
+ *
+ * Resolves recipes, categorizes style keys into chunks, renders CSS rules,
+ * allocates class names, and injects / collects / returns the CSS.
+ *
+ * Three code paths:
+ * 1. SSR collector — discovered via ALS or passed explicitly; CSS collected
+ * 2. RSC inline — no collector and no `document`; CSS returned as `result.css`
+ *    for the caller to emit as an inline `<style>` tag
+ * 3. Client inject — CSS injected synchronously into the DOM (idempotent)
+ *
+ * @param styles - Tasty styles object (or undefined for no styles)
+ * @param options - Optional SSR collector override
+ */
+declare function computeStyles(styles: Styles | undefined, options?: ComputeStylesOptions): ComputeStylesResult;
+//#endregion
+export { ComputeStylesOptions, ComputeStylesResult, computeStyles };
+//# sourceMappingURL=compute-styles.d.ts.map

package/dist/compute-styles.js

@@ -0,0 +1,322 @@
+import { extractLocalProperties, hasLocalProperties } from "./properties/index.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 { counterStyle, fontFace, inject, keyframes, property, touch } from "./injector/index.js";
+import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames } from "./keyframes/index.js";
+import { getRegisteredSSRCollector } from "./ssr/ssr-collector-ref.js";
+import { flushPendingCSS, getRSCCache, rscAllocateClassName } from "./rsc-cache.js";
+import { formatPropertyCSS } from "./ssr/format-property.js";
+import { collectAutoInferredProperties } from "./ssr/collect-auto-properties.js";
+import { formatKeyframesCSS } from "./ssr/format-keyframes.js";
+import { formatRules } from "./ssr/format-rules.js";
+import { hasKeys } from "./utils/has-keys.js";
+import { resolveRecipes } from "./utils/resolve-recipes.js";
+//#region src/compute-styles.ts
+/**
+* Hook-free, synchronous style computation.
+*
+* Extracts the core logic from useStyles() into a plain function that can
+* be called during React render without any hooks. Three code paths:
+*
+* 1. SSR collector — styles collected via ServerStyleCollector
+* 2. Client inject — styles injected synchronously into the DOM
+* 3. RSC inline — styles returned as CSS strings for inline <style> emission
+*
+* This enables tasty() components to work as React Server Components.
+*/
+const EMPTY_RESULT = { className: "" };
+/**
+* Mark internals as emitted for this RSC request.
+*
+* Internals (tokens, @property, @font-face, @counter-style) are emitted
+* exclusively by the SSR collector via ServerStyleCollector.collectInternals().
+* The SSR path is reliable because TastyRegistry is always present as a
+* client component in the root layout, guaranteeing SSR runs for every page.
+*
+* Previously this function also emitted internals and coordinated with SSR
+* via a globalThis flag, but that flag leaked across requests in the same
+* Node.js process, causing pages without RSC-rendered tasty components
+* (e.g. the playground route) to lose all token CSS.
+*/
+function collectInternalsRSC(rscCache) {
+	if (rscCache.internalsEmitted) return "";
+	rscCache.internalsEmitted = true;
+	return "";
+}
+/**
+* Collect per-component ancillary CSS (keyframes, @property, font-face,
+* counter-style) for RSC mode.
+*/
+function collectAncillaryRSC(rscCache, styles) {
+	const parts = [];
+	const usedKf = getUsedKeyframes(styles);
+	if (usedKf) for (const [name, steps] of Object.entries(usedKf)) {
+		const key = `__kf:${name}:${JSON.stringify(steps)}`;
+		if (!rscCache.emittedKeys.has(key)) {
+			rscCache.emittedKeys.add(key);
+			parts.push(formatKeyframesCSS(name, steps));
+		}
+	}
+	if (hasLocalProperties(styles)) {
+		const localProperties = extractLocalProperties(styles);
+		if (localProperties) for (const [token, definition] of Object.entries(localProperties)) {
+			const key = `__prop:${token}`;
+			if (!rscCache.emittedKeys.has(key)) {
+				rscCache.emittedKeys.add(key);
+				const css = formatPropertyCSS(token, definition);
+				if (css) parts.push(css);
+			}
+		}
+	}
+	if (hasLocalFontFace(styles)) {
+		const localFontFace = extractLocalFontFace(styles);
+		if (localFontFace) for (const [family, input] of Object.entries(localFontFace)) {
+			const descriptors = Array.isArray(input) ? input : [input];
+			for (const desc of descriptors) {
+				const key = `__ff:${fontFaceContentHash(family, desc)}`;
+				if (!rscCache.emittedKeys.has(key)) {
+					rscCache.emittedKeys.add(key);
+					parts.push(formatFontFaceRule(family, desc));
+				}
+			}
+		}
+	}
+	if (hasLocalCounterStyle(styles)) {
+		const localCounterStyle = extractLocalCounterStyle(styles);
+		if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) {
+			const key = `__cs:${name}:${JSON.stringify(descriptors)}`;
+			if (!rscCache.emittedKeys.has(key)) {
+				rscCache.emittedKeys.add(key);
+				parts.push(formatCounterStyleRule(name, descriptors));
+			}
+		}
+	}
+	return parts.join("\n");
+}
+/**
+* Process all chunks in RSC mode: render CSS to strings, allocate classNames,
+* and return combined { className, css }.
+*/
+function computeStylesRSC(styles, chunkMap) {
+	const rscCache = getRSCCache();
+	const cssParts = [];
+	const classNames = [];
+	const pendingCSS = flushPendingCSS(rscCache);
+	if (pendingCSS) cssParts.push(pendingCSS);
+	const internalsCSS = collectInternalsRSC(rscCache);
+	if (internalsCSS) cssParts.push(internalsCSS);
+	for (const [chunkName, chunkStyleKeys] of chunkMap) {
+		if (chunkStyleKeys.length === 0) continue;
+		const { className, isNew } = rscAllocateClassName(rscCache, generateChunkCacheKey(styles, chunkName, chunkStyleKeys));
+		classNames.push(className);
+		if (isNew) {
+			const renderResult = renderStylesForChunk(styles, chunkName, chunkStyleKeys);
+			if (renderResult.rules.length > 0) {
+				const css = formatRules(renderResult.rules, className);
+				if (css) cssParts.push(css);
+			}
+		}
+	}
+	const ancillaryCSS = collectAncillaryRSC(rscCache, styles);
+	if (ancillaryCSS) cssParts.push(ancillaryCSS);
+	if (classNames.length === 0) return EMPTY_RESULT;
+	const css = cssParts.join("\n");
+	return {
+		className: classNames.join(" "),
+		css: css || void 0
+	};
+}
+/**
+* Get keyframes that are actually used in styles.
+* Returns null if no keyframes are used (fast path for zero overhead).
+*/
+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.
+*/
+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
+	};
+}
+/**
+* Process a chunk on the client: render, allocate className, and inject
+* CSS synchronously. The injector's cache makes this idempotent.
+*/
+function processChunkSync(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 } = inject(renderResult.rules, { cacheKey });
+	return {
+		name: chunkName,
+		styleKeys,
+		cacheKey,
+		renderResult,
+		className
+	};
+}
+/**
+* Inject keyframes synchronously and return a name replacement map.
+* On the client, keyframes are injected into the DOM.
+*/
+function injectKeyframesSync(usedKeyframes) {
+	let nameMap = null;
+	for (const [name, steps] of Object.entries(usedKeyframes)) {
+		const injectedName = keyframes(steps, { name }).toString();
+		if (injectedName !== name) {
+			if (!nameMap) nameMap = /* @__PURE__ */ new Map();
+			nameMap.set(name, injectedName);
+		}
+	}
+	return nameMap;
+}
+/**
+* Inject chunk rules synchronously, replacing animation names if needed.
+*/
+function injectChunkRulesSync(chunks, nameMap) {
+	for (const chunk of chunks) if (chunk.renderResult.rules.length > 0) inject(nameMap ? chunk.renderResult.rules.map((rule) => ({
+		...rule,
+		declarations: replaceAnimationNames(rule.declarations, nameMap)
+	})) : chunk.renderResult.rules, { cacheKey: chunk.cacheKey });
+}
+/**
+* Inject all ancillary rules (properties, font-faces, counter-styles) synchronously.
+*/
+function injectAncillarySync(styles) {
+	if (hasLocalProperties(styles)) {
+		const localProperties = extractLocalProperties(styles);
+		if (localProperties) for (const [token, definition] of Object.entries(localProperties)) property(token, definition);
+	}
+	if (hasLocalFontFace(styles)) {
+		const localFontFace = extractLocalFontFace(styles);
+		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 (hasLocalCounterStyle(styles)) {
+		const localCounterStyle = extractLocalCounterStyle(styles);
+		if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) counterStyle(name, descriptors);
+	}
+}
+/**
+* Collect all ancillary rules into the SSR collector.
+*/
+function collectAncillarySSR(collector, styles, chunks) {
+	const usedKf = getUsedKeyframes(styles);
+	if (usedKf) for (const [name, steps] of Object.entries(usedKf)) {
+		const css = formatKeyframesCSS(name, steps);
+		collector.collectKeyframes(name, css);
+	}
+	if (hasLocalProperties(styles)) {
+		const localProperties = extractLocalProperties(styles);
+		if (localProperties) for (const [token, definition] of Object.entries(localProperties)) {
+			const css = formatPropertyCSS(token, definition);
+			if (css) collector.collectProperty(token, css);
+		}
+	}
+	if (hasLocalFontFace(styles)) {
+		const localFontFace = extractLocalFontFace(styles);
+		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);
+				collector.collectFontFace(hash, css);
+			}
+		}
+	}
+	if (hasLocalCounterStyle(styles)) {
+		const localCounterStyle = extractLocalCounterStyle(styles);
+		if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) {
+			const css = formatCounterStyleRule(name, descriptors);
+			collector.collectCounterStyle(name, css);
+		}
+	}
+	if (getConfig().autoPropertyTypes !== false) {
+		const allRules = chunks.flatMap((c) => c.renderResult.rules);
+		if (allRules.length > 0) collectAutoInferredProperties(allRules, collector, styles);
+	}
+}
+/**
+* Synchronous, hook-free style computation.
+*
+* Resolves recipes, categorizes style keys into chunks, renders CSS rules,
+* allocates class names, and injects / collects / returns the CSS.
+*
+* Three code paths:
+* 1. SSR collector — discovered via ALS or passed explicitly; CSS collected
+* 2. RSC inline — no collector and no `document`; CSS returned as `result.css`
+*    for the caller to emit as an inline `<style>` tag
+* 3. Client inject — CSS injected synchronously into the DOM (idempotent)
+*
+* @param styles - Tasty styles object (or undefined for no styles)
+* @param options - Optional SSR collector override
+*/
+function computeStyles(styles, options) {
+	if (!styles || !hasKeys(styles)) return EMPTY_RESULT;
+	const resolved = resolveRecipes(styles);
+	const chunkMap = categorizeStyleKeys(resolved);
+	const collector = options?.ssrCollector !== void 0 ? options.ssrCollector : getRegisteredSSRCollector();
+	const chunks = [];
+	if (collector) {
+		collector.collectInternals();
+		for (const [chunkName, chunkStyleKeys] of chunkMap) {
+			const chunk = processChunkSSR(collector, resolved, chunkName, chunkStyleKeys);
+			if (chunk) chunks.push(chunk);
+		}
+		collectAncillarySSR(collector, resolved, chunks);
+	} else if (typeof document === "undefined") return computeStylesRSC(resolved, chunkMap);
+	else {
+		injectAncillarySync(resolved);
+		const usedKf = getUsedKeyframes(resolved);
+		const nameMap = usedKf ? injectKeyframesSync(usedKf) : null;
+		for (const [chunkName, chunkStyleKeys] of chunkMap) {
+			const chunk = processChunkSync(resolved, chunkName, chunkStyleKeys);
+			if (chunk) chunks.push(chunk);
+		}
+		if (nameMap) injectChunkRulesSync(chunks, nameMap);
+		for (const chunk of chunks) touch(chunk.className);
+	}
+	if (chunks.length === 0) return EMPTY_RESULT;
+	if (chunks.length === 1) return { className: chunks[0].className };
+	return { className: chunks.map((c) => c.className).join(" ") };
+}
+//#endregion
+export { computeStyles };
+
+//# sourceMappingURL=compute-styles.js.map

package/dist/compute-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compute-styles.js","names":[],"sources":["../src/compute-styles.ts"],"sourcesContent":["/**\n * Hook-free, synchronous style computation.\n *\n * Extracts the core logic from useStyles() into a plain function that can\n * be called during React render without any hooks. Three code paths:\n *\n * 1. SSR collector — styles collected via ServerStyleCollector\n * 2. Client inject — styles injected synchronously into the DOM\n * 3. RSC inline — styles returned as CSS strings for inline <style> emission\n *\n * This enables tasty() components to work as React Server Components.\n */\n\nimport {\n  categorizeStyleKeys,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from './chunks';\nimport { getConfig, getGlobalKeyframes, hasGlobalKeyframes } from './config';\nimport {\n  counterStyle,\n  fontFace,\n  inject,\n  keyframes,\n  property,\n  touch,\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, StyleResult } from './pipeline';\nimport {\n  flushPendingCSS,\n  getRSCCache,\n  rscAllocateClassName,\n} from './rsc-cache';\nimport type { RSCStyleCache } from './rsc-cache';\nimport { extractLocalProperties, hasLocalProperties } from './properties';\nimport { collectAutoInferredProperties } from './ssr/collect-auto-properties';\nimport type { ServerStyleCollector } from './ssr/collector';\nimport { formatKeyframesCSS } from './ssr/format-keyframes';\nimport { formatPropertyCSS } from './ssr/format-property';\nimport { formatRules } from './ssr/format-rules';\nimport { getRegisteredSSRCollector } from './ssr/ssr-collector-ref';\nimport type { Styles } from './styles/types';\nimport { hasKeys } from './utils/has-keys';\nimport { resolveRecipes } from './utils/resolve-recipes';\n\nexport interface ComputeStylesResult {\n  className: string;\n  /** CSS text to emit as an inline <style> tag (RSC mode only). */\n  css?: string;\n}\n\nexport interface ComputeStylesOptions {\n  ssrCollector?: ServerStyleCollector | null;\n}\n\ninterface ProcessedChunk {\n  name: string;\n  styleKeys: string[];\n  cacheKey: string;\n  renderResult: RenderResult;\n  className: string;\n}\n\nconst EMPTY_RESULT: ComputeStylesResult = { className: '' };\n\n// ---------------------------------------------------------------------------\n// RSC (React Server Components) inline style support\n// ---------------------------------------------------------------------------\n\n/**\n * Mark internals as emitted for this RSC request.\n *\n * Internals (tokens, @property, @font-face, @counter-style) are emitted\n * exclusively by the SSR collector via ServerStyleCollector.collectInternals().\n * The SSR path is reliable because TastyRegistry is always present as a\n * client component in the root layout, guaranteeing SSR runs for every page.\n *\n * Previously this function also emitted internals and coordinated with SSR\n * via a globalThis flag, but that flag leaked across requests in the same\n * Node.js process, causing pages without RSC-rendered tasty components\n * (e.g. the playground route) to lose all token CSS.\n */\nfunction collectInternalsRSC(rscCache: RSCStyleCache): string {\n  if (rscCache.internalsEmitted) return '';\n  rscCache.internalsEmitted = true;\n\n  return '';\n}\n\n/**\n * Collect per-component ancillary CSS (keyframes, @property, font-face,\n * counter-style) for RSC mode.\n */\nfunction collectAncillaryRSC(rscCache: RSCStyleCache, styles: Styles): string {\n  const parts: string[] = [];\n\n  const usedKf = getUsedKeyframes(styles);\n  if (usedKf) {\n    for (const [name, steps] of Object.entries(usedKf)) {\n      const key = `__kf:${name}:${JSON.stringify(steps)}`;\n      if (!rscCache.emittedKeys.has(key)) {\n        rscCache.emittedKeys.add(key);\n        parts.push(formatKeyframesCSS(name, steps));\n      }\n    }\n  }\n\n  if (hasLocalProperties(styles)) {\n    const localProperties = extractLocalProperties(styles);\n    if (localProperties) {\n      for (const [token, definition] of Object.entries(localProperties)) {\n        const key = `__prop:${token}`;\n        if (!rscCache.emittedKeys.has(key)) {\n          rscCache.emittedKeys.add(key);\n          const css = formatPropertyCSS(token, definition);\n          if (css) parts.push(css);\n        }\n      }\n    }\n  }\n\n  if (hasLocalFontFace(styles)) {\n    const localFontFace = extractLocalFontFace(styles);\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 key = `__ff:${hash}`;\n          if (!rscCache.emittedKeys.has(key)) {\n            rscCache.emittedKeys.add(key);\n            parts.push(formatFontFaceRule(family, desc));\n          }\n        }\n      }\n    }\n  }\n\n  if (hasLocalCounterStyle(styles)) {\n    const localCounterStyle = extractLocalCounterStyle(styles);\n    if (localCounterStyle) {\n      for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n        const key = `__cs:${name}:${JSON.stringify(descriptors)}`;\n        if (!rscCache.emittedKeys.has(key)) {\n          rscCache.emittedKeys.add(key);\n          parts.push(formatCounterStyleRule(name, descriptors));\n        }\n      }\n    }\n  }\n\n  return parts.join('\\n');\n}\n\n/**\n * Process all chunks in RSC mode: render CSS to strings, allocate classNames,\n * and return combined { className, css }.\n */\nfunction computeStylesRSC(\n  styles: Styles,\n  chunkMap: Map<string, string[]>,\n): ComputeStylesResult {\n  const rscCache = getRSCCache();\n  const cssParts: string[] = [];\n  const classNames: string[] = [];\n\n  // Flush CSS accumulated by standalone style functions\n  const pendingCSS = flushPendingCSS(rscCache);\n  if (pendingCSS) cssParts.push(pendingCSS);\n\n  const internalsCSS = collectInternalsRSC(rscCache);\n  if (internalsCSS) cssParts.push(internalsCSS);\n\n  for (const [chunkName, chunkStyleKeys] of chunkMap) {\n    if (chunkStyleKeys.length === 0) continue;\n\n    const cacheKey = generateChunkCacheKey(styles, chunkName, chunkStyleKeys);\n    const { className, isNew } = rscAllocateClassName(rscCache, cacheKey);\n    classNames.push(className);\n\n    if (isNew) {\n      const renderResult = renderStylesForChunk(\n        styles,\n        chunkName,\n        chunkStyleKeys,\n      );\n      if (renderResult.rules.length > 0) {\n        const css = formatRules(renderResult.rules, className);\n        if (css) cssParts.push(css);\n      }\n    }\n  }\n\n  const ancillaryCSS = collectAncillaryRSC(rscCache, styles);\n  if (ancillaryCSS) cssParts.push(ancillaryCSS);\n\n  if (classNames.length === 0) return EMPTY_RESULT;\n\n  const css = cssParts.join('\\n');\n\n  return {\n    className: classNames.join(' '),\n    css: css || undefined,\n  };\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 */\nfunction getUsedKeyframes(\n  styles: Styles,\n): Record<string, KeyframesSteps> | null {\n  const hasLocal = hasLocalKeyframes(styles);\n  const hasGlobal = hasGlobalKeyframes();\n  if (!hasLocal && !hasGlobal) return null;\n\n  const usedNames = extractAnimationNamesFromStyles(styles);\n  if (usedNames.size === 0) return null;\n\n  const local = hasLocal ? extractLocalKeyframes(styles) : null;\n  const global = hasGlobal ? getGlobalKeyframes() : null;\n  const allKeyframes = mergeKeyframes(local, global);\n\n  return filterUsedKeyframes(allKeyframes, usedNames);\n}\n\n/**\n * Process a chunk on the SSR path: allocate via collector, render, collect CSS.\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 { name: chunkName, styleKeys, cacheKey, renderResult, className };\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 * Process a chunk on the client: render, allocate className, and inject\n * CSS synchronously. The injector's cache makes this idempotent.\n */\nfunction processChunkSync(\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 } = inject(renderResult.rules, { cacheKey });\n\n  return { name: chunkName, styleKeys, cacheKey, renderResult, className };\n}\n\n/**\n * Inject keyframes synchronously and return a name replacement map.\n * On the client, keyframes are injected into the DOM.\n */\nfunction injectKeyframesSync(\n  usedKeyframes: Record<string, KeyframesSteps>,\n): Map<string, string> | null {\n  let nameMap: Map<string, string> | null = null;\n\n  for (const [name, steps] of Object.entries(usedKeyframes)) {\n    const result = keyframes(steps, { name });\n    const injectedName = result.toString();\n    if (injectedName !== name) {\n      if (!nameMap) nameMap = new Map();\n      nameMap.set(name, injectedName);\n    }\n  }\n\n  return nameMap;\n}\n\n/**\n * Inject chunk rules synchronously, replacing animation names if needed.\n */\nfunction injectChunkRulesSync(\n  chunks: ProcessedChunk[],\n  nameMap: Map<string, string> | null,\n): void {\n  for (const chunk of chunks) {\n    if (chunk.renderResult.rules.length > 0) {\n      const rulesToInject: StyleResult[] = nameMap\n        ? chunk.renderResult.rules.map((rule) => ({\n            ...rule,\n            declarations: replaceAnimationNames(rule.declarations, nameMap!),\n          }))\n        : chunk.renderResult.rules;\n\n      inject(rulesToInject, { cacheKey: chunk.cacheKey });\n    }\n  }\n}\n\n/**\n * Inject all ancillary rules (properties, font-faces, counter-styles) synchronously.\n */\nfunction injectAncillarySync(styles: Styles): void {\n  if (hasLocalProperties(styles)) {\n    const localProperties = extractLocalProperties(styles);\n    if (localProperties) {\n      for (const [token, definition] of Object.entries(localProperties)) {\n        property(token, definition);\n      }\n    }\n  }\n\n  if (hasLocalFontFace(styles)) {\n    const localFontFace = extractLocalFontFace(styles);\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  if (hasLocalCounterStyle(styles)) {\n    const localCounterStyle = extractLocalCounterStyle(styles);\n    if (localCounterStyle) {\n      for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n        counterStyle(name, descriptors);\n      }\n    }\n  }\n}\n\n/**\n * Collect all ancillary rules into the SSR collector.\n */\nfunction collectAncillarySSR(\n  collector: ServerStyleCollector,\n  styles: Styles,\n  chunks: ProcessedChunk[],\n): void {\n  const usedKf = getUsedKeyframes(styles);\n  if (usedKf) {\n    for (const [name, steps] of Object.entries(usedKf)) {\n      const css = formatKeyframesCSS(name, steps);\n      collector.collectKeyframes(name, css);\n    }\n  }\n\n  if (hasLocalProperties(styles)) {\n    const localProperties = extractLocalProperties(styles);\n    if (localProperties) {\n      for (const [token, definition] of Object.entries(localProperties)) {\n        const css = formatPropertyCSS(token, definition);\n        if (css) {\n          collector.collectProperty(token, css);\n        }\n      }\n    }\n  }\n\n  if (hasLocalFontFace(styles)) {\n    const localFontFace = extractLocalFontFace(styles);\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          collector.collectFontFace(hash, css);\n        }\n      }\n    }\n  }\n\n  if (hasLocalCounterStyle(styles)) {\n    const localCounterStyle = extractLocalCounterStyle(styles);\n    if (localCounterStyle) {\n      for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n        const css = formatCounterStyleRule(name, descriptors);\n        collector.collectCounterStyle(name, css);\n      }\n    }\n  }\n\n  if (getConfig().autoPropertyTypes !== false) {\n    const allRules = chunks.flatMap((c) => c.renderResult.rules);\n    if (allRules.length > 0) {\n      collectAutoInferredProperties(allRules, collector, styles);\n    }\n  }\n}\n\n/**\n * Synchronous, hook-free style computation.\n *\n * Resolves recipes, categorizes style keys into chunks, renders CSS rules,\n * allocates class names, and injects / collects / returns the CSS.\n *\n * Three code paths:\n * 1. SSR collector — discovered via ALS or passed explicitly; CSS collected\n * 2. RSC inline — no collector and no `document`; CSS returned as `result.css`\n *    for the caller to emit as an inline `<style>` tag\n * 3. Client inject — CSS injected synchronously into the DOM (idempotent)\n *\n * @param styles - Tasty styles object (or undefined for no styles)\n * @param options - Optional SSR collector override\n */\nexport function computeStyles(\n  styles: Styles | undefined,\n  options?: ComputeStylesOptions,\n): ComputeStylesResult {\n  if (!styles || !hasKeys(styles as Record<string, unknown>)) {\n    return EMPTY_RESULT;\n  }\n\n  const resolved = resolveRecipes(styles);\n  const chunkMap = categorizeStyleKeys(resolved as Record<string, unknown>);\n\n  const collector =\n    options?.ssrCollector !== undefined\n      ? options.ssrCollector\n      : getRegisteredSSRCollector();\n\n  const chunks: ProcessedChunk[] = [];\n\n  if (collector) {\n    collector.collectInternals();\n\n    for (const [chunkName, chunkStyleKeys] of chunkMap) {\n      const chunk = processChunkSSR(\n        collector,\n        resolved,\n        chunkName,\n        chunkStyleKeys,\n      );\n      if (chunk) chunks.push(chunk);\n    }\n\n    collectAncillarySSR(collector, resolved, chunks);\n  } else if (typeof document === 'undefined') {\n    // RSC path: render CSS to strings for inline <style> emission\n    return computeStylesRSC(resolved, chunkMap);\n  } else {\n    injectAncillarySync(resolved);\n\n    const usedKf = getUsedKeyframes(resolved);\n    const nameMap = usedKf ? injectKeyframesSync(usedKf) : null;\n\n    for (const [chunkName, chunkStyleKeys] of chunkMap) {\n      const chunk = processChunkSync(resolved, chunkName, chunkStyleKeys);\n      if (chunk) chunks.push(chunk);\n    }\n\n    if (nameMap) {\n      injectChunkRulesSync(chunks, nameMap);\n    }\n\n    for (const chunk of chunks) {\n      touch(chunk.className);\n    }\n  }\n\n  if (chunks.length === 0) return EMPTY_RESULT;\n  if (chunks.length === 1) return { className: chunks[0].className };\n\n  return { className: chunks.map((c) => c.className).join(' ') };\n}\n"],"mappings":"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"}