@cube-dev/ui-kit 0.98.9 → 0.99.1

package/types/tasty/injector/index.d.ts

@@ -1,16 +1,6 @@
-import { StyleResult } from '../utils/renderStyles';
+import { StyleResult } from '../pipeline';
 import { StyleInjector } from './injector';
 import { GlobalInjectResult, InjectResult, StyleInjectorConfig } from './types';
-declare const GLOBAL_INJECTOR_KEY = "__TASTY_GLOBAL_INJECTOR__";
-declare global {
-    interface Window {
-        [GLOBAL_INJECTOR_KEY]?: StyleInjector;
-    }
-}
-/**
- * Configure the global style injector
- */
-export declare function configure(config?: Partial<StyleInjectorConfig>): void;
 /**
  * Allocate a className for a cacheKey without injecting styles yet
  */
@@ -33,6 +23,34 @@ export declare function inject(rules: StyleResult[], options?: {
 export declare function injectGlobal(rules: StyleResult[], options?: {
     root?: Document | ShadowRoot;
 }): GlobalInjectResult;
+/**
+ * Inject raw CSS text directly without parsing
+ * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
+ * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
+ *
+ * @example
+ * ```tsx
+ * // Inject raw CSS
+ * const { dispose } = injectRawCSS(`
+ *   body { margin: 0; padding: 0; }
+ *   .my-class { color: red; }
+ * `);
+ *
+ * // Later, remove the injected CSS
+ * dispose();
+ * ```
+ */
+export declare function injectRawCSS(css: string, options?: {
+    root?: Document | ShadowRoot;
+}): {
+    dispose: () => void;
+};
+/**
+ * Get raw CSS text for SSR
+ */
+export declare function getRawCSSText(options?: {
+    root?: Document | ShadowRoot;
+}): string;
 /**
  * Inject keyframes and return object with toString() and dispose()
  */
@@ -75,13 +93,6 @@ export declare function destroy(root?: Document | ShadowRoot): void;
  * Create a new isolated injector instance
  */
 export declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
-/**
- * Create a global style component like styled-components createGlobalStyle
- * Returns a React component that injects global styles when mounted and cleans up when unmounted
- */
-export declare function createGlobalStyle<Props = {}>(strings: TemplateStringsArray, ...interpolations: Array<string | number | ((props: Props) => string | number)>): import('react').ComponentType<Props & {
-    root?: Document | ShadowRoot;
-}>;
-export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, StyleRule, KeyframesInfo, KeyframesResult, KeyframesSteps, KeyframesCacheEntry, CacheMetrics, } from './types';
+export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, StyleRule, KeyframesInfo, KeyframesResult, KeyframesSteps, KeyframesCacheEntry, CacheMetrics, RawCSSResult, } from './types';
 export { StyleInjector } from './injector';
 export { SheetManager } from './sheet-manager';

package/types/tasty/injector/injector.d.ts

@@ -2,9 +2,8 @@
  * Style injector that works with structured style objects
  * Eliminates CSS string parsing for better performance
  */
-import { StyleResult } from '../utils/renderStyles';
-import { GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, StyleInjectorConfig } from './types';
-import type { ComponentType } from 'react';
+import { StyleResult } from '../pipeline';
+import { GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, RawCSSResult, StyleInjectorConfig } from './types';
 export declare class StyleInjector {
     private sheetManager;
     private config;
@@ -37,11 +36,19 @@ export declare class StyleInjector {
         root?: Document | ShadowRoot;
     }): GlobalInjectResult;
     /**
-     * Inject styles from createGlobalStyle (separate from injectGlobal for tracking)
+     * Inject raw CSS text directly without parsing
+     * This is a low-overhead alternative to createGlobalStyle for raw CSS
+     * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking
      */
-    injectCreateGlobalStyle(rules: StyleResult[], options?: {
+    injectRawCSS(css: string, options?: {
         root?: Document | ShadowRoot;
-    }): GlobalInjectResult;
+    }): RawCSSResult;
+    /**
+     * Get raw CSS text for SSR
+     */
+    getRawCSSText(options?: {
+        root?: Document | ShadowRoot;
+    }): string;
     /**
      * Dispose of a className
      */
@@ -94,6 +101,12 @@ export declare class StyleInjector {
     }): boolean;
     /**
      * Inject keyframes and return object with toString() and dispose()
+     *
+     * Keyframes are cached by content (steps). If the same content is injected
+     * multiple times with different provided names, the first injected name is reused.
+     *
+     * If the same name is provided with different content (collision), a unique
+     * name is generated to avoid overwriting the existing keyframes.
      */
     keyframes(steps: KeyframesSteps, nameOrOptions?: string | {
         root?: Document | ShadowRoot;
@@ -107,11 +120,4 @@ export declare class StyleInjector {
      * Destroy all resources for a root
      */
     destroy(root?: Document | ShadowRoot): void;
-    /**
-     * Create a global style component like styled-components createGlobalStyle
-     * Returns a React component that injects global styles when mounted and cleans up when unmounted
-     */
-    createGlobalStyle<Props = {}>(strings: TemplateStringsArray, ...interpolations: Array<string | number | ((props: Props) => string | number)>): ComponentType<Props & {
-        root?: Document | ShadowRoot;
-    }>;
 }

package/types/tasty/injector/sheet-manager.d.ts

@@ -1,7 +1,13 @@
-import { CacheMetrics, KeyframesInfo, KeyframesSteps, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from './types';
+import { CacheMetrics, KeyframesInfo, KeyframesSteps, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from './types';
 export declare class SheetManager {
     private rootRegistries;
     private config;
+    /** Dedicated style elements for raw CSS per root */
+    private rawStyleElements;
+    /** Tracking for raw CSS blocks per root */
+    private rawCSSBlocks;
+    /** Counter for generating unique raw CSS IDs */
+    private rawCSSCounter;
     constructor(config: StyleInjectorConfig);
     /**
      * Get or create registry for a root (Document or ShadowRoot)
@@ -95,4 +101,22 @@ export declare class SheetManager {
      * Clean up resources for a root
      */
     cleanup(root: Document | ShadowRoot): void;
+    /**
+     * Get or create a dedicated style element for raw CSS
+     * Raw CSS is kept separate from tasty-managed sheets to avoid index conflicts
+     */
+    private getOrCreateRawStyleElement;
+    /**
+     * Inject raw CSS text directly without parsing
+     * Returns a dispose function to remove the injected CSS
+     */
+    injectRawCSS(css: string, root: Document | ShadowRoot): RawCSSResult;
+    /**
+     * Remove a raw CSS block by ID
+     */
+    private disposeRawCSS;
+    /**
+     * Get the raw CSS content for SSR
+     */
+    getRawCSSText(root: Document | ShadowRoot): string;
 }

package/types/tasty/injector/types.d.ts

@@ -26,6 +26,12 @@ export interface StyleInjectorConfig {
      * Helps avoid races during rapid mount/unmount cycles. Default: 10000ms.
      */
     unusedStylesMinAgeMs?: number;
+    /**
+     * Global predefined states for advanced state mapping.
+     * These are state aliases that can be used in any component.
+     * Example: { '@mobile': '@media(w < 920px)', '@dark': '@root(theme=dark)' }
+     */
+    states?: Record<string, string>;
 }
 export interface RuleInfo {
     className: string;
@@ -76,8 +82,10 @@ export interface RootRegistry {
     metrics?: CacheMetrics;
     /** Counter for generating sequential class names like t0, t1, t2... */
     classCounter: number;
-    /** Keyframes cache by JSON.stringify(steps) -> entry */
+    /** Keyframes cache by content hash -> entry */
     keyframesCache: Map<string, KeyframesCacheEntry>;
+    /** Keyframes name to content hash mapping for collision detection */
+    keyframesNameToContent: Map<string, string>;
     /** Counter for generating keyframes names like k0, k1, k2... */
     keyframesCounter: number;
     /** Set of injected @property names for tracking */
@@ -85,7 +93,7 @@ export interface RootRegistry {
     /** Global rules tracking for index adjustment */
     globalRules: Map<string, RuleInfo>;
 }
-export type StyleRule = import('../utils/renderStyles').StyleResult;
+export type StyleRule = import('../pipeline').StyleResult;
 export interface KeyframesInfo {
     name: string;
     sheetIndex: number;
@@ -104,3 +112,16 @@ export interface KeyframesCacheEntry {
     refCount: number;
     info: KeyframesInfo;
 }
+export interface RawCSSInfo {
+    /** Unique identifier for this raw CSS block */
+    id: string;
+    /** The raw CSS text */
+    css: string;
+    /** Start offset in the style element's textContent */
+    startOffset: number;
+    /** End offset in the style element's textContent */
+    endOffset: number;
+}
+export interface RawCSSResult {
+    dispose: () => void;
+}

package/types/tasty/keyframes/index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Keyframes Utilities
+ *
+ * Optimized utilities for extracting and processing keyframes in styles.
+ * Designed for zero overhead when no keyframes are used.
+ */
+import { KeyframesSteps } from '../injector/types';
+import { Styles } from '../styles/types';
+/**
+ * Check if styles object has local @keyframes definition.
+ * Fast path: single property lookup.
+ */
+export declare function hasLocalKeyframes(styles: Styles): boolean;
+/**
+ * Extract local @keyframes from styles object.
+ * Returns null if no local keyframes (fast path).
+ */
+export declare function extractLocalKeyframes(styles: Styles): Record<string, KeyframesSteps> | null;
+/**
+ * Merge local and global keyframes.
+ * Local keyframes take priority over global.
+ * Returns null if no keyframes exist (fast path).
+ */
+export declare function mergeKeyframes(local: Record<string, KeyframesSteps> | null, global: Record<string, KeyframesSteps> | null): Record<string, KeyframesSteps> | null;
+/**
+ * Get merged keyframes for styles (local + global).
+ * Returns null if no keyframes defined anywhere (fast path).
+ */
+export declare function getKeyframesForStyles(styles: Styles): Record<string, KeyframesSteps> | null;
+/**
+ * Extract all animation names referenced in styles.
+ * Scans 'animation' and 'animationName' properties including in state mappings.
+ * Returns empty set if no animation properties found (fast path).
+ */
+export declare function extractAnimationNamesFromStyles(styles: Styles): Set<string>;
+/**
+ * Replace animation names in CSS declarations with injected names.
+ * Optimized to avoid regex creation - uses simple string replacement.
+ *
+ * @param declarations CSS declarations string
+ * @param nameMap Map from original name to injected name (only contains names that differ)
+ * @returns Updated declarations string
+ */
+export declare function replaceAnimationNames(declarations: string, nameMap: Map<string, string>): string;
+/**
+ * Filter keyframes to only those that are actually used.
+ * Returns null if no keyframes are used (fast path).
+ */
+export declare function filterUsedKeyframes(keyframes: Record<string, KeyframesSteps> | null, usedNames: Set<string>): Record<string, KeyframesSteps> | null;

package/types/tasty/parser/parser.d.ts

@@ -7,5 +7,9 @@ export declare class StyleParser {
     setFuncs(funcs: Required<ParserOptions>['funcs']): void;
     setUnits(units: Required<ParserOptions>['units']): void;
     updateOptions(patch: Partial<ParserOptions>): void;
+    /**
+     * Get the current units configuration.
+     */
+    getUnits(): ParserOptions['units'];
 }
 export type { StyleDetails, ProcessedStyle } from './types';

package/types/tasty/parser/types.d.ts

@@ -4,6 +4,7 @@ export declare enum Bucket {
     Mod = 2
 }
 export interface StyleDetails {
+    input: string;
     output: string;
     mods: string[];
     values: string[];

package/types/tasty/pipeline/conditions.d.ts

@@ -0,0 +1,243 @@
+/**
+ * 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"]
+ */
+export interface ModifierCondition extends BaseStateCondition {
+    type: 'modifier';
+    attribute: string;
+    value?: string;
+    operator?: '=' | '^=' | '$=' | '*=';
+}
+/**
+ * Pseudo-class condition: :hover, :focus-visible
+ */
+export interface PseudoCondition extends BaseStateCondition {
+    type: 'pseudo';
+    pseudo: string;
+}
+/**
+ * Numeric bound for dimension queries
+ */
+export interface NumericBound {
+    value: string;
+    valueNumeric: number | null;
+    inclusive: boolean;
+}
+/**
+ * Media query condition
+ */
+export 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
+ */
+export interface ContainerCondition extends BaseStateCondition {
+    type: 'container';
+    subtype: 'dimension' | 'style';
+    containerName?: string;
+    dimension?: 'width' | 'height' | 'inline-size' | 'block-size';
+    lowerBound?: NumericBound;
+    upperBound?: NumericBound;
+    property?: string;
+    propertyValue?: string;
+}
+/**
+ * Root state condition: @root(theme=dark)
+ */
+export interface RootCondition extends BaseStateCondition {
+    type: 'root';
+    selector: string;
+}
+/**
+ * Own state condition: @own(hovered)
+ */
+export interface OwnCondition extends BaseStateCondition {
+    type: 'own';
+    innerCondition: ConditionNode;
+}
+/**
+ * Starting style condition: @starting
+ */
+export interface StartingCondition extends BaseStateCondition {
+    type: 'starting';
+}
+/**
+ * Supports query condition: @supports(display: grid), @supports($, :has(*))
+ */
+export interface SupportsCondition extends BaseStateCondition {
+    type: 'supports';
+    subtype: 'feature' | 'selector';
+    condition: string;
+}
+/**
+ * Union of all state condition types
+ */
+export type StateCondition = ModifierCondition | PseudoCondition | MediaCondition | ContainerCondition | RootCondition | OwnCondition | StartingCondition | SupportsCondition;
+/**
+ * Compound node: combines conditions with AND/OR
+ */
+export interface CompoundCondition {
+    kind: 'compound';
+    operator: 'AND' | 'OR';
+    children: ConditionNode[];
+}
+/**
+ * True condition (matches everything)
+ */
+export interface TrueCondition {
+    kind: 'true';
+}
+/**
+ * False condition (matches nothing - skip this rule)
+ */
+export interface FalseCondition {
+    kind: 'false';
+}
+/**
+ * Union of all condition node types
+ */
+export type ConditionNode = StateCondition | CompoundCondition | TrueCondition | FalseCondition;
+/**
+ * Create a TRUE condition (matches everything)
+ */
+export declare function trueCondition(): TrueCondition;
+/**
+ * Create a FALSE condition (matches nothing)
+ */
+export declare function falseCondition(): FalseCondition;
+/**
+ * Create an AND compound condition
+ */
+export declare function and(...children: ConditionNode[]): ConditionNode;
+/**
+ * Create an OR compound condition
+ */
+export declare function or(...children: ConditionNode[]): ConditionNode;
+/**
+ * Negate a condition
+ */
+export declare function not(node: ConditionNode): ConditionNode;
+/**
+ * Check if a condition is a compound condition
+ */
+export declare function isCompoundCondition(node: ConditionNode): node is CompoundCondition;
+/**
+ * Generate a normalized unique ID for a modifier condition
+ */
+export declare function modifierUniqueId(attribute: string, value?: string, operator?: string, negated?: boolean): string;
+/**
+ * Generate a normalized unique ID for a pseudo condition
+ */
+export declare function pseudoUniqueId(pseudo: string, negated?: boolean): string;
+/**
+ * Generate a normalized unique ID for a media condition
+ */
+export declare function mediaUniqueId(subtype: 'dimension' | 'feature' | 'type', props: {
+    dimension?: string;
+    lowerBound?: NumericBound;
+    upperBound?: NumericBound;
+    feature?: string;
+    featureValue?: string;
+    mediaType?: string;
+}, negated?: boolean): string;
+/**
+ * Generate a normalized unique ID for a container condition
+ */
+export declare function containerUniqueId(subtype: 'dimension' | 'style', props: {
+    containerName?: string;
+    dimension?: string;
+    lowerBound?: NumericBound;
+    upperBound?: NumericBound;
+    property?: string;
+    propertyValue?: string;
+}, negated?: boolean): string;
+/**
+ * Generate a normalized unique ID for a root condition
+ */
+export declare function rootUniqueId(selector: string, negated?: boolean): string;
+/**
+ * Generate a normalized unique ID for an own condition
+ */
+export declare function ownUniqueId(innerUniqueId: string, negated?: boolean): string;
+/**
+ * Generate a normalized unique ID for a starting condition
+ */
+export declare function startingUniqueId(negated?: boolean): string;
+/**
+ * Generate a normalized unique ID for a supports condition
+ */
+export declare function supportsUniqueId(subtype: 'feature' | 'selector', condition: string, negated?: boolean): string;
+/**
+ * Create a modifier condition
+ */
+export declare function createModifierCondition(attribute: string, value?: string, operator?: '=' | '^=' | '$=' | '*=', negated?: boolean, raw?: string): ModifierCondition;
+/**
+ * Create a pseudo condition
+ */
+export declare function createPseudoCondition(pseudo: string, negated?: boolean, raw?: string): PseudoCondition;
+/**
+ * Create a media dimension condition
+ */
+export declare function createMediaDimensionCondition(dimension: 'width' | 'height' | 'inline-size' | 'block-size', lowerBound?: NumericBound, upperBound?: NumericBound, negated?: boolean, raw?: string): MediaCondition;
+/**
+ * Create a media feature condition
+ */
+export declare function createMediaFeatureCondition(feature: string, featureValue?: string, negated?: boolean, raw?: string): MediaCondition;
+/**
+ * Create a media type condition
+ */
+export declare function createMediaTypeCondition(mediaType: 'print' | 'screen' | 'all' | 'speech', negated?: boolean, raw?: string): MediaCondition;
+/**
+ * Create a container dimension condition
+ */
+export declare function createContainerDimensionCondition(dimension: 'width' | 'height' | 'inline-size' | 'block-size', lowerBound?: NumericBound, upperBound?: NumericBound, containerName?: string, negated?: boolean, raw?: string): ContainerCondition;
+/**
+ * Create a container style condition
+ */
+export declare function createContainerStyleCondition(property: string, propertyValue?: string, containerName?: string, negated?: boolean, raw?: string): ContainerCondition;
+/**
+ * Create a root condition
+ */
+export declare function createRootCondition(selector: string, negated?: boolean, raw?: string): RootCondition;
+/**
+ * Create an own condition
+ */
+export declare function createOwnCondition(innerCondition: ConditionNode, negated?: boolean, raw?: string): OwnCondition;
+/**
+ * Create a starting condition
+ */
+export declare function createStartingCondition(negated?: boolean, raw?: string): StartingCondition;
+/**
+ * Create a supports condition
+ *
+ * @param subtype 'feature' for @supports(display: grid), 'selector' for @supports($, :has(*))
+ * @param condition The condition string (e.g., "display: grid" or ":has(*)")
+ */
+export declare function createSupportsCondition(subtype: 'feature' | 'selector', condition: string, negated?: boolean, raw?: string): SupportsCondition;
+/**
+ * Get the unique ID for any condition node
+ */
+export declare function getConditionUniqueId(node: ConditionNode): string;
+export {};

package/types/tasty/pipeline/exclusive.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Exclusive Condition Builder
+ *
+ * Transforms parsed style entries into exclusive conditions.
+ * Each entry's condition is ANDed with the negation of all higher-priority conditions,
+ * ensuring exactly one condition matches at any given time.
+ */
+import { StyleValue } from '../utils/styles';
+import { ConditionNode } from './conditions';
+/**
+ * Parsed style entry with condition
+ */
+export interface ParsedStyleEntry {
+    styleKey: string;
+    stateKey: string;
+    value: StyleValue;
+    condition: ConditionNode;
+    priority: number;
+}
+/**
+ * Style entry with exclusive condition
+ */
+export interface ExclusiveStyleEntry extends ParsedStyleEntry {
+    exclusiveCondition: ConditionNode;
+}
+/**
+ * Build exclusive conditions for a list of parsed style entries.
+ *
+ * The entries should be ordered by priority (highest priority first).
+ *
+ * For each entry, we compute:
+ *   exclusiveCondition = condition & !prior[0] & !prior[1] & ...
+ *
+ * This ensures exactly one condition matches at any time.
+ *
+ * Example:
+ *   Input (ordered highest to lowest priority):
+ *     A: value1 (priority 2)
+ *     B: value2 (priority 1)
+ *     C: value3 (priority 0)
+ *
+ *   Output:
+ *     A: A
+ *     B: B & !A
+ *     C: C & !A & !B
+ *
+ * @param entries Parsed style entries ordered by priority (highest first)
+ * @returns Entries with exclusive conditions, filtered to remove impossible ones
+ */
+export declare function buildExclusiveConditions(entries: ParsedStyleEntry[]): ExclusiveStyleEntry[];
+/**
+ * Parse style entries from a value mapping object.
+ *
+ * @param styleKey The style key (e.g., 'padding')
+ * @param valueMap The value mapping { '': '2x', 'compact': '1x', '@media(w < 768px)': '0.5x' }
+ * @param parseCondition Function to parse state keys into conditions
+ * @returns Parsed entries ordered by priority (highest first)
+ */
+export declare function parseStyleEntries(styleKey: string, valueMap: Record<string, StyleValue>, parseCondition: (stateKey: string) => ConditionNode): ParsedStyleEntry[];
+/**
+ * Check if a value is a style value mapping (object with state keys)
+ */
+export declare function isValueMapping(value: StyleValue | Record<string, StyleValue>): value is Record<string, StyleValue>;
+/**
+ * Expand OR conditions in parsed entries into multiple exclusive entries.
+ *
+ * For an entry with condition `A | B | C`, this creates 3 entries:
+ *   - condition: A
+ *   - condition: B & !A
+ *   - condition: C & !A & !B
+ *
+ * This ensures OR branches are mutually exclusive BEFORE the main
+ * exclusive condition building pass.
+ *
+ * @param entries Parsed entries (may contain OR conditions)
+ * @returns Expanded entries with OR branches made exclusive
+ */
+export declare function expandOrConditions(entries: ParsedStyleEntry[]): ParsedStyleEntry[];
+/**
+ * Expand OR conditions in exclusive entries AFTER buildExclusiveConditions.
+ *
+ * This handles ORs that arise from De Morgan expansion during negation:
+ *   !(A & B) = !A | !B
+ *
+ * These ORs need to be made exclusive to avoid overlapping CSS rules:
+ *   !A | !B  →  !A | (A & !B)
+ *
+ * This is logically equivalent but ensures each branch has proper context.
+ *
+ * Example:
+ *   Input: { "": V1, "@supports(...) & :has()": V2 }
+ *   V2's exclusive = @supports & :has
+ *   V1's exclusive = !(@supports & :has) = !@supports | !:has
+ *
+ *   Without this fix: V1 gets two rules:
+ *     - @supports (not ...) → V1  ✓
+ *     - :not(:has()) → V1  ✗ (missing @supports context!)
+ *
+ *   With this fix: V1 gets two exclusive rules:
+ *     - @supports (not ...) → V1  ✓
+ *     - @supports (...) { :not(:has()) } → V1  ✓ (proper context!)
+ */
+export declare function expandExclusiveOrs(entries: ExclusiveStyleEntry[]): ExclusiveStyleEntry[];