@cube-dev/ui-kit 0.0.0-canary-a6187c8 → 0.0.0-canary-521eedd

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
@@ -9,8 +9,10 @@
  * Style injector that works with structured style objects
  * Eliminates CSS string parsing for better performance
  */
-import { parseStyle } from '../utils/styles.js';
-import { SheetManager } from './sheet-manager.js';
+import { Component } from 'react';
+import { parseStyle } from '../utils/styles';
+// Simple CSS text to StyleResult converter for injectGlobal backward compatibility
+import { SheetManager } from './sheet-manager';
 /**
  * Generate sequential class name with format t{number}
  */
@@ -104,25 +106,13 @@ export class StyleInjector {
             let newSelector = rule.selector;
             // If rule needs className prepended
             if (rule.needsClassName) {
-                // 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(', ');
+                // Simple concatenation: .className (double specificity) + selectorSuffix
+                newSelector = `.${className}.${className}${newSelector}`;
             }
             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.
@@ -212,20 +202,26 @@ export class StyleInjector {
         };
     }
     /**
-     * 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
-     */
-    injectRawCSS(css, options) {
-        const root = options?.root || document;
-        return this.sheetManager.injectRawCSS(css, root);
-    }
-    /**
-     * Get raw CSS text for SSR
+     * Inject styles from createGlobalStyle (separate from injectGlobal for tracking)
      */
-    getRawCSSText(options) {
+    injectCreateGlobalStyle(rules, options) {
         const root = options?.root || document;
-        return this.sheetManager.getRawCSSText(root);
+        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);
+            },
+        };
     }
     /**
      * Dispose of a className
@@ -334,9 +330,9 @@ export class StyleInjector {
                 syntax = `"${syntax}"`;
             parts.push(`syntax: ${syntax};`);
         }
-        // inherits is required by the CSS @property spec - default to true
-        const inherits = options?.inherits ?? true;
-        parts.push(`inherits: ${inherits ? 'true' : 'false'};`);
+        if (options?.inherits != null) {
+            parts.push(`inherits: ${options.inherits ? 'true' : 'false'};`);
+        }
         if (options?.initialValue != null) {
             let initialValueStr;
             if (typeof options.initialValue === 'number') {
@@ -368,12 +364,6 @@ 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
@@ -387,49 +377,32 @@ export class StyleInjector {
                 dispose: () => { },
             };
         }
-        // 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);
+        // 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);
         if (existing) {
             existing.refCount++;
             return {
                 toString: () => existing.name,
-                dispose: () => this.disposeKeyframes(contentHash, registry),
+                dispose: () => this.disposeKeyframes(cacheKey, registry),
             };
         }
-        // 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++}`;
-        }
+        // Use provided name or generate new one
+        const name = providedName || `k${registry.keyframesCounter++}`;
         // Insert keyframes
-        const info = this.sheetManager.insertKeyframes(registry, steps, actualName, root);
+        const info = this.sheetManager.insertKeyframes(registry, steps, name, root);
         if (!info) {
             return {
                 toString: () => '',
                 dispose: () => { },
             };
         }
-        // Cache the result by content hash
-        registry.keyframesCache.set(contentHash, {
-            name: actualName,
+        // Cache the result
+        registry.keyframesCache.set(cacheKey, {
+            name,
             refCount: 1,
             info,
         });
@@ -439,30 +412,22 @@ export class StyleInjector {
             registry.metrics.misses++;
         }
         return {
-            toString: () => actualName,
-            dispose: () => this.disposeKeyframes(contentHash, registry),
+            toString: () => name,
+            dispose: () => this.disposeKeyframes(cacheKey, registry),
         };
     }
     /**
      * Dispose keyframes
      */
-    disposeKeyframes(contentHash, registry) {
-        const entry = registry.keyframesCache.get(contentHash);
+    disposeKeyframes(cacheKey, registry) {
+        const entry = registry.keyframesCache.get(cacheKey);
         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(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;
-                }
-            }
+            registry.keyframesCache.delete(cacheKey);
             // Update metrics
             if (registry.metrics) {
                 registry.metrics.totalUnused++;
@@ -477,6 +442,259 @@ 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,20 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
-import { createStyle, STYLE_HANDLER_MAP } from '../styles/index.js';
+import { createStyle, STYLE_HANDLER_MAP } from '../styles';
 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;
     }
@@ -47,7 +41,6 @@ export class SheetManager {
                 metrics,
                 classCounter: 0,
                 keyframesCache: new Map(),
-                keyframesNameToContent: new Map(),
                 keyframesCounter: 0,
                 injectedProperties: new Set(),
                 globalRules: new Map(),
@@ -244,11 +237,8 @@ export class SheetManager {
                                     currentRuleIndex = idx + 1;
                                     anyInserted = true;
                                 }
-                                catch (singleErr) {
+                                catch (_) {
                                     // 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
@@ -258,9 +248,6 @@ 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);
-                            }
                         }
                     }
                 }
@@ -919,118 +906,6 @@ 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.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 

package/es/tasty/parser/classify.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
-import { COLOR_FUNCS, RE_HEX, RE_NUMBER, RE_UNIT_NUM, VALUE_KEYWORDS, } from './const.js';
-import { StyleParser } from './parser.js';
-import { Bucket } from './types.js';
+import { COLOR_FUNCS, RE_HEX, RE_NUMBER, RE_UNIT_NUM, VALUE_KEYWORDS, } from './const';
+import { StyleParser } from './parser';
+import { Bucket } from './types';
 export function classify(raw, opts, recurse) {
     const token = raw.trim();
     if (!token)
@@ -112,10 +112,8 @@ export function classify(raw, opts, recurse) {
         if (opts.funcs && fname in opts.funcs) {
             // split by top-level commas within inner
             const tmp = new StyleParser(opts).process(inner); // fresh parser w/ same opts but no cache share issues
-            const funcResult = opts.funcs[fname](tmp.groups);
-            // Re-classify the result to determine proper bucket (e.g., if it returns a color)
-            // Pass funcs: undefined to prevent infinite recursion if result matches a function pattern
-            return classify(funcResult, { ...opts, funcs: undefined }, recurse);
+            const argProcessed = opts.funcs[fname](tmp.groups);
+            return { bucket: Bucket.Value, processed: argProcessed };
         }
         // generic: process inner and rebuild
         const argProcessed = recurse(inner).output;