@tenphi/tasty 0.0.0-snapshot.12940ba → 0.0.0-snapshot.1a41a6b

package/README.md

@@ -24,9 +24,10 @@ On top of that foundation, Tasty gives you a concise, CSS-like DSL with design t
 ## Why Tasty
 
 - **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.
+- **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.
 - **Design-system native** — Color tokens (`#primary`), spacing units (`2x`), typography presets (`h1`, `t2`), border radius (`1r`), and recipes are first-class primitives, not afterthoughts.
-- **Full modern CSS coverage** — Media queries, container queries, `@supports`, `:has()`, `@starting-style`, `@property`, keyframes, boolean state logic with `&`, `|`, `!` operators. If CSS can do it, Tasty can express it — concisely.
+- **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 or zero-runtime — your call** — Use `tasty()` for dynamic React components with runtime injection, or `tastyStatic()` with the Babel plugin for zero-runtime CSS extraction. 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.
@@ -119,7 +120,7 @@ configure({
   states: {
     '@mobile': '@media(w < 768px)',
     '@tablet': '@media(w < 1024px)',
-    '@dark': '@root(schema=dark) | @media(prefers-color-scheme: dark)',
+    '@dark': '@root(schema=dark) | (!@root(schema) & @media(prefers-color-scheme: dark))',
   },
   recipes: {
     card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
@@ -133,9 +134,13 @@ Predefined states turn complex selector logic into single tokens. Use `@mobile`
 
 This is the core idea that makes everything else possible.
 
-Traditional CSS uses the cascade to resolve conflicts: when multiple selectors match, the one with the highest specificity wins, or — if specificity is equal — the last one in source order wins. This makes styles inherently fragile. Reordering imports, adding a new media query, or composing components from different libraries can silently break styling.
+Traditional CSS has two structural problems.
 
-Tasty takes a fundamentally different approach: **every state mapping compiles into selectors that are guaranteed to never overlap.**
+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.
+
+Second, **authoring selectors that capture real-world state logic is fundamentally hard.** A single state like "dark mode" may depend on a root attribute, an OS preference, or both — each branch needing its own selector, proper negation of competing branches, and correct `@media` nesting. The example below shows the CSS you'd write by hand for just *one* property with *one* state. Scale that across dozens of properties, then add breakpoints and container queries, and the selector logic quickly becomes unmanageable.
+
+Tasty solves both problems at once: **every state mapping compiles into mutually exclusive selectors.**
 
 ```tsx
 const Text = tasty({
@@ -152,30 +157,37 @@ const Text = tasty({
 });
 ```
 
-If `@dark` expands to `@root(schema=dark) | @media(prefers-color-scheme: dark)`, Tasty generates:
+If `@dark` expands to `@root(schema=dark) | (!@root(schema) & @media(prefers-color-scheme: dark))`, Tasty generates:
 
 ```css
-/* Explicit dark mode */
+/* Branch 1: Explicit dark schema */
 :root[data-schema="dark"] .t0.t0 {
   color: var(--text-on-dark-color);
 }
 
-/* OS dark preference, no explicit override */
+/* Branch 2: No schema attribute + OS prefers dark */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-schema="dark"]) .t0.t0 {
+  :root:not([data-schema]) .t0.t0 {
     color: var(--text-on-dark-color);
   }
 }
 
-/* Light mode — neither condition */
+/* Default: no schema + OS does not prefer dark */
 @media (not (prefers-color-scheme: dark)) {
   :root:not([data-schema="dark"]) .t0.t0 {
     color: var(--text-color);
   }
 }
+
+/* Default: schema is set but not dark (any OS preference) */
+:root:not([data-schema="dark"])[data-schema] .t0.t0 {
+  color: var(--text-color);
+}
 ```
 
-Every rule is guarded by the negation of all higher-priority rules. No two rules can ever match simultaneously. No specificity arithmetic. No source-order dependence. Components compose and extend without ever colliding.
+Every rule is guarded by the negation of higher-priority rules. No two rules can match at the same time. No specificity arithmetic. No source-order dependence. Components compose and extend without collisions.
+
+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.
 
 ## Capabilities
 
@@ -407,11 +419,12 @@ If you choose the runtime approach, performance is usually a non-issue in practi
 
 | Import | Description | Platform |
 |--------|-------------|----------|
-| `@tenphi/tasty` | Runtime style engine | Browser |
-| `@tenphi/tasty/static` | Zero-runtime static styles | Browser |
-| `@tenphi/tasty/babel-plugin` | Babel plugin for CSS extraction | Node |
+| `@tenphi/tasty` | Runtime style engine (`tasty`, hooks, `configure`) | Browser |
+| `@tenphi/tasty/static` | Zero-runtime static styles (`tastyStatic`) | Browser |
+| `@tenphi/tasty/core` | Lower-level internals (config, parser, pipeline, injector, style handlers) for tooling and advanced use | Browser / Node |
+| `@tenphi/tasty/babel-plugin` | Babel plugin for zero-runtime CSS extraction | Node |
 | `@tenphi/tasty/zero` | Programmatic extraction API | Node |
-| `@tenphi/tasty/next` | Next.js integration | Node |
+| `@tenphi/tasty/next` | Next.js integration wrapper | Node |
 
 ## Ecosystem
 
@@ -450,14 +463,21 @@ const tokens = theme.tasty(); // Ready-to-use Tasty tokens
 
 Syntax highlighting for Tasty styles in TypeScript, TSX, JavaScript, and JSX. Highlights color tokens, custom units, state keys, presets, and style properties inside `tasty()`, `tastyStatic()`, and related APIs.
 
+<p align="center">
+  <img src="assets/tasty-vscode-highlight.png" width="512" alt="Tasty VS Code syntax highlighting example">
+</p>
+
 ### [Cube UI Kit](https://github.com/cube-js/cube-ui-kit)
 
 Open-source React UI kit built on Tasty + React Aria. 100+ production components proving Tasty works at design-system scale. A reference implementation and a ready-to-use component library.
 
 ## Documentation
 
-- **[Runtime API (tasty)](docs/tasty.md)** — Full runtime styling documentation: component creation, state mappings, sub-elements, variants, hooks, configuration, and style property reference
+- **[Runtime API (tasty)](docs/tasty.md)** — Full runtime styling documentation: component creation, state mappings, sub-elements, variants, hooks, and configuration
+- **[Style Properties](docs/styles.md)** — Complete reference for all enhanced style properties: syntax, values, modifiers, and recommendations
 - **[Zero Runtime (tastyStatic)](docs/tasty-static.md)** — Build-time static styling: Babel plugin setup, Next.js integration, and static style patterns
+- **[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
 
 ## License
 

package/dist/config.js

@@ -1,8 +1,8 @@
-import { CUSTOM_UNITS, getGlobalFuncs, getGlobalParser, normalizeColorTokenValue, resetGlobalPredefinedTokens, setGlobalPredefinedTokens } from "./utils/styles.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 } from "./pipeline/index.js";
 
 //#region src/config.ts

package/dist/core/index.d.ts

@@ -0,0 +1,33 @@
+import { CacheMetrics, DisposeFunction, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "../injector/types.js";
+import { CSSProperties } from "../utils/css-types.js";
+import { Bucket, ParserOptions, ProcessedStyle, StyleDetails, StyleDetailsPart, UnitHandler } from "../parser/types.js";
+import { StyleParser } from "../parser/parser.js";
+import { AtRuleContext, ParsedAdvancedState, StateParserContext, createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "../states/index.js";
+import { COMPUTE_FUNC_MAP, CSSMap, CUSTOM_UNITS, ComputeModel, DIRECTIONS, ParsedColor, RawStyleHandler, STATE_OPERATORS, STATE_OPERATOR_LIST, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "../utils/styles.js";
+import { NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames } from "../styles/types.js";
+import { ConditionNode } from "../pipeline/conditions.js";
+import { ParseStateKeyOptions, parseStateKey } from "../pipeline/parseStateKey.js";
+import { RenderResult, StyleResult, isSelector, renderStyles } from "../pipeline/index.js";
+import { SheetManager } from "../injector/sheet-manager.js";
+import { StyleInjector } from "../injector/injector.js";
+import { TastyPlugin, TastyPluginFactory } from "../plugins/types.js";
+import { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "../config.js";
+import { okhslFunc, okhslPlugin } from "../plugins/okhsl-plugin.js";
+import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "../chunks/definitions.js";
+import { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "../injector/index.js";
+import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "../styles/list.js";
+import { BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, InnerStyleProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens } from "../types.js";
+import { styleHandlers } from "../styles/predefined.js";
+import "../styles/index.js";
+import { filterBaseProps } from "../utils/filter-base-props.js";
+import { color } from "../utils/colors.js";
+import { _modAttrs } from "../utils/mod-attrs.js";
+import { dotize } from "../utils/dotize.js";
+import { mergeStyles } from "../utils/merge-styles.js";
+import { resolveRecipes } from "../utils/resolve-recipes.js";
+import { deprecationWarning, warn } from "../utils/warnings.js";
+import { hslToRgbValues, processTokens, stringifyTokens } from "../utils/process-tokens.js";
+import { TypographyPreset } from "../tokens/typography.js";
+import { generateTypographyTokens } from "../utils/typography.js";
+import { tastyDebug } from "../debug.js";
+export { type AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseStyleProps, type BlockInnerStyleProps, type BlockOuterStyleProps, type BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CSSMap, type CSSProperties, CUSTOM_UNITS, CacheMetrics, type ChunkInfo, type ChunkName, type ColorStyleProps, ComputeModel, type ConditionNode, type ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, type DimensionStyleProps, DisposeFunction, FLOW_STYLES, type FlowStyleProps, type GlobalStyledProps, INNER_STYLES, InjectResult, type InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, type ModValue, type Mods, type NoType, type NotSelector, OUTER_STYLES, type OuterStyleProps, POSITION_STYLES, type ParseStateKeyOptions, type ParsedAdvancedState, ParsedColor, type ParserOptions, type PositionStyleProps, type ProcessedStyle, PropertyDefinition, PropertyOptions, type Props, RawCSSResult, RawStyleHandler, type RecipeStyles, type RenderResult, RootRegistry, RuleInfo, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, type Selector, SheetInfo, SheetManager, type ShortGridStyles, type StateParserContext, type StyleDetails, type StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, type StyleResult, StyleRule, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, type Styles, type StylesInterface, type StylesWithoutSelectors, type SuffixForSelector, TEXT_STYLES, type TagName, type TastyConfig, type TastyExtensionConfig, type TastyNamedColors, type TastyPlugin, type TastyPluginFactory, type TastyPresetNames, type TastyThemeNames, type TextStyleProps, type TokenValue, type Tokens, TypographyPreset, type UnitHandler, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tastyDebug, warn };

package/dist/core/index.js

@@ -0,0 +1,26 @@
+import { Bucket } from "../parser/types.js";
+import { StyleParser } from "../parser/parser.js";
+import { okhslFunc, okhslPlugin } from "../plugins/okhsl-plugin.js";
+import { createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "../states/index.js";
+import { hslToRgbValues, processTokens, stringifyTokens } from "../utils/process-tokens.js";
+import { COMPUTE_FUNC_MAP, CUSTOM_UNITS, DIRECTIONS, STATE_OPERATORS, STATE_OPERATOR_LIST, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "../utils/styles.js";
+import { styleHandlers } from "../styles/predefined.js";
+import { SheetManager } from "../injector/sheet-manager.js";
+import { StyleInjector } from "../injector/injector.js";
+import { parseStateKey } from "../pipeline/parseStateKey.js";
+import { isSelector, renderStyles } from "../pipeline/index.js";
+import { configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "../config.js";
+import { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from "../chunks/definitions.js";
+import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "../styles/list.js";
+import { allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "../injector/index.js";
+import { filterBaseProps } from "../utils/filter-base-props.js";
+import { color } from "../utils/colors.js";
+import { _modAttrs } from "../utils/mod-attrs.js";
+import { dotize } from "../utils/dotize.js";
+import { mergeStyles } from "../utils/merge-styles.js";
+import { resolveRecipes } from "../utils/resolve-recipes.js";
+import { deprecationWarning, warn } from "../utils/warnings.js";
+import { generateTypographyTokens } from "../utils/typography.js";
+import { tastyDebug } from "../debug.js";
+
+export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tastyDebug, warn };

package/dist/hooks/useStyles.js

@@ -5,8 +5,8 @@ import { CHUNK_NAMES, categorizeStyleKeys } from "../chunks/definitions.js";
 import { generateChunkCacheKey } from "../chunks/cacheKey.js";
 import { renderStylesForChunk } from "../chunks/renderChunk.js";
 import { allocateClassName, inject, keyframes, property } from "../injector/index.js";
-import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames } from "../keyframes/index.js";
 import { resolveRecipes } from "../utils/resolve-recipes.js";
+import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames } from "../keyframes/index.js";
 import { useInsertionEffect, useMemo, useRef } from "react";
 
 //#region src/hooks/useStyles.ts

package/dist/index.d.ts

@@ -1,38 +1,48 @@
 import { CacheMetrics, DisposeFunction, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "./injector/types.js";
-import { AtRuleContext, ParsedAdvancedState, StateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
+import { CSSProperties } from "./utils/css-types.js";
+import { Bucket, ParserOptions, ProcessedStyle, StyleDetails, StyleDetailsPart, UnitHandler } from "./parser/types.js";
+import { StyleParser } from "./parser/parser.js";
+import { AtRuleContext, ParsedAdvancedState, StateParserContext, createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
 import { COMPUTE_FUNC_MAP, CSSMap, CUSTOM_UNITS, ComputeModel, DIRECTIONS, ParsedColor, RawStyleHandler, STATE_OPERATORS, STATE_OPERATOR_LIST, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "./utils/styles.js";
 import { NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames } from "./styles/types.js";
+import { ConditionNode } from "./pipeline/conditions.js";
+import { ParseStateKeyOptions, parseStateKey } from "./pipeline/parseStateKey.js";
 import { RenderResult, StyleResult, isSelector, renderStyles } from "./pipeline/index.js";
 import { SheetManager } from "./injector/sheet-manager.js";
 import { StyleInjector } from "./injector/injector.js";
+import { TastyPlugin, TastyPluginFactory } from "./plugins/types.js";
+import { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
+import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
+import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
 import { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "./injector/index.js";
 import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
-import { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens } from "./types.js";
-import { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, tasty } from "./tasty.js";
+import { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, InnerStyleProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens } from "./types.js";
+import { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty } from "./tasty.js";
 import { UseStylesOptions, UseStylesResult, useStyles } from "./hooks/useStyles.js";
 import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
 import { useRawCSS } from "./hooks/useRawCSS.js";
 import { useKeyframes } from "./hooks/useKeyframes.js";
 import { UsePropertyOptions, useProperty } from "./hooks/useProperty.js";
-import "./hooks/index.js";
-import { TastyPlugin, TastyPluginFactory } from "./plugins/types.js";
-import { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
-import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
-import "./plugins/index.js";
-import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
-import "./chunks/index.js";
+import { getDisplayName } from "./utils/get-display-name.js";
+import { styleHandlers } from "./styles/predefined.js";
 import { filterBaseProps } from "./utils/filter-base-props.js";
 import { color } from "./utils/colors.js";
 import { _modAttrs } from "./utils/mod-attrs.js";
-import { styleHandlers } from "./styles/predefined.js";
-import "./styles/index.js";
 import { dotize } from "./utils/dotize.js";
 import { mergeStyles } from "./utils/merge-styles.js";
 import { resolveRecipes } from "./utils/resolve-recipes.js";
 import { deprecationWarning, warn } from "./utils/warnings.js";
-import { getDisplayName } from "./utils/get-display-name.js";
 import { hslToRgbValues, processTokens, stringifyTokens } from "./utils/process-tokens.js";
 import { TypographyPreset } from "./tokens/typography.js";
 import { generateTypographyTokens } from "./utils/typography.js";
 import { tastyDebug } from "./debug.js";
-export { type AllBaseProps, type AllBasePropsWithMods, type AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, type BaseStyleProps, type BlockInnerStyleProps, type BlockOuterStyleProps, type BlockStyleProps, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CSSMap, CUSTOM_UNITS, CacheMetrics, type ChunkInfo, type ChunkName, type ColorStyleProps, ComputeModel, type ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, type DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, type FlowStyleProps, type GlobalStyledProps, INNER_STYLES, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, type ModValue, type Mods, type NoType, type NotSelector, OUTER_STYLES, type OuterStyleProps, POSITION_STYLES, type ParsedAdvancedState, ParsedColor, type PositionStyleProps, PropertyDefinition, PropertyOptions, type Props, RawCSSResult, RawStyleHandler, type RecipeStyles, type RenderResult, RootRegistry, RuleInfo, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, type Selector, SheetInfo, SheetManager, type ShortGridStyles, type StateParserContext, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StylePropValue, type StyleResult, StyleRule, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, type Styles, type StylesInterface, type StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, type SuffixForSelector, TEXT_STYLES, type TagName, type TastyConfig, type TastyElementOptions, type TastyElementProps, type TastyExtensionConfig, type TastyNamedColors, type TastyPlugin, type TastyPluginFactory, type TastyPresetNames, type TastyProps, type TastyThemeNames, type TextStyleProps, type TokenValue, type Tokens, TypographyPreset, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+import "./core/index.js";
+import { CSSProperties as CSSProperties$1 } from "react";
+
+//#region src/index.d.ts
+declare module './utils/css-types' {
+  interface CSSProperties extends CSSProperties$1 {}
+}
+//#endregion
+export { type AllBaseProps, type AllBasePropsWithMods, AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CSSMap, CSSProperties, CUSTOM_UNITS, CacheMetrics, ChunkInfo, ChunkName, ColorStyleProps, ComputeModel, ConditionNode, ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParseStateKeyOptions, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, RootRegistry, RuleInfo, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, Styles, StylesInterface, StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, SuffixForSelector, TEXT_STYLES, TagName, TastyConfig, type TastyElementOptions, type TastyElementProps, TastyExtensionConfig, TastyNamedColors, TastyPlugin, TastyPluginFactory, TastyPresetNames, type TastyProps, TastyThemeNames, TextStyleProps, TokenValue, Tokens, TypographyPreset, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, type VariantMap, type WithVariant, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,30 +1,33 @@
+import { Bucket } from "./parser/types.js";
+import { StyleParser } from "./parser/parser.js";
 import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
+import { createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
 import { hslToRgbValues, processTokens, stringifyTokens } from "./utils/process-tokens.js";
 import { COMPUTE_FUNC_MAP, CUSTOM_UNITS, DIRECTIONS, STATE_OPERATORS, STATE_OPERATOR_LIST, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "./utils/styles.js";
 import { styleHandlers } from "./styles/predefined.js";
 import { SheetManager } from "./injector/sheet-manager.js";
 import { StyleInjector } from "./injector/injector.js";
-import { configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
-import { getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
+import { parseStateKey } from "./pipeline/parseStateKey.js";
 import { isSelector, renderStyles } from "./pipeline/index.js";
+import { configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
 import { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
+import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
 import { allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "./injector/index.js";
+import { filterBaseProps } from "./utils/filter-base-props.js";
+import { color } from "./utils/colors.js";
+import { _modAttrs } from "./utils/mod-attrs.js";
+import { dotize } from "./utils/dotize.js";
 import { mergeStyles } from "./utils/merge-styles.js";
 import { resolveRecipes } from "./utils/resolve-recipes.js";
+import { deprecationWarning, warn } from "./utils/warnings.js";
+import { generateTypographyTokens } from "./utils/typography.js";
+import { tastyDebug } from "./debug.js";
 import { useStyles } from "./hooks/useStyles.js";
-import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
 import { getDisplayName } from "./utils/get-display-name.js";
-import { _modAttrs } from "./utils/mod-attrs.js";
 import { Element, tasty } from "./tasty.js";
 import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
 import { useRawCSS } from "./hooks/useRawCSS.js";
 import { useKeyframes } from "./hooks/useKeyframes.js";
 import { useProperty } from "./hooks/useProperty.js";
-import { filterBaseProps } from "./utils/filter-base-props.js";
-import { color } from "./utils/colors.js";
-import { dotize } from "./utils/dotize.js";
-import { deprecationWarning, warn } from "./utils/warnings.js";
-import { generateTypographyTokens } from "./utils/typography.js";
-import { tastyDebug } from "./debug.js";
 
-export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, SheetManager, StyleInjector, TEXT_STYLES, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };

package/dist/injector/injector.js

@@ -1,6 +1,6 @@
+import { isDevEnv } from "../utils/is-dev-env.js";
 import { parseStyle } from "../utils/styles.js";
 import { colorInitialValueToRgb, getEffectiveDefinition, normalizePropertyDefinition } from "../properties/index.js";
-import { isDevEnv } from "../utils/is-dev-env.js";
 import { SheetManager } from "./sheet-manager.js";
 
 //#region src/injector/injector.ts

package/dist/parser/parser.js

@@ -1,6 +1,6 @@
-import { Lru } from "./lru.js";
 import { Bucket, finalizeGroup, finalizePart, makeEmptyDetails, makeEmptyPart } from "./types.js";
 import { classify } from "./classify.js";
+import { Lru } from "./lru.js";
 import { scan } from "./tokenizer.js";
 
 //#region src/parser/parser.ts

package/dist/pipeline/conditions.d.ts

@@ -0,0 +1,134 @@
+//#region src/pipeline/conditions.d.ts
+/**
+ * ConditionNode Types and Helpers
+ *
+ * Core data structures for representing style conditions as an abstract syntax tree.
+ * Used throughout the pipeline for parsing, simplification, and CSS generation.
+ */
+/**
+ * Base interface for all state conditions (leaf nodes)
+ */
+interface BaseStateCondition {
+  kind: 'state';
+  negated: boolean;
+  raw: string;
+  uniqueId: string;
+}
+/**
+ * Modifier condition: [data-attr] or [data-attr="value"]
+ */
+interface ModifierCondition extends BaseStateCondition {
+  type: 'modifier';
+  attribute: string;
+  value?: string;
+  operator?: '=' | '^=' | '$=' | '*=';
+}
+/**
+ * Pseudo-class condition: :hover, :focus-visible
+ */
+interface PseudoCondition extends BaseStateCondition {
+  type: 'pseudo';
+  pseudo: string;
+}
+/**
+ * Numeric bound for dimension queries
+ */
+interface NumericBound {
+  value: string;
+  valueNumeric: number | null;
+  inclusive: boolean;
+}
+/**
+ * Media query condition
+ */
+interface MediaCondition extends BaseStateCondition {
+  type: 'media';
+  subtype: 'dimension' | 'feature' | 'type';
+  dimension?: 'width' | 'height' | 'inline-size' | 'block-size';
+  lowerBound?: NumericBound;
+  upperBound?: NumericBound;
+  feature?: string;
+  featureValue?: string;
+  mediaType?: 'print' | 'screen' | 'all' | 'speech';
+}
+/**
+ * Container query condition
+ */
+interface ContainerCondition extends BaseStateCondition {
+  type: 'container';
+  subtype: 'dimension' | 'style' | 'raw';
+  containerName?: string;
+  dimension?: 'width' | 'height' | 'inline-size' | 'block-size';
+  lowerBound?: NumericBound;
+  upperBound?: NumericBound;
+  property?: string;
+  propertyValue?: string;
+  rawCondition?: string;
+}
+/**
+ * Root state condition: @root(theme=dark)
+ */
+interface RootCondition extends BaseStateCondition {
+  type: 'root';
+  innerCondition: ConditionNode;
+}
+/**
+ * Parent state condition: @parent(hovered), @parent(theme=dark, >)
+ */
+interface ParentCondition extends BaseStateCondition {
+  type: 'parent';
+  innerCondition: ConditionNode;
+  direct: boolean;
+}
+/**
+ * Own state condition: @own(hovered)
+ */
+interface OwnCondition extends BaseStateCondition {
+  type: 'own';
+  innerCondition: ConditionNode;
+}
+/**
+ * Starting style condition: @starting
+ */
+interface StartingCondition extends BaseStateCondition {
+  type: 'starting';
+}
+/**
+ * Supports query condition: @supports(display: grid), @supports($, :has(*))
+ */
+interface SupportsCondition extends BaseStateCondition {
+  type: 'supports';
+  subtype: 'feature' | 'selector';
+  condition: string;
+}
+/**
+ * Union of all state condition types
+ */
+type StateCondition = ModifierCondition | PseudoCondition | MediaCondition | ContainerCondition | RootCondition | ParentCondition | OwnCondition | StartingCondition | SupportsCondition;
+/**
+ * Compound node: combines conditions with AND/OR
+ */
+interface CompoundCondition {
+  kind: 'compound';
+  operator: 'AND' | 'OR';
+  children: ConditionNode[];
+}
+/**
+ * True condition (matches everything)
+ */
+interface TrueCondition {
+  kind: 'true';
+}
+/**
+ * False condition (matches nothing - skip this rule)
+ */
+interface FalseCondition {
+  kind: 'false';
+}
+/**
+ * Union of all condition node types
+ */
+type ConditionNode = StateCondition | CompoundCondition | TrueCondition | FalseCondition;
+//#endregion
+export { ConditionNode };
+//# sourceMappingURL=conditions.d.ts.map

package/dist/pipeline/conditions.js

@@ -137,15 +137,15 @@ function containerUniqueId(subtype, props, negated = false) {
 /**
 * Generate a normalized unique ID for a root condition
 */
-function rootUniqueId(selector, negated = false) {
-	const base = `root:${selector}`;
+function rootUniqueId(innerUniqueId, negated = false) {
+	const base = `root:${innerUniqueId}`;
 	return negated ? `!${base}` : base;
 }
 /**
 * Generate a normalized unique ID for a parent condition
 */
-function parentUniqueId(selector, direct, negated = false) {
-	const base = `parent:${direct ? ">" : ""}${selector}`;
+function parentUniqueId(innerUniqueId, direct, negated = false) {
+	const base = `parent:${direct ? ">" : ""}${innerUniqueId}`;
 	return negated ? `!${base}` : base;
 }
 /**
@@ -312,27 +312,29 @@ function createContainerRawCondition(rawCondition, containerName, negated = fals
 /**
 * Create a root condition
 */
-function createRootCondition(selector, negated = false, raw) {
+function createRootCondition(innerCondition, negated = false, raw) {
+	const innerUniqueId = getConditionUniqueId(innerCondition);
 	return {
 		kind: "state",
 		type: "root",
 		negated,
-		raw: raw || `@root(${selector})`,
-		uniqueId: rootUniqueId(selector, negated),
-		selector
+		raw: raw || `@root(${innerUniqueId})`,
+		uniqueId: rootUniqueId(innerUniqueId, negated),
+		innerCondition
 	};
 }
 /**
 * Create a parent condition
 */
-function createParentCondition(selector, direct, negated = false, raw) {
+function createParentCondition(innerCondition, direct, negated = false, raw) {
+	const innerUniqueId = getConditionUniqueId(innerCondition);
 	return {
 		kind: "state",
 		type: "parent",
 		negated,
-		raw: raw || `@parent(${selector}${direct ? " >" : ""})`,
-		uniqueId: parentUniqueId(selector, direct, negated),
-		selector,
+		raw: raw || `@parent(${innerUniqueId})`,
+		uniqueId: parentUniqueId(innerUniqueId, direct, negated),
+		innerCondition,
 		direct
 	};
 }