@cube-dev/ui-kit 0.98.9 → 0.99.0

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
@@ -9,10 +9,8 @@
  * Style injector that works with structured style objects
  * Eliminates CSS string parsing for better performance
  */
-import { Component } from 'react';
-import { parseStyle } from '../utils/styles';
-// Simple CSS text to StyleResult converter for injectGlobal backward compatibility
-import { SheetManager } from './sheet-manager';
+import { parseStyle } from '../utils/styles.js';
+import { SheetManager } from './sheet-manager.js';
 /**
  * Generate sequential class name with format t{number}
  */
@@ -106,13 +104,25 @@ export class StyleInjector {
             let newSelector = rule.selector;
             // If rule needs className prepended
             if (rule.needsClassName) {
-                // Simple concatenation: .className (double specificity) + selectorSuffix
-                newSelector = `.${className}.${className}${newSelector}`;
+                // Handle multiple selectors (separated by ||| for OR conditions)
+                const selectorParts = newSelector ? newSelector.split('|||') : [''];
+                const classPrefix = `.${className}.${className}`;
+                newSelector = selectorParts
+                    .map((part) => {
+                    const classSelector = part ? `${classPrefix}${part}` : classPrefix;
+                    // If there's a root prefix, add it before the class selector
+                    if (rule.rootPrefix) {
+                        return `${rule.rootPrefix} ${classSelector}`;
+                    }
+                    return classSelector;
+                })
+                    .join(', ');
             }
             return {
                 ...rule,
                 selector: newSelector,
                 needsClassName: undefined, // Remove the flag after processing
+                rootPrefix: undefined, // Remove rootPrefix after processing
             };
         });
         // Before inserting, auto-register @property for any color custom properties being defined.
@@ -202,26 +212,20 @@ export class StyleInjector {
         };
     }
     /**
-     * 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, options) {
+    injectRawCSS(css, options) {
         const root = options?.root || document;
-        const registry = this.sheetManager.getRegistry(root);
-        if (!rules || rules.length === 0) {
-            return { dispose: () => { } };
-        }
-        // Use a different prefix to distinguish from injectGlobal
-        const key = `raw:${this.globalRuleCounter++}`;
-        const info = this.sheetManager.insertGlobalRule(registry, rules, key, root);
-        if (registry.metrics) {
-            registry.metrics.totalInsertions++;
-        }
-        return {
-            dispose: () => {
-                if (info)
-                    this.sheetManager.deleteGlobalRule(registry, key);
-            },
-        };
+        return this.sheetManager.injectRawCSS(css, root);
+    }
+    /**
+     * Get raw CSS text for SSR
+     */
+    getRawCSSText(options) {
+        const root = options?.root || document;
+        return this.sheetManager.getRawCSSText(root);
     }
     /**
      * Dispose of a className
@@ -330,9 +334,9 @@ export class StyleInjector {
                 syntax = `"${syntax}"`;
             parts.push(`syntax: ${syntax};`);
         }
-        if (options?.inherits != null) {
-            parts.push(`inherits: ${options.inherits ? 'true' : 'false'};`);
-        }
+        // inherits is required by the CSS @property spec - default to true
+        const inherits = options?.inherits ?? true;
+        parts.push(`inherits: ${inherits ? 'true' : 'false'};`);
         if (options?.initialValue != null) {
             let initialValueStr;
             if (typeof options.initialValue === 'number') {
@@ -364,6 +368,12 @@ export class StyleInjector {
     }
     /**
      * 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, nameOrOptions) {
         // Parse parameters
@@ -377,32 +387,49 @@ export class StyleInjector {
                 dispose: () => { },
             };
         }
-        // Generate cache key from steps and name
-        const cacheKey = providedName
-            ? `${providedName}:${JSON.stringify(steps)}`
-            : JSON.stringify(steps);
-        // Check if already cached
-        const existing = registry.keyframesCache.get(cacheKey);
+        // Generate content-based cache key (independent of provided name)
+        const contentHash = JSON.stringify(steps);
+        // Check if this exact content is already cached
+        const existing = registry.keyframesCache.get(contentHash);
         if (existing) {
             existing.refCount++;
             return {
                 toString: () => existing.name,
-                dispose: () => this.disposeKeyframes(cacheKey, registry),
+                dispose: () => this.disposeKeyframes(contentHash, registry),
             };
         }
-        // Use provided name or generate new one
-        const name = providedName || `k${registry.keyframesCounter++}`;
+        // Determine the actual name to use
+        let actualName;
+        if (providedName) {
+            // Check if this name is already used with different content
+            const existingContentForName = registry.keyframesNameToContent.get(providedName);
+            if (existingContentForName && existingContentForName !== contentHash) {
+                // Name collision: same name, different content
+                // Generate a unique name to avoid overwriting
+                actualName = `${providedName}-k${registry.keyframesCounter++}`;
+            }
+            else {
+                // Name is available or used with same content
+                actualName = providedName;
+                // Track this name -> content mapping
+                registry.keyframesNameToContent.set(providedName, contentHash);
+            }
+        }
+        else {
+            // No name provided, generate one
+            actualName = `k${registry.keyframesCounter++}`;
+        }
         // Insert keyframes
-        const info = this.sheetManager.insertKeyframes(registry, steps, name, root);
+        const info = this.sheetManager.insertKeyframes(registry, steps, actualName, root);
         if (!info) {
             return {
                 toString: () => '',
                 dispose: () => { },
             };
         }
-        // Cache the result
-        registry.keyframesCache.set(cacheKey, {
-            name,
+        // Cache the result by content hash
+        registry.keyframesCache.set(contentHash, {
+            name: actualName,
             refCount: 1,
             info,
         });
@@ -412,22 +439,30 @@ export class StyleInjector {
             registry.metrics.misses++;
         }
         return {
-            toString: () => name,
-            dispose: () => this.disposeKeyframes(cacheKey, registry),
+            toString: () => actualName,
+            dispose: () => this.disposeKeyframes(contentHash, registry),
         };
     }
     /**
      * Dispose keyframes
      */
-    disposeKeyframes(cacheKey, registry) {
-        const entry = registry.keyframesCache.get(cacheKey);
+    disposeKeyframes(contentHash, registry) {
+        const entry = registry.keyframesCache.get(contentHash);
         if (!entry)
             return;
         entry.refCount--;
         if (entry.refCount <= 0) {
             // Dispose immediately - keyframes are global and safe to clean up right away
             this.sheetManager.deleteKeyframes(registry, entry.info);
-            registry.keyframesCache.delete(cacheKey);
+            registry.keyframesCache.delete(contentHash);
+            // Clean up name-to-content mapping if this name was tracked
+            // Find and remove the mapping for this content hash
+            for (const [name, hash] of registry.keyframesNameToContent.entries()) {
+                if (hash === contentHash) {
+                    registry.keyframesNameToContent.delete(name);
+                    break;
+                }
+            }
             // Update metrics
             if (registry.metrics) {
                 registry.metrics.totalUnused++;
@@ -442,259 +477,6 @@ export class StyleInjector {
         const targetRoot = root || document;
         this.sheetManager.cleanup(targetRoot);
     }
-    /**
-     * 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(strings, ...interpolations) {
-        const injector = this; // Capture the injector instance
-        class GlobalStyleComponent extends Component {
-            disposeFunction = null;
-            componentDidMount() {
-                this.injectStyles();
-            }
-            componentDidUpdate() {
-                this.disposeStyles();
-                this.injectStyles();
-            }
-            componentWillUnmount() {
-                this.disposeStyles();
-            }
-            injectStyles = () => {
-                const css = this.interpolateTemplate();
-                if (css.trim()) {
-                    const styleResults = this.parseCSSToStyleResults(css);
-                    // Use a special method for createGlobalStyle to distinguish from injectGlobal
-                    const result = injector.injectCreateGlobalStyle(styleResults, {
-                        root: this.props.root,
-                    });
-                    this.disposeFunction = result.dispose;
-                }
-            };
-            disposeStyles = () => {
-                if (this.disposeFunction) {
-                    this.disposeFunction();
-                    this.disposeFunction = null;
-                }
-            };
-            interpolateTemplate = () => {
-                let result = strings[0];
-                for (let i = 0; i < interpolations.length; i++) {
-                    const interpolation = interpolations[i];
-                    const value = typeof interpolation === 'function'
-                        ? interpolation(this.props)
-                        : interpolation;
-                    result += String(value) + strings[i + 1];
-                }
-                return result;
-            };
-            parseCSSToStyleResults = (css) => {
-                const rules = [];
-                // Enhanced CSS parser for global styles that handles nested rules
-                this.parseCSS(css, rules, [], '');
-                return rules;
-            };
-            parseCSS = (css, rules, atRuleStack, parentSelector = '') => {
-                // Remove both CSS and JavaScript-style comments
-                let cleanCSS = css.replace(/\/\*[\s\S]*?\*\//g, ''); // CSS comments
-                cleanCSS = cleanCSS.replace(/\/\/.*$/gm, ''); // JavaScript-style comments
-                let i = 0;
-                while (i < cleanCSS.length) {
-                    // Skip whitespace
-                    while (i < cleanCSS.length && /\s/.test(cleanCSS[i])) {
-                        i++;
-                    }
-                    if (i >= cleanCSS.length)
-                        break;
-                    // Find the next selector or at-rule
-                    let selectorStart = i;
-                    let braceDepth = 0;
-                    let inString = false;
-                    let stringChar = '';
-                    // Find the opening brace
-                    while (i < cleanCSS.length) {
-                        const char = cleanCSS[i];
-                        if (inString) {
-                            if (char === stringChar && cleanCSS[i - 1] !== '\\') {
-                                inString = false;
-                            }
-                        }
-                        else {
-                            if (char === '"' || char === "'") {
-                                inString = true;
-                                stringChar = char;
-                            }
-                            else if (char === '{') {
-                                braceDepth++;
-                                if (braceDepth === 1) {
-                                    break; // Found the opening brace
-                                }
-                            }
-                            else if (char === '}') {
-                                braceDepth--;
-                            }
-                        }
-                        i++;
-                    }
-                    if (i >= cleanCSS.length)
-                        break;
-                    const selectorPart = cleanCSS.substring(selectorStart, i).trim();
-                    i++; // Skip the opening brace
-                    // Find the matching closing brace
-                    const contentStart = i;
-                    braceDepth = 1;
-                    inString = false;
-                    while (i < cleanCSS.length && braceDepth > 0) {
-                        const char = cleanCSS[i];
-                        if (inString) {
-                            if (char === stringChar && cleanCSS[i - 1] !== '\\') {
-                                inString = false;
-                            }
-                        }
-                        else {
-                            if (char === '"' || char === "'") {
-                                inString = true;
-                                stringChar = char;
-                            }
-                            else if (char === '{') {
-                                braceDepth++;
-                            }
-                            else if (char === '}') {
-                                braceDepth--;
-                            }
-                        }
-                        i++;
-                    }
-                    const content = cleanCSS.substring(contentStart, i - 1).trim();
-                    // Check if this is an at-rule
-                    if (selectorPart.startsWith('@')) {
-                        const atSelector = selectorPart.trim();
-                        // Leaf at-rules that contain declarations directly and should be emitted as-is
-                        const leafAtRules = [
-                            '@font-face',
-                            '@property',
-                            '@page',
-                            '@counter-style',
-                            '@font-feature-values',
-                            '@font-palette-values',
-                            '@color-profile',
-                        ];
-                        const isLeafAtRule = leafAtRules.some((prefix) => atSelector.startsWith(prefix));
-                        if (isLeafAtRule) {
-                            // Emit the at-rule with its declarations directly
-                            if (content.trim()) {
-                                rules.push({
-                                    selector: atSelector,
-                                    declarations: content,
-                                    atRules: atRuleStack.length > 0 ? [...atRuleStack] : undefined,
-                                });
-                            }
-                        }
-                        else {
-                            // Wrapper at-rule (e.g., @media, @supports, @keyframes) — parse its content
-                            const newAtRuleStack = [...atRuleStack, atSelector];
-                            this.parseCSS(content, rules, newAtRuleStack, parentSelector);
-                        }
-                    }
-                    else {
-                        // Check if content contains nested rules (has { and })
-                        if (content.includes('{') && content.includes('}')) {
-                            // This selector has nested rules, parse them
-                            const { declarations, nestedCSS } = this.separateDeclarationsAndNested(content);
-                            // Process the selector (handle & syntax)
-                            const processedSelector = this.processSelector(selectorPart, parentSelector);
-                            // Add declarations if any
-                            if (declarations.trim()) {
-                                rules.push({
-                                    selector: processedSelector,
-                                    declarations: declarations.trim(),
-                                    atRules: atRuleStack.length > 0 ? [...atRuleStack] : undefined,
-                                });
-                            }
-                            // Parse nested CSS with current selector as parent
-                            if (nestedCSS.trim()) {
-                                this.parseCSS(nestedCSS, rules, atRuleStack, processedSelector);
-                            }
-                        }
-                        else {
-                            // This is a regular selector with only declarations
-                            const processedSelector = this.processSelector(selectorPart, parentSelector);
-                            if (content && processedSelector) {
-                                rules.push({
-                                    selector: processedSelector,
-                                    declarations: content,
-                                    atRules: atRuleStack.length > 0 ? [...atRuleStack] : undefined,
-                                });
-                            }
-                        }
-                    }
-                }
-            };
-            separateDeclarationsAndNested = (content) => {
-                const declarations = [];
-                const nestedRules = [];
-                let i = 0;
-                let currentDeclaration = '';
-                while (i < content.length) {
-                    const char = content[i];
-                    if (char === '{') {
-                        // Found start of nested rule, find the selector before it
-                        let selectorStart = currentDeclaration.lastIndexOf(';') + 1;
-                        if (selectorStart === 0 && currentDeclaration.trim()) {
-                            // No semicolon found, this might be the first rule
-                            selectorStart = 0;
-                        }
-                        const beforeBrace = currentDeclaration.substring(0, selectorStart);
-                        const selector = currentDeclaration.substring(selectorStart).trim();
-                        if (beforeBrace.trim()) {
-                            declarations.push(beforeBrace.trim());
-                        }
-                        // Find the matching closing brace
-                        let braceDepth = 1;
-                        let ruleStart = i + 1;
-                        i++; // Skip opening brace
-                        while (i < content.length && braceDepth > 0) {
-                            if (content[i] === '{')
-                                braceDepth++;
-                            else if (content[i] === '}')
-                                braceDepth--;
-                            i++;
-                        }
-                        const ruleContent = content.substring(ruleStart, i - 1);
-                        nestedRules.push(`${selector} { ${ruleContent} }`);
-                        currentDeclaration = '';
-                    }
-                    else {
-                        currentDeclaration += char;
-                        i++;
-                    }
-                }
-                // Add remaining declarations
-                if (currentDeclaration.trim()) {
-                    declarations.push(currentDeclaration.trim());
-                }
-                return {
-                    declarations: declarations.join(' '),
-                    nestedCSS: nestedRules.join('\n'),
-                };
-            };
-            processSelector = (selector, parentSelector) => {
-                if (!parentSelector) {
-                    return selector;
-                }
-                // Handle & syntax - replace & with parent selector
-                if (selector.includes('&')) {
-                    return selector.replace(/&/g, parentSelector);
-                }
-                // If no &, treat as descendant selector
-                return `${parentSelector} ${selector}`;
-            };
-            render() {
-                return null;
-            }
-        }
-        return GlobalStyleComponent;
-    }
 }
 
         

package/es/tasty/injector/sheet-manager.js

@@ -1,14 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { createStyle, STYLE_HANDLER_MAP } from '../styles';
+import { createStyle, STYLE_HANDLER_MAP } from '../styles/index.js';
 export class SheetManager {
     rootRegistries = new WeakMap();
     config;
+    /** Dedicated style elements for raw CSS per root */
+    rawStyleElements = new WeakMap();
+    /** Tracking for raw CSS blocks per root */
+    rawCSSBlocks = new WeakMap();
+    /** Counter for generating unique raw CSS IDs */
+    rawCSSCounter = 0;
     constructor(config) {
         this.config = config;
     }
@@ -41,6 +47,7 @@ export class SheetManager {
                 metrics,
                 classCounter: 0,
                 keyframesCache: new Map(),
+                keyframesNameToContent: new Map(),
                 keyframesCounter: 0,
                 injectedProperties: new Set(),
                 globalRules: new Map(),
@@ -237,8 +244,11 @@ export class SheetManager {
                                     currentRuleIndex = idx + 1;
                                     anyInserted = true;
                                 }
-                                catch (_) {
+                                catch (singleErr) {
                                     // Skip unsupported selector in this engine (e.g., ::-moz-selection in Blink)
+                                    if (process.env.NODE_ENV !== 'production') {
+                                        console.warn('[tasty] Browser rejected CSS rule:', singleRule, singleErr);
+                                    }
                                 }
                             }
                             // If none inserted, continue without throwing to avoid aborting the whole batch
@@ -248,6 +258,9 @@ export class SheetManager {
                         }
                         else {
                             // Single selector failed — skip it silently (likely unsupported in this engine)
+                            if (process.env.NODE_ENV !== 'production') {
+                                console.warn('[tasty] Browser rejected CSS rule:', fullRule, e);
+                            }
                         }
                     }
                 }
@@ -834,6 +847,16 @@ export class SheetManager {
                     info.ruleIndex < styleSheet.cssRules.length) {
                     styleSheet.deleteRule(info.ruleIndex);
                     sheet.ruleCount = Math.max(0, sheet.ruleCount - 1);
+                    // Adjust indices for all other rules in the same sheet
+                    // This is critical - when a keyframe rule is deleted, all rules
+                    // with higher indices shift down by 1
+                    this.adjustIndicesAfterDeletion(registry, info.sheetIndex, info.ruleIndex, info.ruleIndex, 1, 
+                    // Create a dummy RuleInfo to satisfy the function signature
+                    {
+                        className: '',
+                        ruleIndex: info.ruleIndex,
+                        sheetIndex: info.sheetIndex,
+                    });
                 }
             }
         }
@@ -906,6 +929,118 @@ export class SheetManager {
         }
         // Clear registry
         this.rootRegistries.delete(root);
+        // Clean up raw CSS style element
+        const rawStyleElement = this.rawStyleElements.get(root);
+        if (rawStyleElement?.parentNode) {
+            rawStyleElement.parentNode.removeChild(rawStyleElement);
+        }
+        this.rawStyleElements.delete(root);
+        this.rawCSSBlocks.delete(root);
+    }
+    /**
+     * Get or create a dedicated style element for raw CSS
+     * Raw CSS is kept separate from tasty-managed sheets to avoid index conflicts
+     */
+    getOrCreateRawStyleElement(root) {
+        let styleElement = this.rawStyleElements.get(root);
+        if (!styleElement) {
+            styleElement =
+                root.createElement?.('style') ||
+                    document.createElement('style');
+            if (this.config.nonce) {
+                styleElement.nonce = this.config.nonce;
+            }
+            styleElement.setAttribute('data-tasty-raw', '');
+            // Append to head or shadow root
+            if ('head' in root && root.head) {
+                root.head.appendChild(styleElement);
+            }
+            else if ('appendChild' in root) {
+                root.appendChild(styleElement);
+            }
+            else {
+                document.head.appendChild(styleElement);
+            }
+            this.rawStyleElements.set(root, styleElement);
+            this.rawCSSBlocks.set(root, new Map());
+        }
+        return styleElement;
+    }
+    /**
+     * Inject raw CSS text directly without parsing
+     * Returns a dispose function to remove the injected CSS
+     */
+    injectRawCSS(css, root) {
+        if (!css.trim()) {
+            return { dispose: () => { } };
+        }
+        const styleElement = this.getOrCreateRawStyleElement(root);
+        const blocksMap = this.rawCSSBlocks.get(root);
+        // Generate unique ID for this block
+        const id = `raw_${this.rawCSSCounter++}`;
+        // Calculate offsets
+        const currentContent = styleElement.textContent || '';
+        const startOffset = currentContent.length;
+        const cssWithNewline = (currentContent ? '\n' : '') + css;
+        const endOffset = startOffset + cssWithNewline.length;
+        // Append CSS
+        styleElement.textContent = currentContent + cssWithNewline;
+        // Track the block
+        const info = {
+            id,
+            css,
+            startOffset,
+            endOffset,
+        };
+        blocksMap.set(id, info);
+        return {
+            dispose: () => {
+                this.disposeRawCSS(id, root);
+            },
+        };
+    }
+    /**
+     * Remove a raw CSS block by ID
+     */
+    disposeRawCSS(id, root) {
+        const styleElement = this.rawStyleElements.get(root);
+        const blocksMap = this.rawCSSBlocks.get(root);
+        if (!styleElement || !blocksMap) {
+            return;
+        }
+        const info = blocksMap.get(id);
+        if (!info) {
+            return;
+        }
+        // Remove from tracking
+        blocksMap.delete(id);
+        // Rebuild the CSS content from remaining blocks
+        // This is simpler and more reliable than trying to splice strings
+        const remainingBlocks = Array.from(blocksMap.values());
+        if (remainingBlocks.length === 0) {
+            styleElement.textContent = '';
+        }
+        else {
+            // Rebuild with remaining CSS blocks in order of their original insertion
+            // Sort by original startOffset to maintain order
+            remainingBlocks.sort((a, b) => a.startOffset - b.startOffset);
+            const newContent = remainingBlocks.map((block) => block.css).join('\n');
+            styleElement.textContent = newContent;
+            // Update offsets for remaining blocks
+            let offset = 0;
+            for (const block of remainingBlocks) {
+                block.startOffset = offset;
+                block.endOffset = offset + block.css.length;
+                offset = block.endOffset + 1; // +1 for newline
+            }
+        }
+    }
+    /**
+     * Get the raw CSS content for SSR
+     */
+    getRawCSSText(root) {
+        const styleElement = this.rawStyleElements.get(root);
+        return styleElement?.textContent || '';
     }
 }
 

package/es/tasty/injector/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */