@cube-dev/ui-kit 0.0.0-canary-0f4773b → 0.0.0-canary-458bf0e

package/es/tasty/utils/renderStyles.js

@@ -1,74 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-0f4773b
+ * @cube-dev/ui-kit v0.0.0-canary-458bf0e
  * Released under the MIT license.
  */
 
-/**
- * Style rendering that works with structured style objects
- * Eliminates CSS string parsing for better performance
- */
 import { createStyle, STYLE_HANDLER_MAP } from '../styles';
-import { mediaWrapper, normalizeStyleZones, pointsToZones, } from './responsive';
-import { computeState, getModSelector, styleStateMapToStyleStateDataList, } from './styles';
-// Detect if a value is a state map whose entries contain responsive arrays
-function stateMapHasResponsiveArrays(value) {
-    if (!value || typeof value !== 'object' || Array.isArray(value))
-        return false;
-    return Object.values(value).some((v) => Array.isArray(v));
-}
-// Convert a state-map-of-arrays into an array-of-state-maps of length zoneNumber
-// Example:
-//   { '': ['1x', '2x'], large: [null, '3x'] } →
-//   [ { '': '1x', large: null }, { '': '2x', large: '3x' } ]
-function stateMapToArrayOfStateMaps(value, zoneNumber) {
-    const result = Array.from({ length: zoneNumber }, () => ({}));
-    for (const [state, stateValue] of Object.entries(value)) {
-        const perZone = Array.isArray(stateValue)
-            ? normalizeStyleZones(stateValue, zoneNumber)
-            : Array(zoneNumber).fill(stateValue);
-        for (let i = 0; i < zoneNumber; i++) {
-            const v = perZone[i];
-            // Always include the state in the result, even if null or empty
-            // This preserves the state structure across all breakpoints
-            result[i][state] = v;
-        }
-    }
-    return result;
-}
-// Normalize an array that may contain plain values and/or state maps into
-// an array-of-state-maps of fixed length zoneNumber with propagation.
-// Example:
-//   ['1x', { '': '1x', large: '2x' }] (zoneNumber=2) →
-//   [ { '': '1x' }, { '': '1x', large: '2x' } ]
-function normalizeArrayWithStateMaps(valueArray, zoneNumber) {
-    const propagated = normalizeStyleZones(valueArray, zoneNumber);
-    return propagated.map((entry) => {
-        if (entry && typeof entry === 'object' && !Array.isArray(entry)) {
-            return entry;
-        }
-        return { '': entry };
-    });
-}
-// Normalize selector suffixes coming from `$` in style handler results.
-// Some legacy handlers return suffixes starting with `&` (e.g. '& > *').
-// The renderer expects suffixes without the ampersand because it adds
-// the parent selector during materialization.
-function normalizeDollarSelectorSuffix(suffix) {
-    if (!suffix)
-        return '';
-    return suffix.startsWith('&') ? suffix.slice(1) : suffix;
-}
-/**
- * Check if a key represents a CSS selector
- */
+import { mediaWrapper, normalizeStyleZones } from './responsive';
 export function isSelector(key) {
-    return (key.startsWith('&') || key.startsWith('.') || key.match(/^[A-Z]/) !== null);
+    return key.startsWith('&') || key.startsWith('.') || key.match(/^[A-Z]/);
 }
-/**
- * Get the selector suffix for a key
- */
 function getSelector(key) {
     if (key.startsWith('&')) {
         return key.slice(1);
@@ -81,258 +22,41 @@ function getSelector(key) {
     }
     return null;
 }
-function parseAttributeSelector(selector) {
-    // Match patterns like [data-size="medium"] or [data-is-selected]
-    const match = selector.match(/^\[([^=\]]+)(?:="([^"]+)")?\]$/);
-    if (!match)
-        return null;
-    return {
-        attribute: match[1],
-        value: match[2] || 'true', // Handle boolean attributes
-        fullSelector: selector,
-    };
-}
-function hasConflictingAttributeSelectors(mods) {
-    const attributeMap = new Map();
-    for (const mod of mods) {
-        const parsed = parseAttributeSelector(mod);
-        if (parsed && parsed.value !== 'true') {
-            if (!attributeMap.has(parsed.attribute)) {
-                attributeMap.set(parsed.attribute, []);
-            }
-            attributeMap.get(parsed.attribute).push(parsed.value);
-        }
-    }
-    // Check if any attribute has multiple values
-    for (const values of attributeMap.values()) {
-        if (values.length > 1)
-            return true;
-    }
-    return false;
-}
-function optimizeNotSelectors(currentMods, allMods) {
-    const attributeMap = new Map();
-    const currentAttributeMap = new Map();
-    // Build map of all possible values for each attribute
-    for (const mod of allMods) {
-        const parsed = parseAttributeSelector(mod);
-        if (parsed && parsed.value !== 'true') {
-            if (!attributeMap.has(parsed.attribute)) {
-                attributeMap.set(parsed.attribute, new Set());
-            }
-            attributeMap.get(parsed.attribute).add(parsed.value);
-        }
-    }
-    // Build map of current mod attribute values
-    for (const mod of currentMods) {
-        const parsed = parseAttributeSelector(mod);
-        if (parsed && parsed.value !== 'true') {
-            currentAttributeMap.set(parsed.attribute, parsed.value);
-        }
-    }
-    const notMods = allMods.filter((mod) => !currentMods.includes(mod));
-    const optimizedNotMods = [];
-    for (const mod of notMods) {
-        const parsed = parseAttributeSelector(mod);
-        if (parsed && parsed.value !== 'true') {
-            // If we already have a value for this attribute, skip this not selector
-            // because it's already mutually exclusive
-            if (currentAttributeMap.has(parsed.attribute)) {
-                continue;
-            }
-        }
-        optimizedNotMods.push(mod);
-    }
-    return optimizedNotMods;
-}
-/**
- * Explode a style handler result into logical rules with proper mapping
- * Phase 1: Handler fan-out ($ selectors, arrays)
- * Phase 2: Responsive fan-out (breakpoint arrays)
- * Phase 3: Rule materialization
- */
-function explodeHandlerResult(result, zones, selectorSuffix = '', forceBreakpointIdx, responsiveOrigin = false) {
-    if (!result)
-        return [];
-    // Phase 1: Handler fan-out - normalize to array
-    const resultArray = Array.isArray(result) ? result : [result];
-    const logicalRules = [];
-    for (const item of resultArray) {
-        if (!item || typeof item !== 'object')
-            continue;
-        const { $, css, ...styleProps } = item;
-        // Phase 2: Responsive fan-out - handle array values
-        const breakpointGroups = new Map();
-        if (forceBreakpointIdx !== undefined) {
-            // When breakpoint is forced (from responsive processing), use all props for that breakpoint
-            const group = {};
-            for (const [prop, value] of Object.entries(styleProps)) {
-                if (value != null && value !== '') {
-                    group[prop] = String(value);
-                }
-            }
-            if (Object.keys(group).length > 0) {
-                breakpointGroups.set(forceBreakpointIdx, group);
-            }
-        }
-        else {
-            // Normal processing - handle responsive arrays
-            const responsiveProps = [];
-            for (const [prop, value] of Object.entries(styleProps)) {
-                if (Array.isArray(value)) {
-                    // Responsive array - create entry for each breakpoint
-                    value.forEach((val, idx) => {
-                        if (val != null && val !== '' && idx < zones.length) {
-                            responsiveProps.push({ prop, value: val, breakpointIdx: idx });
-                        }
-                    });
-                }
-                else if (value != null && value !== '') {
-                    // Single value - goes to base breakpoint
-                    responsiveProps.push({ prop, value, breakpointIdx: 0 });
-                }
-            }
-            // Group by breakpoint index
-            for (const { prop, value, breakpointIdx } of responsiveProps) {
-                const group = breakpointGroups.get(breakpointIdx) || {};
-                group[prop] = String(value);
-                breakpointGroups.set(breakpointIdx, group);
-            }
-        }
-        // Handle raw CSS if present (add to base breakpoint)
-        if (css && typeof css === 'string') {
-            const baseGroup = breakpointGroups.get(0) || {};
-            // For now, we'll add raw CSS as a special property
-            // This is a limitation - raw CSS should be parsed properly
-            baseGroup['--raw-css'] = css;
-            breakpointGroups.set(0, baseGroup);
-        }
-        // Phase 3: Selector fan-out - handle $ suffixes
-        // IMPORTANT: If we are already in a pseudo-element context (contains '::'),
-        // CSS does not allow further descendant/child selectors (e.g., '>*') after
-        // a pseudo-element. In such cases we must ignore only the `$`-derived
-        // selectors while still preserving base declarations for the current
-        // selector. Previously this branch returned early and accidentally dropped
-        // all declarations computed before, including valid base ones.
-        const inPseudoElementContext = selectorSuffix.includes('::');
-        if (inPseudoElementContext && $) {
-            // Skip this item entirely to avoid producing invalid selectors like
-            // `.t0::before>*`. Other items (without $) in the same handler result
-            // will still be processed and preserved.
-            continue;
-        }
-        const suffixes = $
-            ? (Array.isArray($) ? $ : [$]).map((s) => selectorSuffix + normalizeDollarSelectorSuffix(String(s)))
-            : [selectorSuffix];
-        // Create logical rules for each breakpoint × selector combination
-        for (const [breakpointIdx, declarations] of breakpointGroups) {
-            if (Object.keys(declarations).length === 0)
-                continue;
-            for (const suffix of suffixes) {
-                logicalRules.push({
-                    selectorSuffix: suffix,
-                    breakpointIdx,
-                    declarations,
-                    responsiveSource: responsiveOrigin || forceBreakpointIdx !== undefined,
-                });
-            }
-        }
-    }
-    return logicalRules;
-}
-/**
- * Convert handler result (CSSMap) to CSS string for global injection
- */
-function convertHandlerResultToCSS(result, selectorSuffix = '') {
-    if (!result)
-        return '';
-    if (Array.isArray(result)) {
-        return result.reduce((css, item) => {
-            return css + convertHandlerResultToCSS(item, selectorSuffix);
-        }, '');
-    }
-    const { $, css, ...styleProps } = result;
-    let renderedStyles = Object.keys(styleProps).reduce((styleList, styleName) => {
-        const value = styleProps[styleName];
-        if (Array.isArray(value)) {
-            return (styleList +
-                value.reduce((css, val) => {
-                    if (val) {
-                        return css + `${styleName}: ${val};\n`;
-                    }
-                    return css;
-                }, ''));
-        }
-        if (value) {
-            return `${styleList}${styleName}: ${value};\n`;
-        }
-        return styleList;
-    }, '');
-    if (css) {
-        renderedStyles = css + '\n' + renderedStyles;
-    }
-    if (!renderedStyles) {
-        return '';
-    }
-    const finalSelectorSuffix = selectorSuffix || '';
-    if (Array.isArray($)) {
-        return $.reduce((rend, suffix) => {
-            const normalized = suffix
-                ? normalizeDollarSelectorSuffix(String(suffix))
-                : '';
-            return (rend + `&${finalSelectorSuffix}${normalized}{\n${renderedStyles}}\n`);
-        }, '');
-    }
-    const normalizedSingle = $ ? normalizeDollarSelectorSuffix(String($)) : '';
-    return `&${finalSelectorSuffix}${normalizedSingle}{\n${renderedStyles}}\n`;
-}
-/**
- * Convert logical rules to final StyleResult format
- */
-function materializeRules(logicalRules, className, zones) {
-    return logicalRules.map((rule) => {
-        const selector = `.${className}${rule.selectorSuffix}`;
-        const declarations = Object.entries(rule.declarations)
-            .filter(([key]) => key !== '--raw-css') // Skip raw CSS for now
-            .map(([prop, value]) => `${prop}: ${value};`)
-            .join(' ');
-        const q = rule.breakpointIdx > 0
-            ? zones[rule.breakpointIdx]?.mediaQuery
-            : rule.responsiveSource
-                ? zones[0]?.mediaQuery
-                : undefined;
-        const atRules = q ? [`@media ${q}`] : undefined;
-        return {
-            selector,
-            declarations,
-            atRules,
-        };
-    });
-}
+/** Props level cache for `renderStyles` function. */
+let STYLE_CACHE = {};
+/** Current size of the cache. */
+let STYLE_CACHE_COUNT = 0;
+/** Cache limit. */
+const CACHE_LIMIT = 1000;
 /**
- * Render styles without CSS string conversion
- * This is a performance-optimized version of renderStyles
+ * Render style props to complete Styled Components CSS.
+ * @param styles - Complete style props.
+ * @param responsive - A list of responsive zones
+ * @param {string} [suffix]
+ * @return {string}
  */
-export function renderStyles(styles, responsive = [], className = 'unknown') {
-    if (!styles) {
-        return { rules: [] };
-    }
-    const zones = pointsToZones(responsive || []);
-    // Collect all logical rules
-    const allLogicalRules = [];
-    // Process styles recursively, preserving mod selectors and combining with nested selector suffixes
-    function processStyles(currentStyles, parentSuffix = '') {
-        const keys = Object.keys(currentStyles || {});
+export function renderStyles(styles, responsive = [], suffix) {
+    const zones = responsive;
+    const responsiveStyles = Array.from(Array(zones.length)).map(() => '');
+    const cacheKey = JSON.stringify({ s: styles, r: responsive, suffix });
+    let rawStyles = '';
+    const handlerQueue = [];
+    if (!STYLE_CACHE[cacheKey]) {
+        STYLE_CACHE_COUNT++;
+        // clear cache if size is more that the limit
+        if (STYLE_CACHE_COUNT > CACHE_LIMIT) {
+            STYLE_CACHE_COUNT = 0;
+            STYLE_CACHE = {};
+        }
+        const keys = styles ? Object.keys(styles) : [];
         const selectorKeys = keys.filter((key) => isSelector(key));
-        // Recurse into nested selectors first to compute proper suffix chaining
-        for (const key of selectorKeys) {
-            const suffix = getSelector(key);
-            if (suffix && currentStyles[key]) {
-                processStyles(currentStyles[key], `${parentSuffix}${suffix}`);
-            }
+        let innerStyles = '';
+        if (selectorKeys.length) {
+            selectorKeys.forEach((key) => {
+                const addSuffix = getSelector(key);
+                innerStyles += renderStyles(styles?.[key], responsive, addSuffix);
+            });
         }
-        // Build handler queue for style properties at this level
-        const handlerQueue = [];
         keys.forEach((styleName) => {
             if (isSelector(styleName))
                 return;
@@ -340,53 +64,40 @@ export function renderStyles(styles, responsive = [], className = 'unknown') {
             if (!handlers) {
                 handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
             }
-            handlers.forEach((handler) => {
-                if (handlerQueue.find((queueItem) => queueItem.handler === handler)) {
+            handlers.forEach((STYLE) => {
+                if (handlerQueue.find((queueItem) => queueItem.handler === STYLE))
                     return;
-                }
                 let isResponsive = false;
-                const lookupStyles = handler.__lookupStyles;
+                const lookupStyles = STYLE.__lookupStyles;
                 const filteredStyleMap = lookupStyles.reduce((map, name) => {
-                    const value = currentStyles?.[name];
-                    if (value !== undefined) {
-                        // Case 1: state-map-of-arrays → array-of-state-maps
-                        if (value &&
-                            typeof value === 'object' &&
-                            !Array.isArray(value) &&
-                            stateMapHasResponsiveArrays(value)) {
-                            map[name] = stateMapToArrayOfStateMaps(value, zones.length);
-                            isResponsive = true;
-                        }
-                        else if (Array.isArray(value)) {
-                            // Case 2: array that may contain state maps → normalize to array-of-state-maps
-                            if (value.length > 0) {
-                                map[name] = normalizeArrayWithStateMaps(value, zones.length);
-                                isResponsive = true;
-                            }
+                    map[name] = styles?.[name];
+                    if (Array.isArray(map[name])) {
+                        if (map[name].length === 0) {
+                            delete map[name];
                         }
                         else {
-                            map[name] = value;
+                            if (map[name].length === 1) {
+                                map[name] = map[name][0];
+                            }
+                            isResponsive = true;
                         }
                     }
                     return map;
                 }, {});
                 handlerQueue.push({
-                    handler,
+                    handler: STYLE,
                     styleMap: filteredStyleMap,
                     isResponsive,
                 });
             });
         });
-        // Process handlers using the three-phase approach
         handlerQueue.forEach(({ handler, styleMap, isResponsive }) => {
             const lookupStyles = handler.__lookupStyles;
             if (isResponsive) {
-                // For responsive styles, resolve arrays using normalizeStyleZones
                 const valueMap = lookupStyles.reduce((map, style) => {
                     map[style] = normalizeStyleZones(styleMap[style], zones.length);
                     return map;
                 }, {});
-                // Create props for each breakpoint
                 const propsByPoint = zones.map((zone, i) => {
                     const pointProps = {};
                     lookupStyles.forEach((style) => {
@@ -396,466 +107,23 @@ export function renderStyles(styles, responsive = [], className = 'unknown') {
                     });
                     return pointProps;
                 });
-                // Call handler for each breakpoint, with state map processing if needed
-                propsByPoint.forEach((pointProps, breakpointIdx) => {
-                    const hasStateMapsAtPoint = lookupStyles.some((style) => {
-                        const v = pointProps[style];
-                        return v && typeof v === 'object' && !Array.isArray(v);
-                    });
-                    if (hasStateMapsAtPoint) {
-                        const allMods = new Set();
-                        const styleStates = {};
-                        lookupStyles.forEach((style) => {
-                            const v = pointProps[style];
-                            if (v && typeof v === 'object' && !Array.isArray(v)) {
-                                const { states, mods } = styleStateMapToStyleStateDataList(v);
-                                styleStates[style] = states;
-                                mods.forEach((m) => allMods.add(m));
-                            }
-                            else {
-                                styleStates[style] = [{ mods: [], notMods: [], value: v }];
-                            }
-                        });
-                        const allModsArray = Array.from(allMods);
-                        const combinations = [[]];
-                        for (let i = 0; i < allModsArray.length; i++) {
-                            const currentLength = combinations.length;
-                            for (let j = 0; j < currentLength; j++) {
-                                const newCombination = [...combinations[j], allModsArray[i]];
-                                if (!hasConflictingAttributeSelectors(newCombination)) {
-                                    combinations.push(newCombination);
-                                }
-                            }
-                        }
-                        combinations.forEach((modCombination) => {
-                            const stateProps = {};
-                            lookupStyles.forEach((style) => {
-                                const states = styleStates[style];
-                                const matchingState = states.find((state) => computeState(state.model, (mod) => modCombination.includes(mod)));
-                                if (matchingState) {
-                                    stateProps[style] = matchingState.value;
-                                }
-                            });
-                            const optimizedNotMods = optimizeNotSelectors(modCombination, allModsArray);
-                            const modsSelectors = `${modCombination
-                                .map(getModSelector)
-                                .join('')}${optimizedNotMods
-                                .map((mod) => {
-                                const sel = getModSelector(mod);
-                                return sel.startsWith(':not(')
-                                    ? sel.slice(5, -1)
-                                    : `:not(${sel})`;
-                            })
-                                .join('')}`;
-                            const result = handler(stateProps);
-                            if (!result)
-                                return;
-                            const logicalRules = explodeHandlerResult(result, zones || [], `${modsSelectors}${parentSuffix}`, breakpointIdx, true);
-                            allLogicalRules.push(...logicalRules);
-                        });
-                    }
-                    else {
-                        const result = handler(pointProps);
-                        if (!result)
-                            return;
-                        const logicalRules = explodeHandlerResult(result, zones || [], parentSuffix, breakpointIdx, true);
-                        allLogicalRules.push(...logicalRules);
-                    }
+                const rulesByPoint = propsByPoint.map((props) => handler(props, suffix));
+                rulesByPoint.forEach((rules, i) => {
+                    responsiveStyles[i] += rules || '';
                 });
             }
             else {
-                // For non-responsive styles, check if any values have state maps
-                const hasStateMaps = lookupStyles.some((style) => {
-                    const value = styleMap[style];
-                    return value && typeof value === 'object' && !Array.isArray(value);
-                });
-                if (hasStateMaps) {
-                    // Process each style property individually for state resolution
-                    const allMods = new Set();
-                    const styleStates = {};
-                    lookupStyles.forEach((style) => {
-                        const value = styleMap[style];
-                        if (value && typeof value === 'object' && !Array.isArray(value)) {
-                            const { states, mods } = styleStateMapToStyleStateDataList(value);
-                            styleStates[style] = states;
-                            mods.forEach((mod) => allMods.add(mod));
-                        }
-                        else {
-                            // Simple value, create a single state
-                            styleStates[style] = [{ mods: [], notMods: [], value }];
-                        }
-                    });
-                    // Generate all possible mod combinations
-                    const allModsArray = Array.from(allMods);
-                    const combinations = [[]]; // Start with empty combination
-                    // Generate all combinations (including empty)
-                    for (let i = 0; i < allModsArray.length; i++) {
-                        const currentLength = combinations.length;
-                        for (let j = 0; j < currentLength; j++) {
-                            const newCombination = [...combinations[j], allModsArray[i]];
-                            // Skip combinations with conflicting attribute selectors
-                            if (!hasConflictingAttributeSelectors(newCombination)) {
-                                combinations.push(newCombination);
-                            }
-                        }
-                    }
-                    combinations.forEach((modCombination) => {
-                        const stateProps = {};
-                        lookupStyles.forEach((style) => {
-                            const states = styleStates[style];
-                            // Find the matching state for this mod combination
-                            const matchingState = states.find((state) => {
-                                return computeState(state.model, (mod) => modCombination.includes(mod));
-                            });
-                            if (matchingState) {
-                                stateProps[style] = matchingState.value;
-                            }
-                        });
-                        const optimizedNotMods = optimizeNotSelectors(modCombination, allModsArray);
-                        const modsSelectors = `${modCombination
-                            .map(getModSelector)
-                            .join('')}${optimizedNotMods
-                            .map((mod) => {
-                            const sel = getModSelector(mod);
-                            return sel.startsWith(':not(')
-                                ? sel.slice(5, -1)
-                                : `:not(${sel})`;
-                        })
-                            .join('')}`;
-                        // If any state value is responsive (array), fan-out by breakpoint
-                        const hasResponsiveStateValues = lookupStyles.some((style) => Array.isArray(stateProps[style]));
-                        if (hasResponsiveStateValues) {
-                            const propsByPoint = zones.map((_, i) => {
-                                const pointProps = {};
-                                lookupStyles.forEach((style) => {
-                                    const v = stateProps[style];
-                                    if (Array.isArray(v)) {
-                                        const arr = normalizeStyleZones(v, zones.length);
-                                        pointProps[style] = arr?.[i];
-                                    }
-                                    else {
-                                        pointProps[style] = v;
-                                    }
-                                });
-                                return pointProps;
-                            });
-                            propsByPoint.forEach((props, breakpointIdx) => {
-                                const res = handler(props);
-                                if (!res)
-                                    return;
-                                const logical = explodeHandlerResult(res, zones || [], `${modsSelectors}${parentSuffix}`, breakpointIdx, true);
-                                allLogicalRules.push(...logical);
-                            });
-                        }
-                        else {
-                            // Simple non-responsive state values
-                            const result = handler(stateProps);
-                            if (!result)
-                                return;
-                            const logical = explodeHandlerResult(result, zones || [], `${modsSelectors}${parentSuffix}`);
-                            allLogicalRules.push(...logical);
-                        }
-                    });
-                }
-                else {
-                    // Simple case: no state maps, call handler directly
-                    const result = handler(styleMap);
-                    if (result) {
-                        const logical = explodeHandlerResult(result, zones || [], parentSuffix);
-                        allLogicalRules.push(...logical);
-                    }
-                }
+                rawStyles +=
+                    handler(styleMap, suffix) || '';
             }
         });
+        STYLE_CACHE[cacheKey] = `&${suffix || ''}{outline: none;\n&[hidden]{display: none !important;}}${rawStyles}${responsive &&
+            responsive.length &&
+            responsiveStyles.filter((s) => s).length
+            ? mediaWrapper(responsiveStyles, zones)
+            : ''}${innerStyles}`;
     }
-    // Kick off processing from the root styles with empty suffix
-    processStyles(styles, '');
-    // Materialize all logical rules into final format
-    const finalRulesRaw = materializeRules(allLogicalRules, className, zones || []);
-    // De-duplicate identical rules (same selector, declarations, and at-rules)
-    const seen = new Set();
-    const finalRules = finalRulesRaw.filter((rule) => {
-        const at = rule.atRules && rule.atRules.length ? `@${rule.atRules.join('|')}` : '';
-        const key = `${rule.selector}|${rule.declarations}|${at}`;
-        if (seen.has(key))
-            return false;
-        seen.add(key);
-        return true;
-    });
-    return {
-        rules: finalRules,
-        className,
-    };
-}
-/**
- * Render styles for global injection (without class names)
- * Returns CSS with & selectors that injectGlobal can process
- */
-export function renderStylesForGlobal(styles, responsive = []) {
-    if (!styles) {
-        return '';
-    }
-    const zones = pointsToZones(responsive || []);
-    const handlerQueue = [];
-    const keys = Object.keys(styles);
-    const selectorKeys = keys.filter((key) => isSelector(key));
-    const declarations = [];
-    const responsiveStyles = Array.from(Array(zones.length)).map(() => '');
-    let innerStyles = '';
-    // Handle nested selectors (like &:hover, .SubElement)
-    for (const key of selectorKeys) {
-        const selectorSuffix = getSelector(key);
-        if (selectorSuffix && styles[key]) {
-            const nestedStyles = styles[key];
-            innerStyles += renderStylesForGlobal(nestedStyles, responsive).replace(/&/g, `&${selectorSuffix}`);
-        }
-    }
-    // Build handler queue for base styles
-    keys.forEach((styleName) => {
-        if (isSelector(styleName))
-            return;
-        let handlers = STYLE_HANDLER_MAP[styleName];
-        if (!handlers) {
-            handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
-        }
-        handlers.forEach((handler) => {
-            if (handlerQueue.find((queueItem) => queueItem.handler === handler)) {
-                return;
-            }
-            let isResponsive = false;
-            const lookupStyles = handler.__lookupStyles;
-            const filteredStyleMap = lookupStyles.reduce((map, name) => {
-                const value = styles?.[name];
-                if (value !== undefined) {
-                    if (value &&
-                        typeof value === 'object' &&
-                        !Array.isArray(value) &&
-                        stateMapHasResponsiveArrays(value)) {
-                        map[name] = stateMapToArrayOfStateMaps(value, zones.length);
-                        isResponsive = true;
-                    }
-                    else if (Array.isArray(value)) {
-                        if (value.length > 0) {
-                            map[name] = normalizeArrayWithStateMaps(value, zones.length);
-                            isResponsive = true;
-                        }
-                    }
-                    else {
-                        map[name] = value;
-                    }
-                }
-                return map;
-            }, {});
-            handlerQueue.push({
-                handler,
-                styleMap: filteredStyleMap,
-                isResponsive,
-            });
-        });
-    });
-    // Process handlers using approach
-    handlerQueue.forEach(({ handler, styleMap, isResponsive }) => {
-        const lookupStyles = handler.__lookupStyles;
-        if (isResponsive) {
-            // For responsive styles, resolve arrays using normalizeStyleZones
-            const valueMap = lookupStyles.reduce((map, style) => {
-                map[style] = normalizeStyleZones(styleMap[style], zones.length);
-                return map;
-            }, {});
-            // Create props for each breakpoint
-            const propsByPoint = zones.map((zone, i) => {
-                const pointProps = {};
-                lookupStyles.forEach((style) => {
-                    if (valueMap != null && valueMap[style] != null) {
-                        pointProps[style] = valueMap[style][i];
-                    }
-                });
-                return pointProps;
-            });
-            // Call handler for each breakpoint and convert to CSS, with state processing
-            propsByPoint.forEach((pointProps, i) => {
-                const hasStateMapsAtPoint = lookupStyles.some((style) => {
-                    const v = pointProps[style];
-                    return v && typeof v === 'object' && !Array.isArray(v);
-                });
-                if (hasStateMapsAtPoint) {
-                    const allMods = new Set();
-                    const styleStates = {};
-                    lookupStyles.forEach((style) => {
-                        const v = pointProps[style];
-                        if (v && typeof v === 'object' && !Array.isArray(v)) {
-                            const { states, mods } = styleStateMapToStyleStateDataList(v);
-                            styleStates[style] = states;
-                            mods.forEach((m) => allMods.add(m));
-                        }
-                        else {
-                            styleStates[style] = [{ mods: [], notMods: [], value: v }];
-                        }
-                    });
-                    const allModsArray = Array.from(allMods);
-                    const combinations = [[]];
-                    for (let a = 0; a < allModsArray.length; a++) {
-                        const currentLength = combinations.length;
-                        for (let b = 0; b < currentLength; b++) {
-                            const newCombination = [...combinations[b], allModsArray[a]];
-                            if (!hasConflictingAttributeSelectors(newCombination)) {
-                                combinations.push(newCombination);
-                            }
-                        }
-                    }
-                    combinations.forEach((modCombination) => {
-                        const stateProps = {};
-                        lookupStyles.forEach((style) => {
-                            const states = styleStates[style];
-                            const matchingState = states.find((state) => computeState(state.model, (mod) => modCombination.includes(mod)));
-                            if (matchingState) {
-                                stateProps[style] = matchingState.value;
-                            }
-                        });
-                        const optimizedNotMods = optimizeNotSelectors(modCombination, allModsArray);
-                        const modsSelectors = `${modCombination
-                            .map(getModSelector)
-                            .join('')}${optimizedNotMods
-                            .map((mod) => {
-                            const sel = getModSelector(mod);
-                            return sel.startsWith(':not(')
-                                ? sel.slice(5, -1)
-                                : `:not(${sel})`;
-                        })
-                            .join('')}`;
-                        const result = handler(stateProps);
-                        if (!result)
-                            return;
-                        const cssResult = convertHandlerResultToCSS(result, modsSelectors);
-                        if (cssResult) {
-                            responsiveStyles[i] += cssResult;
-                        }
-                    });
-                }
-                else {
-                    const result = handler(pointProps);
-                    if (!result)
-                        return;
-                    const cssResult = convertHandlerResultToCSS(result);
-                    if (cssResult) {
-                        responsiveStyles[i] += cssResult;
-                    }
-                }
-            });
-        }
-        else {
-            // For non-responsive styles, check if any values have state maps
-            const hasStateMaps = lookupStyles.some((style) => {
-                const value = styleMap[style];
-                return value && typeof value === 'object' && !Array.isArray(value);
-            });
-            if (hasStateMaps) {
-                // Process each style property individually for state resolution
-                const allMods = new Set();
-                const styleStates = {};
-                lookupStyles.forEach((style) => {
-                    const value = styleMap[style];
-                    if (value && typeof value === 'object' && !Array.isArray(value)) {
-                        const { states, mods } = styleStateMapToStyleStateDataList(value);
-                        styleStates[style] = states;
-                        mods.forEach((mod) => allMods.add(mod));
-                    }
-                    else {
-                        // Simple value, create a single state
-                        styleStates[style] = [{ mods: [], notMods: [], value }];
-                    }
-                });
-                // Generate all possible mod combinations
-                const allModsArray = Array.from(allMods);
-                const combinations = [[]]; // Start with empty combination
-                // Generate all combinations (including empty)
-                for (let i = 0; i < allModsArray.length; i++) {
-                    const currentLength = combinations.length;
-                    for (let j = 0; j < currentLength; j++) {
-                        const newCombination = [...combinations[j], allModsArray[i]];
-                        // Skip combinations with conflicting attribute selectors
-                        if (!hasConflictingAttributeSelectors(newCombination)) {
-                            combinations.push(newCombination);
-                        }
-                    }
-                }
-                combinations.forEach((modCombination) => {
-                    const stateProps = {};
-                    lookupStyles.forEach((style) => {
-                        const states = styleStates[style];
-                        // Find the matching state for this mod combination
-                        const matchingState = states.find((state) => {
-                            return computeState(state.model, (mod) => modCombination.includes(mod));
-                        });
-                        if (matchingState) {
-                            stateProps[style] = matchingState.value;
-                        }
-                    });
-                    const result = handler(stateProps);
-                    if (!result)
-                        return;
-                    const optimizedNotMods = optimizeNotSelectors(modCombination, allModsArray);
-                    const modsSelectors = `${modCombination
-                        .map(getModSelector)
-                        .join('')}${optimizedNotMods
-                        .map((mod) => {
-                        const sel = getModSelector(mod);
-                        return sel.startsWith(':not(')
-                            ? sel.slice(5, -1)
-                            : `:not(${sel})`;
-                    })
-                        .join('')}`;
-                    // Convert to CSS with proper selectors
-                    const cssResult = convertHandlerResultToCSS(result, modsSelectors);
-                    if (cssResult) {
-                        if (cssResult.startsWith('& {') && !cssResult.includes('&', 2)) {
-                            // Simple rule: "& { declarations }"
-                            const declarationBlock = cssResult.slice(3, -1).trim();
-                            if (declarationBlock) {
-                                declarations.push(declarationBlock);
-                            }
-                        }
-                        else {
-                            // Complex rule with nested selectors or state modifiers
-                            innerStyles += cssResult;
-                        }
-                    }
-                });
-            }
-            else {
-                // Simple case: no state maps, call handler directly
-                const result = handler(styleMap);
-                if (result) {
-                    const cssResult = convertHandlerResultToCSS(result);
-                    if (cssResult) {
-                        if (cssResult.startsWith('& {') && !cssResult.includes('&', 2)) {
-                            // Simple rule: "& { declarations }"
-                            const declarationBlock = cssResult.slice(3, -1).trim();
-                            if (declarationBlock) {
-                                declarations.push(declarationBlock);
-                            }
-                        }
-                        else {
-                            // Complex rule with nested selectors or state modifiers
-                            innerStyles += cssResult;
-                        }
-                    }
-                }
-            }
-        }
-    });
-    // Build final CSS similar to original renderStyles
-    // Merge all declarations into a single rule
-    const baseRule = declarations.length > 0 ? `& { ${declarations.join('\n')} }` : '';
-    const mediaRules = responsive && responsive.length && responsiveStyles.some((s) => s)
-        ? mediaWrapper(responsiveStyles, zones)
-        : '';
-    // Ensure we always separate the base rule, inner complex selectors and media rules with
-    // a newline so the selector replacement step ( & -> actual selector ) cannot accidentally
-    // concatenate two selectors and create the invalid form "..selector selector".
-    const parts = [baseRule, innerStyles, mediaRules].filter(Boolean);
-    const result = parts.join('\n');
-    return result;
+    return STYLE_CACHE[cacheKey];
 }