@cube-dev/ui-kit 0.0.0-canary-8ca04ef → 0.0.0-canary-dae9b2f

package/es/tasty/injector/index.js

@@ -1,12 +1,85 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * Released under the MIT license.
  */
 
-import { getConfig, getGlobalInjector, isTestEnvironment, markStylesGenerated, } from '../config.js';
-import { StyleInjector } from './injector.js';
+import { isDevEnv } from '../utils/isDevEnv';
+import { StyleInjector } from './injector';
+// Use a more robust global singleton that survives React Strict Mode
+const GLOBAL_INJECTOR_KEY = '__TASTY_GLOBAL_INJECTOR__';
+/**
+ * Detect if we're running in a test environment
+ */
+function isTestEnvironment() {
+    // Check Node.js environment
+    if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
+        return true;
+    }
+    // Check for Jest globals (safely)
+    if (typeof global !== 'undefined') {
+        const g = global;
+        if (g.jest || g.expect || g.describe || g.it) {
+            return true;
+        }
+    }
+    // Check for jsdom environment (common in tests)
+    if (typeof window !== 'undefined' &&
+        window.navigator?.userAgent?.includes('jsdom')) {
+        return true;
+    }
+    // Check for other test runners
+    if (typeof globalThis !== 'undefined') {
+        const gt = globalThis;
+        if (gt.vitest || gt.mocha) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Create default configuration with optional test environment detection
+ */
+function createDefaultConfig(isTest) {
+    return {
+        maxRulesPerSheet: 8192, // safer default cap per sheet
+        unusedStylesThreshold: 500, // default threshold for bulk cleanup of unused styles
+        bulkCleanupDelay: 5000, // default delay before bulk cleanup (ignored if idleCleanup is true)
+        idleCleanup: true, // default to using requestIdleCallback instead of setTimeout
+        forceTextInjection: isTest ?? false, // auto-enable for test environments
+        devMode: isDevEnv(), // enable dev features: performance tracking and debug info
+        bulkCleanupBatchRatio: 0.5,
+        unusedStylesMinAgeMs: 10000,
+    };
+}
+/**
+ * Configure the global style injector
+ */
+export function configure(config = {}) {
+    const fullConfig = {
+        ...createDefaultConfig(),
+        ...config,
+    };
+    // Store on window to survive React Strict Mode resets
+    if (typeof window !== 'undefined') {
+        window[GLOBAL_INJECTOR_KEY] = new StyleInjector(fullConfig);
+    }
+    else {
+        // Fallback for SSR
+        globalThis[GLOBAL_INJECTOR_KEY] = new StyleInjector(fullConfig);
+    }
+}
+/**
+ * Get or create the global injector instance
+ */
+function getGlobalInjector() {
+    const storage = typeof window !== 'undefined' ? window : globalThis;
+    if (!storage[GLOBAL_INJECTOR_KEY]) {
+        configure();
+    }
+    return storage[GLOBAL_INJECTOR_KEY];
+}
 /**
  * Allocate a className for a cacheKey without injecting styles yet
  */
@@ -17,8 +90,6 @@ export function allocateClassName(cacheKey, options) {
  * Inject styles and return className with dispose function
  */
 export function inject(rules, options) {
-    // Mark that styles have been generated (prevents configuration changes)
-    markStylesGenerated();
     return getGlobalInjector().inject(rules, options);
 }
 /**
@@ -28,30 +99,10 @@ export function injectGlobal(rules, options) {
     return getGlobalInjector().injectGlobal(rules, options);
 }
 /**
- * Inject raw CSS text directly without parsing
- * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
- * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
- *
- * @example
- * ```tsx
- * // Inject raw CSS
- * const { dispose } = injectRawCSS(`
- *   body { margin: 0; padding: 0; }
- *   .my-class { color: red; }
- * `);
- *
- * // Later, remove the injected CSS
- * dispose();
- * ```
- */
-export function injectRawCSS(css, options) {
-    return getGlobalInjector().injectRawCSS(css, options);
-}
-/**
- * Get raw CSS text for SSR
+ * Internal method for createGlobalStyle - not exported publicly
  */
-export function getRawCSSText(options) {
-    return getGlobalInjector().getRawCSSText(options);
+function injectCreateGlobalStyle(rules, options) {
+    return getGlobalInjector().injectCreateGlobalStyle(rules, options);
 }
 /**
  * Inject keyframes and return object with toString() and dispose()
@@ -122,16 +173,21 @@ export function destroy(root) {
  * Create a new isolated injector instance
  */
 export function createInjector(config = {}) {
-    const defaultConfig = getConfig();
+    const isTest = isTestEnvironment();
     const fullConfig = {
-        ...defaultConfig,
-        // Auto-enable forceTextInjection in test environments
-        forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),
+        ...createDefaultConfig(isTest),
         ...config,
     };
     return new StyleInjector(fullConfig);
 }
-export { StyleInjector } from './injector.js';
-export { SheetManager } from './sheet-manager.js';
+/**
+ * Create a global style component like styled-components createGlobalStyle
+ * Returns a React component that injects global styles when mounted and cleans up when unmounted
+ */
+export function createGlobalStyle(strings, ...interpolations) {
+    return getGlobalInjector().createGlobalStyle(strings, ...interpolations);
+}
+export { StyleInjector } from './injector';
+export { SheetManager } from './sheet-manager';
 
         

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
+ * @cube-dev/ui-kit v0.0.0-canary-dae9b2f
  * 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;
+    }
 }