@cube-dev/ui-kit 0.0.0-canary-76be278 → 0.0.0-canary-7e4ec9d

package/es/tasty/index.js

@@ -1,38 +1,24 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 
-// Register built-in plugins at module load time
-import { configure } from './config';
-import { okhslPlugin } from './plugins';
 export { tasty, Element } from './tasty';
-export { useStyles, useGlobalStyles, useRawCSS } from './hooks';
-// Configuration API
-export { configure, getConfig, isConfigLocked, hasStylesGenerated, resetConfig, isTestEnvironment, } from './config';
-// Plugins
-export { okhslPlugin, okhslFunc } from './plugins';
-configure({
-    plugins: [okhslPlugin()],
-});
-// Chunk utilities for advanced use cases
-export { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from './chunks';
-// Advanced state mapping utilities
-export { getGlobalPredefinedStates, setGlobalPredefinedStates } from './states';
 export * from './utils/filterBaseProps';
 export * from './utils/colors';
 export * from './utils/styles';
 export * from './utils/modAttrs';
-export { renderStyles, isSelector } from './pipeline';
+export * from './utils/responsive';
+export * from './utils/renderStyles';
 export * from './utils/dotize';
 export * from './styles/list';
+export * from './providers/BreakpointsProvider';
 export * from './utils/mergeStyles';
 export * from './utils/warnings';
 export * from './utils/getDisplayName';
 export * from './utils/processTokens';
-export * from './utils/typography';
 export * from './injector';
 export * from './debug';
 

package/es/tasty/injector/index.js

@@ -1,12 +1,85 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 
-import { getConfig, getGlobalInjector, isTestEnvironment, markStylesGenerated, } from '../config';
+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,15 +173,20 @@ 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);
 }
+/**
+ * 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-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 
@@ -9,7 +9,9 @@
  * 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}
@@ -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') {
@@ -446,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;
+    }
 }