@cube-dev/ui-kit 0.0.0-canary-4777472 → 0.0.0-canary-b26ec55

package/es/tasty/injector/index.js

@@ -1,85 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-b26ec55
  * Released under the MIT license.
  */
 
-import { isDevEnv } from '../utils/isDevEnv';
+import { getConfig, getGlobalInjector, isTestEnvironment, markStylesGenerated, } from '../config';
 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
  */
@@ -90,6 +17,8 @@ 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);
 }
 /**
@@ -99,10 +28,30 @@ export function injectGlobal(rules, options) {
     return getGlobalInjector().injectGlobal(rules, options);
 }
 /**
- * Internal method for createGlobalStyle - not exported publicly
+ * 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
  */
-function injectCreateGlobalStyle(rules, options) {
-    return getGlobalInjector().injectCreateGlobalStyle(rules, options);
+export function getRawCSSText(options) {
+    return getGlobalInjector().getRawCSSText(options);
 }
 /**
  * Inject keyframes and return object with toString() and dispose()
@@ -173,20 +122,15 @@ export function destroy(root) {
  * Create a new isolated injector instance
  */
 export function createInjector(config = {}) {
-    const isTest = isTestEnvironment();
+    const defaultConfig = getConfig();
     const fullConfig = {
-        ...createDefaultConfig(isTest),
+        ...defaultConfig,
+        // Auto-enable forceTextInjection in test environments
+        forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),
         ...config,
     };
     return new StyleInjector(fullConfig);
 }
-/**
- * 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-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-b26ec55
  * Released under the MIT license.
  */
 
@@ -9,9 +9,7 @@
  * 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}
@@ -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') {
@@ -442,259 +446,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,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-b26ec55
  * Released under the MIT license.
  */
 
@@ -9,6 +9,12 @@ 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;
     }
@@ -237,8 +243,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 +257,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);
+                            }
                         }
                     }
                 }
@@ -906,6 +918,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.0.0-canary-4777472
+ * @cube-dev/ui-kit v0.0.0-canary-b26ec55
  * Released under the MIT license.
  */