@cube-dev/ui-kit 0.0.0-canary-9e3bcfc → 0.0.0-canary-eaff7d7

package/es/tasty/hooks/useGlobalStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9e3bcfc
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
  * Released under the MIT license.
  */
 
@@ -12,23 +12,23 @@ import { renderStyles } from '../pipeline';
  * Hook to inject global styles for a given selector.
  * Useful for styling elements by selector without generating classNames.
  *
+ * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
+ * @param styles - Tasty styles object
+ *
  * @example
  * ```tsx
  * function MyComponent() {
- *   useGlobalStyles({
- *     selector: '.card',
- *     styles: {
- *       padding: '2x',
- *       radius: '1r',
- *       fill: '#white',
- *     }
+ *   useGlobalStyles('.card', {
+ *     padding: '2x',
+ *     radius: '1r',
+ *     fill: '#white',
  *   });
  *
  *   return <div className="card">Content</div>;
  * }
  * ```
  */
-export function useGlobalStyles({ selector, styles, }) {
+export function useGlobalStyles(selector, styles) {
     const disposeRef = useRef(null);
     // Render styles with the provided selector
     // Note: renderStyles overload with selector string returns StyleResult[] directly

package/es/tasty/hooks/useRawCSS.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
+ * Released under the MIT license.
+ */
+
+import { useInsertionEffect, useMemo, useRef } from 'react';
+import { injectRawCSS } from '../injector';
+// Implementation
+export function useRawCSS(cssOrFactory, depsOrOptions, options) {
+    // Detect which overload is being used
+    const isFactory = typeof cssOrFactory === 'function';
+    // Parse arguments based on overload
+    const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;
+    const opts = isFactory
+        ? options
+        : depsOrOptions;
+    // Memoize CSS - for factory functions, use provided deps; for strings, use the string itself
+    const css = useMemo(() => isFactory ? cssOrFactory() : cssOrFactory, isFactory ? deps ?? [] : [cssOrFactory]);
+    const disposeRef = useRef(null);
+    useInsertionEffect(() => {
+        // Dispose previous injection if any
+        disposeRef.current?.();
+        if (!css.trim()) {
+            disposeRef.current = null;
+            return;
+        }
+        // Inject new CSS
+        const { dispose } = injectRawCSS(css, opts);
+        disposeRef.current = dispose;
+        // Cleanup on unmount or when css changes
+        return () => {
+            disposeRef.current?.();
+            disposeRef.current = null;
+        };
+    }, [css, opts?.root]);
+}
+
+        

package/es/tasty/hooks/useStyles.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9e3bcfc
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
  * Released under the MIT license.
  */
 
 import { useInsertionEffect, useMemo, useRef } from 'react';
-import { categorizeStyleKeys, generateChunkCacheKey, renderStylesForChunk, } from '../chunks';
+import { categorizeStyleKeys, CHUNK_NAMES, generateChunkCacheKey, renderStylesForChunk, } from '../chunks';
 import { allocateClassName, inject } from '../injector';
 import { renderStyles } from '../pipeline';
 import { stringifyStyles } from '../utils/styles';
@@ -79,7 +79,7 @@ export function useStyles({ styles }) {
             const { className } = allocateClassName(styleKey);
             return [
                 {
-                    name: 'all',
+                    name: CHUNK_NAMES.COMBINED,
                     styleKeys: Object.keys(currentStyles),
                     cacheKey: styleKey,
                     renderResult,

package/es/tasty/index.js

@@ -1,12 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9e3bcfc
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
  * Released under the MIT license.
  */
 
 export { tasty, Element } from './tasty';
-export { useStyles, useGlobalStyles } from './hooks';
+export { useStyles, useGlobalStyles, useRawCSS } from './hooks';
+// Configuration API
+export { configure, getConfig, isConfigLocked, hasStylesGenerated, resetConfig, isTestEnvironment, } from './config';
 // Chunk utilities for advanced use cases
 export { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from './chunks';
 // Advanced state mapping utilities

package/es/tasty/injector/index.js

@@ -1,92 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9e3bcfc
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
  * Released under the MIT license.
  */
 
-import { markStylesGenerated as markStylesGeneratedInStates, setGlobalPredefinedStates, } from '../states';
-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 = {}) {
-    // Handle predefined states before creating/updating the injector
-    if (config.states) {
-        setGlobalPredefinedStates(config.states);
-    }
-    // Create config without states (it's handled separately)
-    const { states: _states, ...injectorConfig } = config;
-    const fullConfig = {
-        ...createDefaultConfig(),
-        ...injectorConfig,
-    };
-    // 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
  */
@@ -97,8 +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 dynamic predefined state updates)
-    markStylesGeneratedInStates();
+    // Mark that styles have been generated (prevents configuration changes)
+    markStylesGenerated();
     return getGlobalInjector().inject(rules, options);
 }
 /**
@@ -108,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()
@@ -182,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-9e3bcfc
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
  * 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}
@@ -214,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
@@ -342,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') {
@@ -454,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;
-    }
 }