@cube-dev/ui-kit 0.74.2 → 0.75.0

package/es/tasty/injector/injector.js

@@ -0,0 +1,688 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.75.0
+ * Released under the MIT license.
+ */
+
+/**
+ * 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';
+/**
+ * Generate sequential class name with format t{number}
+ */
+function generateClassName(counter) {
+    return `t${counter}`;
+}
+export class StyleInjector {
+    sheetManager;
+    config;
+    cleanupScheduled = false;
+    constructor(config = {}) {
+        this.config = config;
+        this.sheetManager = new SheetManager(config);
+    }
+    /**
+     * Inject styles from StyleResult objects
+     */
+    inject(rules, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        if (rules.length === 0) {
+            return {
+                className: '',
+                dispose: () => { },
+            };
+        }
+        // Rules are now in StyleRule format directly
+        // Try to dedupe by className first — if the same class was already inserted, reuse it
+        // Only extract className if it looks like a generated tasty className (t + digits)
+        const preExtractedClass = this.extractClassName(rules);
+        const generatedClass = preExtractedClass && /^t\d+$/.test(preExtractedClass)
+            ? preExtractedClass
+            : null;
+        if (generatedClass && registry.rules.has(generatedClass)) {
+            const currentRefCount = registry.refCounts.get(generatedClass) || 0;
+            registry.refCounts.set(generatedClass, currentRefCount + 1);
+            // If this class was previously marked as unused, clear that state now
+            if (registry.unusedRules.has(generatedClass)) {
+                registry.unusedRules.delete(generatedClass);
+                if (registry.metrics) {
+                    // Consider this a reuse rather than a cold miss
+                    registry.metrics.unusedHits++;
+                }
+            }
+            // Update metrics
+            if (registry.metrics) {
+                registry.metrics.hits++;
+            }
+            return {
+                className: generatedClass,
+                dispose: () => this.dispose(generatedClass, registry),
+            };
+        }
+        // Try to restore from unused styles if className exists but is not active
+        if (generatedClass &&
+            registry.rules.has(generatedClass) &&
+            !registry.refCounts.has(generatedClass)) {
+            const restored = this.sheetManager.restoreFromUnused(registry, generatedClass);
+            if (restored) {
+                // Update metrics
+                if (registry.metrics) {
+                    registry.metrics.hits++;
+                }
+                return {
+                    className: generatedClass,
+                    dispose: () => this.dispose(generatedClass, registry),
+                };
+            }
+        }
+        // No active cache dedupe — rely on provided className or disposed cache only
+        // Generate final className - only use extracted className if it's a generated tasty className
+        const className = generatedClass
+            ? generatedClass
+            : generateClassName(registry.classCounter++);
+        // If a different pre-extracted class was used in rules, rewrite selectors to the final class
+        // Also increase specificity for class-based selectors by duplicating the class
+        const rulesToInsert = generatedClass && generatedClass !== className
+            ? rules.map((r) => {
+                if (r.selector.startsWith('.' + generatedClass)) {
+                    const newSelector = '.' + className + r.selector.slice(generatedClass.length + 1);
+                    // Increase specificity by duplicating the class for class-based selectors
+                    const specificSelector = newSelector.startsWith('.' + className) &&
+                        /^\.t\d+/.test(newSelector)
+                        ? '.' + className + newSelector
+                        : newSelector;
+                    return {
+                        ...r,
+                        selector: specificSelector,
+                    };
+                }
+                return r;
+            })
+            : rules.map((r) => {
+                // Increase specificity for class-based selectors by duplicating the class
+                if (r.selector.startsWith('.') && /^\.t\d+/.test(r.selector)) {
+                    const classMatch = r.selector.match(/^\.t\d+/);
+                    if (classMatch) {
+                        const baseClass = classMatch[0];
+                        return {
+                            ...r,
+                            selector: baseClass + r.selector,
+                        };
+                    }
+                }
+                return r;
+            });
+        // Before inserting, auto-register @property for any color custom properties being defined.
+        // Fast parse: split declarations by ';' and match "--*-color:"
+        // Do this only when we actually insert (i.e., no cache hit above)
+        const colorPropRegex = /^\s*(--[a-z0-9-]+-color)\s*:/i;
+        for (const rule of rulesToInsert) {
+            // Skip if no declarations
+            if (!rule.declarations)
+                continue;
+            const parts = rule.declarations.split(/;+\s*/);
+            for (const part of parts) {
+                if (!part)
+                    continue;
+                const match = colorPropRegex.exec(part);
+                if (match) {
+                    const propName = match[1];
+                    // Register @property only if not already defined for this root
+                    if (!this.isPropertyDefined(propName, { root })) {
+                        this.property(propName, {
+                            syntax: '<color>',
+                            initialValue: 'transparent',
+                            root,
+                        });
+                    }
+                }
+            }
+        }
+        // Insert rules using existing sheet manager
+        const ruleInfo = this.sheetManager.insertRule(registry, rulesToInsert, className, root);
+        if (!ruleInfo) {
+            // Update metrics
+            if (registry.metrics) {
+                registry.metrics.misses++;
+            }
+            return {
+                className,
+                dispose: () => { },
+            };
+        }
+        // Store in registry
+        registry.refCounts.set(className, 1);
+        registry.rules.set(className, ruleInfo);
+        // Update metrics
+        if (registry.metrics) {
+            registry.metrics.totalInsertions++;
+            registry.metrics.misses++;
+        }
+        return {
+            className,
+            dispose: () => this.dispose(className, registry),
+        };
+    }
+    /**
+     * Extract className from rules (assumes first rule contains the base className)
+     */
+    extractClassName(rules) {
+        for (const rule of rules) {
+            const match = rule.selector.match(/^\.([a-zA-Z0-9_-]+)/);
+            if (match) {
+                return match[1];
+            }
+        }
+        return null;
+    }
+    /**
+     * Generate cache key from style rules with optimized deduplication
+     */
+    generateCacheKey(rules) {
+        const normalizeSelector = (selector) => {
+            const match = selector.match(/^\.[a-zA-Z0-9_-]+(.*)$/);
+            return match ? match[1] : selector;
+        };
+        // Sort rules to ensure consistent cache keys for equivalent rule sets
+        const sortedRules = [...rules].sort((a, b) => {
+            const aKey = `${normalizeSelector(a.selector)}${a.atRules ? a.atRules.join('|') : ''}`;
+            const bKey = `${normalizeSelector(b.selector)}${b.atRules ? b.atRules.join('|') : ''}`;
+            return aKey.localeCompare(bKey);
+        });
+        return sortedRules
+            .map((rule) => {
+            const at = rule.atRules && rule.atRules.length
+                ? `@${rule.atRules.join('|')}`
+                : '';
+            const sel = normalizeSelector(rule.selector);
+            // Normalize declarations by sorting properties for consistent caching
+            const normalizedDeclarations = rule.declarations
+                .split(';')
+                .filter(Boolean)
+                .map((decl) => decl.trim())
+                .sort()
+                .join(';');
+            return `${sel}{${normalizedDeclarations}}${at}`;
+        })
+            .join('');
+    }
+    /**
+     * Dispose of a className
+     */
+    dispose(className, registry) {
+        const currentRefCount = registry.refCounts.get(className) || 0;
+        if (currentRefCount <= 1) {
+            // Mark as unused immediately
+            this.sheetManager.markAsUnused(registry, className);
+        }
+        else {
+            registry.refCounts.set(className, currentRefCount - 1);
+        }
+    }
+    /**
+     * Cleanup unused rules
+     */
+    cleanup(root) {
+        const registry = this.sheetManager.getRegistry(root || document);
+        this.sheetManager.processCleanupQueue(registry);
+    }
+    /**
+     * Force bulk cleanup of unused styles
+     */
+    forceBulkCleanup(root) {
+        const registry = this.sheetManager.getRegistry(root || document);
+        this.sheetManager['performBulkCleanup'](registry);
+    }
+    /**
+     * Get CSS text from all sheets (for SSR)
+     */
+    getCssText(options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        return this.sheetManager.getCssText(registry);
+    }
+    /**
+     * Get CSS only for the provided tasty classNames (e.g., ["t0","t3"])
+     */
+    getCssTextForClasses(classNames, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        const cssChunks = [];
+        for (const cls of classNames) {
+            const info = registry.rules.get(cls);
+            if (info) {
+                if (info.cssText && info.cssText.length) {
+                    cssChunks.push(...info.cssText);
+                }
+                else {
+                    // Fallback: try to read from live sheet by index range
+                    const sheet = registry.sheets[info.sheetIndex];
+                    const styleSheet = sheet?.sheet?.sheet;
+                    if (styleSheet) {
+                        const start = Math.max(0, info.ruleIndex);
+                        const end = Math.min(styleSheet.cssRules.length - 1, info.endRuleIndex ?? info.ruleIndex);
+                        for (let i = start; i <= end; i++) {
+                            const rule = styleSheet.cssRules[i];
+                            if (rule)
+                                cssChunks.push(rule.cssText);
+                        }
+                    }
+                }
+            }
+        }
+        return cssChunks.join('\n');
+    }
+    /**
+     * Get cache performance metrics
+     */
+    getMetrics(options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        return this.sheetManager.getMetrics(registry);
+    }
+    /**
+     * Reset cache performance metrics
+     */
+    resetMetrics(options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        this.sheetManager.resetMetrics(registry);
+    }
+    /**
+     * Force cleanup of unused styles (useful for memory pressure)
+     */
+    forceCleanupUnused(options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        this.sheetManager['performBulkCleanup'](registry);
+    }
+    /**
+     * Define a CSS @property custom property
+     * Example:
+     * @property --rotation { syntax: "<angle>"; inherits: false; initial-value: 45deg; }
+     * Note: No caching or dispose — this defines a global property.
+     */
+    property(name, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        // Check if already defined to avoid duplicates
+        if (registry.injectedProperties.has(name)) {
+            return;
+        }
+        const parts = [];
+        if (options?.syntax != null) {
+            let syntax = String(options.syntax).trim();
+            if (!/^['"]/u.test(syntax))
+                syntax = `"${syntax}"`;
+            parts.push(`syntax: ${syntax};`);
+        }
+        if (options?.inherits != null) {
+            parts.push(`inherits: ${options.inherits ? 'true' : 'false'};`);
+        }
+        if (options?.initialValue != null) {
+            let initialValueStr;
+            if (typeof options.initialValue === 'number') {
+                initialValueStr = String(options.initialValue);
+            }
+            else {
+                // Process via tasty parser to resolve custom units/functions
+                initialValueStr = parseStyle(options.initialValue).output;
+            }
+            parts.push(`initial-value: ${initialValueStr};`);
+        }
+        const declarations = parts.join(' ').trim();
+        const rule = {
+            selector: `@property ${name}`,
+            declarations,
+        };
+        // Insert as a global rule; ignore returned info (no tracking/dispose)
+        this.sheetManager.insertGlobalRule(registry, [rule], `property:${name}`, root);
+        // Track that this property was injected
+        registry.injectedProperties.add(name);
+    }
+    /**
+     * Check whether a given @property name was already injected by this injector
+     */
+    isPropertyDefined(name, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        return registry.injectedProperties.has(name);
+    }
+    /**
+     * Inject keyframes and return object with toString() and dispose()
+     */
+    keyframes(steps, nameOrOptions) {
+        // Parse parameters
+        const isStringName = typeof nameOrOptions === 'string';
+        const providedName = isStringName ? nameOrOptions : nameOrOptions?.name;
+        const root = isStringName ? document : nameOrOptions?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        if (Object.keys(steps).length === 0) {
+            return {
+                toString: () => '',
+                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);
+        if (existing) {
+            existing.refCount++;
+            return {
+                toString: () => existing.name,
+                dispose: () => this.disposeKeyframes(cacheKey, registry),
+            };
+        }
+        // Use provided name or generate new one
+        const name = providedName || `k${registry.keyframesCounter++}`;
+        // Insert keyframes
+        const info = this.sheetManager.insertKeyframes(registry, steps, name, root);
+        if (!info) {
+            return {
+                toString: () => '',
+                dispose: () => { },
+            };
+        }
+        // Cache the result
+        registry.keyframesCache.set(cacheKey, {
+            name,
+            refCount: 1,
+            info,
+        });
+        // Update metrics
+        if (registry.metrics) {
+            registry.metrics.totalInsertions++;
+            registry.metrics.misses++;
+        }
+        return {
+            toString: () => name,
+            dispose: () => this.disposeKeyframes(cacheKey, registry),
+        };
+    }
+    /**
+     * Dispose keyframes
+     */
+    disposeKeyframes(cacheKey, registry) {
+        const entry = registry.keyframesCache.get(cacheKey);
+        if (!entry)
+            return;
+        entry.refCount--;
+        if (entry.refCount <= 0) {
+            // Mark as unused
+            registry.keyframesCache.delete(cacheKey);
+            this.sheetManager.markKeyframesAsUnused(registry, entry.name);
+        }
+    }
+    /**
+     * Destroy all resources for a root
+     */
+    destroy(root) {
+        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);
+                    // Bind the inject method to the outer injector instance
+                    const result = injector.inject(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;
+    }
+}
+
+