@tenphi/tasty 0.13.0 → 0.14.0

package/README.md

@@ -25,11 +25,11 @@ That guarantee unlocks a concise, CSS-like DSL where design tokens, custom units
 
 - **Deterministic at any scale** — Exclusive selector generation eliminates the entire class of cascade/specificity bugs. Every state combination resolves to exactly one CSS rule per property. Refactor freely. See [How It Actually Works](#how-it-actually-works).
 - **AI-friendly by design** — Style definitions are declarative, self-contained, and structurally consistent. AI tools can read, understand, and refactor even advanced state bindings as confidently as a human — because there's no hidden cascade logic or implicit ordering to second-guess.
-- **DSL that feels like CSS** — Property names you already know (`padding`, `color`, `display`) with syntax sugar that removes boilerplate. Learn the DSL in minutes, not days. See [Style Properties](docs/styles.md).
+- **DSL that feels like CSS** — Property names you already know (`padding`, `color`, `display`) with syntax sugar that removes boilerplate. Learn the DSL in minutes, not days. Start with the [Style DSL](docs/dsl.md), then use [Style Properties](docs/styles.md) as the handler reference.
 - **CSS properties as normal component 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).
-- **Design-system native** — Color tokens (`#primary`), spacing units (`2x`), typography presets (`h1`, `t2`), border radius (`1r`), and recipes are first-class primitives, not afterthoughts. See [Configuration](docs/configuration.md).
+- **Design-system native** — Color tokens (`#primary`), spacing units (`2x`), typography presets (`h1`, `t2`), border radius (`1r`), and recipes are first-class primitives, not afterthoughts. Built-in units and standard color values work out of the box, and [Configuration](docs/configuration.md) lets teams define shared conventions on top.
 - **Near-complete modern CSS coverage** — Media queries, container queries, `@supports`, `:has()`, `@starting-style`, `@property`, `@keyframes`, etc. Some features that don't fit Tasty's component model (such as `@layer` and `!important`) are intentionally omitted, but real-world use cases are covered almost completely.
-- **Runtime, zero-runtime, or SSR — your call** — Use `tasty()` for dynamic React components with runtime injection, `tastyStatic()` with the Babel plugin for zero-runtime CSS extraction, or enable SSR with zero-cost client hydration for Next.js, Astro, or any React framework (experimental). Same DSL, same tokens, same output.
+- **Runtime, zero-runtime, or SSR — your call** — Use `tasty()` for dynamic React components with runtime injection, `tastyStatic()` with the Babel plugin for zero-runtime CSS extraction, or enable SSR with zero-cost client hydration for Next.js, Astro, or any React framework. Same DSL, same tokens, same output.
 - **Only generate what is used** — In runtime mode, Tasty injects CSS on demand for mounted components/variants, so your app avoids shipping style rules for UI states that are never rendered.
 - **Runtime performance that holds at scale** — The runtime path is tested against enterprise-scale applications and tuned with multi-level caching, chunk-level style reuse, style garbage collection, and a dedicated injector.
 - **Composable and extensible by design** — Extend any component's styles with proper merge semantics, and evolve built-in behavior through configuration and plugins.
@@ -41,6 +41,35 @@ That guarantee unlocks a concise, CSS-like DSL where design tokens, custom units
 pnpm add @tenphi/tasty
 ```
 
+Requirements:
+
+- Node.js 20+
+- React 18+ (peer dependency for the React entry points)
+- `pnpm`, `npm`, or `yarn`
+
+Other package managers:
+
+```bash
+npm add @tenphi/tasty
+yarn add @tenphi/tasty
+```
+
+## Start Here
+
+- **[Getting Started](docs/getting-started.md)** — the canonical onboarding path: install, first component, optional shared `configure()`, ESLint, editor tooling, and rendering mode selection
+- **[Docs Hub](docs/README.md)** — choose docs by role and task: runtime, zero-runtime, SSR, design-system authoring, internals, and debugging
+- **[Methodology](docs/methodology.md)** — the recommended component model and public API conventions for design-system code
+
+## Choose a Rendering Mode
+
+| Mode | Entry point | Best for | Trade-off |
+|------|-------------|----------|-----------|
+| **Runtime** | `@tenphi/tasty` | Interactive apps 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 |
+| **SSR** | `@tenphi/tasty/ssr/*` | Next.js, Astro, and other streaming React SSR setups | Uses runtime `tasty()` with server-collected CSS and hydration cache transfer |
+
+All three share the same DSL, tokens, units, and state mappings. See [Getting Started](docs/getting-started.md#choosing-a-rendering-mode), [Zero Runtime](docs/tasty-static.md), and [Server-Side Rendering](docs/ssr.md).
+
 ## Quick Start
 
 ### Create a styled component
@@ -55,8 +84,9 @@ const Card = tasty({
     flow: 'column',
     padding: '4x',
     gap: '2x',
-    fill: '#surface',
-    border: '#border bottom',
+    fill: 'okhsl(98% 0.02 255)',
+    color: 'okhsl(28% 0.03 255)',
+    border: 'okhsl(88% 0.02 255)',
     radius: '1r',
   },
 });
@@ -65,7 +95,9 @@ const Card = tasty({
 <Card>Hello World</Card>
 ```
 
-Every value maps to CSS you'd recognize — but with tokens and units that keep your design system consistent by default.
+Every value maps to CSS you'd recognize. This example is intentionally config-free: built-in units work immediately, and standard color values such as `rgb(...)`, `hsl(...)`, named colors, and `okhsl(...)` are all valid without setup. `okhsl(...)` is the recommended choice when you want a design-system-friendly color authoring path from day one.
+
+Use `configure()` when you want to define shared tokens, state aliases, recipes, or other conventions for your app or design system. For a fuller onboarding path, follow [Getting Started](docs/getting-started.md).
 
 ### Add state-driven styles
 
@@ -112,7 +144,7 @@ const DangerButton = tasty(Button, {
 
 Child styles merge with parent styles intelligently — state maps can extend or replace parent states per-property.
 
-### Configure once, use everywhere
+### Optional: configure shared conventions
 
 ```tsx
 import { configure } from '@tenphi/tasty';
@@ -129,7 +161,7 @@ configure({
 });
 ```
 
-Predefined states turn complex selector logic into single tokens. Use `@mobile` instead of writing media query expressions in every component.
+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
 
@@ -188,6 +220,8 @@ Layout components can expose flow props. Buttons can expose positioning props. E
 
 This is the core idea that makes everything else possible.
 
+For the end-to-end architecture — parsing state keys, building exclusive conditions, merging by output, and materializing selectors and at-rules — see **[Style rendering pipeline](docs/PIPELINE.md)**.
+
 Traditional CSS has two structural problems.
 
 First, the **cascade** resolves conflicts by specificity and source order: when multiple selectors match, the one with the highest specificity wins, or — if specificity is equal — the last one in source order wins. That makes styles inherently fragile. Reordering imports, adding a media query, or composing components from different libraries can silently break styling.
@@ -278,10 +312,12 @@ 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 doesn't limit CSS; it unlocks its full potential by removing the complexity that held teams back.
 
-[Try it in the Tasty Playground →](https://cube-ui-kit.vercel.app/?path=/story/getting-started-tasty-playground--playground)
+[Try it in the Cube UI Kit Storybook playground →](https://cube-ui-kit.vercel.app/?path=/story/getting-started-tasty-playground--playground)
 
 ## Capabilities
 
+This section is a quick product tour. For the canonical guides and references, start from the [Docs Hub](docs/README.md).
+
 ### Design Tokens and Custom Units
 
 Tokens are first-class. Colors use `#name` syntax. Spacing, radius, and border width use multiplier units tied to CSS custom properties:
@@ -317,7 +353,7 @@ Every style property accepts a state mapping object. Keys can be combined with b
 | Class selector (supported) | `.is-active` | `.is-active` |
 | Media query | `@media(w < 768px)` | `@media (width < 768px)` |
 | Container query | `@(panel, w >= 300px)` | `@container panel (width >= 300px)` |
-| Root state | `@root(theme=dark)` | `:root[data-theme="dark"]` |
+| Root state | `@root(schema=dark)` | `:root[data-schema="dark"]` |
 | Parent state | `@parent(theme=danger)` | `:is([data-theme="danger"] *)` |
 | Feature query | `@supports(display: grid)` | `@supports (display: grid)` |
 | Entry animation | `@starting` | `@starting-style` |
@@ -478,7 +514,7 @@ module.exports = {
     ['@tenphi/tasty/babel-plugin', {
       output: 'public/tasty.css',
       config: {
-        states: { '@dark': '@root(theme=dark)' },
+        states: { '@dark': '@root(schema=dark)' },
       },
     }],
   ],
@@ -501,21 +537,9 @@ module.exports = {
 
 Both share the same DSL, tokens, units, state mappings, and recipes.
 
-### Runtime Performance
-
-If you choose the runtime approach, performance is usually a non-issue in practice:
-
-- CSS is generated and injected only when styles are actually used.
-- Multi-level caching avoids repeated parsing and style recomputation.
-- Styles are split into reusable chunks and applied as multiple class names, so matching chunks can be reused across components instead of re-injected.
-- Style normalization guarantees equivalent style input resolves to the same chunks, improving deduplication hit rates.
-- A style garbage collector removes unused styles/chunks over time.
-- A dedicated style injector minimizes DOM/style-tag overhead.
-- This approach is validated in enterprise-scale apps where runtime styling overhead is not noticeable in normal UI flows.
-
-### Server-Side Rendering (Experimental)
+### 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 19+.
+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+.
 
 **Next.js setup:**
 
@@ -553,7 +577,7 @@ export default function RootLayout({
 }
 ```
 
-See the [full SSR guide](docs/ssr.md) for Astro integration, streaming SSR, generic framework usage, and the complete API reference.
+See the [full SSR guide](docs/ssr.md) for Astro integration, streaming SSR, generic framework usage, troubleshooting, and the current requirements.
 
 ## Entry Points
 
@@ -569,13 +593,73 @@ See the [full SSR guide](docs/ssr.md) for Astro integration, streaming SSR, gene
 | `@tenphi/tasty/ssr/next` | Next.js App Router SSR integration | Node |
 | `@tenphi/tasty/ssr/astro` | Astro middleware + auto-hydration | Node / Browser |
 
+## Browser Requirements
+
+Tasty's exclusive selector system relies on modern CSS pseudo-class syntax:
+
+- **`:is()`** — available across all major browsers since January 2021 ([MDN Baseline](https://developer.mozilla.org/en-US/docs/Web/CSS/:is)).
+- **Level-4 `:not()` with selector lists** — Chrome/Edge 88+, Firefox 84+, Safari 9+, Opera 75+.
+- **Not supported:** IE 11.
+
+## Performance
+
+### Bundle Size
+
+All sizes measured with [size-limit](https://github.com/ai/size-limit) — minified and brotli-compressed, including all dependencies.
+
+| Entry point | Size |
+|-------------|------|
+| `@tenphi/tasty` (runtime + SSR) | ~44 kB |
+| `@tenphi/tasty/core` (runtime, no SSR) | ~41 kB |
+| `@tenphi/tasty/static` (zero-runtime) | ~1.5 kB |
+
+Run `pnpm size` for exact up-to-date numbers.
+
+### Runtime Benchmarks
+
+If you choose the runtime approach, performance is usually a non-issue in practice. The numbers below show single-call throughput for the core pipeline stages, measured with `vitest bench` on an Apple M1 Max (Node 22).
+
+| Operation | ops/sec | Latency (mean) |
+|-----------|--------:|---------------:|
+| `renderStyles` — 5 flat properties (cold) | ~72,000 | ~14 us |
+| `renderStyles` — state map with media/hover/modifier (cold) | ~22,000 | ~46 us |
+| `renderStyles` — same styles (cached) | ~7,200,000 | ~0.14 us |
+| `parseStateKey` — simple key like `:hover` (cold) | ~1,200,000 | ~0.9 us |
+| `parseStateKey` — complex OR/AND/NOT key (cold) | ~190,000 | ~5 us |
+| `parseStateKey` — any key (cached) | ~3,300,000–8,900,000 | ~0.1–0.3 us |
+| `parseStyle` — value tokens like `2x 4x` (cold) | ~345,000 | ~3 us |
+| `parseStyle` — color tokens (cold) | ~525,000 | ~1.9 us |
+| `parseStyle` — any value (cached) | ~15,500,000 | ~0.06 us |
+
+"Cold" benchmarks use unique inputs to bypass all caches. Cached benchmarks reuse a single input and measure the LRU hot path.
+
+Run `pnpm bench` to reproduce.
+
+#### What This Means in Practice
+
+- **Cached path dominates production.** After a component's first render, subsequent renders with stable styles skip the pipeline entirely (React `useMemo` + LRU cache hits at every level). All cached operations are sub-microsecond — effectively free.
+- **Cold path is fast enough.** The heaviest cold operation — a complex state map with media queries, hover, and modifiers — takes ~46 us. Even a page with 100 unique styled components adds only ~5 ms of total style computation on first render, negligible next to React reconciliation and DOM work.
+- **Cache multipliers are 30x–100x.** This confirms the multi-level LRU architecture (parser, state-key, simplify, condition, pipeline) is delivering real value.
+- **Comparable to lighter systems.** Emotion's `css()` is typically 5–20 us for simple styles; Tasty's cold `renderStyles` at ~14 us for 5 properties is in the same range despite doing significantly more work (state maps, design tokens, sub-elements, chunking).
+- **On slower devices.** The benchmarks above are from an M1 Max (Geekbench 6 SC ~2,400). A mid-range consumer laptop (~1,800 SC) is roughly 1.3x slower; a mid-range phone (~1,200 SC) is roughly 2x slower; a budget phone (~700 SC) is roughly 3–4x slower. Even at 4x, the heaviest cold operation stays under 200 us and 100 unique components under 20 ms — still well within a single frame budget. The cached path remains sub-microsecond on all devices.
+
+### How It Stays Fast
+
+- CSS is generated and injected only when styles are actually used.
+- Multi-level caching avoids repeated parsing and style recomputation.
+- Styles are split into reusable chunks and applied as multiple class names, so matching chunks can be reused across components instead of re-injected.
+- Style normalization guarantees equivalent style input resolves to the same chunks, improving deduplication hit rates.
+- A style garbage collector removes unused styles/chunks over time.
+- A dedicated style injector minimizes DOM/style-tag overhead.
+- This approach is validated in enterprise-scale apps where runtime styling overhead is not noticeable in normal UI flows.
+
 ## Ecosystem
 
 Tasty is the core of a production-ready styling platform. These companion tools complete the picture:
 
 ### [ESLint Plugin](https://github.com/tenphi/eslint-plugin-tasty)
 
-`@tenphi/eslint-plugin-tasty` — 27 lint rules that validate style property names, value syntax, token existence, state keys, and enforce best practices. Catch typos and invalid styles at lint time, not at runtime.
+`@tenphi/eslint-plugin-tasty` — 27 total lint rules for style property names, value syntax, token existence, state keys, and best practices. The `recommended` preset enables 18 of them as a practical default. Catch typos and invalid styles at lint time, not at runtime.
 
 ```bash
 pnpm add -D @tenphi/eslint-plugin-tasty
@@ -630,9 +714,13 @@ Open-source React UI kit built on Tasty + React Aria. 100+ production components
 
 ## Documentation
 
+Start from the docs hub if you want the shortest path to the right guide for your role or rendering mode.
+
+- **[Docs Hub](docs/README.md)** — audience-based navigation across onboarding, design-system authoring, runtime, zero-runtime, SSR, debugging, and internals
+
 ### Start here
 
-- **[Getting Started](docs/getting-started.md)** — Installation, first component, configuration, ESLint plugin setup, editor tooling, and rendering mode decision tree
+- **[Getting Started](docs/getting-started.md)** — Installation, first component, optional shared configuration, ESLint plugin setup, editor tooling, and rendering mode decision tree
 - **[Methodology](docs/methodology.md)** — The recommended patterns for structuring Tasty components: root + sub-elements, styleProps, tokens, styles vs style, wrapping and extension
 
 ### Guides
@@ -654,6 +742,7 @@ Open-source React UI kit built on Tasty + React Aria. 100+ production components
 
 ### Internals
 
+- **[Style rendering pipeline](docs/PIPELINE.md)** — How `Styles` become mutually exclusive CSS rules: parse → exclusives → combinations → handlers → merge → materialize (`src/pipeline/`)
 - **[Style Injector](docs/injector.md)** — Internal CSS injection engine: `inject()`, `injectGlobal()`, `injectRawCSS()`, `keyframes()`, deduplication, reference counting, cleanup, SSR support, and Shadow DOM
 - **[Debug Utilities](docs/debug.md)** — Runtime CSS inspection via `tastyDebug`: CSS extraction, element inspection, cache metrics, chunk breakdown, and performance monitoring
 

package/dist/chunks/cacheKey.js

@@ -11,20 +11,29 @@ import { extractLocalPredefinedStates, extractPredefinedStateRefs } from "../sta
 * - Global predefined states don't affect cache keys (constant across app)
 * - Local predefined states only affect cache keys if referenced in the chunk
 */
+const _stableStringifyCache = /* @__PURE__ */ new WeakMap();
 /**
 * Recursively serialize a value with sorted keys for stable output.
 * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.
+* Uses a WeakMap cache for object values to avoid re-serializing the same references.
 */
 function stableStringify(value) {
 	if (value === null) return "null";
 	if (value === void 0) return "undefined";
 	if (typeof value !== "object") return JSON.stringify(value);
-	if (Array.isArray(value)) return "[" + value.map(stableStringify).join(",") + "]";
-	const obj = value;
-	const sortedKeys = Object.keys(obj).sort();
-	const parts = [];
-	for (const key of sortedKeys) if (obj[key] !== void 0) parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);
-	return "{" + parts.join(",") + "}";
+	const cached = _stableStringifyCache.get(value);
+	if (cached !== void 0) return cached;
+	let result;
+	if (Array.isArray(value)) result = "[" + value.map(stableStringify).join(",") + "]";
+	else {
+		const obj = value;
+		const sortedKeys = Object.keys(obj).sort();
+		const parts = [];
+		for (const key of sortedKeys) if (obj[key] !== void 0) parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);
+		result = "{" + parts.join(",") + "}";
+	}
+	_stableStringifyCache.set(value, result);
+	return result;
 }
 /**
 * Generate a cache key for a specific chunk.
@@ -42,9 +51,8 @@ function stableStringify(value) {
 */
 function generateChunkCacheKey(styles, chunkName, styleKeys) {
 	const parts = [chunkName];
-	const sortedKeys = styleKeys.slice().sort();
 	let chunkStylesStr = "";
-	for (const key of sortedKeys) {
+	for (const key of styleKeys) {
 		const value = styles[key];
 		if (value !== void 0) {
 			const serialized = stableStringify(value);

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\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 */\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  if (Array.isArray(value)) {\n    return '[' + value.map(stableStringify).join(',') + ']';\n  }\n  // Object: sort keys for stable order\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  return '{' + parts.join(',') + '}';\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  // Sort keys for stable ordering\n  const sortedKeys = styleKeys.slice().sort();\n\n  // Build the chunk-specific styles string for predefined state detection\n  let chunkStylesStr = '';\n\n  for (const key of sortedKeys) {\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":";;;;;;;;;;;;;;;;;AAqBA,SAAS,gBAAgB,OAAwB;AAC/C,KAAI,UAAU,KACZ,QAAO;AAET,KAAI,UAAU,OACZ,QAAO;AAET,KAAI,OAAO,UAAU,SACnB,QAAO,KAAK,UAAU,MAAM;AAE9B,KAAI,MAAM,QAAQ,MAAM,CACtB,QAAO,MAAM,MAAM,IAAI,gBAAgB,CAAC,KAAK,IAAI,GAAG;CAGtD,MAAM,MAAM;CACZ,MAAM,aAAa,OAAO,KAAK,IAAI,CAAC,MAAM;CAC1C,MAAM,QAAkB,EAAE;AAC1B,MAAK,MAAM,OAAO,WAChB,KAAI,IAAI,SAAS,OACf,OAAM,KAAK,GAAG,KAAK,UAAU,IAAI,CAAC,GAAG,gBAAgB,IAAI,KAAK,GAAG;AAGrE,QAAO,MAAM,MAAM,KAAK,IAAI,GAAG;;;;;;;;;;;;;;;;AAiBjC,SAAgB,sBACd,QACA,WACA,WACQ;CAER,MAAM,QAAkB,CAAC,UAAU;CAGnC,MAAM,aAAa,UAAU,OAAO,CAAC,MAAM;CAG3C,IAAI,iBAAiB;AAErB,MAAK,MAAM,OAAO,YAAY;EAC5B,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,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"}

package/dist/chunks/renderChunk.js

@@ -1,30 +1,12 @@
 import { extractLocalPredefinedStates } from "../states/index.js";
-import { renderStyles } from "../pipeline/index.js";
+import { hasPipelineCacheEntry, renderStyles } from "../pipeline/index.js";
 import { CHUNK_NAMES } from "./definitions.js";
 
 //#region src/chunks/renderChunk.ts
 /**
-* Render styles for a specific chunk.
-*
-* Creates a filtered styles object containing only the keys for this chunk,
-* then delegates to the existing renderStyles function.
-*
-* IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')
-* are always included in the filtered styles, regardless of which chunk is
-* being rendered. This ensures that state references like '@mobile' in any
-* chunk can be properly resolved by the pipeline.
-*
-* @param styles - The full styles object
-* @param chunkName - Name of the chunk being rendered
-* @param styleKeys - Keys of styles belonging to this chunk
-* @returns RenderResult with rules for this chunk
+* Build a filtered styles object for a regular chunk.
 */
-function renderStylesForChunk(styles, chunkName, styleKeys) {
-	if (styleKeys.length === 0) return {
-		rules: [],
-		className: ""
-	};
-	if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) return renderSubcomponentsChunk(styles, styleKeys);
+function buildFilteredStyles(styles, styleKeys) {
 	const localPredefinedStates = extractLocalPredefinedStates(styles);
 	const filteredStyles = {};
 	for (const [key, value] of Object.entries(localPredefinedStates)) filteredStyles[key] = value;
@@ -32,19 +14,12 @@ function renderStylesForChunk(styles, chunkName, styleKeys) {
 		const value = styles[key];
 		if (value !== void 0) filteredStyles[key] = value;
 	}
-	return renderStyles(filteredStyles);
+	return filteredStyles;
 }
 /**
-* Render the subcomponents chunk.
-*
-* Subcomponents (selectors like Label, &::before, etc.) contain nested
-* style objects that need to be preserved in their entirety.
-*
-* @param styles - The full styles object
-* @param selectorKeys - Keys of selectors in this chunk
-* @returns RenderResult with rules for all subcomponents
+* Build a filtered styles object for the subcomponents chunk.
 */
-function renderSubcomponentsChunk(styles, selectorKeys) {
+function buildSubcomponentFilteredStyles(styles, selectorKeys) {
 	const localPredefinedStates = extractLocalPredefinedStates(styles);
 	const filteredStyles = {};
 	for (const [key, value] of Object.entries(localPredefinedStates)) filteredStyles[key] = value;
@@ -53,7 +28,31 @@ function renderSubcomponentsChunk(styles, selectorKeys) {
 		if (value !== void 0) filteredStyles[key] = value;
 	}
 	if (styles.$ !== void 0) filteredStyles.$ = styles.$;
-	return renderStyles(filteredStyles);
+	return filteredStyles;
+}
+/**
+* Render styles for a specific chunk.
+*
+* On pipeline cache hit, avoids building the filtered styles object entirely.
+* Only constructs it on cache miss when the pipeline actually needs the styles.
+*
+* IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')
+* are always included in the filtered styles, regardless of which chunk is
+* being rendered. This ensures that state references like '@mobile' in any
+* chunk can be properly resolved by the pipeline.
+*
+* @param styles - The full styles object
+* @param chunkName - Name of the chunk being rendered
+* @param styleKeys - Keys of styles belonging to this chunk
+* @returns RenderResult with rules for this chunk
+*/
+function renderStylesForChunk(styles, chunkName, styleKeys, pipelineCacheKey) {
+	if (styleKeys.length === 0) return {
+		rules: [],
+		className: ""
+	};
+	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

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 { renderStyles } from '../pipeline';\nimport { extractLocalPredefinedStates } from '../states';\nimport type { Styles } from '../styles/types';\n\nimport { CHUNK_NAMES } from './definitions';\n\n/**\n * Render styles for a specific chunk.\n *\n * Creates a filtered styles object containing only the keys for this chunk,\n * then delegates to the existing renderStyles function.\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): RenderResult {\n  // Empty chunk - return empty result\n  if (styleKeys.length === 0) {\n    return { rules: [], className: '' };\n  }\n\n  // For subcomponents, we need to preserve the nested structure\n  if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) {\n    return renderSubcomponentsChunk(styles, styleKeys);\n  }\n\n  // Extract local predefined states from the full styles object\n  // These must be included for state resolution to work across chunks\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n\n  // For regular chunks, create a filtered styles object\n  // This is memory-efficient: we only create a shallow copy with filtered keys\n  const filteredStyles: Styles = {};\n\n  // First, add local predefined states so they're available for resolution\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  // Then add the chunk's style keys\n  for (const key of styleKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  // Delegate to existing renderStyles\n  return renderStyles(filteredStyles);\n}\n\n/**\n * Render the subcomponents chunk.\n *\n * Subcomponents (selectors like Label, &::before, etc.) contain nested\n * style objects that need to be preserved in their entirety.\n *\n * @param styles - The full styles object\n * @param selectorKeys - Keys of selectors in this chunk\n * @returns RenderResult with rules for all subcomponents\n */\nfunction renderSubcomponentsChunk(\n  styles: Styles,\n  selectorKeys: string[],\n): RenderResult {\n  // Extract local predefined states from the full styles object\n  // These must be included for state resolution to work in nested styles\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n\n  // Create a styles object containing only the selector keys\n  const filteredStyles: Styles = {};\n\n  // First, add local predefined states so they're available for resolution\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  // Then add the selector keys\n  for (const key of selectorKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  // Also copy the $ helper if present (used for selector combinators)\n  if (styles.$ !== undefined) {\n    filteredStyles.$ = styles.$;\n  }\n\n  // Delegate to existing renderStyles\n  return renderStyles(filteredStyles);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,qBACd,QACA,WACA,WACc;AAEd,KAAI,UAAU,WAAW,EACvB,QAAO;EAAE,OAAO,EAAE;EAAE,WAAW;EAAI;AAIrC,KAAI,cAAc,YAAY,cAC5B,QAAO,yBAAyB,QAAQ,UAAU;CAKpD,MAAM,wBAAwB,6BAA6B,OAAO;CAIlE,MAAM,iBAAyB,EAAE;AAGjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAIxB,MAAK,MAAM,OAAO,WAAW;EAC3B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAK1B,QAAO,aAAa,eAAe;;;;;;;;;;;;AAarC,SAAS,yBACP,QACA,cACc;CAGd,MAAM,wBAAwB,6BAA6B,OAAO;CAGlE,MAAM,iBAAyB,EAAE;AAGjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAIxB,MAAK,MAAM,OAAO,cAAc;EAC9B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAK1B,KAAI,OAAO,MAAM,OACf,gBAAe,IAAI,OAAO;AAI5B,QAAO,aAAa,eAAe"}
+{"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"}

package/dist/config.d.ts

@@ -3,6 +3,7 @@ import { StyleDetails, UnitHandler } from "./parser/types.js";
 import { StyleHandlerDefinition } from "./utils/styles.js";
 import { ConfigTokens, RecipeStyles } from "./styles/types.js";
 import { StyleInjector } from "./injector/injector.js";
+import { ColorSpace } from "./utils/color-space.js";
 import { TastyPlugin } from "./plugins/types.js";
 
 //#region src/config.d.ts
@@ -58,6 +59,17 @@ interface TastyConfig {
    * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }
    */
   funcs?: Record<string, (groups: StyleDetails[]) => string>;
+  /**
+   * Color space used for decomposed color token companion variables.
+   * Controls the CSS function and suffix for alpha composition.
+   *
+   * - `'rgb'`   — suffix `-rgb`, e.g. `rgb(var(--name-color-rgb) / .5)`
+   * - `'hsl'`   — suffix `-hsl`, e.g. `hsl(var(--name-color-hsl) / .5)`
+   * - `'oklch'` — suffix `-oklch`, e.g. `oklch(var(--name-color-oklch) / .5)`
+   *
+   * @default 'oklch'
+   */
+  colorSpace?: ColorSpace;
   /**
    * Automatically infer and register CSS @property declarations
    * from custom property values found in styles, keyframes, and global config.
@@ -157,7 +169,7 @@ interface TastyConfig {
    * for responsive/theme-aware tokens.
    *
    * - `$name` keys become `--name` CSS custom properties
-   * - `#name` keys become `--name-color` and `--name-color-rgb` properties
+   * - `#name` keys become `--name-color` and `--name-color-{colorSpace}` properties
    *
    * Tokens are injected once when the first style is rendered.
    *
@@ -252,7 +264,7 @@ declare function isTestEnvironment(): boolean;
 declare function hasStylesGenerated(): boolean;
 /**
  * Check if any global keyframes are configured.
- * Fast path: returns false if no keyframes were ever set.
+ * Uses a pre-computed flag to avoid Object.keys() allocation on every call.
  */
 declare function hasGlobalKeyframes(): boolean;
 /**

package/dist/config.js

@@ -1,8 +1,9 @@
+import { resetColorSpace, setColorSpace } from "./utils/color-space.js";
 import { isDevEnv } from "./utils/is-dev-env.js";
-import { setGlobalPredefinedStates } from "./states/index.js";
 import { CUSTOM_UNITS, getGlobalFuncs, getGlobalParser, normalizeColorTokenValue, resetGlobalPredefinedTokens, setGlobalPredefinedTokens } from "./utils/styles.js";
 import { normalizeHandlerDefinition, registerHandler, resetHandlers } from "./styles/predefined.js";
 import { StyleInjector } from "./injector/injector.js";
+import { setGlobalPredefinedStates } from "./states/index.js";
 import { clearPipelineCache, isSelector, renderStyles } from "./pipeline/index.js";
 
 //#region src/config.ts
@@ -169,12 +170,13 @@ function markStylesGenerated() {
 function hasStylesGenerated() {
 	return stylesGenerated;
 }
+let _hasGlobalKeyframes = false;
 /**
 * Check if any global keyframes are configured.
-* Fast path: returns false if no keyframes were ever set.
+* Uses a pre-computed flag to avoid Object.keys() allocation on every call.
 */
 function hasGlobalKeyframes() {
-	return globalKeyframes !== null && Object.keys(globalKeyframes).length > 0;
+	return _hasGlobalKeyframes;
 }
 /**
 * Get global keyframes configuration.
@@ -193,6 +195,7 @@ function setGlobalKeyframes(keyframes) {
 		return;
 	}
 	globalKeyframes = keyframes;
+	_hasGlobalKeyframes = Object.keys(keyframes).length > 0;
 }
 /**
 * Check if any global properties are configured.
@@ -373,6 +376,8 @@ function configure(config = {}) {
 		const tokenKeys = new Set(Object.keys(mergedConfigTokens));
 		for (const key of Object.keys(mergedReplaceTokens)) if (tokenKeys.has(key)) warnOnce(`token-conflict-${key}`, `[Tasty] Token "${key}" is defined in both \`tokens\` and \`replaceTokens\`. \`replaceTokens\` performs parse-time substitution, so the \`tokens\` CSS custom property will be injected but never used by Tasty styles. Remove it from one of the two.`);
 	}
+	setColorSpace(config.colorSpace ?? "oklch");
+	getGlobalParser().clearCache();
 	if (Object.keys(mergedStates).length > 0) setGlobalPredefinedStates(mergedStates);
 	const parser = getGlobalParser();
 	if (config.parserCacheSize !== void 0) parser.updateOptions({ cacheSize: config.parserCacheSize });
@@ -407,7 +412,7 @@ function configure(config = {}) {
 	}
 	if (Object.keys(mergedConfigTokens).length > 0) setGlobalConfigTokens(mergedConfigTokens);
 	if (Object.keys(mergedRecipes).length > 0) setGlobalRecipes(mergedRecipes);
-	const { states: _states, parserCacheSize: _parserCacheSize, units: _units, funcs: _funcs, plugins: _plugins, keyframes: _keyframes, properties: _properties, handlers: _handlers, tokens: _tokens, replaceTokens: _replaceTokens, recipes: _recipes, ...injectorConfig } = config;
+	const { states: _states, parserCacheSize: _parserCacheSize, units: _units, funcs: _funcs, plugins: _plugins, keyframes: _keyframes, properties: _properties, handlers: _handlers, tokens: _tokens, replaceTokens: _replaceTokens, recipes: _recipes, colorSpace: _colorSpace, ...injectorConfig } = config;
 	const fullConfig = {
 		...createDefaultConfig(),
 		...currentConfig,
@@ -442,11 +447,13 @@ function resetConfig() {
 	stylesGenerated = false;
 	currentConfig = null;
 	globalKeyframes = null;
+	_hasGlobalKeyframes = false;
 	globalProperties = null;
 	globalRecipes = null;
 	globalConfigTokens = null;
 	resetGlobalPredefinedTokens();
 	resetHandlers();
+	resetColorSpace();
 	clearPipelineCache();
 	emittedWarnings.clear();
 	const storage = typeof window !== "undefined" ? window : globalThis;