tailwind-to-style 4.0.2 → 5.0.0

package/dist/animations/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v4.0.2
+ * tailwind-to-style v5.0.0
  * Zero-build runtime Tailwind CSS engine
  * 
  * @author Bigetion
@@ -2147,6 +2147,182 @@ function getActiveCollector() {
   return _activeCollector;
 }
 
+/**
+ * Shared Constants
+ * 
+ * All constant values used across the library.
+ * Extracted from monolithic index.js for better maintainability.
+ * 
+ * @module shared/constants
+ */
+
+// ============================================================================
+// Environment Detection
+// ============================================================================
+
+/**
+ * True when running in a browser environment (window & document available)
+ */
+const IS_BROWSER$1 = typeof window !== "undefined" && typeof document !== "undefined";
+
+/**
+ * Maximum number of entries in Set-based caches
+ */
+const MAX_SET_SIZE$1 = 10000;
+
+// ============================================================================
+// Built-in Animation Keyframes
+// ============================================================================
+
+/**
+ * Mapping of animation names to their keyframe definitions
+ */
+const BUILTIN_KEYFRAMES = {
+  spin: {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  },
+  ping: {
+    "75%, 100%": {
+      transform: "scale(2)",
+      opacity: "0"
+    }
+  },
+  pulse: {
+    "50%": {
+      opacity: ".5"
+    }
+  },
+  bounce: {
+    "0%, 100%": {
+      transform: "translateY(-25%)",
+      animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
+    },
+    "50%": {
+      transform: "none",
+      animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
+    }
+  },
+  fadeIn: {
+    "0%": {
+      opacity: "0"
+    },
+    "50%": {
+      opacity: "1"
+    },
+    "100%": {
+      opacity: "0"
+    }
+  },
+  slideUp: {
+    "0%": {
+      transform: "translateY(20px)",
+      opacity: "0"
+    },
+    "50%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(-20px)",
+      opacity: "0"
+    }
+  }
+};
+
+/**
+ * Opacity modifiers
+ */
+const OPACITY_MODIFIER_REGEX = /\/(\d+)$/;
+
+/**
+ * Opacity property patterns for substitution
+ */
+const OPACITY_PROP_REGEXES = {
+  "--text-opacity": /--text-opacity\s*:\s*[\d.]+/gi,
+  "--bg-opacity": /--bg-opacity\s*:\s*[\d.]+/gi,
+  "--border-opacity": /--border-opacity\s*:\s*[\d.]+/gi,
+  "--ring-opacity": /--ring-opacity\s*:\s*[\d.]+/gi,
+  "--placeholder-opacity": /--placeholder-opacity\s*:\s*[\d.]+/gi,
+  "--divide-opacity": /--divide-opacity\s*:\s*[\d.]+/gi
+};
+
+/**
+ * Bracket encoding/decoding
+ */
+const BRACKET_CONTENT_REGEX = /\[([^\]]+)\]/g;
+const OPENING_PAREN_REGEX = /\(/g;
+const CLOSING_PAREN_REGEX = /\)/g;
+const ENCODED_PAREN_OPEN_REGEX = /__P__/g;
+const ENCODED_PAREN_CLOSE_REGEX = /__C__/g;
+
+/**
+ * Animation detection
+ */
+const ANIMATION_NAME_REGEX = /animation(?:-name)?:\s*([a-zA-Z0-9-]+)/gi;
+
+/**
+ * Color property regex patterns (pre-compiled for each color property)
+ * Used in processOpacityModifier for 50-100x performance improvement
+ */
+const COLOR_PROPERTIES$1 = ["color", "background-color", "border-color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color"];
+
+/**
+ * CSS property name conversion
+ */
+const UPPERCASE_LETTER_REGEX = /([A-Z])/g;
+
+/**
+ * Hash Utilities
+ * 
+ * Fast hashing functions for string and object caching.
+ * Extracted from monolithic index.js for reusability.
+ * 
+ * @module shared/hash
+ */
+
+/**
+ * Fast string hash using FNV-1a algorithm.
+ * Produces 32-bit hash values for cache keys.
+ * 
+ * @param {string} str - String to hash
+ * @returns {number} 32-bit hash
+ * 
+ * @example
+ * hashString('bg-blue-500') // → 2845719273
+ * hashString('hover:bg-red-600') // → 3927461034
+ */
+function hashString$2(str) {
+  let hash = 2166136261; // FNV offset basis
+  for (let i = 0; i < str.length; i++) {
+    hash ^= str.charCodeAt(i);
+    // FNV prime: 16777619
+    hash = hash * 16777619 >>> 0; // >>> 0 keeps it a 32-bit unsigned integer
+  }
+  return hash;
+}
+
+/**
+ * Generate a short hash for CSS class names.
+ * Uses base36 encoding for compact, URL-safe identifiers.
+ * 
+ * @param {string} str - Input string
+ * @param {number} length - Desired hash length (default: 8)
+ * @returns {string} Short hash string
+ * 
+ * @example
+ * getCssHash('bg-blue-500 p-4 rounded') // → 'x7k2m9n1'
+ */
+function getCssHash(str) {
+  let length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 8;
+  const hash = hashString$2(str);
+  return hash.toString(36).substring(0, length);
+}
+
 /**
  * Proper LRU (Least Recently Used) Cache implementation
  * Efficiently manages memory by removing least recently used items
@@ -2173,49 +2349,496 @@ class LRUCache {
     return value;
   }
 
-  /**
-   * Set value in cache
-   * Removes least recently used item if cache is full
-   */
-  set(key, value) {
-    // If key exists, delete it first to update position
-    if (this.cache.has(key)) {
-      this.cache.delete(key);
-    } else if (this.cache.size >= this.maxSize) {
-      // Remove least recently used (first item)
-      const firstKey = this.cache.keys().next().value;
-      this.cache.delete(firstKey);
+  /**
+   * Set value in cache
+   * Removes least recently used item if cache is full
+   */
+  set(key, value) {
+    // If key exists, delete it first to update position
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.maxSize) {
+      // Remove least recently used (first item)
+      const firstKey = this.cache.keys().next().value;
+      this.cache.delete(firstKey);
+    }
+    this.cache.set(key, value);
+  }
+
+  /**
+   * Check if key exists in cache
+   */
+  has(key) {
+    return this.cache.has(key);
+  }
+
+  /**
+   * Clear all cache entries
+   */
+  clear() {
+    this.cache.clear();
+  }
+
+  /**
+   * Get current cache size
+   */
+  get size() {
+    return this.cache.size;
+  }
+
+  /**
+   * Delete specific key
+   */
+  delete(key) {
+    return this.cache.delete(key);
+  }
+}
+
+/**
+ * Cache Management
+ * 
+ * Global caches and cache utilities for performance optimization.
+ * Uses LRU (Least Recently Used) strategy to prevent memory leaks.
+ * 
+ * @module shared/cache
+ */
+
+
+/**
+ * Cache for bracket value encoding
+ * @type {LRUCache}
+ */
+const encodeBracketCache = new LRUCache(1000);
+
+/**
+ * Cache for bracket value decoding
+ * @type {LRUCache}
+ */
+const decodeBracketCache = new LRUCache(1000);
+
+/**
+ * Set of injected CSS hashes (prevents duplicate injection)
+ * @type {Set<string>}
+ */
+const injectedCssHashSet = new Set();
+
+/**
+ * Registry of sourceKey → cssBlock for smart slot-based replacement
+ * Prevents stale CSS chunks from accumulating across HMR cycles
+ * @type {Map<string, string>}
+ */
+const cssBlockRegistry = new Map();
+
+/**
+ * Evict old entries from a Set when size exceeds maxSize.
+ * 
+ * @deprecated Use LRUCache instead - kept for backward compatibility
+ * @param {Set|LRUCache} set - Set to evict from
+ * @param {number} maxSize - Maximum size
+ */
+function evictSet(set) {
+  let maxSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_SET_SIZE$1;
+  if (set instanceof LRUCache) return; // LRUCache handles its own eviction
+  if (set.size <= maxSize) return;
+  const excess = set.size - maxSize;
+  const iter = set.values();
+  for (let i = 0; i < excess; i++) {
+    set.delete(iter.next().value);
+  }
+}
+
+/**
+ * Generate minified CSS keyframes for animations.
+ * Converts camelCase property names to kebab-case.
+ * 
+ * @param {string[]} animationNames - Array of animation names to generate
+ * @returns {string} Minified CSS @keyframes rules
+ * 
+ * @example
+ * generateMinifiedKeyframes(['spin', 'pulse'])
+ * // → '@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
+ * //    @keyframes pulse{50%{opacity:.5;}}'
+ * 
+ * @example
+ * generateMinifiedKeyframes(['fadeIn'])
+ * // → '@keyframes fadeIn{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}'
+ */
+function generateMinifiedKeyframes(animationNames) {
+  let css = "";
+  for (const name of animationNames) {
+    const keyframe = BUILTIN_KEYFRAMES[name];
+    if (!keyframe) continue;
+    css += "@keyframes ".concat(name, "{");
+    for (const _ref of Object.entries(keyframe)) {
+      var _ref2 = _slicedToArray(_ref, 2);
+      const percentage = _ref2[0];
+      const styles = _ref2[1];
+      css += "".concat(percentage, "{");
+      for (const _ref3 of Object.entries(styles)) {
+        var _ref4 = _slicedToArray(_ref3, 2);
+        const prop = _ref4[0];
+        const value = _ref4[1];
+        const cssProp = prop.replace(UPPERCASE_LETTER_REGEX, "-$1").toLowerCase();
+        css += "".concat(cssProp, ":").concat(value, ";");
+      }
+      css += "}";
+    }
+    css += "}";
+  }
+  return css;
+}
+
+/**
+ * Opacity Modifier Processing
+ * 
+ * Handles Tailwind opacity modifiers (e.g., bg-blue-500/50).
+ * Converts color values to rgba/hsla with specified opacity.
+ * 
+ * @module generator/opacity
+ */
+
+
+// Pre-compile regex patterns for each color property
+const COLOR_REGEX_PATTERNS$1 = new Map();
+for (const prop of COLOR_PROPERTIES$1) {
+  const escapedProp = prop.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  COLOR_REGEX_PATTERNS$1.set(prop, {
+    rgb: new RegExp("(".concat(escapedProp, "\\s*:\\s*)rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)"), "gi"),
+    rgba: new RegExp("(".concat(escapedProp, "\\s*:\\s*)rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)"), "gi"),
+    hsl: new RegExp("(".concat(escapedProp, "\\s*:\\s*)hsl\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%)\\)"), "gi"),
+    hsla: new RegExp("(".concat(escapedProp, "\\s*:\\s*)hsla\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%),\\s*[\\d.]+\\)"), "gi"),
+    hex: new RegExp("(".concat(escapedProp, "\\s*:\\s*)(#[0-9a-fA-F]{3,6})"), "gi")
+  });
+}
+
+/**
+ * Process opacity modifiers in Tailwind classes.
+ * 
+ * Handles:
+ * - Tailwind CSS custom properties (--text-opacity, --bg-opacity, etc.)
+ * - Direct color values (rgb, rgba, hsl, hsla, hex)
+ * - Converts colors to rgba/hsla with specified opacity
+ * 
+ * @param {string} className - Tailwind class name (e.g., 'bg-blue-500/50')
+ * @param {string} cssDeclaration - CSS declaration to modify
+ * @returns {string} Modified CSS declaration with opacity applied
+ * 
+ * @example
+ * processOpacityModifier('bg-blue-500/50', 'background-color: rgb(59, 130, 246);')
+ * // → 'background-color: rgba(59, 130, 246, 0.5);'
+ * 
+ * @example
+ * processOpacityModifier('text-red-600/75', 'color: #dc2626;')
+ * // → 'color: rgba(220, 38, 38, 0.75);'
+ * 
+ * @example
+ * processOpacityModifier('bg-blue-500', 'background-color: rgb(59, 130, 246);')
+ * // → 'background-color: rgb(59, 130, 246);' (no change - no opacity modifier)
+ */
+function processOpacityModifier(className, cssDeclaration) {
+  const opacityMatch = OPACITY_MODIFIER_REGEX.exec(className);
+  if (!opacityMatch) return cssDeclaration;
+  const opacityValue = parseInt(opacityMatch[1], 10);
+  if (opacityValue < 0 || opacityValue > 100) return cssDeclaration;
+  const alphaValue = (opacityValue / 100).toString();
+
+  // Handle Tailwind's CSS custom property pattern
+  let modifiedDeclaration = cssDeclaration;
+
+  // Replace opacity custom properties using pre-compiled regexes
+  for (const prop in OPACITY_PROP_REGEXES) {
+    const regex = OPACITY_PROP_REGEXES[prop];
+    regex.lastIndex = 0; // Reset global regex
+    modifiedDeclaration = modifiedDeclaration.replace(regex, "".concat(prop, ": ").concat(alphaValue));
+  }
+
+  // Also handle direct color values using pre-compiled regex patterns
+  for (const prop of COLOR_PROPERTIES$1) {
+    const patterns = COLOR_REGEX_PATTERNS$1.get(prop);
+    if (!patterns) continue;
+
+    // Reset all regex lastIndex for reuse
+    patterns.rgb.lastIndex = 0;
+    patterns.rgba.lastIndex = 0;
+    patterns.hsl.lastIndex = 0;
+    patterns.hsla.lastIndex = 0;
+    patterns.hex.lastIndex = 0;
+
+    // Convert rgb to rgba with opacity
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.rgb, "$1rgba($2, $3, $4, ".concat(alphaValue, ")"));
+
+    // Update existing rgba opacity
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.rgba, "$1rgba($2, $3, $4, ".concat(alphaValue, ")"));
+
+    // Convert hsl to hsla with opacity
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.hsl, "$1hsla($2, $3, $4, ".concat(alphaValue, ")"));
+
+    // Update existing hsla opacity
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.hsla, "$1hsla($2, $3, $4, ".concat(alphaValue, ")"));
+
+    // Handle hex colors - convert to rgba
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.hex, (match, propPart, hexColor) => {
+      // Convert hex to rgba
+      const hex = hexColor.replace("#", "");
+      let r, g, b;
+      if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+      } else {
+        r = parseInt(hex.substring(0, 2), 16);
+        g = parseInt(hex.substring(2, 4), 16);
+        b = parseInt(hex.substring(4, 6), 16);
+      }
+      return "".concat(propPart, "rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alphaValue, ")");
+    });
+  }
+  return modifiedDeclaration;
+}
+
+/**
+ * Performance Monitoring Utilities
+ * 
+ * Tracks and logs performance metrics for optimization analysis.
+ * 
+ * @module utils/performanceMonitor
+ */
+
+
+/**
+ * Performance monitoring system
+ * 
+ * Provides start/end timing and automatic slow operation logging.
+ */
+const performanceMonitor$1 = {
+  enabled: typeof performance !== "undefined",
+  /**
+   * Start performance measurement
+   * 
+   * @param {string} label - Label for the measurement
+   * @returns {Object|null} Marker object with label and start time
+   */
+  start(label) {
+    if (!this.enabled) return null;
+    return {
+      label,
+      startTime: performance.now()
+    };
+  },
+  /**
+   * End performance measurement and log if slow
+   * 
+   * @param {Object} marker - Marker from start()
+   */
+  end(marker) {
+    if (!this.enabled || !marker) return;
+    const duration = performance.now() - marker.startTime;
+    if (duration > 5) {
+      // Only log if > 5ms
+      logger.warn("Slow ".concat(marker.label, ": ").concat(duration.toFixed(2), "ms"));
+    }
+  },
+  /**
+   * Measure function execution time
+   * 
+   * @param {Function} fn - Function to measure
+   * @param {string} label - Label for measurement
+   * @returns {*} Function result
+   */
+  measure(fn, label) {
+    const marker = this.start(label);
+    try {
+      const result = fn();
+      this.end(marker);
+      return result;
+    } catch (error) {
+      this.end(marker);
+      throw error;
+    }
+  }
+};
+
+/**
+ * DOM CSS Injector
+ * 
+ * Handles automatic CSS injection into the DOM.
+ * Supports SSR mode, HMR-friendly block registry, and hash-based deduplication.
+ * 
+ * @module injector/dom
+ */
+
+
+/**
+ * Rebuild the style tag from the CSS block registry.
+ * 
+ * Used for slot-based updates where each twsx() call owns its own CSS block.
+ * Rebuilds the entire style tag to avoid stale CSS from previous HMR cycles.
+ * 
+ * @private
+ */
+function rebuildStyleTag$1() {
+  let styleTag = document.getElementById("twsx-auto-style");
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.id = "twsx-auto-style";
+    styleTag.setAttribute("data-twsx", "");
+    document.head.appendChild(styleTag);
+  }
+  styleTag.textContent = [...cssBlockRegistry.values()].join("\n");
+}
+
+/**
+ * Automatically inject CSS into the DOM or collect for SSR.
+ * 
+ * Supports three modes:
+ * 1. SSR mode: Delegates to utils/ssr.js collector
+ * 2. Slot-based mode (with sourceKey): HMR-friendly block registry
+ * 3. Hash-based mode (no sourceKey): Legacy deduplication
+ * 
+ * @param {string} cssString - CSS to inject
+ * @param {string|null} sourceKey - Optional unique key for slot-based updates
+ * 
+ * @example
+ * // Slot-based (HMR-friendly)
+ * autoInjectCss('.btn { color: blue; }', 'twsx-call-123');
+ * 
+ * @example
+ * // Hash-based (legacy)
+ * autoInjectCss('.btn { color: blue; }');
+ * 
+ * @example
+ * // SSR mode (delegates to ssr.js)
+ * startSSR();
+ * autoInjectCss('.btn { color: blue; }');
+ * const css = stopSSR();
+ */
+function autoInjectCss(cssString) {
+  let sourceKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const marker = performanceMonitor$1.start("css:inject");
+  try {
+    // SSR mode: collect CSS strings instead of DOM injection. Delegates to
+    // the shared collector in ./utils/ssr.js so both the legacy
+    // startSSR()/stopSSR() pair and the modern createSSRCollector() actually
+    // receive the CSS generated by tw()/twsx().
+    if (isSSRCollecting()) {
+      collectSSRCSS(cssString);
+      performanceMonitor$1.end(marker);
+      return;
+    }
+    if (IS_BROWSER$1) {
+      if (sourceKey) {
+        // Slot-based update: each unique twsx(obj) call owns its own CSS block.
+        // When styles change (new content, same logical call site via cacheKey)
+        // the old slot is replaced and the style tag is fully rebuilt, so no
+        // stale rules from previous HMR cycles can pile up.
+        const existing = cssBlockRegistry.get(sourceKey);
+        if (existing === cssString) {
+          // Identical content – nothing to do.
+          performanceMonitor$1.end(marker);
+          return;
+        }
+        cssBlockRegistry.set(sourceKey, cssString);
+        rebuildStyleTag$1();
+        if (cssBlockRegistry.size % 10 === 0) {
+          logger.debug("CSS registry stats: ".concat(cssBlockRegistry.size, " blocks registered"));
+        }
+        performanceMonitor$1.end(marker);
+        return;
+      }
+
+      // Fallback path (e.g. direct autoInjectCss calls without a sourceKey):
+      // keep the original hash-based dedup + append behaviour.
+      const cssHash = getCssHash(cssString);
+      if (injectedCssHashSet.has(cssHash)) {
+        performanceMonitor$1.end(marker);
+        return;
+      }
+      injectedCssHashSet.add(cssHash);
+      evictSet(injectedCssHashSet);
+      let styleTag = document.getElementById("twsx-auto-style");
+      if (!styleTag) {
+        styleTag = document.createElement("style");
+        styleTag.id = "twsx-auto-style";
+        styleTag.setAttribute("data-twsx", "");
+        document.head.appendChild(styleTag);
+      }
+
+      // Append CSS to style tag using textContent for reliability
+      // Note: insertRule + textContent mixing destroys CSSOM rules,
+      // so we use textContent exclusively for consistent behavior
+      // with @keyframes, @media, and other nested CSS blocks.
+      styleTag.textContent += "\n".concat(cssString);
+
+      // Log injection stats periodically
+      if (injectedCssHashSet.size % 10 === 0) {
+        logger.debug("CSS injection stats: ".concat(injectedCssHashSet.size, " unique stylesheets injected"));
+      }
     }
-    this.cache.set(key, value);
+    performanceMonitor$1.end(marker);
+  } catch (error) {
+    performanceMonitor$1.end(marker);
+    logger.error("Error injecting CSS:", error);
   }
+}
 
-  /**
-   * Check if key exists in cache
-   */
-  has(key) {
-    return this.cache.has(key);
-  }
+/**
+ * Bracket Value Encoding/Decoding
+ * 
+ * Handles encoding and decoding of bracket values in Tailwind classes.
+ * Example: bg-[rgb(255,0,0)] → bg-[rgb__P__255%2C0%2C0__C__]
+ * 
+ * @module parser/bracket
+ */
 
-  /**
-   * Clear all cache entries
-   */
-  clear() {
-    this.cache.clear();
-  }
 
-  /**
-   * Get current cache size
-   */
-  get size() {
-    return this.cache.size;
-  }
+/**
+ * Encode bracket values to prevent parsing issues.
+ * Encodes parentheses within brackets to special markers.
+ * 
+ * @param {string} input - Class string with brackets
+ * @returns {string} Encoded string
+ * 
+ * @example
+ * encodeBracketValues('bg-[rgb(255,0,0)]')
+ * // → 'bg-[rgb__P__255%2C0%2C0__C__]'
+ * 
+ * @example
+ * encodeBracketValues('w-[calc(100%-20px)]')
+ * // → 'w-[calc__P__100%25-20px__C__]'
+ */
+function encodeBracketValues(input) {
+  if (!input) return input;
+  if (encodeBracketCache.has(input)) return encodeBracketCache.get(input);
+  BRACKET_CONTENT_REGEX.lastIndex = 0; // Reset global regex
+  const result = input.replace(BRACKET_CONTENT_REGEX, (_, content) => {
+    const encoded = encodeURIComponent(content).replace(OPENING_PAREN_REGEX, "__P__").replace(CLOSING_PAREN_REGEX, "__C__");
+    return "[".concat(encoded, "]");
+  });
+  encodeBracketCache.set(input, result);
+  return result;
+}
 
-  /**
-   * Delete specific key
-   */
-  delete(key) {
-    return this.cache.delete(key);
-  }
+/**
+ * Decode previously encoded bracket values.
+ * Reverses the encoding done by encodeBracketValues().
+ * 
+ * @param {string} input - Encoded class string
+ * @returns {string} Decoded string
+ * 
+ * @example
+ * decodeBracketValues('bg-[rgb__P__255%2C0%2C0__C__]')
+ * // → 'bg-[rgb(255,0,0)]'
+ * 
+ * @example
+ * decodeBracketValues('w-[calc__P__100%25-20px__C__]')
+ * // → 'w-[calc(100%-20px)]'
+ */
+function decodeBracketValues(input) {
+  if (!input) return input;
+  if (decodeBracketCache.has(input)) return decodeBracketCache.get(input);
+  const result = decodeURIComponent(input).replace(ENCODED_PAREN_OPEN_REGEX, "(").replace(ENCODED_PAREN_CLOSE_REGEX, ")");
+  decodeBracketCache.set(input, result);
+  return result;
 }
 
 function generator$2S() {
@@ -5954,220 +6577,94 @@ const patterns = _objectSpread2(_objectSpread2({}, transition), fontFamily);
  * // Arrays (nested)
  * cx(['p-4', 'bg-white'], isActive && ['ring-2', 'ring-blue-500'])
  * // → 'p-4 bg-white ring-2 ring-blue-500'
- * 
- * @example
- * // Mixed
- * cx(
- *   'base-class',
- *   condition && 'conditional-class',
- *   { 'object-class': true, 'ignored-class': false },
- *   ['array-class-1', 'array-class-2']
- * )
- */
-function cx() {
-  const classes = [];
-  for (let i = 0; i < arguments.length; i++) {
-    const arg = i < 0 || arguments.length <= i ? undefined : arguments[i];
-
-    // Skip falsy values
-    if (!arg) continue;
-    const type = typeof arg;
-    if (type === 'string') {
-      classes.push(arg);
-    } else if (Array.isArray(arg)) {
-      // Recursively process arrays
-      const inner = cx(...arg);
-      if (inner) classes.push(inner);
-    } else if (type === 'object') {
-      // Object: keys are class names, values are conditions
-      const keys = Object.keys(arg);
-      for (let j = 0; j < keys.length; j++) {
-        if (arg[keys[j]]) {
-          classes.push(keys[j]);
-        }
-      }
-    }
-  }
-  return classes.join(' ');
-}
-
-/**
- * Create a cx function bound with base classes.
- * Useful for component-level class composition.
- * 
- * @param {...(string|Object|Array)} baseArgs - Base class arguments always included
- * @returns {Function} A cx function pre-filled with base classes
- * 
- * @example
- * const btnClasses = cx.with('px-4 py-2 rounded font-medium transition-colors')
- * 
- * btnClasses('bg-blue-500 text-white')
- * // → 'px-4 py-2 rounded font-medium transition-colors bg-blue-500 text-white'
- * 
- * btnClasses({ 'opacity-50 cursor-not-allowed': isDisabled })
- * // → 'px-4 py-2 rounded font-medium transition-colors opacity-50 cursor-not-allowed'
- */
-cx.with = function () {
-  for (var _len = arguments.length, baseArgs = new Array(_len), _key = 0; _key < _len; _key++) {
-    baseArgs[_key] = arguments[_key];
-  }
-  return function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    return cx(...baseArgs, ...args);
-  };
-};
-
-// ============================================================================
-// SSR (Server-Side Rendering) Support
-// Detect environment once at module load for zero-cost runtime checks
-// ============================================================================
-const IS_BROWSER$1 = typeof window !== "undefined" && typeof document !== "undefined";
-const MAX_CACHE_SIZE$1 = 5000;
-const MAX_SET_SIZE = 10000;
-
-// Global registry to track injected keyframes (prevents duplication) - now with LRU
-const _injectedKeyframes = new LRUCache(MAX_SET_SIZE);
-
-// Global LRU cache instances (true LRU, not FIFO)
-const _twsxInputCache = new LRUCache(MAX_CACHE_SIZE$1);
-
-// WeakMap for object identity-based caching (fast lookup for repeated objects)
-const _objectIdentityCache = new WeakMap();
-
-/** @deprecated Use LRUCache instead - kept for backward compatibility */
-function evictSet(set) {
-  let maxSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_SET_SIZE;
-  if (set instanceof LRUCache) return; // LRUCache handles its own eviction
-  if (set.size <= maxSize) return;
-  const excess = set.size - maxSize;
-  const iter = set.values();
-  for (let i = 0; i < excess; i++) {
-    set.delete(iter.next().value);
-  }
-}
-
-// Mapping of animation names to their keyframe definitions
-const BUILTIN_KEYFRAMES = {
-  spin: {
-    "0%": {
-      transform: "rotate(0deg)"
-    },
-    "100%": {
-      transform: "rotate(360deg)"
-    }
-  },
-  ping: {
-    "75%, 100%": {
-      transform: "scale(2)",
-      opacity: "0"
-    }
-  },
-  pulse: {
-    "50%": {
-      opacity: ".5"
-    }
-  },
-  bounce: {
-    "0%, 100%": {
-      transform: "translateY(-25%)",
-      animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
-    },
-    "50%": {
-      transform: "none",
-      animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
-    }
-  },
-  fadeIn: {
-    "0%": {
-      opacity: "0"
-    },
-    "50%": {
-      opacity: "1"
-    },
-    "100%": {
-      opacity: "0"
-    }
-  },
-  slideUp: {
-    "0%": {
-      transform: "translateY(20px)",
-      opacity: "0"
-    },
-    "50%": {
-      transform: "translateY(0)",
-      opacity: "1"
-    },
-    "100%": {
-      transform: "translateY(-20px)",
-      opacity: "0"
-    }
-  }
-};
-
-// Generate minified keyframes CSS
-function generateMinifiedKeyframes(animationNames) {
-  let css = "";
-  for (const name of animationNames) {
-    const keyframe = BUILTIN_KEYFRAMES[name];
-    if (!keyframe) continue;
-    css += "@keyframes ".concat(name, "{");
-    for (const _ref of Object.entries(keyframe)) {
-      var _ref2 = _slicedToArray(_ref, 2);
-      const percentage = _ref2[0];
-      const styles = _ref2[1];
-      css += "".concat(percentage, "{");
-      for (const _ref3 of Object.entries(styles)) {
-        var _ref4 = _slicedToArray(_ref3, 2);
-        const prop = _ref4[0];
-        const value = _ref4[1];
-        const cssProp = prop.replace(UPPERCASE_LETTER_REGEX, "-$1").toLowerCase();
-        css += "".concat(cssProp, ":").concat(value, ";");
+ * 
+ * @example
+ * // Mixed
+ * cx(
+ *   'base-class',
+ *   condition && 'conditional-class',
+ *   { 'object-class': true, 'ignored-class': false },
+ *   ['array-class-1', 'array-class-2']
+ * )
+ */
+function cx() {
+  const classes = [];
+  for (let i = 0; i < arguments.length; i++) {
+    const arg = i < 0 || arguments.length <= i ? undefined : arguments[i];
+
+    // Skip falsy values
+    if (!arg) continue;
+    const type = typeof arg;
+    if (type === 'string') {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      // Recursively process arrays
+      const inner = cx(...arg);
+      if (inner) classes.push(inner);
+    } else if (type === 'object') {
+      // Object: keys are class names, values are conditions
+      const keys = Object.keys(arg);
+      for (let j = 0; j < keys.length; j++) {
+        if (arg[keys[j]]) {
+          classes.push(keys[j]);
+        }
       }
-      css += "}";
     }
-    css += "}";
   }
-  return css;
+  return classes.join(' ');
 }
 
-// Opacity modifiers
-const OPACITY_MODIFIER_REGEX = /\/(\d+)$/;
-const OPACITY_PROP_REGEXES = {
-  "--text-opacity": /--text-opacity\s*:\s*[\d.]+/gi,
-  "--bg-opacity": /--bg-opacity\s*:\s*[\d.]+/gi,
-  "--border-opacity": /--border-opacity\s*:\s*[\d.]+/gi,
-  "--ring-opacity": /--ring-opacity\s*:\s*[\d.]+/gi,
-  "--divide-opacity": /--divide-opacity\s*:\s*[\d.]+/gi,
-  "--placeholder-opacity": /--placeholder-opacity\s*:\s*[\d.]+/gi,
-  "--text-decoration-opacity": /--text-decoration-opacity\s*:\s*[\d.]+/gi,
-  "--outline-opacity": /--outline-opacity\s*:\s*[\d.]+/gi,
-  "--accent-opacity": /--accent-opacity\s*:\s*[\d.]+/gi,
-  "--caret-opacity": /--caret-opacity\s*:\s*[\d.]+/gi
+/**
+ * Create a cx function bound with base classes.
+ * Useful for component-level class composition.
+ * 
+ * @param {...(string|Object|Array)} baseArgs - Base class arguments always included
+ * @returns {Function} A cx function pre-filled with base classes
+ * 
+ * @example
+ * const btnClasses = cx.with('px-4 py-2 rounded font-medium transition-colors')
+ * 
+ * btnClasses('bg-blue-500 text-white')
+ * // → 'px-4 py-2 rounded font-medium transition-colors bg-blue-500 text-white'
+ * 
+ * btnClasses({ 'opacity-50 cursor-not-allowed': isDisabled })
+ * // → 'px-4 py-2 rounded font-medium transition-colors opacity-50 cursor-not-allowed'
+ */
+cx.with = function () {
+  for (var _len = arguments.length, baseArgs = new Array(_len), _key = 0; _key < _len; _key++) {
+    baseArgs[_key] = arguments[_key];
+  }
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    return cx(...baseArgs, ...args);
+  };
 };
 
+const MAX_CACHE_SIZE$1 = 5000;
+const MAX_SET_SIZE = 10000;
+
+// Global registry to track injected keyframes (prevents duplication) - now with LRU
+const _injectedKeyframes = new LRUCache(MAX_SET_SIZE);
+
+// Global LRU cache instances (true LRU, not FIFO)
+const _twsxInputCache = new LRUCache(MAX_CACHE_SIZE$1);
+
+// WeakMap for object identity-based caching (fast lookup for repeated objects)
+const _objectIdentityCache = new WeakMap();
+
 // CSS parsing
 const CSS_CLASS_REGEX = /([a-zA-Z0-9\-_\\/.]+)\s*{\s*([^}]+)\s*}/g;
 const DOUBLE_BACKSLASH_REGEX = /\\\\/g;
 const LEADING_UNDERSCORE_REGEX = /^_/;
 const MULTIPLE_SPACES_REGEX = /\s+/g;
 
-// Bracket encoding/decoding
-const BRACKET_CONTENT_REGEX = /\[([^\]]+)\]/g;
-const OPENING_PAREN_REGEX = /\(/g;
-const CLOSING_PAREN_REGEX = /\)/g;
-const ENCODED_PAREN_OPEN_REGEX = /__P__/g;
-const ENCODED_PAREN_CLOSE_REGEX = /__C__/g;
-
 // Variant expansion
 const DIRECTIVE_GROUP_REGEX = /(\w+)\(([^()]+)\)/g;
 const VARIANT_GROUP_REGEX = /(\w+):\(([^()]+(?:\((?:[^()]+)\))?[^()]*)\)/g;
 const WHITESPACE_SPLIT_REGEX = /\s+/;
 const VARIANT_COLON_SPLIT_REGEX = /:/;
-
-// Animation detection
-const ANIMATION_NAME_REGEX = /animation(?:-name)?:\s*([a-zA-Z0-9-]+)/gi;
 const CUSTOM_VALUE_FULL_REGEX = /^(.+?)\[(.+)\]$/;
 
 // Selector variants
@@ -6192,9 +6689,6 @@ for (const prop of COLOR_PROPERTIES) {
   });
 }
 
-// CSS property name conversion
-const UPPERCASE_LETTER_REGEX = /([A-Z])/g;
-
 // Escape characters
 const ESCAPE_SLASH_REGEX = /\//g;
 const ESCAPE_DOT_REGEX = /\./g;
@@ -6398,6 +6892,14 @@ function parseCustomClassWithPatterns(className) {
   return null;
 }
 
+/**
+ * Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
+ * Optimized with for loops and indexOf for 2-3x better performance
+ * @param {string} cssString
+ * @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
+ */
+// NOTE: resolveCssToClearCss now imported from ./generator/css-string.js
+
 // Cache for getConfigOptions - use LRU cache
 const configOptionsCache = new LRUCache(500);
 function generateTailwindCssString() {
@@ -6487,27 +6989,9 @@ const selectorVariants = {
   number: arg => "> :nth-child(".concat(arg, ")")
 };
 
-// Optimize encoding/decoding bracket values with memoization
-const encodeBracketCache = new LRUCache(1000);
-function encodeBracketValues(input) {
-  if (!input) return input;
-  if (encodeBracketCache.has(input)) return encodeBracketCache.get(input);
-  BRACKET_CONTENT_REGEX.lastIndex = 0; // Reset global regex
-  const result = input.replace(BRACKET_CONTENT_REGEX, (_, content) => {
-    const encoded = encodeURIComponent(content).replace(OPENING_PAREN_REGEX, "__P__").replace(CLOSING_PAREN_REGEX, "__C__");
-    return "[".concat(encoded, "]");
-  });
-  encodeBracketCache.set(input, result);
-  return result;
-}
-const decodeBracketCache = new LRUCache(1000);
-function decodeBracketValues(input) {
-  if (!input) return input;
-  if (decodeBracketCache.has(input)) return decodeBracketCache.get(input);
-  const result = decodeURIComponent(input).replace(ENCODED_PAREN_OPEN_REGEX, "(").replace(ENCODED_PAREN_CLOSE_REGEX, ")");
-  decodeBracketCache.set(input, result);
-  return result;
-}
+// NOTE: encodeBracketValues and decodeBracketValues now imported from ./parser/bracket.js
+// NOTE: encodeBracketCache and decodeBracketCache are in ./parser/bracket.js
+
 function replaceSelector(selector) {
   SELECTOR_VARIANT_REGEX.lastIndex = 0; // Reset global regex
   return selector.replace(SELECTOR_VARIANT_REGEX, (_, raw) => {
@@ -6545,73 +7029,6 @@ function resolveVariants(selector, variants) {
   };
 }
 
-/**
- * Process opacity modifier from class name (e.g., text-red-500/50 -> 50% opacity)
- * @param {string} className - Class name with potential opacity modifier
- * @param {string} cssDeclaration - CSS declaration to modify
- * @returns {string} Modified CSS declaration with opacity applied
- */
-function processOpacityModifier(className, cssDeclaration) {
-  const opacityMatch = OPACITY_MODIFIER_REGEX.exec(className);
-  if (!opacityMatch) return cssDeclaration;
-  const opacityValue = parseInt(opacityMatch[1], 10);
-  if (opacityValue < 0 || opacityValue > 100) return cssDeclaration;
-  const alphaValue = (opacityValue / 100).toString();
-
-  // Handle Tailwind's CSS custom property pattern
-  let modifiedDeclaration = cssDeclaration;
-
-  // Replace opacity custom properties using pre-compiled regexes
-  for (const prop in OPACITY_PROP_REGEXES) {
-    const regex = OPACITY_PROP_REGEXES[prop];
-    regex.lastIndex = 0; // Reset global regex
-    modifiedDeclaration = modifiedDeclaration.replace(regex, "".concat(prop, ": ").concat(alphaValue));
-  }
-
-  // Also handle direct color values using pre-compiled regex patterns
-  for (const prop of COLOR_PROPERTIES) {
-    const patterns = COLOR_REGEX_PATTERNS.get(prop);
-    if (!patterns) continue;
-
-    // Reset all regex lastIndex for reuse
-    patterns.rgb.lastIndex = 0;
-    patterns.rgba.lastIndex = 0;
-    patterns.hsl.lastIndex = 0;
-    patterns.hsla.lastIndex = 0;
-    patterns.hex.lastIndex = 0;
-
-    // Convert rgb to rgba with opacity
-    modifiedDeclaration = modifiedDeclaration.replace(patterns.rgb, "$1rgba($2, $3, $4, ".concat(alphaValue, ")"));
-
-    // Update existing rgba opacity
-    modifiedDeclaration = modifiedDeclaration.replace(patterns.rgba, "$1rgba($2, $3, $4, ".concat(alphaValue, ")"));
-
-    // Convert hsl to hsla with opacity
-    modifiedDeclaration = modifiedDeclaration.replace(patterns.hsl, "$1hsla($2, $3, $4, ".concat(alphaValue, ")"));
-
-    // Update existing hsla opacity
-    modifiedDeclaration = modifiedDeclaration.replace(patterns.hsla, "$1hsla($2, $3, $4, ".concat(alphaValue, ")"));
-
-    // Handle hex colors - convert to rgba
-    modifiedDeclaration = modifiedDeclaration.replace(patterns.hex, (match, propPart, hexColor) => {
-      // Convert hex to rgba
-      const hex = hexColor.replace("#", "");
-      let r, g, b;
-      if (hex.length === 3) {
-        r = parseInt(hex[0] + hex[0], 16);
-        g = parseInt(hex[1] + hex[1], 16);
-        b = parseInt(hex[2] + hex[2], 16);
-      } else {
-        r = parseInt(hex.substring(0, 2), 16);
-        g = parseInt(hex.substring(2, 4), 16);
-        b = parseInt(hex.substring(4, 6), 16);
-      }
-      return "".concat(propPart, "rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alphaValue, ")");
-    });
-  }
-  return modifiedDeclaration;
-}
-
 // Performance monitoring utilities
 const performanceMonitor = {
   enabled: typeof performance !== "undefined",
@@ -6688,9 +7105,11 @@ function expandGroupedClass(input) {
   } while (result !== prev);
   return result;
 }
-// CSS Processing utilities
+// CSS Processing utilities  
 const parseSelectorCache = new LRUCache(500);
-function parseSelector(selector) {
+
+// Parse selector with @css property support (different from parser/selector.js)
+function parseSelectorWithCssProperty(selector) {
   if (parseSelectorCache.has(selector)) {
     return parseSelectorCache.get(selector);
   }
@@ -6715,10 +7134,10 @@ function parseSelector(selector) {
 }
 function processClass(cls, selector, styles) {
   if (cls.trim() === "") return;
-  const _ref5 = cls.includes(":") ? [cls.split(":").slice(0, -1), cls.split(":").slice(-1)[0]] : [[], cls],
-    _ref6 = _slicedToArray(_ref5, 2),
-    rawVariants = _ref6[0],
-    className = _ref6[1];
+  const _ref = cls.includes(":") ? [cls.split(":").slice(0, -1), cls.split(":").slice(-1)[0]] : [[], cls],
+    _ref2 = _slicedToArray(_ref, 2),
+    rawVariants = _ref2[0],
+    className = _ref2[1];
   let isImportant = false;
   let pureClassName = className;
   if (className.startsWith("!")) {
@@ -6796,10 +7215,10 @@ function processNestedSelectors(nested, selector, styles, walk) {
     const nestedVal = nested[nestedSel];
     if (nestedSel === "@css" && typeof nestedVal === "object") {
       // For @css directive, use raw CSS values without any processing
-      const cssDeclarations = Object.entries(nestedVal).map(_ref7 => {
-        let _ref8 = _slicedToArray(_ref7, 2),
-          key = _ref8[0],
-          value = _ref8[1];
+      const cssDeclarations = Object.entries(nestedVal).map(_ref3 => {
+        let _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          value = _ref4[1];
         // Convert camelCase to kebab-case (e.g., borderTopColor -> border-top-color)
         const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
         // Ensure CSS values are properly formatted and not processed through Tailwind conversion
@@ -6822,9 +7241,9 @@ function walkStyleTree(selector, val, styles, walk) {
     logger.warn("Invalid selector in walk function:", selector);
     return;
   }
-  const _parseSelector = parseSelector(selector),
-    baseSelector = _parseSelector.baseSelector,
-    cssProperty = _parseSelector.cssProperty;
+  const _parseSelectorWithCss = parseSelectorWithCssProperty(selector),
+    baseSelector = _parseSelectorWithCss.baseSelector,
+    cssProperty = _parseSelectorWithCss.cssProperty;
   if (cssProperty && typeof val === "object" && Array.isArray(val) && val.length > 0) {
     const cssValue = val[0];
     if (typeof cssValue === "string") {
@@ -6863,9 +7282,9 @@ function walkStyleTree(selector, val, styles, walk) {
     }
     walk(selector, [expandGroupedClass(val)]);
   } else if (typeof val === "object" && val !== null) {
-    const _parseSelector2 = parseSelector(selector),
-      baseSelector = _parseSelector2.baseSelector,
-      cssProperty = _parseSelector2.cssProperty;
+    const _parseSelectorWithCss2 = parseSelectorWithCssProperty(selector),
+      baseSelector = _parseSelectorWithCss2.baseSelector,
+      cssProperty = _parseSelectorWithCss2.cssProperty;
     if (cssProperty) {
       const cssValue = Object.values(val).join(" ");
       styles[baseSelector] = styles[baseSelector] || "";
@@ -6876,10 +7295,10 @@ function walkStyleTree(selector, val, styles, walk) {
     // Check if this is a @css object within the current object
     if (val["@css"] && typeof val["@css"] === "object") {
       // Handle object with @css directive - process the @css part specially
-      const cssDeclarations = Object.entries(val["@css"]).map(_ref9 => {
-        let _ref0 = _slicedToArray(_ref9, 2),
-          key = _ref0[0],
-          value = _ref0[1];
+      const cssDeclarations = Object.entries(val["@css"]).map(_ref5 => {
+        let _ref6 = _slicedToArray(_ref5, 2),
+          key = _ref6[0],
+          value = _ref6[1];
         // Convert camelCase to kebab-case (e.g., borderTopColor -> border-top-color)
         const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
         // Keep CSS values intact without any processing
@@ -7025,9 +7444,9 @@ function generateCssString(styles) {
   let cssString = "";
 
   // Add base styles
-  for (const _ref1 of baseStyles) {
-    const sel = _ref1.sel;
-    const css = _ref1.css;
+  for (const _ref7 of baseStyles) {
+    const sel = _ref7.sel;
+    const css = _ref7.css;
     cssString += "".concat(sel, "{").concat(css.trim().replace(/\n/g, ""), "}");
   }
 
@@ -7037,9 +7456,9 @@ function generateCssString(styles) {
     return match ? parseInt(match[1], 10) : 99999;
   }
   mediaStyles.sort((a, b) => mediaPriority(a.sel) - mediaPriority(b.sel));
-  for (const _ref10 of mediaStyles) {
-    const sel = _ref10.sel;
-    const content = _ref10.content;
+  for (const _ref8 of mediaStyles) {
+    const sel = _ref8.sel;
+    const content = _ref8.content;
     cssString += "".concat(sel, "{");
     for (const subSel in content) {
       cssString += "".concat(subSel, "{").concat(content[subSel].trim().replace(/\n/g, ""), "}");
@@ -7236,14 +7655,14 @@ function twsxNoCache(obj) {
       })
     });
     const configOptions = getConfigOptions(mergedOptions, Object.keys(plugins));
-    const _ref11 = configOptions.theme || {},
-      _ref11$keyframes = _ref11.keyframes,
-      keyframes = _ref11$keyframes === void 0 ? {} : _ref11$keyframes;
+    const _ref9 = configOptions.theme || {},
+      _ref9$keyframes = _ref9.keyframes,
+      keyframes = _ref9$keyframes === void 0 ? {} : _ref9$keyframes;
     let customKeyframesCSS = "";
-    for (const _ref12 of Object.entries(keyframes)) {
-      var _ref13 = _slicedToArray(_ref12, 2);
-      const name = _ref13[0];
-      const keyframe = _ref13[1];
+    for (const _ref0 of Object.entries(keyframes)) {
+      var _ref1 = _slicedToArray(_ref0, 2);
+      const name = _ref1[0];
+      const keyframe = _ref1[1];
       // Skip if already in built-in keyframes or already injected
       if (BUILTIN_KEYFRAMES[name] || _injectedKeyframes.has(name)) continue;
 
@@ -7254,15 +7673,15 @@ function twsxNoCache(obj) {
 
       // Generate minified custom keyframe
       customKeyframesCSS += "@keyframes ".concat(name, "{");
-      for (const _ref14 of Object.entries(keyframe)) {
-        var _ref15 = _slicedToArray(_ref14, 2);
-        const percentage = _ref15[0];
-        const styles = _ref15[1];
+      for (const _ref10 of Object.entries(keyframe)) {
+        var _ref11 = _slicedToArray(_ref10, 2);
+        const percentage = _ref11[0];
+        const styles = _ref11[1];
         customKeyframesCSS += "".concat(percentage, "{");
-        for (const _ref16 of Object.entries(styles)) {
-          var _ref17 = _slicedToArray(_ref16, 2);
-          const prop = _ref17[0];
-          const value = _ref17[1];
+        for (const _ref12 of Object.entries(styles)) {
+          var _ref13 = _slicedToArray(_ref12, 2);
+          const prop = _ref13[0];
+          const value = _ref13[1];
           const cssProp = prop.replace(UPPERCASE_LETTER_REGEX, "-$1").toLowerCase();
           customKeyframesCSS += "".concat(cssProp, ":").concat(value, ";");
         }
@@ -7418,109 +7837,14 @@ function twsx(obj) {
   return result;
 }
 
-// Simple hashCode function for CSS deduplication
-function getCssHash(str) {
-  let hash = 0,
-    i,
-    chr;
-  if (str.length === 0) return hash;
-  for (i = 0; i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0; // Convert to 32bit integer
-  }
-  return hash;
-}
-
-// Enhanced auto-inject CSS with performance monitoring & SSR support
-const injectedCssHashSet = new Set();
-
-// Registry of sourceKey → cssBlock for smart slot-based replacement.
-// Prevents stale CSS chunks from accumulating across HMR cycles.
-const _cssBlockRegistry = new Map();
-
-/**
- * Rebuild the single twsx style tag from the full CSS block registry.
- * Called whenever a block is added or updated.
- */
-function rebuildStyleTag$1() {
-  let styleTag = document.getElementById("twsx-auto-style");
-  if (!styleTag) {
-    styleTag = document.createElement("style");
-    styleTag.id = "twsx-auto-style";
-    styleTag.setAttribute("data-twsx", "");
-    document.head.appendChild(styleTag);
-  }
-  styleTag.textContent = [..._cssBlockRegistry.values()].join("\n");
-}
-function autoInjectCss(cssString) {
-  let sourceKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  const marker = performanceMonitor.start("css:inject");
-  try {
-    // SSR mode: collect CSS strings instead of DOM injection. Delegates to
-    // the shared collector in ./utils/ssr.js so both the legacy
-    // startSSR()/stopSSR() pair and the modern createSSRCollector() actually
-    // receive the CSS generated by tw()/twsx().
-    if (isSSRCollecting()) {
-      collectSSRCSS(cssString);
-      performanceMonitor.end(marker);
-      return;
-    }
-    if (IS_BROWSER$1) {
-      if (sourceKey) {
-        // Slot-based update: each unique twsx(obj) call owns its own CSS block.
-        // When styles change (new content, same logical call site via cacheKey)
-        // the old slot is replaced and the style tag is fully rebuilt, so no
-        // stale rules from previous HMR cycles can pile up.
-        const existing = _cssBlockRegistry.get(sourceKey);
-        if (existing === cssString) {
-          // Identical content – nothing to do.
-          performanceMonitor.end(marker);
-          return;
-        }
-        _cssBlockRegistry.set(sourceKey, cssString);
-        rebuildStyleTag$1();
-        if (_cssBlockRegistry.size % 10 === 0) {
-          logger.debug("CSS registry stats: ".concat(_cssBlockRegistry.size, " blocks registered"));
-        }
-        performanceMonitor.end(marker);
-        return;
-      }
-
-      // Fallback path (e.g. direct autoInjectCss calls without a sourceKey):
-      // keep the original hash-based dedup + append behaviour.
-      const cssHash = getCssHash(cssString);
-      if (injectedCssHashSet.has(cssHash)) {
-        performanceMonitor.end(marker);
-        return;
-      }
-      injectedCssHashSet.add(cssHash);
-      evictSet(injectedCssHashSet);
-      let styleTag = document.getElementById("twsx-auto-style");
-      if (!styleTag) {
-        styleTag = document.createElement("style");
-        styleTag.id = "twsx-auto-style";
-        styleTag.setAttribute("data-twsx", "");
-        document.head.appendChild(styleTag);
-      }
-
-      // Append CSS to style tag using textContent for reliability
-      // Note: insertRule + textContent mixing destroys CSSOM rules,
-      // so we use textContent exclusively for consistent behavior
-      // with @keyframes, @media, and other nested CSS blocks.
-      styleTag.textContent += "\n".concat(cssString);
-
-      // Log injection stats periodically
-      if (injectedCssHashSet.size % 10 === 0) {
-        logger.debug("CSS injection stats: ".concat(injectedCssHashSet.size, " unique stylesheets injected"));
-      }
-    }
-    performanceMonitor.end(marker);
-  } catch (error) {
-    performanceMonitor.end(marker);
-    logger.error("Error injecting CSS:", error);
-  }
-}
+// ============================================================================
+// Main API Exports
+// ============================================================================
+// twsxClassName - Unified CSS-in-JS API with variants and slots
+// tw - Atomic CSS class generator with pseudo-class support
+// REMOVED: Re-export removed to break circular dependency
+// Import directly from './className/index.js' if needed
+// export { twsxClassName, tw } from "./className/index.js";
 
 const _excluded = ["name", "prefix", "hash", "hashLength", "inject", "_"],
   _excluded2 = ["class", "className"],