@cube-dev/ui-kit 0.0.0-canary-1d46daa → 0.0.0-canary-736d057

package/es/tasty/injector/flatten.js

@@ -0,0 +1,350 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
+ * Released under the MIT license.
+ */
+
+/**
+ * Parse and flatten nested CSS
+ * Handles &, .Class, SubElement patterns from renderStyles output
+ * Preserves at-rule context (media queries, supports, etc.)
+ */
+export function flattenNestedCss(cssText, baseClassName, atRuleStack = []) {
+    const rules = [];
+    if (!cssText.trim()) {
+        return rules;
+    }
+    // Parse the CSS text into rules
+    const parsedRules = parseCssRules(cssText, atRuleStack);
+    for (const rule of parsedRules) {
+        const flattenedRules = flattenRule(rule, baseClassName);
+        rules.push(...flattenedRules);
+    }
+    return rules;
+}
+/**
+ * Parse CSS text into a tree structure
+ * Handles at-rules and preserves context
+ */
+function parseCssRules(cssText, atRuleStack = []) {
+    const rules = [];
+    // Enhanced regex to handle at-rules - improved to handle simple cases better
+    const rulePattern = /([^{]+)\s*\{\s*([^{}]*(?:\{[^}]*\}[^{}]*)*)\s*\}/g;
+    let match;
+    while ((match = rulePattern.exec(cssText)) !== null) {
+        const selector = match[1].trim();
+        const content = match[2].trim();
+        // Skip empty rules
+        if (!selector || (!content && !content.includes('{'))) {
+            continue;
+        }
+        // Check if this is an at-rule
+        if (selector.startsWith('@')) {
+            // This is an at-rule, parse its content with updated stack
+            const newAtRuleStack = [...atRuleStack, selector];
+            const nestedRules = parseCssRules(content, newAtRuleStack);
+            rules.push(...nestedRules); // Flatten at-rule contents
+        }
+        else {
+            // Regular selector rule
+            if (content.includes('{')) {
+                // Has nested rules - need to separate declarations from nested rules
+                const { declarations, nestedContent } = separateDeclarationsFromNested(content);
+                // Add the rule for the selector if it has declarations
+                if (declarations && declarations.trim()) {
+                    rules.push({
+                        selector,
+                        declarations: declarations.trim(),
+                        atRules: atRuleStack.length > 0 ? [...atRuleStack] : undefined,
+                    });
+                }
+                // Parse nested rules
+                if (nestedContent.trim()) {
+                    const nestedRules = parseCssRules(nestedContent, atRuleStack);
+                    rules.push(...nestedRules);
+                }
+            }
+            else {
+                // Only declarations - this handles simple cases like &{display: block;}
+                if (content && content.trim()) {
+                    rules.push({
+                        selector,
+                        declarations: content.trim(),
+                        atRules: atRuleStack.length > 0 ? [...atRuleStack] : undefined,
+                    });
+                }
+            }
+        }
+    }
+    return rules;
+}
+/**
+ * Separate declarations from nested rules in CSS content
+ */
+function separateDeclarationsFromNested(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 - extract the entire nested rule
+            const ruleStart = i;
+            let braceDepth = 1;
+            i++; // Move past opening brace
+            // Find the matching closing brace
+            while (i < content.length && braceDepth > 0) {
+                if (content[i] === '{') {
+                    braceDepth++;
+                }
+                else if (content[i] === '}') {
+                    braceDepth--;
+                }
+                i++;
+            }
+            // Extract the complete nested rule (including selector before '{')
+            let selectorStart = ruleStart;
+            while (selectorStart > 0 &&
+                content[selectorStart - 1] !== ';' &&
+                content[selectorStart - 1] !== '\n') {
+                selectorStart--;
+            }
+            // Skip whitespace at start of selector
+            while (selectorStart < ruleStart && /\s/.test(content[selectorStart])) {
+                selectorStart++;
+            }
+            const nestedRule = content.slice(selectorStart, i);
+            nestedRules.push(nestedRule);
+            // Save any pending declaration
+            if (currentDeclaration.trim()) {
+                const decl = currentDeclaration.trim();
+                if (decl.includes(':') && !decl.includes('{') && !decl.includes('}')) {
+                    declarations.push(decl);
+                }
+                currentDeclaration = '';
+            }
+            continue;
+        }
+        else if (char === ';') {
+            // End of declaration
+            const decl = currentDeclaration.trim();
+            if (decl &&
+                decl.includes(':') &&
+                !decl.includes('{') &&
+                !decl.includes('}')) {
+                declarations.push(decl);
+            }
+            currentDeclaration = '';
+        }
+        else if (char !== '\n' || currentDeclaration.trim()) {
+            // Add character to current declaration (skip leading newlines)
+            currentDeclaration += char;
+        }
+        i++;
+    }
+    // Handle final declaration if no trailing semicolon
+    if (currentDeclaration.trim()) {
+        const decl = currentDeclaration.trim();
+        if (decl.includes(':') && !decl.includes('{') && !decl.includes('}')) {
+            declarations.push(decl);
+        }
+    }
+    return {
+        declarations: declarations.join('; '),
+        nestedContent: nestedRules.join('\n'),
+    };
+}
+/**
+ * Extract CSS declarations (non-nested rules) from content
+ */
+function extractDeclarations(content) {
+    const declarations = [];
+    let braceDepth = 0;
+    let currentDeclaration = '';
+    for (let i = 0; i < content.length; i++) {
+        const char = content[i];
+        if (char === '{') {
+            braceDepth++;
+            // If we're entering a nested rule, save any current declaration
+            if (braceDepth === 1 && currentDeclaration.trim()) {
+                const decl = currentDeclaration.trim();
+                if (decl.includes(':') && !decl.includes('{') && !decl.includes('}')) {
+                    declarations.push(decl);
+                }
+                currentDeclaration = '';
+            }
+        }
+        else if (char === '}') {
+            braceDepth--;
+            currentDeclaration = ''; // Reset on closing brace
+        }
+        else if (braceDepth === 0) {
+            // Only collect content when we're not inside nested rules
+            if (char === ';') {
+                const decl = currentDeclaration.trim();
+                if (decl &&
+                    decl.includes(':') &&
+                    !decl.includes('{') &&
+                    !decl.includes('}')) {
+                    declarations.push(decl);
+                }
+                currentDeclaration = '';
+            }
+            else if (char !== '\n' || currentDeclaration.trim()) {
+                // Add character to current declaration (skip leading newlines)
+                currentDeclaration += char;
+            }
+        }
+        // Ignore content inside nested rules (braceDepth > 0)
+    }
+    // Handle final declaration if no trailing semicolon
+    if (braceDepth === 0 && currentDeclaration.trim()) {
+        const decl = currentDeclaration.trim();
+        if (decl.includes(':') && !decl.includes('{') && !decl.includes('}')) {
+            declarations.push(decl);
+        }
+    }
+    return declarations.join('; ');
+}
+/**
+ * Flatten a parsed rule against a base class name
+ */
+function flattenRule(rule, baseClassName) {
+    const results = [];
+    // Process the main rule
+    const flatSelector = flattenSelector(rule.selector, baseClassName);
+    // Always process the main rule if it has declarations
+    if (rule.declarations && rule.declarations.trim()) {
+        results.push({
+            selector: flatSelector,
+            declarations: rule.declarations.trim(),
+            atRules: rule.atRules,
+        });
+    }
+    // Process nested rules
+    if (rule.nested) {
+        for (const nestedRule of rule.nested) {
+            const nestedResults = flattenRule(nestedRule, baseClassName);
+            results.push(...nestedResults);
+        }
+    }
+    return results;
+}
+/**
+ * Flatten a selector against a base class name
+ * Handles &, .Class, SubElement patterns
+ * Uses doubled class name for increased specificity (.t0 -> .t0.t0)
+ */
+function flattenSelector(selector, baseClassName) {
+    // Handle media queries - pass through as-is
+    if (selector.startsWith('@media')) {
+        return selector;
+    }
+    // Create doubled class selector for increased specificity
+    const doubledClass = `.${baseClassName}.${baseClassName}`;
+    // Handle & replacement
+    if (selector.includes('&')) {
+        return selector.replace(/&/g, doubledClass);
+    }
+    // Handle .Class pattern -> descendant selector
+    if (selector.startsWith('.')) {
+        return `${doubledClass} ${selector}`;
+    }
+    // Handle SubElement pattern (uppercase start) -> data-element selector
+    if (/^[A-Z]/.test(selector)) {
+        return `${doubledClass} [data-element="${selector}"]`;
+    }
+    // Handle other selectors (pseudo-classes, attributes, etc.)
+    if (selector.startsWith(':') || selector.startsWith('[')) {
+        return `${doubledClass}${selector}`;
+    }
+    // Default: treat as descendant
+    return `${doubledClass} ${selector}`;
+}
+/**
+ * Global-aware selector flattener that uses an arbitrary base selector (e.g. ".myButton"),
+ * not a class name. It replaces "&" with the full selector and maps nested selectors
+ * relative to that base without introducing extra dots.
+ */
+function flattenSelectorWithBase(selector, baseSelector) {
+    // Pass-through media queries
+    if (selector.startsWith('@media')) {
+        return selector;
+    }
+    // Replace all ampersands with the provided base selector directly
+    if (selector.includes('&')) {
+        return selector.replace(/&/g, baseSelector);
+    }
+    // Pseudo-classes/attributes attach directly
+    if (selector.startsWith(':') || selector.startsWith('[')) {
+        return `${baseSelector}${selector}`;
+    }
+    // Class or id selectors become descendants
+    if (selector.startsWith('.') || selector.startsWith('#')) {
+        return `${baseSelector} ${selector}`;
+    }
+    // SubElement pattern (uppercase start) -> data-element selector as descendant
+    if (/^[A-Z]/.test(selector)) {
+        return `${baseSelector} [data-element="${selector}"]`;
+    }
+    // Default: descendant
+    return `${baseSelector} ${selector}`;
+}
+/**
+ * Flatten nested CSS for a concrete selector (global styles).
+ * Unlike the className-based variant, this preserves the provided selector string as-is.
+ */
+export function flattenNestedCssForSelector(cssText, baseSelector, atRuleStack = []) {
+    const rules = [];
+    if (!cssText.trim()) {
+        return rules;
+    }
+    // If there are no blocks, treat it as a declaration list for the base selector
+    if (!cssText.includes('{')) {
+        const declarations = extractDeclarations(cssText);
+        if (declarations.trim()) {
+            rules.push({
+                selector: baseSelector,
+                declarations,
+                atRules: atRuleStack.length ? [...atRuleStack] : undefined,
+            });
+        }
+        return rules;
+    }
+    // Reuse the same parser to get structured rules
+    const parsedRules = parseCssRules(cssText, atRuleStack);
+    function flattenRuleWithBase(rule, baseSel) {
+        const results = [];
+        const flatSelector = flattenSelectorWithBase(rule.selector, baseSel);
+        if (rule.declarations && rule.declarations.trim()) {
+            results.push({
+                selector: flatSelector,
+                declarations: rule.declarations.trim(),
+                atRules: rule.atRules,
+            });
+        }
+        if (rule.nested) {
+            for (const nestedRule of rule.nested) {
+                results.push(...flattenRuleWithBase(nestedRule, baseSel));
+            }
+        }
+        return results;
+    }
+    for (const rule of parsedRules) {
+        rules.push(...flattenRuleWithBase(rule, baseSelector));
+    }
+    return rules;
+}
+/**
+ * Wrap a CSS rule with at-rules (media queries, supports, etc.)
+ */
+export function wrapWithAtRules(rule, atRules) {
+    if (!atRules || atRules.length === 0) {
+        return rule;
+    }
+    return atRules.reduceRight((acc, atRule) => `${atRule} { ${acc} }`, rule);
+}
+
+        

package/es/tasty/injector/index.js

@@ -0,0 +1,165 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
+ * Released under the MIT license.
+ */
+
+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;
+}
+/**
+ * Configure the global style injector
+ */
+export function configure(config = {}) {
+    const fullConfig = {
+        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
+        collectMetrics: false, // default to no performance tracking
+        forceTextInjection: false, // auto-enable for test environments
+        debugMode: false, // reduce memory usage by avoiding full cssText storage
+        ...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];
+}
+/**
+ * Inject styles and return className with dispose function
+ */
+export function inject(rules, options) {
+    return getGlobalInjector().inject(rules, options);
+}
+/**
+ * Inject global CSS rule (legacy method - not supported in direct injector)
+ */
+export function injectGlobal(selector, cssText, options) {
+    return getGlobalInjector().injectGlobal(selector, cssText, options);
+}
+/**
+ * Get CSS text from all sheets (for SSR)
+ */
+export function getCssText(options) {
+    return getGlobalInjector().getCssText(options);
+}
+/**
+ * Collect only CSS used by a rendered subtree (like jest-styled-components).
+ * Pass the container returned by render(...).
+ */
+export function getCssTextForNode(node, options) {
+    // Collect tasty-generated class names (t<number>) from the subtree
+    const classSet = new Set();
+    const readClasses = (el) => {
+        const cls = el.getAttribute('class');
+        if (!cls)
+            return;
+        for (const token of cls.split(/\s+/)) {
+            if (/^t\d+$/.test(token))
+                classSet.add(token);
+        }
+    };
+    // Include node itself if it's an Element
+    if (node.getAttribute) {
+        readClasses(node);
+    }
+    // Walk descendants
+    const elements = node.querySelectorAll
+        ? node.querySelectorAll('[class]')
+        : [];
+    elements && elements.forEach(readClasses);
+    return getGlobalInjector().getCssTextForClasses(classSet, options);
+}
+/**
+ * Force cleanup of unused rules
+ */
+export function cleanup(root) {
+    return getGlobalInjector().cleanup(root);
+}
+/**
+ * Check if we're currently running in a test environment
+ */
+export function getIsTestEnvironment() {
+    return isTestEnvironment();
+}
+/**
+ * Get the global injector instance for debugging
+ */
+export const injector = {
+    get instance() {
+        return getGlobalInjector();
+    },
+};
+/**
+ * Destroy all resources and clean up
+ */
+export function destroy(root) {
+    return getGlobalInjector().destroy(root);
+}
+/**
+ * Create a new isolated injector instance
+ */
+export function createInjector(config = {}) {
+    const isTest = isTestEnvironment();
+    const fullConfig = {
+        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
+        collectMetrics: false, // default to no performance tracking
+        forceTextInjection: isTest, // auto-enable for test environments
+        debugMode: false, // reduce memory usage by avoiding full cssText storage
+        ...config,
+    };
+    return new StyleInjector(fullConfig);
+}
+export { StyleInjector } from './injector';
+export { SheetManager } from './sheet-manager';
+export { flattenNestedCss } from './flatten';
+
+