@cube-dev/ui-kit 0.98.8 → 0.99.0

package/es/tasty/config.js

@@ -0,0 +1,280 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Tasty Configuration Module
+ *
+ * Centralizes all tasty configuration, including:
+ * - Style injector settings (nonce, cleanup thresholds, etc.)
+ * - Global predefined states for advanced state mapping
+ * - stylesGenerated flag that locks configuration after first style generation
+ *
+ * Configuration must be done BEFORE any styles are generated.
+ * After the first `inject()` call, configuration is locked and attempts to
+ * reconfigure will emit a warning and be ignored.
+ */
+import { StyleInjector } from './injector/injector.js';
+import { setGlobalPredefinedStates } from './states/index.js';
+import { isDevEnv } from './utils/isDevEnv.js';
+import { CUSTOM_UNITS, getGlobalFuncs, getGlobalParser } from './utils/styles.js';
+// Warnings tracking to avoid duplicates
+const emittedWarnings = new Set();
+const devMode = isDevEnv();
+/**
+ * Emit a warning only once
+ */
+function warnOnce(key, message) {
+    if (devMode && !emittedWarnings.has(key)) {
+        emittedWarnings.add(key);
+        console.warn(message);
+    }
+}
+// ============================================================================
+// Configuration State
+// ============================================================================
+// Track whether styles have been generated (locks configuration)
+let stylesGenerated = false;
+// Current configuration (null until first configure() or auto-configured on first use)
+let currentConfig = null;
+// Global keyframes storage (null = no keyframes configured, empty object checked via hasGlobalKeyframes)
+let globalKeyframes = null;
+// Global injector instance key
+const GLOBAL_INJECTOR_KEY = '__TASTY_GLOBAL_INJECTOR__';
+/**
+ * Detect if we're running in a test environment
+ */
+export 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,
+        unusedStylesThreshold: 500,
+        bulkCleanupDelay: 5000,
+        idleCleanup: true,
+        forceTextInjection: isTest ?? false,
+        devMode: isDevEnv(),
+        bulkCleanupBatchRatio: 0.5,
+        unusedStylesMinAgeMs: 10000,
+    };
+}
+// ============================================================================
+// stylesGenerated Flag Management
+// ============================================================================
+/**
+ * Mark that styles have been generated (called by injector on first inject)
+ * This locks the configuration - no further changes allowed.
+ */
+export function markStylesGenerated() {
+    stylesGenerated = true;
+}
+/**
+ * Check if styles have been generated (configuration is locked)
+ */
+export function hasStylesGenerated() {
+    return stylesGenerated;
+}
+/**
+ * Reset styles generated flag (for testing only)
+ */
+export function resetStylesGenerated() {
+    stylesGenerated = false;
+    emittedWarnings.clear();
+}
+// ============================================================================
+// Global Keyframes Management
+// ============================================================================
+/**
+ * Check if any global keyframes are configured.
+ * Fast path: returns false if no keyframes were ever set.
+ */
+export function hasGlobalKeyframes() {
+    return globalKeyframes !== null && Object.keys(globalKeyframes).length > 0;
+}
+/**
+ * Get global keyframes configuration.
+ * Returns null if no keyframes configured (fast path for zero-overhead).
+ */
+export function getGlobalKeyframes() {
+    return globalKeyframes;
+}
+/**
+ * Set global keyframes (called from configure).
+ * Internal use only.
+ */
+function setGlobalKeyframes(keyframes) {
+    if (stylesGenerated) {
+        warnOnce('keyframes-after-styles', `[Tasty] Cannot update keyframes after styles have been generated.\n` +
+            `The new keyframes will be ignored.`);
+        return;
+    }
+    globalKeyframes = keyframes;
+}
+/**
+ * Check if configuration is locked (styles have been generated)
+ */
+export function isConfigLocked() {
+    return stylesGenerated;
+}
+// ============================================================================
+// Configuration API
+// ============================================================================
+/**
+ * Configure the Tasty style system.
+ *
+ * Must be called BEFORE any styles are generated (before first render that uses tasty).
+ * After styles are generated, configuration is locked and calls to configure() will
+ * emit a warning and be ignored.
+ *
+ * @example
+ * ```ts
+ * import { configure } from '@cube-dev/ui-kit';
+ *
+ * // Configure before app renders
+ * configure({
+ *   nonce: 'abc123',
+ *   states: {
+ *     '@mobile': '@media(w < 768px)',
+ *     '@dark': '@root(theme=dark)',
+ *   },
+ * });
+ * ```
+ */
+export function configure(config = {}) {
+    if (stylesGenerated) {
+        warnOnce('configure-after-styles', `[Tasty] Cannot call configure() after styles have been generated.\n` +
+            `Configuration must be done before the first render. The configuration will be ignored.`);
+        return;
+    }
+    // Collect merged values from plugins first, then override with direct config
+    let mergedStates = {};
+    let mergedUnits = {};
+    let mergedFuncs = {};
+    // Process plugins in order
+    if (config.plugins) {
+        for (const plugin of config.plugins) {
+            if (plugin.states) {
+                mergedStates = { ...mergedStates, ...plugin.states };
+            }
+            if (plugin.units) {
+                mergedUnits = { ...mergedUnits, ...plugin.units };
+            }
+            if (plugin.funcs) {
+                mergedFuncs = { ...mergedFuncs, ...plugin.funcs };
+            }
+        }
+    }
+    // Direct config overrides plugins
+    if (config.states) {
+        mergedStates = { ...mergedStates, ...config.states };
+    }
+    if (config.units) {
+        mergedUnits = { ...mergedUnits, ...config.units };
+    }
+    if (config.funcs) {
+        mergedFuncs = { ...mergedFuncs, ...config.funcs };
+    }
+    // Handle predefined states
+    if (Object.keys(mergedStates).length > 0) {
+        setGlobalPredefinedStates(mergedStates);
+    }
+    // Handle parser configuration (merge semantics - extend, not replace)
+    const parser = getGlobalParser();
+    if (config.parserCacheSize !== undefined) {
+        parser.updateOptions({ cacheSize: config.parserCacheSize });
+    }
+    if (Object.keys(mergedUnits).length > 0) {
+        // Merge with existing units
+        const currentUnits = parser.getUnits() ?? CUSTOM_UNITS;
+        parser.setUnits({ ...currentUnits, ...mergedUnits });
+    }
+    if (Object.keys(mergedFuncs).length > 0) {
+        // Merge with existing funcs
+        const currentFuncs = getGlobalFuncs();
+        const finalFuncs = { ...currentFuncs, ...mergedFuncs };
+        parser.setFuncs(finalFuncs);
+        // Also update the global registry so customFunc() continues to work
+        Object.assign(currentFuncs, mergedFuncs);
+    }
+    // Handle keyframes
+    if (config.keyframes) {
+        setGlobalKeyframes(config.keyframes);
+    }
+    // Create config without states, parser options, plugins, and keyframes (handled separately)
+    const { states: _states, parserCacheSize: _parserCacheSize, units: _units, funcs: _funcs, plugins: _plugins, keyframes: _keyframes, ...injectorConfig } = config;
+    const fullConfig = {
+        ...createDefaultConfig(),
+        ...currentConfig,
+        ...injectorConfig,
+    };
+    // Store the config
+    currentConfig = fullConfig;
+    // Create/replace the global injector
+    const storage = typeof window !== 'undefined' ? window : globalThis;
+    storage[GLOBAL_INJECTOR_KEY] = new StyleInjector(fullConfig);
+}
+/**
+ * Get the current configuration.
+ * If not configured, returns default configuration.
+ */
+export function getConfig() {
+    if (!currentConfig) {
+        currentConfig = createDefaultConfig(isTestEnvironment());
+    }
+    return currentConfig;
+}
+/**
+ * Get the global injector instance.
+ * Auto-configures with defaults if not already configured.
+ */
+export function getGlobalInjector() {
+    const storage = typeof window !== 'undefined' ? window : globalThis;
+    if (!storage[GLOBAL_INJECTOR_KEY]) {
+        configure();
+    }
+    return storage[GLOBAL_INJECTOR_KEY];
+}
+/**
+ * Reset configuration (for testing only).
+ * Clears the global injector and allows reconfiguration.
+ */
+export function resetConfig() {
+    stylesGenerated = false;
+    currentConfig = null;
+    globalKeyframes = null;
+    emittedWarnings.clear();
+    const storage = typeof window !== 'undefined' ? window : globalThis;
+    delete storage[GLOBAL_INJECTOR_KEY];
+}
+
+        

package/es/tasty/debug.js

@@ -1,15 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.8
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 /**
  * Debug utilities for inspecting tasty-generated CSS at runtime
  */
-import { getCssTextForNode, injector } from './injector';
-import { isDevEnv } from './utils/isDevEnv';
+import { CHUNK_NAMES } from './chunks/definitions.js';
+import { getCssTextForNode, injector } from './injector/index.js';
+import { isDevEnv } from './utils/isDevEnv.js';
 /**
  * Pretty-print CSS with proper indentation and formatting
  */
@@ -246,6 +247,95 @@ function getPageStats(options) {
     }
     return { cssSize, ruleCount, stylesheetCount, skippedStylesheets };
 }
+// ============================================================================
+// Chunk-aware helpers (for style chunking optimization)
+// ============================================================================
+/**
+ * Extract chunk name from a cache key.
+ *
+ * Cache keys have the format: "chunkName\0key:value\0key:value..."
+ * or "[states:...]\0chunkName\0..." for predefined states.
+ *
+ * @param cacheKey - The cache key to parse
+ * @returns The chunk name, or null if not found
+ */
+function extractChunkNameFromCacheKey(cacheKey) {
+    // Cache keys are separated by \0 (null character)
+    const parts = cacheKey.split('\0');
+    for (const part of parts) {
+        // Skip predefined states prefix
+        if (part.startsWith('[states:'))
+            continue;
+        // First non-states part that doesn't contain : is the chunk name
+        if (!part.includes(':') && part.length > 0) {
+            return part;
+        }
+    }
+    return null;
+}
+/**
+ * Get chunk info for a className by reverse-looking up its cache key.
+ *
+ * @param className - The tasty class name (e.g., "t0", "t123")
+ * @param root - The document or shadow root to search in
+ * @returns Object with chunk name and cache key, or nulls if not found
+ */
+function getChunkForClassName(className, root = document) {
+    const registry = injector.instance['sheetManager']?.getRegistry(root);
+    if (!registry) {
+        return { chunkName: null, cacheKey: null };
+    }
+    // Reverse lookup: find the cache key for this className
+    for (const [cacheKey, cn] of registry.cacheKeyToClassName) {
+        if (cn === className) {
+            return {
+                chunkName: extractChunkNameFromCacheKey(cacheKey),
+                cacheKey,
+            };
+        }
+    }
+    return { chunkName: null, cacheKey: null };
+}
+/**
+ * Get chunk breakdown statistics for all styles.
+ *
+ * @param root - The document or shadow root to search in
+ * @returns Object with breakdown by chunk type and totals
+ */
+function getChunkBreakdown(root = document) {
+    const registry = injector.instance['sheetManager']?.getRegistry(root);
+    if (!registry) {
+        return {
+            byChunk: {},
+            totalChunkTypes: 0,
+        };
+    }
+    const byChunk = {};
+    // Group classes by chunk
+    for (const [cacheKey, className] of registry.cacheKeyToClassName) {
+        const chunkName = extractChunkNameFromCacheKey(cacheKey) || 'unknown';
+        if (!byChunk[chunkName]) {
+            byChunk[chunkName] = { classes: [], cssSize: 0, ruleCount: 0 };
+        }
+        byChunk[chunkName].classes.push(className);
+        // Get CSS for this class
+        const css = injector.instance.getCssTextForClasses([className], { root });
+        byChunk[chunkName].cssSize += css.length;
+        byChunk[chunkName].ruleCount += (css.match(/\{[^}]*\}/g) || []).length;
+    }
+    // Sort classes within each chunk for consistency
+    for (const entry of Object.values(byChunk)) {
+        entry.classes.sort((a, b) => {
+            const aNum = parseInt(a.slice(1));
+            const bNum = parseInt(b.slice(1));
+            return aNum - bNum;
+        });
+    }
+    return {
+        byChunk,
+        totalChunkTypes: Object.keys(byChunk).length,
+    };
+}
 /**
  * Concise tastyDebug API for inspecting styles at runtime
  */
@@ -316,6 +406,7 @@ export const tastyDebug = {
             return {
                 element: null,
                 classes: [],
+                chunks: [],
                 css: '',
                 size: 0,
                 rules: 0,
@@ -325,12 +416,18 @@ export const tastyDebug = {
         const tastyClasses = classList
             .split(/\s+/)
             .filter((cls) => /^t\d+$/.test(cls));
+        // Get chunk info for each tasty class
+        const chunks = tastyClasses.map((className) => ({
+            className,
+            chunkName: getChunkForClassName(className, root).chunkName,
+        }));
         const css = getCssTextForNode(element, { root });
         const prettifiedCSS = prettifyCSS(css);
         const ruleCount = (css.match(/\{[^}]*\}/g) || []).length;
         return {
             element,
             classes: tastyClasses,
+            chunks,
             css: prettifiedCSS,
             size: css.length,
             rules: ruleCount,
@@ -370,7 +467,63 @@ export const tastyDebug = {
         const { root } = opts || {};
         injector.instance.resetMetrics({ root });
     },
-    // 5) Get CSS for specific global types
+    // 5) Chunk breakdown (style chunking optimization)
+    /**
+     * Get breakdown of styles by chunk type.
+     *
+     * With style chunking enabled, styles are split into logical chunks
+     * (appearance, font, dimension, container, etc.) for better caching
+     * and CSS reuse.
+     *
+     * @param opts - Options including root document/shadow root
+     * @returns Breakdown by chunk type with class counts and CSS sizes
+     */
+    chunks(opts) {
+        const { root = document, log = false } = opts || {};
+        const breakdown = getChunkBreakdown(root);
+        const totalClasses = Object.values(breakdown.byChunk).reduce((sum, entry) => sum + entry.classes.length, 0);
+        if (log) {
+            console.group('🧩 Style Chunk Breakdown');
+            // Define display order matching CHUNK_NAMES
+            const displayOrder = [
+                CHUNK_NAMES.COMBINED, // non-chunked styles (e.g., @starting-style)
+                CHUNK_NAMES.APPEARANCE,
+                CHUNK_NAMES.FONT,
+                CHUNK_NAMES.DIMENSION,
+                CHUNK_NAMES.CONTAINER,
+                CHUNK_NAMES.SCROLLBAR,
+                CHUNK_NAMES.POSITION,
+                CHUNK_NAMES.MISC,
+                CHUNK_NAMES.SUBCOMPONENTS,
+            ];
+            // Show chunks in order
+            for (const chunkName of displayOrder) {
+                const data = breakdown.byChunk[chunkName];
+                if (data) {
+                    const sizeStr = data.cssSize > 1024
+                        ? `${(data.cssSize / 1024).toFixed(1)}KB`
+                        : `${data.cssSize}B`;
+                    console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
+                }
+            }
+            // Show any unknown chunks
+            for (const [chunkName, data] of Object.entries(breakdown.byChunk)) {
+                if (!displayOrder.includes(chunkName)) {
+                    const sizeStr = data.cssSize > 1024
+                        ? `${(data.cssSize / 1024).toFixed(1)}KB`
+                        : `${data.cssSize}B`;
+                    console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
+                }
+            }
+            console.log(`📊 Total: ${totalClasses} classes across ${breakdown.totalChunkTypes} chunk types`);
+            console.groupEnd();
+        }
+        return {
+            ...breakdown,
+            totalClasses,
+        };
+    },
+    // 6) Get CSS for specific global types
     getGlobalTypeCSS(type, opts) {
         const { root = document } = opts || {};
         const registry = injector.instance['sheetManager']?.getRegistry(root);
@@ -565,6 +718,8 @@ export const tastyDebug = {
                 propertyCSSSize: Math.round(propertyData.size * scaleFactor),
             };
         }
+        // Get chunk breakdown
+        const chunkBreakdown = getChunkBreakdown(root);
         const summary = {
             activeClasses: cacheStatus.classes.active,
             unusedClasses: cacheStatus.classes.unused,
@@ -591,6 +746,7 @@ export const tastyDebug = {
             propertyCount: definitions.properties.length,
             keyframeCount: definitions.keyframes.length,
             cleanupSummary,
+            chunkBreakdown,
         };
         if (log) {
             console.group('🎨 Comprehensive Tasty Debug Summary');
@@ -602,7 +758,7 @@ export const tastyDebug = {
             console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
             console.log(`  • Unused CSS: ${summary.unusedCSSSize} characters`);
             console.log(`  • Global CSS (injectGlobal): ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`);
-            console.log(`  • Raw CSS (createGlobalStyle): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`);
+            console.log(`  • Raw CSS (injectRawCSS/useRawCSS): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`);
             console.log(`  • Keyframes CSS: ${summary.keyframesCSSSize} characters (${summary.keyframesRuleCount} rules)`);
             console.log(`  • Property CSS: ${summary.propertyCSSSize} characters (${summary.propertyRuleCount} rules)`);
             // Show breakdown calculation
@@ -652,6 +808,30 @@ export const tastyDebug = {
                     : '0';
                 console.log(`  • Overall cache hit rate: ${hitRate}%`);
             }
+            // Show chunk breakdown
+            if (summary.chunkBreakdown.totalChunkTypes > 0) {
+                console.log('🧩 Style Chunk Breakdown:');
+                const displayOrder = [
+                    CHUNK_NAMES.COMBINED, // non-chunked styles (e.g., @starting-style)
+                    CHUNK_NAMES.APPEARANCE,
+                    CHUNK_NAMES.FONT,
+                    CHUNK_NAMES.DIMENSION,
+                    CHUNK_NAMES.CONTAINER,
+                    CHUNK_NAMES.SCROLLBAR,
+                    CHUNK_NAMES.POSITION,
+                    CHUNK_NAMES.MISC,
+                    CHUNK_NAMES.SUBCOMPONENTS,
+                ];
+                for (const chunkName of displayOrder) {
+                    const data = summary.chunkBreakdown.byChunk[chunkName];
+                    if (data) {
+                        const sizeStr = data.cssSize > 1024
+                            ? `${(data.cssSize / 1024).toFixed(1)}KB`
+                            : `${data.cssSize}B`;
+                        console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
+                    }
+                }
+            }
             console.log('🔍 Details:');
             console.log('  • Active classes:', summary.activeClasses);
             console.log('  • Unused classes:', summary.unusedClasses);
@@ -735,15 +915,15 @@ export const tastyDebug = {
         console.groupEnd();
         console.groupEnd();
     },
-    // 11) Show help and usage examples
+    // 12) Show help and usage examples
     help() {
         console.group('🎨 tastyDebug - Quick Start Guide');
         console.log('💡 Essential commands:');
         console.log('  • tastyDebug.summary({ log: true }) - comprehensive overview');
+        console.log('  • tastyDebug.chunks({ log: true }) - style chunk breakdown');
         console.log('  • tastyDebug.log("active") - beautiful CSS display');
         console.log('  • tastyDebug.css("active") - get active CSS');
-        console.log('  • tastyDebug.inspect(".my-element") - detailed element inspection');
-        console.log('  • tastyDebug.global({ log: true }) - global CSS analysis');
+        console.log('  • tastyDebug.inspect(".my-element") - element inspection with chunk info');
         console.log('  • tastyDebug.cache() - cache status');
         console.log('  • tastyDebug.defs() - defined properties & keyframes');
         console.log('  • tastyDebug.pageCSS({ log: true }) - all page CSS');
@@ -752,7 +932,7 @@ export const tastyDebug = {
         console.log('  • "all" - all tasty CSS + global CSS');
         console.log('  • "active" - CSS for classes in DOM');
         console.log('  • "unused" - CSS for classes with refCount = 0');
-        console.log('  • "global" - only global CSS (createGlobalStyle)');
+        console.log('  • "global" - only global CSS (injectGlobal)');
         console.log('  • "page" - ALL page CSS (including non-tasty)');
         console.log('  • "t123" - specific tasty class');
         console.log('  • [".my-selector"] - CSS selector');
@@ -762,6 +942,12 @@ export const tastyDebug = {
         console.log('  • { title: "Custom" } - custom title for log()');
         console.log('  • { root: shadowRoot } - target Shadow DOM');
         console.log('  • { prettify: false } - skip CSS formatting');
+        console.log('');
+        console.log('🧩 Style Chunking:');
+        console.log('  Elements have multiple classes (one per chunk: appearance, font, dimension, etc.)');
+        console.log('  • tastyDebug.chunks({ log: true }) - breakdown by chunk type');
+        console.log('  • tastyDebug.inspect() - shows which chunk each class belongs to');
+        console.log('  Chunk types: combined (non-chunked), appearance, font, dimension, container, scrollbar, position, misc, subcomponents');
         console.groupEnd();
     },
 };

package/es/tasty/hooks/index.js

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+export { useStyles } from './useStyles.js';
+export { useGlobalStyles } from './useGlobalStyles.js';
+export { useRawCSS } from './useRawCSS.js';
+
+        

package/es/tasty/hooks/useGlobalStyles.js

@@ -0,0 +1,67 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { useInsertionEffect, useMemo, useRef } from 'react';
+import { injectGlobal } from '../injector/index.js';
+import { renderStyles } from '../pipeline/index.js';
+/**
+ * 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('.card', {
+ *     padding: '2x',
+ *     radius: '1r',
+ *     fill: '#white',
+ *   });
+ *
+ *   return <div className="card">Content</div>;
+ * }
+ * ```
+ */
+export function useGlobalStyles(selector, styles) {
+    const disposeRef = useRef(null);
+    // Render styles with the provided selector
+    // Note: renderStyles overload with selector string returns StyleResult[] directly
+    const styleResults = useMemo(() => {
+        if (!styles)
+            return [];
+        // Validate selector - empty string would cause renderStyles to return RenderResult instead of StyleResult[]
+        if (!selector) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('[Tasty] useGlobalStyles: selector is required and cannot be empty. ' +
+                    'Styles will not be injected.');
+            }
+            return [];
+        }
+        const result = renderStyles(styles, selector);
+        // When a non-empty selector is provided, renderStyles returns StyleResult[]
+        return result;
+    }, [styles, selector]);
+    // Inject as global styles
+    useInsertionEffect(() => {
+        disposeRef.current?.();
+        if (styleResults.length > 0) {
+            const { dispose } = injectGlobal(styleResults);
+            disposeRef.current = dispose;
+        }
+        else {
+            disposeRef.current = null;
+        }
+        return () => {
+            disposeRef.current?.();
+            disposeRef.current = null;
+        };
+    }, [styleResults]);
+}
+
+