@tenphi/tasty 0.0.0-snapshot.ef8cc29 → 0.0.0-snapshot.ef967bb

package/README.md

@@ -41,7 +41,7 @@ On top of that foundation, Tasty gives teams a governed styling model: a CSS-lik
 
 ### Supporting capabilities
 
-- **Typed style props** — `styleProps` lets you expose selected styles as typed React props. Use `<Button placeSelf="end">` or `<Space flow="row" gap="2x">` without extra wrappers, utility classes, or `styles` overrides. The same props also accept state maps, so responsive values work with the same API. See [CSS properties as props](#css-properties-as-props).
+- **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.
 - **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.
@@ -178,58 +178,17 @@ configure({
 
 Use `configure()` once when your app or design system needs shared aliases, tokens, recipes, or parser extensions. Predefined states turn complex selector logic into single tokens, so teams can write `@mobile` instead of repeating media query expressions in every component.
 
-### CSS properties as props
+### Props as the public API
 
-Beyond state resolution, Tasty can also expose selected style controls as typed component props. That lets design systems keep layout and composition inside governed component APIs instead of pushing teams toward wrapper elements or ad hoc styling escapes.
-
-With `styleProps`, a component can expose the styles you choose as normal typed props. You can adjust layout, spacing, alignment, or positioning where the component is used while staying inside a typed, design-system-aware API.
-
-```tsx
-import { tasty, FLOW_STYLES, POSITION_STYLES } from '@tenphi/tasty';
-
-const Space = tasty({
-  styles: {
-    display: 'flex',
-    flow: 'column',
-    gap: '1x',
-  },
-  styleProps: FLOW_STYLES,
-});
-
-const Button = tasty({
-  as: 'button',
-  styles: {
-    padding: '1.5x 3x',
-    fill: '#primary',
-    color: '#primary-text',
-    radius: true,
-  },
-  styleProps: POSITION_STYLES,
-});
-```
-
-Now you can compose layout and tweak component positioning directly in JSX:
+`styleProps` exposes selected CSS properties as typed React props, and `modProps` does the same for modifier keys. Together they let design systems define a governed, typed component API without wrapper elements or `styles` overrides:
 
 ```tsx
 <Space flow="row" gap="2x" placeItems="center">
-  <Title>Dashboard</Title>
-  <Button placeSelf="end">Add Item</Button>
-</Space>
-```
-
-The same props also support state maps, so responsive values use the exact same API:
-
-```tsx
-<Space
-  flow={{ '': 'column', '@tablet': 'row' }}
-  gap={{ '': '2x', '@tablet': '4x' }}
->
-  <Sidebar />
-  <Content />
+  <Button isLoading size="large" placeSelf="end">Submit</Button>
 </Space>
 ```
 
-Layout components can expose flow props. Buttons can expose positioning props. Each component can offer only the style props that make sense for its role while keeping tokens, custom units, and state maps fully typed. This works in runtime `tasty()` components, not in `tastyStatic()`.
+See [Style Props](#style-props) and [Mod Props](#mod-props) below, or the full reference in [Runtime API](docs/runtime.md#style-props).
 
 ## Choose a Styling Approach
 
@@ -342,7 +301,7 @@ Every rule is guarded by the negation of higher-priority rules. No two rules can
 
 By absorbing selector complexity, Tasty makes advanced CSS patterns practical again — nested container queries, multi-condition `@supports` gates, and combined root-state/media branches. You stay in pure CSS instead of relying on JavaScript workarounds, so the browser can optimize layout, painting, and transitions natively. Tasty keeps the solution in CSS while removing much of the selector bookkeeping that is hard to maintain by hand.
 
-[Try it in the Cube UI Kit Storybook playground →](https://cube-ui-kit.vercel.app/?path=/story/getting-started-tasty-playground--playground)
+[Try it in the playground →](https://tasty.style/playground)
 
 ## Capabilities
 
@@ -400,214 +359,99 @@ fill: {
 
 ### Sub-Element Styling
 
-Style inner elements from the parent component definition. No extra components, no CSS leakage:
+Compound components can style inner parts from the parent definition with capitalized keys in `styles` and optional `elements` declarations, producing typed sub-components like `<Card.Title />` instead of separate wrapper components or ad hoc class naming.
 
-```tsx
-const Card = tasty({
-  styles: {
-    padding: '4x',
-    Title: { preset: 'h3', color: '#primary' },
-    Content: { color: '#text', preset: 't2' },
-  },
-  elements: { Title: 'h2', Content: 'div' },
-});
+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.
 
-<Card>
-  <Card.Title>Heading</Card.Title>
-  <Card.Content>Body text</Card.Content>
-</Card>
-```
+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).
 
-Sub-elements use `data-element` attributes — no extra class names, no naming conventions.
+### Style Props
 
-By default, sub-elements participate in the same state context as the root component. That means mappings like `:hover`, `theme=danger`, `[role="button"]`, and other keys are evaluated as one unified block, which keeps styling logic predictable across the whole markup tree.
+`styleProps` exposes selected CSS properties as typed React props. Components control which properties to open up; consumers get layout and composition knobs without `styles` overrides. Supports state maps for responsive values.
 
-Use `@own(...)` when a sub-element should react to its own state instead of the root state context.
+```tsx
+const Space = tasty({
+  styles: { display: 'flex', flow: 'column', gap: '1x' },
+  styleProps: FLOW_STYLES,
+});
 
-Class selectors are also supported, but modifiers/pseudo-classes are usually the better default in design-system code.
+<Space flow="row" gap={{ '': '2x', '@tablet': '4x' }}>
+```
 
-Use the sub-element selector `$` when you need precise descendant targeting to avoid leakage in deeply nested component trees.
+See [Runtime API - Style Props](docs/runtime.md#style-props) and [Methodology - styleProps](docs/methodology.md#styleprops-as-the-public-api).
 
-### Variants
+### Mod Props
 
-Variants are designed to keep single-component CSS lean. Instead of generating dozens of static button classes up front, define all versions once and let runtime usage decide what CSS is actually emitted.
+`modProps` exposes modifier keys as typed React props — the modifier equivalent of `styleProps`. Accepts an array of key names or an object with type descriptors (`Boolean`, `String`, `Number`, or enum arrays) for full TypeScript autocomplete.
 
 ```tsx
 const Button = tasty({
-  styles: { padding: '2x 4x', radius: '1r' },
-  variants: {
-    default: { fill: '#primary', color: '#on-primary' },
-    danger: { fill: '#danger', color: '#on-danger' },
-    outline: { fill: 'transparent', border: '1bw solid #primary' },
+  as: 'button',
+  modProps: { isLoading: Boolean, size: ['sm', 'md', 'lg'] as const },
+  styles: {
+    fill: { '': '#primary', isLoading: '#primary.5' },
+    padding: { '': '2x 4x', 'size=sm': '1x 2x' },
   },
 });
 
-<Button variant="danger">Delete</Button>
+<Button isLoading size="lg">Submit</Button>
 ```
 
-### Recipes
+See [Runtime API - Mod Props](docs/runtime.md#mod-props) and [Methodology - modProps](docs/methodology.md#modprops-and-mods).
 
-Recipes are predefined style sets that work like composable styling classes for Tasty. They can be pre-applied or post-applied to current styles, which lets you add reusable state logic while still allowing local style overrides.
+### Variants
 
-```tsx
-configure({
-  recipes: {
-    card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
-    elevated: { shadow: '0 2x 4x #shadow' },
-  },
-});
+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.
 
-const ProfileCard = tasty({
-  styles: {
-    recipe: 'card elevated',
-    color: '#text',
-  },
-});
-```
+See [Runtime API - Variants](docs/runtime.md#variants).
 
-Use `/` to post-apply recipes after local styles when you need recipe states/styles to win the final merge order. Use `none` to skip base recipes: `recipe: 'none / disabled'`.
+### Recipes
 
-### Auto-Inferred `@property`
+Recipes are reusable style bundles defined in `configure({ recipes })` and applied with the `recipe` style property. They are useful when your design system wants shared state logic or visual presets without forcing every component to repeat the same style map.
 
-CSS custom properties do not animate smoothly by default because the browser does not know how to interpolate their values. The [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) at-rule fixes that by declaring a property's syntax, such as `<number>` or `<color>`.
+Use `/` to post-apply recipes after local styles when recipe states should win the final merge order, and use `none` to skip base recipes entirely.
 
-In Tasty, you usually do not need to declare `@property` manually. When a custom property is assigned a concrete value, Tasty infers the syntax and registers the matching `@property` for you:
+See [Style DSL - Recipes](docs/dsl.md#recipes) and [Configuration - recipes](docs/configuration.md#recipes).
 
-```tsx
-const Pulse = tasty({
-  styles: {
-    animation: 'pulse 2s infinite',
-    transform: 'scale($pulse-scale)',
-    '@keyframes': {
-      pulse: {
-        '0%, 100%': { '$pulse-scale': 1 },
-        '50%': { '$pulse-scale': 1.05 },
-      },
-    },
-  },
-});
-```
+### Auto-Inferred `@property`
+
+Tasty usually removes the need to hand-author CSS [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) rules. When a custom property receives a concrete value, Tasty infers its syntax and registers the matching `@property` automatically, which makes transitions and animations on custom properties work without extra boilerplate.
 
-Here, `$pulse-scale: 1` is inferred as `<number>`, so Tasty injects `@property --pulse-scale` automatically before using it in the animation. Numeric types (`<number>`, `<length>`, `<percentage>`, `<angle>`, `<time>`) are inferred from values; `<color>` is inferred from the `#name` token convention.
+If you prefer explicit control, disable inference with `configure({ autoPropertyTypes: false })` or declare the properties yourself.
 
-If you prefer full manual control, disable auto-inference globally with `configure({ autoPropertyTypes: false })`.
+See [Style DSL - Properties (`@property`)](docs/dsl.md#properties-property).
 
 ### Explicit `@properties`
 
-Declare `@properties` yourself only when you need to override the defaults, for example to set `inherits: false` or provide a custom `initialValue`:
+Use explicit `@properties` only when you need to override defaults such as `inherits: false` or a custom `initialValue`.
 
-```tsx
-'@properties': {
-  '$pulse-scale': { syntax: '<number>', inherits: false, initialValue: 1 },
-},
-```
+See [Style DSL - Properties (`@property`)](docs/dsl.md#properties-property).
 
 ### React Hooks
 
-For cases where you don't need a full component:
+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.
 
-```tsx
-import { useStyles, useGlobalStyles, useRawCSS } from '@tenphi/tasty';
-
-function App() {
-  const { className } = useStyles({ padding: '2x', fill: '#surface' });
-  useGlobalStyles('body', { margin: '0' });
-  useRawCSS('@font-face { font-family: "Custom"; src: url(...); }');
-
-  return <main className={className}>...</main>;
-}
-```
+See [Runtime API - Hooks](docs/runtime.md#hooks).
 
 ### Zero-Runtime Mode
 
-Extract all CSS at build time. Zero JavaScript overhead in production:
-
-```tsx
-import { tastyStatic } from '@tenphi/tasty/static';
-
-const card = tastyStatic({
-  padding: '4x',
-  fill: '#surface',
-  radius: '1r',
-  color: { '': '#text', '@dark': '#text-on-dark' },
-});
+Use `tastyStatic` when you want the same DSL and state model, but with CSS extracted at build time and no styling runtime in the client bundle. It is a strong fit for static sites, landing pages, and other build-time-first setups.
 
-// card is a CSS class name string
-<div className={card}>Static styles, zero runtime</div>
-```
-
-Configure the Babel plugin:
-
-```js
-module.exports = {
-  plugins: [
-    ['@tenphi/tasty/babel-plugin', {
-      output: 'public/tasty.css',
-      config: {
-        states: { '@dark': '@root(schema=dark)' },
-      },
-    }],
-  ],
-};
-```
+See [Zero Runtime (tastyStatic)](docs/tasty-static.md) and [Getting Started - Choosing a rendering mode](docs/getting-started.md#choosing-a-rendering-mode).
 
 ### `tasty` vs `tastyStatic`
 
-| | `tasty` (runtime) | `tastyStatic` (zero-runtime) |
-|---|---|---|
-| **Output** | React component | CSS class name |
-| **CSS injection** | Runtime `<style>` tags | Build-time extraction |
-| **Runtime cost** | Style generation on mount | None |
-| **Generated CSS scope** | Only styles/variants used at runtime | All extracted static styles at build time |
-| **Dynamic values** | Fully supported | Via CSS custom properties |
-| **Sub-elements** | Built-in (`<C.Title>`) | Manual (`data-element`) |
-| **Variants** | Built-in (`variants` option) | Separate static styles |
-| **Framework** | React | Any (requires Babel) |
-| **Best for** | Interactive apps with reusable stateful components, design systems | Static sites, SSG, landing pages |
+`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.
 
-Both share the same DSL, tokens, units, state mappings, and recipes.
+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).
 
 ### Server-Side Rendering
 
-SSR with zero-cost client hydration. Existing `tasty()` components work unchanged — SSR is opt-in and requires no per-component modifications. Supports Next.js (App Router with streaming), Astro (middleware + islands), and any React-based framework via the core API. Requires React 18+.
+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.
 
-**Next.js setup:**
-
-```tsx
-// app/tasty-registry.tsx
-'use client';
-
-import { TastyRegistry } from '@tenphi/tasty/ssr/next';
-
-export default function TastyStyleRegistry({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <TastyRegistry>{children}</TastyRegistry>;
-}
-```
-
-```tsx
-// app/layout.tsx
-import TastyStyleRegistry from './tasty-registry';
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html>
-      <body>
-        <TastyStyleRegistry>{children}</TastyStyleRegistry>
-      </body>
-    </html>
-  );
-}
-```
+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.
 
-See the [full SSR guide](docs/ssr.md) for Astro integration, streaming SSR, generic framework usage, troubleshooting, and the current requirements.
+See the [full SSR guide](docs/ssr.md).
 
 ## Entry Points
 

package/dist/_virtual/_rolldown/runtime.js

@@ -3,6 +3,5 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 	if (typeof require !== "undefined") return require.apply(this, arguments);
 	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
 });
-
 //#endregion
-export { __require };
+export { __require };

package/dist/chunks/cacheKey.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/chunks/cacheKey.js

@@ -1,5 +1,4 @@
 import { extractLocalPredefinedStates, extractPredefinedStateRefs } from "../states/index.js";
-
 //#region src/chunks/cacheKey.ts
 /**
 * Chunk-specific cache key generation.
@@ -72,7 +71,7 @@ function generateChunkCacheKey(styles, chunkName, styleKeys) {
 	}
 	return parts.join("\0");
 }
-
 //#endregion
 export { generateChunkCacheKey };
+
 //# sourceMappingURL=cacheKey.js.map

package/dist/chunks/cacheKey.js.map

@@ -1 +1 @@
-{"version":3,"file":"cacheKey.js","names":[],"sources":["../../src/chunks/cacheKey.ts"],"sourcesContent":["/**\n * Chunk-specific cache key generation.\n *\n * Generates cache keys that only include styles relevant to a specific chunk,\n * enabling more granular caching and reuse.\n *\n * Enhanced to support predefined states:\n * - Global predefined states don't affect cache keys (constant across app)\n * - Local predefined states only affect cache keys if referenced in the chunk\n */\n\nimport {\n  extractLocalPredefinedStates,\n  extractPredefinedStateRefs,\n} from '../states';\nimport type { Styles } from '../styles/types';\n\nconst _stableStringifyCache = new WeakMap<object, string>();\n\n/**\n * Recursively serialize a value with sorted keys for stable output.\n * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.\n * Uses a WeakMap cache for object values to avoid re-serializing the same references.\n */\nfunction stableStringify(value: unknown): string {\n  if (value === null) {\n    return 'null';\n  }\n  if (value === undefined) {\n    return 'undefined';\n  }\n  if (typeof value !== 'object') {\n    return JSON.stringify(value);\n  }\n\n  const cached = _stableStringifyCache.get(value as object);\n  if (cached !== undefined) return cached;\n\n  let result: string;\n  if (Array.isArray(value)) {\n    result = '[' + value.map(stableStringify).join(',') + ']';\n  } else {\n    const obj = value as Record<string, unknown>;\n    const sortedKeys = Object.keys(obj).sort();\n    const parts: string[] = [];\n    for (const key of sortedKeys) {\n      if (obj[key] !== undefined) {\n        parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);\n      }\n    }\n    result = '{' + parts.join(',') + '}';\n  }\n\n  _stableStringifyCache.set(value as object, result);\n  return result;\n}\n\n/**\n * Generate a cache key for a specific chunk.\n *\n * Only includes the styles that belong to this chunk, allowing\n * chunks to be cached independently.\n *\n * Also includes relevant local predefined states that are referenced\n * by this chunk's styles.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns A stable cache key string\n */\nexport function generateChunkCacheKey(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): string {\n  // Start with chunk name for namespace separation\n  const parts: string[] = [chunkName];\n\n  // styleKeys are already sorted by categorizeStyleKeys\n  let chunkStylesStr = '';\n\n  for (const key of styleKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      // Use stable stringify for consistent serialization regardless of key order\n      const serialized = stableStringify(value);\n      parts.push(`${key}:${serialized}`);\n      chunkStylesStr += serialized;\n    }\n  }\n\n  // Extract local predefined states from the full styles object\n  const localStates = extractLocalPredefinedStates(styles);\n\n  // Only include local predefined states that are actually referenced in this chunk\n  if (Object.keys(localStates).length > 0) {\n    const referencedStates = extractPredefinedStateRefs(chunkStylesStr);\n    const relevantLocalStates: string[] = [];\n\n    for (const stateName of referencedStates) {\n      if (localStates[stateName]) {\n        relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);\n      }\n    }\n\n    // Add relevant local states to the cache key (sorted for stability)\n    if (relevantLocalStates.length > 0) {\n      relevantLocalStates.sort();\n      parts.unshift(`[states:${relevantLocalStates.join('|')}]`);\n    }\n  }\n\n  // Use null character as separator (safe, not in JSON output)\n  return parts.join('\\0');\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAM,wCAAwB,IAAI,SAAyB;;;;;;AAO3D,SAAS,gBAAgB,OAAwB;AAC/C,KAAI,UAAU,KACZ,QAAO;AAET,KAAI,UAAU,OACZ,QAAO;AAET,KAAI,OAAO,UAAU,SACnB,QAAO,KAAK,UAAU,MAAM;CAG9B,MAAM,SAAS,sBAAsB,IAAI,MAAgB;AACzD,KAAI,WAAW,OAAW,QAAO;CAEjC,IAAI;AACJ,KAAI,MAAM,QAAQ,MAAM,CACtB,UAAS,MAAM,MAAM,IAAI,gBAAgB,CAAC,KAAK,IAAI,GAAG;MACjD;EACL,MAAM,MAAM;EACZ,MAAM,aAAa,OAAO,KAAK,IAAI,CAAC,MAAM;EAC1C,MAAM,QAAkB,EAAE;AAC1B,OAAK,MAAM,OAAO,WAChB,KAAI,IAAI,SAAS,OACf,OAAM,KAAK,GAAG,KAAK,UAAU,IAAI,CAAC,GAAG,gBAAgB,IAAI,KAAK,GAAG;AAGrE,WAAS,MAAM,MAAM,KAAK,IAAI,GAAG;;AAGnC,uBAAsB,IAAI,OAAiB,OAAO;AAClD,QAAO;;;;;;;;;;;;;;;;AAiBT,SAAgB,sBACd,QACA,WACA,WACQ;CAER,MAAM,QAAkB,CAAC,UAAU;CAGnC,IAAI,iBAAiB;AAErB,MAAK,MAAM,OAAO,WAAW;EAC3B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,QAAW;GAEvB,MAAM,aAAa,gBAAgB,MAAM;AACzC,SAAM,KAAK,GAAG,IAAI,GAAG,aAAa;AAClC,qBAAkB;;;CAKtB,MAAM,cAAc,6BAA6B,OAAO;AAGxD,KAAI,OAAO,KAAK,YAAY,CAAC,SAAS,GAAG;EACvC,MAAM,mBAAmB,2BAA2B,eAAe;EACnE,MAAM,sBAAgC,EAAE;AAExC,OAAK,MAAM,aAAa,iBACtB,KAAI,YAAY,WACd,qBAAoB,KAAK,GAAG,UAAU,GAAG,YAAY,aAAa;AAKtE,MAAI,oBAAoB,SAAS,GAAG;AAClC,uBAAoB,MAAM;AAC1B,SAAM,QAAQ,WAAW,oBAAoB,KAAK,IAAI,CAAC,GAAG;;;AAK9D,QAAO,MAAM,KAAK,KAAK"}
+{"version":3,"file":"cacheKey.js","names":[],"sources":["../../src/chunks/cacheKey.ts"],"sourcesContent":["/**\n * Chunk-specific cache key generation.\n *\n * Generates cache keys that only include styles relevant to a specific chunk,\n * enabling more granular caching and reuse.\n *\n * Enhanced to support predefined states:\n * - Global predefined states don't affect cache keys (constant across app)\n * - Local predefined states only affect cache keys if referenced in the chunk\n */\n\nimport {\n  extractLocalPredefinedStates,\n  extractPredefinedStateRefs,\n} from '../states';\nimport type { Styles } from '../styles/types';\n\nconst _stableStringifyCache = new WeakMap<object, string>();\n\n/**\n * Recursively serialize a value with sorted keys for stable output.\n * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.\n * Uses a WeakMap cache for object values to avoid re-serializing the same references.\n */\nfunction stableStringify(value: unknown): string {\n  if (value === null) {\n    return 'null';\n  }\n  if (value === undefined) {\n    return 'undefined';\n  }\n  if (typeof value !== 'object') {\n    return JSON.stringify(value);\n  }\n\n  const cached = _stableStringifyCache.get(value as object);\n  if (cached !== undefined) return cached;\n\n  let result: string;\n  if (Array.isArray(value)) {\n    result = '[' + value.map(stableStringify).join(',') + ']';\n  } else {\n    const obj = value as Record<string, unknown>;\n    const sortedKeys = Object.keys(obj).sort();\n    const parts: string[] = [];\n    for (const key of sortedKeys) {\n      if (obj[key] !== undefined) {\n        parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);\n      }\n    }\n    result = '{' + parts.join(',') + '}';\n  }\n\n  _stableStringifyCache.set(value as object, result);\n  return result;\n}\n\n/**\n * Generate a cache key for a specific chunk.\n *\n * Only includes the styles that belong to this chunk, allowing\n * chunks to be cached independently.\n *\n * Also includes relevant local predefined states that are referenced\n * by this chunk's styles.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns A stable cache key string\n */\nexport function generateChunkCacheKey(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): string {\n  // Start with chunk name for namespace separation\n  const parts: string[] = [chunkName];\n\n  // styleKeys are already sorted by categorizeStyleKeys\n  let chunkStylesStr = '';\n\n  for (const key of styleKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      // Use stable stringify for consistent serialization regardless of key order\n      const serialized = stableStringify(value);\n      parts.push(`${key}:${serialized}`);\n      chunkStylesStr += serialized;\n    }\n  }\n\n  // Extract local predefined states from the full styles object\n  const localStates = extractLocalPredefinedStates(styles);\n\n  // Only include local predefined states that are actually referenced in this chunk\n  if (Object.keys(localStates).length > 0) {\n    const referencedStates = extractPredefinedStateRefs(chunkStylesStr);\n    const relevantLocalStates: string[] = [];\n\n    for (const stateName of referencedStates) {\n      if (localStates[stateName]) {\n        relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);\n      }\n    }\n\n    // Add relevant local states to the cache key (sorted for stability)\n    if (relevantLocalStates.length > 0) {\n      relevantLocalStates.sort();\n      parts.unshift(`[states:${relevantLocalStates.join('|')}]`);\n    }\n  }\n\n  // Use null character as separator (safe, not in JSON output)\n  return parts.join('\\0');\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,wCAAwB,IAAI,SAAyB;;;;;;AAO3D,SAAS,gBAAgB,OAAwB;AAC/C,KAAI,UAAU,KACZ,QAAO;AAET,KAAI,UAAU,KAAA,EACZ,QAAO;AAET,KAAI,OAAO,UAAU,SACnB,QAAO,KAAK,UAAU,MAAM;CAG9B,MAAM,SAAS,sBAAsB,IAAI,MAAgB;AACzD,KAAI,WAAW,KAAA,EAAW,QAAO;CAEjC,IAAI;AACJ,KAAI,MAAM,QAAQ,MAAM,CACtB,UAAS,MAAM,MAAM,IAAI,gBAAgB,CAAC,KAAK,IAAI,GAAG;MACjD;EACL,MAAM,MAAM;EACZ,MAAM,aAAa,OAAO,KAAK,IAAI,CAAC,MAAM;EAC1C,MAAM,QAAkB,EAAE;AAC1B,OAAK,MAAM,OAAO,WAChB,KAAI,IAAI,SAAS,KAAA,EACf,OAAM,KAAK,GAAG,KAAK,UAAU,IAAI,CAAC,GAAG,gBAAgB,IAAI,KAAK,GAAG;AAGrE,WAAS,MAAM,MAAM,KAAK,IAAI,GAAG;;AAGnC,uBAAsB,IAAI,OAAiB,OAAO;AAClD,QAAO;;;;;;;;;;;;;;;;AAiBT,SAAgB,sBACd,QACA,WACA,WACQ;CAER,MAAM,QAAkB,CAAC,UAAU;CAGnC,IAAI,iBAAiB;AAErB,MAAK,MAAM,OAAO,WAAW;EAC3B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,KAAA,GAAW;GAEvB,MAAM,aAAa,gBAAgB,MAAM;AACzC,SAAM,KAAK,GAAG,IAAI,GAAG,aAAa;AAClC,qBAAkB;;;CAKtB,MAAM,cAAc,6BAA6B,OAAO;AAGxD,KAAI,OAAO,KAAK,YAAY,CAAC,SAAS,GAAG;EACvC,MAAM,mBAAmB,2BAA2B,eAAe;EACnE,MAAM,sBAAgC,EAAE;AAExC,OAAK,MAAM,aAAa,iBACtB,KAAI,YAAY,WACd,qBAAoB,KAAK,GAAG,UAAU,GAAG,YAAY,aAAa;AAKtE,MAAI,oBAAoB,SAAS,GAAG;AAClC,uBAAoB,MAAM;AAC1B,SAAM,QAAQ,WAAW,oBAAoB,KAAK,IAAI,CAAC,GAAG;;;AAK9D,QAAO,MAAM,KAAK,KAAK"}

package/dist/chunks/definitions.d.ts

@@ -1,6 +1,6 @@
 //#region src/chunks/definitions.d.ts
 declare const CHUNK_NAMES: {
-  /** Special chunk for styles that cannot be split (e.g., @starting-style) */readonly COMBINED: "combined";
+  /** Special chunk for styles that cannot be split */readonly COMBINED: "combined";
   readonly SUBCOMPONENTS: "subcomponents";
   readonly APPEARANCE: "appearance";
   readonly FONT: "font";

package/dist/chunks/definitions.js

@@ -1,5 +1,4 @@
 import { isSelector } from "../pipeline/index.js";
-
 //#region src/chunks/definitions.ts
 /**
 * Style chunk definitions for CSS chunking optimization.
@@ -238,7 +237,7 @@ function categorizeStyleKeys(styles) {
 	const chunkData = {};
 	const keys = Object.keys(styles);
 	for (const key of keys) {
-		if (key === "$" || key === "@keyframes" || key === "@properties" || key === "recipe") continue;
+		if (key === "$" || key === "@keyframes" || key === "@properties" || key === "@fontFace" || key === "@counterStyle" || key === "recipe") continue;
 		if (isSelector(key)) {
 			if (!chunkData[CHUNK_NAMES.SUBCOMPONENTS]) chunkData[CHUNK_NAMES.SUBCOMPONENTS] = [];
 			chunkData[CHUNK_NAMES.SUBCOMPONENTS].push(key);
@@ -253,7 +252,7 @@ function categorizeStyleKeys(styles) {
 	for (const chunkName of Object.keys(chunkData)) if (!orderedChunks.has(chunkName)) orderedChunks.set(chunkName, chunkData[chunkName].sort());
 	return orderedChunks;
 }
-
 //#endregion
 export { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys };
+
 //# sourceMappingURL=definitions.js.map

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 (e.g., @starting-style) */\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 === '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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;AASD,MAAa,oBAAoB;CAE/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;AAWD,MAAa,yBAAyB;CAEpC;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;AAWD,MAAa,uBAAuB;CAElC;CACA;CACA;CACA;CACA;CAEA;CAEA;CAEA;CACD;;;;;;;AAQD,MAAa,sBAAsB;CAEjC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;AAQD,MAAa,wBAAwB;CACnC;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAMD,MAAa,cAAc;CAEzB,UAAU;CACV,eAAe;CACf,YAAY;CACZ,MAAM;CACN,WAAW;CACX,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;CACP;;;;;AAYD,MAAa,iCAAiB,IAAI,KAAwB;AAG1D,SAAS,0BAA0B;AACjC,MAAK,MAAM,SAAS,wBAClB,gBAAe,IAAI,OAAO,YAAY,WAAW;AAEnD,MAAK,MAAM,SAAS,kBAClB,gBAAe,IAAI,OAAO,YAAY,KAAK;AAE7C,MAAK,MAAM,SAAS,uBAClB,gBAAe,IAAI,OAAO,YAAY,UAAU;AAElD,MAAK,MAAM,SAAS,qBAClB,gBAAe,IAAI,OAAO,YAAY,QAAQ;AAEhD,MAAK,MAAM,SAAS,oBAClB,gBAAe,IAAI,OAAO,YAAY,OAAO;AAE/C,MAAK,MAAM,SAAS,sBAClB,gBAAe,IAAI,OAAO,YAAY,SAAS;;AAKnD,yBAAyB;;;;;AAUzB,MAAM,cAAiC;CACrC,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACb;AAKuB,IAAI,IAC1B,YAAY,KAAK,MAAM,UAAU,CAAC,MAAM,MAAM,CAAC,CAChD;;;;;;;;;;AA0BD,SAAgB,oBACd,QACuB;CAEvB,MAAM,YAAsC,EAAE;CAC9C,MAAM,OAAO,OAAO,KAAK,OAAO;AAEhC,MAAK,MAAM,OAAO,MAAM;AAItB,MACE,QAAQ,OACR,QAAQ,gBACR,QAAQ,iBACR,QAAQ,SAER;AAGF,MAAI,WAAW,IAAI,EAAE;AAEnB,OAAI,CAAC,UAAU,YAAY,eACzB,WAAU,YAAY,iBAAiB,EAAE;AAE3C,aAAU,YAAY,eAAe,KAAK,IAAI;SACzC;GAEL,MAAM,YAAY,eAAe,IAAI,IAAI,IAAI,YAAY;AACzD,OAAI,CAAC,UAAU,WACb,WAAU,aAAa,EAAE;AAE3B,aAAU,WAAW,KAAK,IAAI;;;CAKlC,MAAM,gCAAgB,IAAI,KAAuB;AAGjD,MAAK,MAAM,aAAa,YACtB,KAAI,UAAU,cAAc,UAAU,WAAW,SAAS,EAExD,eAAc,IAAI,WAAW,UAAU,WAAW,MAAM,CAAC;AAK7D,MAAK,MAAM,aAAa,OAAO,KAAK,UAAU,CAC5C,KAAI,CAAC,cAAc,IAAI,UAAU,CAC/B,eAAc,IAAI,WAAW,UAAU,WAAW,MAAM,CAAC;AAI7D,QAAO"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;AASD,MAAa,oBAAoB;CAE/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;AAWD,MAAa,yBAAyB;CAEpC;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;AAWD,MAAa,uBAAuB;CAElC;CACA;CACA;CACA;CACA;CAEA;CAEA;CAEA;CACD;;;;;;;AAQD,MAAa,sBAAsB;CAEjC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;AAQD,MAAa,wBAAwB;CACnC;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAMD,MAAa,cAAc;CAEzB,UAAU;CACV,eAAe;CACf,YAAY;CACZ,MAAM;CACN,WAAW;CACX,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;CACP;;;;;AAYD,MAAa,iCAAiB,IAAI,KAAwB;AAG1D,SAAS,0BAA0B;AACjC,MAAK,MAAM,SAAS,wBAClB,gBAAe,IAAI,OAAO,YAAY,WAAW;AAEnD,MAAK,MAAM,SAAS,kBAClB,gBAAe,IAAI,OAAO,YAAY,KAAK;AAE7C,MAAK,MAAM,SAAS,uBAClB,gBAAe,IAAI,OAAO,YAAY,UAAU;AAElD,MAAK,MAAM,SAAS,qBAClB,gBAAe,IAAI,OAAO,YAAY,QAAQ;AAEhD,MAAK,MAAM,SAAS,oBAClB,gBAAe,IAAI,OAAO,YAAY,OAAO;AAE/C,MAAK,MAAM,SAAS,sBAClB,gBAAe,IAAI,OAAO,YAAY,SAAS;;AAKnD,yBAAyB;;;;;AAUzB,MAAM,cAAiC;CACrC,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACb;AAKuB,IAAI,IAC1B,YAAY,KAAK,MAAM,UAAU,CAAC,MAAM,MAAM,CAAC,CAChD;;;;;;;;;;AA0BD,SAAgB,oBACd,QACuB;CAEvB,MAAM,YAAsC,EAAE;CAC9C,MAAM,OAAO,OAAO,KAAK,OAAO;AAEhC,MAAK,MAAM,OAAO,MAAM;AAItB,MACE,QAAQ,OACR,QAAQ,gBACR,QAAQ,iBACR,QAAQ,eACR,QAAQ,mBACR,QAAQ,SAER;AAGF,MAAI,WAAW,IAAI,EAAE;AAEnB,OAAI,CAAC,UAAU,YAAY,eACzB,WAAU,YAAY,iBAAiB,EAAE;AAE3C,aAAU,YAAY,eAAe,KAAK,IAAI;SACzC;GAEL,MAAM,YAAY,eAAe,IAAI,IAAI,IAAI,YAAY;AACzD,OAAI,CAAC,UAAU,WACb,WAAU,aAAa,EAAE;AAE3B,aAAU,WAAW,KAAK,IAAI;;;CAKlC,MAAM,gCAAgB,IAAI,KAAuB;AAGjD,MAAK,MAAM,aAAa,YACtB,KAAI,UAAU,cAAc,UAAU,WAAW,SAAS,EAExD,eAAc,IAAI,WAAW,UAAU,WAAW,MAAM,CAAC;AAK7D,MAAK,MAAM,aAAa,OAAO,KAAK,UAAU,CAC5C,KAAI,CAAC,cAAc,IAAI,UAAU,CAC/B,eAAc,IAAI,WAAW,UAAU,WAAW,MAAM,CAAC;AAI7D,QAAO"}

package/dist/chunks/index.d.ts

@@ -0,0 +1 @@
+import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./definitions.js";

package/dist/chunks/renderChunk.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/chunks/renderChunk.js

@@ -1,7 +1,6 @@
 import { extractLocalPredefinedStates } from "../states/index.js";
 import { hasPipelineCacheEntry, renderStyles } from "../pipeline/index.js";
 import { CHUNK_NAMES } from "./definitions.js";
-
 //#region src/chunks/renderChunk.ts
 /**
 * Build a filtered styles object for a regular chunk.
@@ -54,7 +53,7 @@ function renderStylesForChunk(styles, chunkName, styleKeys, pipelineCacheKey) {
 	if (pipelineCacheKey && hasPipelineCacheEntry(pipelineCacheKey)) return renderStyles(void 0, void 0, void 0, pipelineCacheKey);
 	return renderStyles(chunkName === CHUNK_NAMES.SUBCOMPONENTS ? buildSubcomponentFilteredStyles(styles, styleKeys) : buildFilteredStyles(styles, styleKeys), void 0, void 0, pipelineCacheKey);
 }
-
 //#endregion
 export { renderStylesForChunk };
+
 //# sourceMappingURL=renderChunk.js.map

package/dist/chunks/renderChunk.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderChunk.js","names":[],"sources":["../../src/chunks/renderChunk.ts"],"sourcesContent":["/**\n * Chunk-specific style rendering.\n *\n * Renders styles for a specific chunk by filtering the styles object\n * to only include relevant keys before passing to renderStyles.\n */\n\nimport type { RenderResult } from '../pipeline';\nimport { hasPipelineCacheEntry, renderStyles } from '../pipeline';\nimport { extractLocalPredefinedStates } from '../states';\nimport type { Styles } from '../styles/types';\n\nimport { CHUNK_NAMES } from './definitions';\n\n/**\n * Build a filtered styles object for a regular chunk.\n */\nfunction buildFilteredStyles(styles: Styles, styleKeys: string[]): Styles {\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n  const filteredStyles: Styles = {};\n\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  for (const key of styleKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  return filteredStyles;\n}\n\n/**\n * Build a filtered styles object for the subcomponents chunk.\n */\nfunction buildSubcomponentFilteredStyles(\n  styles: Styles,\n  selectorKeys: string[],\n): Styles {\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n  const filteredStyles: Styles = {};\n\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  for (const key of selectorKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  if (styles.$ !== undefined) {\n    filteredStyles.$ = styles.$;\n  }\n\n  return filteredStyles;\n}\n\n/**\n * Render styles for a specific chunk.\n *\n * On pipeline cache hit, avoids building the filtered styles object entirely.\n * Only constructs it on cache miss when the pipeline actually needs the styles.\n *\n * IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')\n * are always included in the filtered styles, regardless of which chunk is\n * being rendered. This ensures that state references like '@mobile' in any\n * chunk can be properly resolved by the pipeline.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk being rendered\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns RenderResult with rules for this chunk\n */\nexport function renderStylesForChunk(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n  pipelineCacheKey?: string,\n): RenderResult {\n  if (styleKeys.length === 0) {\n    return { rules: [], className: '' };\n  }\n\n  // Fast path: skip building filteredStyles when pipeline has a cached result\n  if (pipelineCacheKey && hasPipelineCacheEntry(pipelineCacheKey)) {\n    return renderStyles(undefined, undefined, undefined, pipelineCacheKey);\n  }\n\n  // Cache miss: build filtered styles and run pipeline\n  const filteredStyles =\n    chunkName === CHUNK_NAMES.SUBCOMPONENTS\n      ? buildSubcomponentFilteredStyles(styles, styleKeys)\n      : buildFilteredStyles(styles, styleKeys);\n\n  return renderStyles(filteredStyles, undefined, undefined, pipelineCacheKey);\n}\n"],"mappings":";;;;;;;;AAiBA,SAAS,oBAAoB,QAAgB,WAA6B;CACxE,MAAM,wBAAwB,6BAA6B,OAAO;CAClE,MAAM,iBAAyB,EAAE;AAEjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAGxB,MAAK,MAAM,OAAO,WAAW;EAC3B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAI1B,QAAO;;;;;AAMT,SAAS,gCACP,QACA,cACQ;CACR,MAAM,wBAAwB,6BAA6B,OAAO;CAClE,MAAM,iBAAyB,EAAE;AAEjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAGxB,MAAK,MAAM,OAAO,cAAc;EAC9B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAI1B,KAAI,OAAO,MAAM,OACf,gBAAe,IAAI,OAAO;AAG5B,QAAO;;;;;;;;;;;;;;;;;;AAmBT,SAAgB,qBACd,QACA,WACA,WACA,kBACc;AACd,KAAI,UAAU,WAAW,EACvB,QAAO;EAAE,OAAO,EAAE;EAAE,WAAW;EAAI;AAIrC,KAAI,oBAAoB,sBAAsB,iBAAiB,CAC7D,QAAO,aAAa,QAAW,QAAW,QAAW,iBAAiB;AASxE,QAAO,aAJL,cAAc,YAAY,gBACtB,gCAAgC,QAAQ,UAAU,GAClD,oBAAoB,QAAQ,UAAU,EAER,QAAW,QAAW,iBAAiB"}
+{"version":3,"file":"renderChunk.js","names":[],"sources":["../../src/chunks/renderChunk.ts"],"sourcesContent":["/**\n * Chunk-specific style rendering.\n *\n * Renders styles for a specific chunk by filtering the styles object\n * to only include relevant keys before passing to renderStyles.\n */\n\nimport type { RenderResult } from '../pipeline';\nimport { hasPipelineCacheEntry, renderStyles } from '../pipeline';\nimport { extractLocalPredefinedStates } from '../states';\nimport type { Styles } from '../styles/types';\n\nimport { CHUNK_NAMES } from './definitions';\n\n/**\n * Build a filtered styles object for a regular chunk.\n */\nfunction buildFilteredStyles(styles: Styles, styleKeys: string[]): Styles {\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n  const filteredStyles: Styles = {};\n\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  for (const key of styleKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  return filteredStyles;\n}\n\n/**\n * Build a filtered styles object for the subcomponents chunk.\n */\nfunction buildSubcomponentFilteredStyles(\n  styles: Styles,\n  selectorKeys: string[],\n): Styles {\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n  const filteredStyles: Styles = {};\n\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  for (const key of selectorKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  if (styles.$ !== undefined) {\n    filteredStyles.$ = styles.$;\n  }\n\n  return filteredStyles;\n}\n\n/**\n * Render styles for a specific chunk.\n *\n * On pipeline cache hit, avoids building the filtered styles object entirely.\n * Only constructs it on cache miss when the pipeline actually needs the styles.\n *\n * IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')\n * are always included in the filtered styles, regardless of which chunk is\n * being rendered. This ensures that state references like '@mobile' in any\n * chunk can be properly resolved by the pipeline.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk being rendered\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns RenderResult with rules for this chunk\n */\nexport function renderStylesForChunk(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n  pipelineCacheKey?: string,\n): RenderResult {\n  if (styleKeys.length === 0) {\n    return { rules: [], className: '' };\n  }\n\n  // Fast path: skip building filteredStyles when pipeline has a cached result\n  if (pipelineCacheKey && hasPipelineCacheEntry(pipelineCacheKey)) {\n    return renderStyles(undefined, undefined, undefined, pipelineCacheKey);\n  }\n\n  // Cache miss: build filtered styles and run pipeline\n  const filteredStyles =\n    chunkName === CHUNK_NAMES.SUBCOMPONENTS\n      ? buildSubcomponentFilteredStyles(styles, styleKeys)\n      : buildFilteredStyles(styles, styleKeys);\n\n  return renderStyles(filteredStyles, undefined, undefined, pipelineCacheKey);\n}\n"],"mappings":";;;;;;;AAiBA,SAAS,oBAAoB,QAAgB,WAA6B;CACxE,MAAM,wBAAwB,6BAA6B,OAAO;CAClE,MAAM,iBAAyB,EAAE;AAEjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAGxB,MAAK,MAAM,OAAO,WAAW;EAC3B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,KAAA,EACZ,gBAAe,OAAO;;AAI1B,QAAO;;;;;AAMT,SAAS,gCACP,QACA,cACQ;CACR,MAAM,wBAAwB,6BAA6B,OAAO;CAClE,MAAM,iBAAyB,EAAE;AAEjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAGxB,MAAK,MAAM,OAAO,cAAc;EAC9B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,KAAA,EACZ,gBAAe,OAAO;;AAI1B,KAAI,OAAO,MAAM,KAAA,EACf,gBAAe,IAAI,OAAO;AAG5B,QAAO;;;;;;;;;;;;;;;;;;AAmBT,SAAgB,qBACd,QACA,WACA,WACA,kBACc;AACd,KAAI,UAAU,WAAW,EACvB,QAAO;EAAE,OAAO,EAAE;EAAE,WAAW;EAAI;AAIrC,KAAI,oBAAoB,sBAAsB,iBAAiB,CAC7D,QAAO,aAAa,KAAA,GAAW,KAAA,GAAW,KAAA,GAAW,iBAAiB;AASxE,QAAO,aAJL,cAAc,YAAY,gBACtB,gCAAgC,QAAQ,UAAU,GAClD,oBAAoB,QAAQ,UAAU,EAER,KAAA,GAAW,KAAA,GAAW,iBAAiB"}

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