tailwind-to-style 3.1.2 → 3.2.0

package/dist/index.esm.js

@@ -1,7 +1,6 @@
 /**
- * tailwind-to-style v3.1.2
+ * tailwind-to-style v3.2.0
  * Runtime Tailwind CSS to inline styles converter
- * Core only: tws, twsx, configure
  * 
  * @author Bigetion
  * @license MIT
@@ -1795,23 +1794,24 @@ class Logger {
   }
 }
 
-// Create singleton instance with production-safe defaults
-// Use multiple safety checks for Node.js environment
-let isProduction = false;
+// Create singleton instance with silent defaults
+// Can be enabled via TWSX_LOG_LEVEL environment variable
+let logLevel = "silent";
 try {
-  // Safe check with optional chaining equivalent
   if (typeof process !== "undefined" && process && process.env) {
-    isProduction = process.env.NODE_ENV === "production";
+    // Allow explicit log level override via environment variable
+    // e.g., TWSX_LOG_LEVEL=debug or TWSX_LOG_LEVEL=warn
+    logLevel = process.env.TWSX_LOG_LEVEL || "silent";
   }
-} catch (e) {
-  // Silently fail - in browser environment, default to development mode
-  isProduction = false;
+} catch {
+  // Silently fail - in browser environment, default to silent
+  logLevel = "silent";
 }
-const logger = new Logger(isProduction ? "error" : "warn");
+const logger = new Logger(logLevel);
 
-/**
- * User Configuration Management
- * Handles theme extensions and custom plugin registration
+/**
+ * User Configuration Management
+ * Handles theme extensions and custom plugin registration
  */
 
 
@@ -1823,8 +1823,8 @@ function setClearConfigCache(fn) {
   clearConfigCache$1 = fn;
 }
 
-/**
- * User configuration state
+/**
+ * User configuration state
  */
 let userConfig = {
   theme: {
@@ -1847,11 +1847,11 @@ let userConfig = {
 // Cache for extended theme to avoid redundant lookups
 const extendedThemeCache = new Map();
 
-/**
- * Deep merge two objects
- * @param {Object} target - Target object
- * @param {Object} source - Source object
- * @returns {Object} Merged object
+/**
+ * Deep merge two objects
+ * @param {Object} target - Target object
+ * @param {Object} source - Source object
+ * @returns {Object} Merged object
  */
 function deepMerge(target, source) {
   const result = {
@@ -1867,31 +1867,31 @@ function deepMerge(target, source) {
   return result;
 }
 
-/**
- * Configure tailwind-to-style with custom theme and plugins
- * @param {Object} config - Configuration object
- * @param {Object} [config.theme] - Theme configuration
- * @param {Object} [config.theme.extend] - Theme extensions
- * @param {Array} [config.plugins] - Array of plugins
- * @param {Object} [config.corePlugins] - Core plugins to enable/disable
- * @param {string} [config.prefix] - Prefix for all classes
- *
- * @example
- * configure({
- *   theme: {
- *     extend: {
- *       colors: {
- *         brand: {
- *           500: '#3B82F6',
- *         },
- *       },
- *       spacing: {
- *         128: '32rem',
- *       },
- *     },
- *   },
- *   plugins: [myCustomPlugin],
- * });
+/**
+ * Configure tailwind-to-style with custom theme and plugins
+ * @param {Object} config - Configuration object
+ * @param {Object} [config.theme] - Theme configuration
+ * @param {Object} [config.theme.extend] - Theme extensions
+ * @param {Array} [config.plugins] - Array of plugins
+ * @param {Object} [config.corePlugins] - Core plugins to enable/disable
+ * @param {string} [config.prefix] - Prefix for all classes
+ *
+ * @example
+ * configure({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: {
+ *           500: '#3B82F6',
+ *         },
+ *       },
+ *       spacing: {
+ *         128: '32rem',
+ *       },
+ *     },
+ *   },
+ *   plugins: [myCustomPlugin],
+ * });
  */
 function configure() {
   let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -1902,6 +1902,32 @@ function configure() {
       return;
     }
 
+    // Validate config structure
+    const validTopKeys = ['theme', 'plugins', 'corePlugins', 'prefix', 'styled'];
+    const invalidKeys = Object.keys(config).filter(k => !validTopKeys.includes(k));
+    if (invalidKeys.length > 0) {
+      logger.warn(`configure: Unrecognized config keys: ${invalidKeys.join(', ')}. ` + `Valid keys are: ${validTopKeys.join(', ')}`);
+    }
+    if (config.theme) {
+      if (typeof config.theme !== 'object' || Array.isArray(config.theme)) {
+        logger.warn('configure: theme must be an object');
+        return;
+      }
+      const validThemeKeys = ['extend', 'colors', 'spacing', 'borderRadius', 'fontSize', 'fontFamily', 'screens', 'breakpoints'];
+      const invalidThemeKeys = Object.keys(config.theme).filter(k => !validThemeKeys.includes(k) && typeof config.theme[k] !== 'object');
+      if (invalidThemeKeys.length > 0) {
+        logger.warn(`configure: Unrecognized theme keys: ${invalidThemeKeys.join(', ')}. ` + `Common keys are: ${validThemeKeys.join(', ')}`);
+      }
+    }
+    if (config.plugins !== undefined && !Array.isArray(config.plugins)) {
+      logger.warn('configure: plugins must be an array');
+      return;
+    }
+    if (config.prefix !== undefined && typeof config.prefix !== 'string') {
+      logger.warn('configure: prefix must be a string');
+      return;
+    }
+
     // Clear extended theme cache when config changes
     extendedThemeCache.clear();
 
@@ -1953,9 +1979,9 @@ function configure() {
   }
 }
 
-/**
- * Get current user configuration
- * @returns {Object} Current configuration
+/**
+ * Get current user configuration
+ * @returns {Object} Current configuration
  */
 function getConfig() {
   return {
@@ -1963,8 +1989,8 @@ function getConfig() {
   };
 }
 
-/**
- * Reset configuration to defaults
+/**
+ * Reset configuration to defaults
  */
 function resetConfig() {
   userConfig = {
@@ -1980,10 +2006,10 @@ function resetConfig() {
   logger.info("Configuration reset to defaults");
 }
 
-/**
- * Get extended theme value
- * @param {string} key - Theme key (e.g., 'colors', 'spacing')
- * @returns {Object} Extended theme values
+/**
+ * Get extended theme value
+ * @param {string} key - Theme key (e.g., 'colors', 'spacing')
+ * @returns {Object} Extended theme values
  */
 function getExtendedTheme(key) {
   // Check cache first
@@ -1997,17 +2023,17 @@ function getExtendedTheme(key) {
   return result;
 }
 
-/**
- * Get all registered plugins
- * @returns {Array} Array of plugins
+/**
+ * Get all registered plugins
+ * @returns {Array} Array of plugins
  */
 function getPlugins() {
   return userConfig.plugins;
 }
 
-/**
- * Get configured prefix
- * @returns {string} Prefix string
+/**
+ * Get configured prefix
+ * @returns {string} Prefix string
  */
 function getPrefix() {
   return userConfig.prefix;
@@ -2522,9 +2548,9 @@ function staggerAnimations(elements, animationName) {
   });
 }
 
-/**
- * Animation Generator
- * Generates animation utility classes with dynamic inline animations
+/**
+ * Animation Generator
+ * Generates animation utility classes with dynamic inline animations
  */
 
 function generator$2I() {
@@ -7242,9 +7268,9 @@ function generator$d() {
   return responsiveCssString;
 }
 
-/**
- * Transition Delay Generator
- * Generates transition-delay utility classes
+/**
+ * Transition Delay Generator
+ * Generates transition-delay utility classes
  */
 
 function generator$c() {
@@ -7273,9 +7299,9 @@ function generator$c() {
   return responsiveCssString;
 }
 
-/**
- * Transition Duration Generator
- * Generates transition-duration utility classes
+/**
+ * Transition Duration Generator
+ * Generates transition-duration utility classes
  */
 
 function generator$b() {
@@ -7304,9 +7330,9 @@ function generator$b() {
   return responsiveCssString;
 }
 
-/**
- * Transition Property Generator
- * Generates transition-property utility classes
+/**
+ * Transition Property Generator
+ * Generates transition-property utility classes
  */
 
 function generator$a() {
@@ -7346,9 +7372,9 @@ function generator$a() {
   return responsiveCssString;
 }
 
-/**
- * Transition Timing Function Generator
- * Generates transition-timing-function utility classes (ease)
+/**
+ * Transition Timing Function Generator
+ * Generates transition-timing-function utility classes (ease)
  */
 
 function generator$9() {
@@ -7987,6 +8013,108 @@ const patterns = {
   ...fontFamily
 };
 
+/**
+ * CX - Conditional Class Name Builder
+ * 
+ * A lightweight utility for conditionally joining Tailwind class names.
+ * Similar to `clsx`/`classnames` but designed specifically for tailwind-to-style.
+ * 
+ * @module cx
+ */
+
+/**
+ * Conditionally join class names into a single string.
+ * 
+ * Accepts strings, objects (key=className, value=condition), arrays, and nested combinations.
+ * Falsy values (null, undefined, false, 0, '') are ignored.
+ * 
+ * @param {...(string|Object|Array|boolean|null|undefined)} args - Class name inputs
+ * @returns {string} Joined class names string
+ * 
+ * @example
+ * // Strings
+ * cx('bg-blue-500', 'text-white')
+ * // → 'bg-blue-500 text-white'
+ * 
+ * @example
+ * // Conditionals
+ * cx('p-4', isActive && 'bg-blue-500', isDisabled && 'opacity-50')
+ * // → 'p-4 bg-blue-500' (if isActive=true, isDisabled=false)
+ * 
+ * @example
+ * // Object syntax
+ * cx('p-4', { 'bg-blue-500': isActive, 'opacity-50': isDisabled, 'cursor-pointer': true })
+ * // → 'p-4 bg-blue-500 cursor-pointer'
+ * 
+ * @example
+ * // 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);
+  };
+};
+
 /**
  * Web Animations API Integration
  * Dynamic animations without keyframes injection
@@ -8308,16 +8436,89 @@ function applyDynamicAnimation(element, templateName) {
   return animationName;
 }
 
+// ============================================================================
+// SSR (Server-Side Rendering) Support
+// Detect environment once at module load for zero-cost runtime checks
+// ============================================================================
+const IS_BROWSER = typeof window !== "undefined" && typeof document !== "undefined";
+const IS_SERVER = !IS_BROWSER;
+
+// SSR CSS collector - accumulates CSS strings during server rendering
+let _ssrCollectedCss = [];
+let _ssrCollecting = false;
+
+/**
+ * Start collecting CSS for SSR. Call before rendering.
+ * @returns {void}
+ * @example
+ * import { startSSR, stopSSR } from 'tailwind-to-style'
+ * startSSR()
+ * const html = renderToString(<App />)
+ * const css = stopSSR()
+ * // Inject css into <head> of your HTML response
+ */
+function startSSR() {
+  _ssrCollectedCss = [];
+  _ssrCollecting = true;
+}
+
+/**
+ * Stop collecting CSS and return all collected CSS as a single string.
+ * @returns {string} All CSS collected during SSR
+ */
+function stopSSR() {
+  _ssrCollecting = false;
+  const css = _ssrCollectedCss.join('\n');
+  _ssrCollectedCss = [];
+  return css;
+}
+
+/**
+ * Get collected CSS without stopping collection.
+ * @returns {string} Currently collected CSS
+ */
+function getSSRStyles() {
+  return _ssrCollectedCss.join('\n');
+}
+
+// ============================================================================
+// Bounded Caches (prevent memory leaks in long-running SPAs)
+// ============================================================================
+const MAX_CACHE_SIZE = 5000;
+const MAX_SET_SIZE = 10000;
+
 // Global registry to track injected keyframes (prevents duplication)
 const _injectedKeyframes = new Set();
 
-// Global cache Maps for cached versions (twsxCache, twsxVariantsCache functions)
+// Global cache Maps with bounded eviction
 const _twsxInputCache = new Map();
 const _twsxVariantsResultCache = new Map();
 
 // WeakMap for object identity-based caching (fast lookup for repeated objects)
 const _objectIdentityCache = new WeakMap();
 
+/** Evict oldest entries from a Map when it exceeds maxSize */
+function evictMap(map) {
+  let maxSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_CACHE_SIZE;
+  if (map.size <= maxSize) return;
+  const excess = map.size - maxSize;
+  const iter = map.keys();
+  for (let i = 0; i < excess; i++) {
+    map.delete(iter.next().value);
+  }
+}
+
+/** Evict oldest entries from a Set when it exceeds maxSize */
+function evictSet(set) {
+  let maxSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_SET_SIZE;
+  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: {
@@ -8386,7 +8587,7 @@ function generateMinifiedKeyframes(animationNames) {
     for (const [percentage, styles] of Object.entries(keyframe)) {
       css += `${percentage}{`;
       for (const [prop, value] of Object.entries(styles)) {
-        const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+        const cssProp = prop.replace(UPPERCASE_LETTER_REGEX, "-$1").toLowerCase();
         css += `${cssProp}:${value};`;
       }
       css += "}";
@@ -8395,6 +8596,93 @@ function generateMinifiedKeyframes(animationNames) {
   }
   return css;
 }
+
+// ============================================================================
+// PRE-COMPILED REGEX CONSTANTS (Performance Optimization)
+// Pre-compiling regex patterns provides 50-100x performance improvement
+// by avoiding repeated regex object creation in hot code paths
+// ============================================================================
+
+// Class parsing (includes . for decimal values like p-0.5)
+const CLASS_PARSER_REGEX = /[\w.\-\/]+(?:\/\d+)?(?:\[[^\]]+\])?/g;
+
+// 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
+};
+
+// 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 = /:/;
+
+// CSS variable resolution — supports nested parens in fallback (e.g. rgba(...))
+const CSS_VAR_REGEX = /var\((--[\w-]+)(?:,\s*((?:[^()]+|\([^()]*\))*))?\)/g;
+const CAMEL_CASE_REGEX = /-([a-z])/g;
+
+// Animation detection
+const ANIMATION_NAME_REGEX = /animation(?:-name)?:\s*([a-zA-Z0-9-]+)/gi;
+
+// Custom class detection
+const CUSTOM_VALUE_BRACKET_REGEX = /\[([^\]]+)\]/;
+const CUSTOM_VALUE_FULL_REGEX = /^(.+?)\[(.+)\]$/;
+
+// String splitting (CSS declarations)
+const CSS_SEMICOLON_SPLIT_REGEX = /;/;
+const CSS_COLON_SPLIT_REGEX = /:/;
+
+// Selector variants
+const SELECTOR_VARIANT_REGEX = /c-(first|last|odd|even|\d+|not\([^)]+\))/g;
+const NOT_SELECTOR_REGEX = /^not\(([^)]+)\)$/;
+const DIGIT_ONLY_REGEX = /^\d+$/;
+
+// Color property regex patterns (pre-compiled for each color property)
+// Used in processOpacityModifier for 50-100x performance improvement
+const COLOR_PROPERTIES = ["color", "background-color", "border-color", "text-decoration-color", "outline-color", "fill", "stroke", "caret-color", "accent-color"];
+
+// Pre-compile regex patterns for each color property
+const COLOR_REGEX_PATTERNS = new Map();
+for (const prop of COLOR_PROPERTIES) {
+  const escapedProp = prop.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  COLOR_REGEX_PATTERNS.set(prop, {
+    rgb: new RegExp(`(${escapedProp}\\s*:\\s*)rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)`, "gi"),
+    rgba: new RegExp(`(${escapedProp}\\s*:\\s*)rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)`, "gi"),
+    hsl: new RegExp(`(${escapedProp}\\s*:\\s*)hsl\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%)\\)`, "gi"),
+    hsla: new RegExp(`(${escapedProp}\\s*:\\s*)hsla\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%),\\s*[\\d.]+\\)`, "gi"),
+    hex: new RegExp(`(${escapedProp}\\s*:\\s*)(#[0-9a-fA-F]{3,6})`, "gi")
+  });
+}
+
+// CSS property name conversion
+const UPPERCASE_LETTER_REGEX = /([A-Z])/g;
+
+// Escape characters
+const ESCAPE_SLASH_REGEX = /\//g;
+const ESCAPE_DOT_REGEX = /\./g;
 const plugins = {
   accentColor: generator$2N,
   accessibility: generator$2M,
@@ -8593,36 +8881,55 @@ function parseCustomClassWithPatterns(className) {
 
 /**
  * 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;'
  */
 function resolveCssToClearCss(cssString) {
   const customVars = {};
   const props = {};
-  cssString.split(";").forEach(decl => {
-    const [key, value] = decl.split(":").map(s => s && s.trim());
-    if (!key || !value) return;
+
+  // Split by semicolon and process declarations
+  const declarations = cssString.split(CSS_SEMICOLON_SPLIT_REGEX);
+  for (let i = 0; i < declarations.length; i++) {
+    const decl = declarations[i];
+    if (!decl) continue;
+    const colonIndex = decl.indexOf(":");
+    if (colonIndex === -1) continue;
+    const key = decl.substring(0, colonIndex).trim();
+    const value = decl.substring(colonIndex + 1).trim();
+    if (!key || !value) continue;
     if (key.startsWith("--")) {
       customVars[key] = value;
     } else {
       props[key] = value;
     }
-  });
-  // Replace var(--foo) in all values
-  Object.keys(props).forEach(key => {
+  }
+
+  // Replace var(--foo) in all values using pre-compiled regex
+  const propKeys = Object.keys(props);
+  for (let i = 0; i < propKeys.length; i++) {
+    const key = propKeys[i];
     let val = props[key];
-    val = val.replace(/var\((--[a-zA-Z0-9-_]+)\)/g, (m, v) => customVars[v] !== undefined ? customVars[v] : m);
-    props[key] = val;
-  });
+    if (val.includes("var(")) {
+      CSS_VAR_REGEX.lastIndex = 0;
+      val = val.replace(CSS_VAR_REGEX, (m, varName) => customVars[varName] !== undefined ? customVars[varName] : m);
+      props[key] = val;
+    }
+  }
+
   // Build CSS string - INCLUDE CSS variables so they can be resolved later
-  const allProps = {
-    ...customVars,
-    ...props
-  };
-  return Object.entries(allProps).map(_ref => {
-    let [k, v] = _ref;
-    return `${k}: ${v};`;
-  }).join(" ");
+  let result = "";
+  const varKeys = Object.keys(customVars);
+  for (let i = 0; i < varKeys.length; i++) {
+    const key = varKeys[i];
+    result += `${key}: ${customVars[key]}; `;
+  }
+  for (let i = 0; i < propKeys.length; i++) {
+    const key = propKeys[i];
+    result += `${key}: ${props[key]}; `;
+  }
+  return result.trim();
 }
 
 // Cache for getConfigOptions - use LRU cache
@@ -8671,24 +8978,27 @@ function generateTailwindCssString() {
   const {
     corePlugins = {}
   } = configOptions;
-  const corePluginKeys = Object.keys(corePlugins);
   let cssString = "";
-  Object.keys(plugins).forEach(key => {
-    if (corePluginKeys.indexOf(key) >= 0 && !corePlugins[key]) {
-      cssString += "";
-    } else {
-      cssString += plugins[key](configOptions);
+  const pluginNames = Object.keys(plugins);
+
+  // Optimized loop - check corePlugins directly instead of indexOf
+  for (let i = 0; i < pluginNames.length; i++) {
+    const pluginName = pluginNames[i];
+    // Skip if plugin is explicitly disabled in corePlugins
+    if (corePlugins.hasOwnProperty(pluginName) && !corePlugins[pluginName]) {
+      continue;
     }
-  });
+    cssString += plugins[pluginName](configOptions);
+  }
   return cssString;
 }
 function convertCssToObject(cssString) {
   const obj = {};
-  const regex = /([a-zA-Z0-9\-_\\/.]+)\s*{\s*([^}]+)\s*}/g;
   let match;
-  while ((match = regex.exec(cssString)) !== null) {
-    const className = match[1].replace(/\\\\/g, "\\").replace(/^_/, "");
-    const cssRules = match[2].trim().replace(/\s+/g, " ");
+  CSS_CLASS_REGEX.lastIndex = 0; // Reset global regex
+  while ((match = CSS_CLASS_REGEX.exec(cssString)) !== null) {
+    const className = match[1].replace(DOUBLE_BACKSLASH_REGEX, "\\").replace(LEADING_UNDERSCORE_REGEX, "");
+    const cssRules = match[2].trim().replace(MULTIPLE_SPACES_REGEX, " ");
     obj[className] = cssRules;
   }
 
@@ -8734,8 +9044,9 @@ const encodeBracketCache = new LRUCache(1000);
 function encodeBracketValues(input) {
   if (!input) return input;
   if (encodeBracketCache.has(input)) return encodeBracketCache.get(input);
-  const result = input.replace(/\[([^\]]+)\]/g, (_, content) => {
-    const encoded = encodeURIComponent(content).replace(/\(/g, "__P__").replace(/\)/g, "__C__");
+  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 `[${encoded}]`;
   });
   encodeBracketCache.set(input, result);
@@ -8745,14 +9056,15 @@ 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(/__P__/g, "(").replace(/__C__/g, ")");
+  const result = decodeURIComponent(input).replace(ENCODED_PAREN_OPEN_REGEX, "(").replace(ENCODED_PAREN_CLOSE_REGEX, ")");
   decodeBracketCache.set(input, result);
   return result;
 }
 function replaceSelector(selector) {
-  return selector.replace(/c-(first|last|odd|even|\d+|not\([^)]+\))/g, (_, raw) => {
-    if (/^\d+$/.test(raw)) return selectorVariants.number(raw);
-    const notMatch = raw.match(/^not\(([^)]+)\)$/);
+  SELECTOR_VARIANT_REGEX.lastIndex = 0; // Reset global regex
+  return selector.replace(SELECTOR_VARIANT_REGEX, (_, raw) => {
+    if (DIGIT_ONLY_REGEX.test(raw)) return selectorVariants.number(raw);
+    const notMatch = raw.match(NOT_SELECTOR_REGEX);
     if (notMatch) return selectorVariants.not(notMatch[1]);
     if (selectorVariants[raw]) return selectorVariants[raw]();
     return raw;
@@ -8785,17 +9097,20 @@ function resolveVariants(selector, variants) {
   };
 }
 function inlineStyleToJson(styleString) {
-  const styles = styleString.split(";").filter(style => style.trim() !== "");
+  const styles = styleString.split(CSS_SEMICOLON_SPLIT_REGEX).filter(style => style.trim() !== "");
   const styleObject = {};
   const cssVariables = {};
 
   // First pass: collect CSS variables
-  styles.forEach(style => {
-    const [key, value] = style.split(":").map(s => s.trim());
+  for (let i = 0; i < styles.length; i++) {
+    const parts = styles[i].split(CSS_COLON_SPLIT_REGEX, 2);
+    if (parts.length !== 2) continue;
+    const key = parts[0].trim();
+    const value = parts[1].trim();
     if (key && key.startsWith("--")) {
       cssVariables[key] = value;
     }
-  });
+  }
 
   // Helper to resolve CSS variables recursively
   const resolveVariables = value => {
@@ -8804,7 +9119,8 @@ function inlineStyleToJson(styleString) {
     let maxIterations = 10; // Prevent infinite loops
 
     while (resolved.includes("var(") && maxIterations-- > 0) {
-      resolved = resolved.replace(/var\((--[a-zA-Z0-9-]+)(?:,\s*([^)]+))?\)/g, (match, variable, fallback) => {
+      CSS_VAR_REGEX.lastIndex = 0; // Reset global regex
+      resolved = resolved.replace(CSS_VAR_REGEX, (match, variable, fallback) => {
         return cssVariables[variable] || fallback || match;
       });
     }
@@ -8812,13 +9128,16 @@ function inlineStyleToJson(styleString) {
   };
 
   // Second pass: create style object with resolved values
-  styles.forEach(style => {
-    const [key, value] = style.split(":").map(s => s.trim());
+  for (let i = 0; i < styles.length; i++) {
+    const parts = styles[i].split(CSS_COLON_SPLIT_REGEX, 2);
+    if (parts.length !== 2) continue;
+    const key = parts[0].trim();
+    const value = parts[1].trim();
     if (key && value && !key.startsWith("--")) {
-      const camelCaseKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+      const camelCaseKey = key.replace(CAMEL_CASE_REGEX, (_, letter) => letter.toUpperCase());
       styleObject[camelCaseKey] = resolveVariables(value);
     }
-  });
+  }
   return styleObject;
 }
 
@@ -8868,98 +9187,77 @@ function separateAndResolveCSS(arr) {
 
     // Process CSS resolution
     const cssProperties = {};
-    arr.forEach(item => {
-      if (!item) return;
+    for (let i = 0; i < arr.length; i++) {
+      const item = arr[i];
+      if (!item) continue;
       try {
-        const declarations = item.split(";").map(decl => decl.trim()).filter(decl => decl);
-        declarations.forEach(declaration => {
+        const declarations = item.split(CSS_SEMICOLON_SPLIT_REGEX);
+        for (let j = 0; j < declarations.length; j++) {
+          const declaration = declarations[j].trim();
+          if (!declaration) continue;
           const colonIndex = declaration.indexOf(":");
-          if (colonIndex === -1) return;
+          if (colonIndex === -1) continue;
           const key = declaration.substring(0, colonIndex).trim();
           const value = declaration.substring(colonIndex + 1).trim();
           if (key && value) {
             // Prioritize more specific values (e.g., !important)
             if (value.includes("!important") || !cssProperties[key]) {
               cssProperties[key] = value;
+            } else if (key === "--gradient-color-stops" && value.includes("--gradient-via-color") && !cssProperties[key].includes("--gradient-via-color")) {
+              // Allow 3-stop gradient (with via) to overwrite 2-stop version
+              cssProperties[key] = value;
             }
           }
-        });
+        }
       } catch (error) {
         logger.warn("Error processing CSS declaration:", item, error);
       }
-    });
+    }
     const resolvedProperties = {
       ...cssProperties
     };
+
+    /**
+     * Optimized CSS variable resolution using regex-based approach
+     * 2-3x faster than manual char-by-char parsing
+     * Handles nested var() with fallback values
+     */
     const resolveValue = function (value, variables) {
       let maxDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
       if (!value || !value.includes("var(") || maxDepth <= 0) return value;
       try {
         let resolved = value;
-        let hasVariables = true;
-        let depth = 0;
 
-        // Keep resolving until no more variables or max depth reached
-        while (hasVariables && depth < maxDepth) {
+        // Iteratively resolve variables until no more changes or max depth reached
+        for (let depth = 0; depth < maxDepth; depth++) {
           const before = resolved;
 
-          // Manual parsing to handle nested parentheses in fallback values
-          let result = "";
-          let i = 0;
-          while (i < resolved.length) {
-            // Look for var(
-            if (resolved.substr(i, 4) === "var(") {
-              i += 4;
-
-              // Extract variable name
-              let varName = "";
-              while (i < resolved.length && resolved[i] !== "," && resolved[i] !== ")") {
-                varName += resolved[i];
-                i++;
-              }
+          // Use pre-compiled regex for better performance
+          CSS_VAR_REGEX.lastIndex = 0;
 
-              // Check for fallback
-              let fallback = "";
-              if (resolved[i] === ",") {
-                i++; // skip comma
-                // Parse fallback - count parentheses
-                let parenCount = 1; // We're inside var()
-                while (i < resolved.length && parenCount > 0) {
-                  if (resolved[i] === "(") parenCount++;else if (resolved[i] === ")") {
-                    parenCount--;
-                    if (parenCount === 0) break;
-                  }
-                  fallback += resolved[i];
-                  i++;
-                }
-              }
+          // Replace all var() occurrences
+          resolved = resolved.replace(CSS_VAR_REGEX, (match, varName, fallback) => {
+            const trimmedVarName = varName.trim();
 
-              // Skip closing )
-              if (resolved[i] === ")") i++;
+            // Try to resolve from variables
+            if (variables[trimmedVarName] !== undefined) {
+              return variables[trimmedVarName];
+            }
 
-              // Resolve variable
-              const resolvedVar = variables[varName.trim()];
-              if (resolvedVar) {
-                result += resolvedVar;
-              } else if (fallback) {
-                result += fallback.trim();
-              } else {
-                // Keep original if can't resolve
-                result += `var(${varName}`;
-                if (fallback) result += `,${fallback}`;
-                result += ")";
-              }
-            } else {
-              result += resolved[i];
-              i++;
+            // Use fallback if provided
+            if (fallback !== undefined) {
+              return fallback.trim();
             }
-          }
-          resolved = result;
-          hasVariables = resolved.includes("var(");
-          depth++;
 
-          // If nothing changed, break to avoid infinite loop
+            // Keep original if can't resolve
+            return match;
+          });
+
+          // Break if no changes (fully resolved or unresolvable)
           if (before === resolved) break;
+
+          // Break if no more var() references
+          if (!resolved.includes("var(")) break;
         }
         return resolved;
       } catch (error) {
@@ -8968,30 +9266,39 @@ function separateAndResolveCSS(arr) {
       }
     };
 
-    // Resolve variables recursively - multiple passes
+    // Resolve variables recursively - multiple passes with optimized loop
     let maxPasses = 5;
     let hasUnresolved = true;
     while (hasUnresolved && maxPasses-- > 0) {
       hasUnresolved = false;
-      Object.keys(resolvedProperties).forEach(key => {
+      const propKeys = Object.keys(resolvedProperties);
+      for (let i = 0; i < propKeys.length; i++) {
+        const key = propKeys[i];
         const resolved = resolveValue(resolvedProperties[key], resolvedProperties);
         if (resolved !== resolvedProperties[key]) {
           resolvedProperties[key] = resolved;
           hasUnresolved = true;
         }
-      });
+      }
     }
 
-    // Remove CSS variables after resolution
-    Object.keys(resolvedProperties).forEach(key => {
+    // Remove CSS variables after resolution using optimized loop
+    const allKeys = Object.keys(resolvedProperties);
+    for (let i = 0; i < allKeys.length; i++) {
+      const key = allKeys[i];
       if (key.startsWith("--")) {
         delete resolvedProperties[key];
       }
-    });
-    const result = Object.entries(resolvedProperties).map(_ref2 => {
-      let [key, value] = _ref2;
-      return `${key}: ${value};`;
-    }).join(" ");
+    }
+
+    // Build result string with optimized loop (faster than map/join)
+    let result = "";
+    const finalKeys = Object.keys(resolvedProperties);
+    for (let i = 0; i < finalKeys.length; i++) {
+      const key = finalKeys[i];
+      result += `${key}: ${resolvedProperties[key]}; `;
+    }
+    result = result.trim();
     cssResolutionCache.set(cacheKey, result);
     performanceMonitor.end(marker);
     return result;
@@ -9009,7 +9316,7 @@ function separateAndResolveCSS(arr) {
  * @returns {string} Modified CSS declaration with opacity applied
  */
 function processOpacityModifier(className, cssDeclaration) {
-  const opacityMatch = className.match(/\/(\d+)$/);
+  const opacityMatch = OPACITY_MODIFIER_REGEX.exec(className);
   if (!opacityMatch) return cssDeclaration;
   const opacityValue = parseInt(opacityMatch[1], 10);
   if (opacityValue < 0 || opacityValue > 100) return cssDeclaration;
@@ -9018,37 +9325,39 @@ function processOpacityModifier(className, cssDeclaration) {
   // Handle Tailwind's CSS custom property pattern
   let modifiedDeclaration = cssDeclaration;
 
-  // Replace opacity custom properties
-  const opacityProperties = ["--text-opacity", "--bg-opacity", "--border-opacity", "--ring-opacity", "--divide-opacity", "--placeholder-opacity", "--text-decoration-opacity", "--outline-opacity", "--accent-opacity", "--caret-opacity"];
-  opacityProperties.forEach(prop => {
-    const propRegex = new RegExp(`${prop}\\s*:\\s*[\\d.]+`, "gi");
-    modifiedDeclaration = modifiedDeclaration.replace(propRegex, `${prop}: ${alphaValue}`);
-  });
+  // 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, `${prop}: ${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;
 
-  // Also handle direct color values that might not use CSS variables
-  const colorProperties = ["color", "background-color", "border-color", "text-decoration-color", "outline-color", "fill", "stroke", "caret-color", "accent-color"];
-  colorProperties.forEach(prop => {
-    // Match rgb(), rgba(), hsl(), hsla() functions
-    const rgbRegex = new RegExp(`(${prop}\\s*:\\s*)rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)`, "gi");
-    const rgbaRegex = new RegExp(`(${prop}\\s*:\\s*)rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)`, "gi");
-    const hslRegex = new RegExp(`(${prop}\\s*:\\s*)hsl\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%)\\)`, "gi");
-    const hslaRegex = new RegExp(`(${prop}\\s*:\\s*)hsla\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%),\\s*[\\d.]+\\)`, "gi");
+    // 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(rgbRegex, `$1rgba($2, $3, $4, ${alphaValue})`);
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.rgb, `$1rgba($2, $3, $4, ${alphaValue})`);
 
     // Update existing rgba opacity
-    modifiedDeclaration = modifiedDeclaration.replace(rgbaRegex, `$1rgba($2, $3, $4, ${alphaValue})`);
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.rgba, `$1rgba($2, $3, $4, ${alphaValue})`);
 
     // Convert hsl to hsla with opacity
-    modifiedDeclaration = modifiedDeclaration.replace(hslRegex, `$1hsla($2, $3, $4, ${alphaValue})`);
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.hsl, `$1hsla($2, $3, $4, ${alphaValue})`);
 
     // Update existing hsla opacity
-    modifiedDeclaration = modifiedDeclaration.replace(hslaRegex, `$1hsla($2, $3, $4, ${alphaValue})`);
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.hsla, `$1hsla($2, $3, $4, ${alphaValue})`);
 
-    // Handle hex colors
-    const hexRegex = new RegExp(`(${prop}\\s*:\\s*)(#[0-9a-fA-F]{3,6})`, "gi");
-    modifiedDeclaration = modifiedDeclaration.replace(hexRegex, (match, propPart, hexColor) => {
+    // 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;
@@ -9063,7 +9372,7 @@ function processOpacityModifier(className, cssDeclaration) {
       }
       return `${propPart}rgba(${r}, ${g}, ${b}, ${alphaValue})`;
     });
-  });
+  }
   return modifiedDeclaration;
 }
 
@@ -9078,14 +9387,15 @@ function tws(classNames, convertToJson) {
   try {
     // Initialize CSS object using singleton cache
     const cssObject = tailwindCache.getOrGenerate(generateTailwindCssString, convertCssToObject);
-    if ([!classNames, typeof classNames !== "string", classNames.trim() === ""].includes(true)) {
+    if (!classNames || typeof classNames !== "string" || classNames.trim() === "") {
       performanceMonitor.end(totalMarker);
       return convertToJson ? {} : "";
     }
     let classes;
     try {
       const parseMarker = performanceMonitor.start("tws:parse");
-      classes = classNames.match(/[\w-\/]+(?:\/\d+)?(?:\[[^\]]+\])?/g);
+      CLASS_PARSER_REGEX.lastIndex = 0; // Reset global regex
+      classes = classNames.match(CLASS_PARSER_REGEX);
       performanceMonitor.end(parseMarker);
 
       // If no valid classes are found
@@ -9106,7 +9416,7 @@ function tws(classNames, convertToJson) {
       // Extract base class name without opacity modifier
       // Only remove /digits if it's an opacity modifier (not a fraction like w-2/3)
       // Opacity modifiers are typically /0-100, fractions are /2, /3, /4, /5, /6, /12
-      const opacityMatch = className.match(/\/(\d+)$/);
+      const opacityMatch = OPACITY_MODIFIER_REGEX.exec(className);
       let baseClassName = className;
       let hasOpacityModifier = false;
       if (opacityMatch) {
@@ -9130,7 +9440,7 @@ function tws(classNames, convertToJson) {
         }
         return resolveCssToClearCss(result);
       } else if (baseClassName.includes("[")) {
-        const match = baseClassName.match(/\[([^\]]+)\]/);
+        const match = CUSTOM_VALUE_BRACKET_REGEX.exec(baseClassName);
         if (match) {
           const customValue = match[1];
           const baseKey = baseClassName.split("[")[0];
@@ -9200,14 +9510,17 @@ const performanceMonitor = {
 
 // Utility functions for class expansion
 function expandDirectiveGroups(str) {
-  return str.replace(/(\w+)\(([^()]+)\)/g, (_, directive, content) => {
+  DIRECTIVE_GROUP_REGEX.lastIndex = 0; // Reset global regex
+  return str.replace(DIRECTIVE_GROUP_REGEX, (_, directive, content) => {
     // Special handling for dark mode syntax: dark:(classes)
     if (directive === "dark") {
-      return content.trim().split(/\s+/).map(cls => `dark:${cls}`).join(" ");
+      return content.trim().split(WHITESPACE_SPLIT_REGEX).map(cls => `dark:${cls}`).join(" ");
     }
-    return content.trim().split(/\s+/).map(val => {
+    return content.trim().split(WHITESPACE_SPLIT_REGEX).map(val => {
       if (val.includes(":")) {
-        const [variant, v] = val.split(":");
+        const parts = val.split(VARIANT_COLON_SPLIT_REGEX);
+        const variant = parts[0];
+        const v = parts[1];
         const prefix = v.startsWith("-") ? "-" : "";
         const value = v.startsWith("-") ? v.slice(1) : v;
         return `${variant}:${prefix}${directive}-${value}`;
@@ -9220,8 +9533,9 @@ function expandDirectiveGroups(str) {
 }
 function expandVariants(str) {
   let parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-  return str.replace(/(\w+):\(([^()]+(?:\((?:[^()]+)\))?[^()]*)\)/g, (_, variant, content) => {
-    return content.trim().split(/\s+/).map(c => {
+  VARIANT_GROUP_REGEX.lastIndex = 0; // Reset global regex
+  return str.replace(VARIANT_GROUP_REGEX, (_, variant, content) => {
+    return content.trim().split(WHITESPACE_SPLIT_REGEX).map(c => {
       if (/\w+:\(.*\)/.test(c)) {
         return expandVariants(c, parent ? `${parent}:${variant}` : variant);
       }
@@ -9280,7 +9594,7 @@ function processClass(cls, selector, styles) {
 
   // Extract base class name without opacity modifier for CSS lookup
   // Only remove /digits if it's an opacity modifier (not a fraction like w-2/3)
-  const opacityMatch = pureClassName.match(/\/(\d+)$/);
+  const opacityMatch = OPACITY_MODIFIER_REGEX.exec(pureClassName);
   let baseClassName = pureClassName;
   let hasOpacityModifier = false;
   if (opacityMatch) {
@@ -9298,9 +9612,9 @@ function processClass(cls, selector, styles) {
 
   // Get cssObject from singleton cache
   const cssObject = tailwindCache.getOrGenerate(generateTailwindCssString, convertCssToObject);
-  let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(/(\/)/g, "\\$1")] || cssObject[baseClassName.replace(/\./g, "\\.")];
+  let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(ESCAPE_SLASH_REGEX, "\\$1")] || cssObject[baseClassName.replace(ESCAPE_DOT_REGEX, "\\.")];
   if (!declarations && baseClassName.includes("[")) {
-    const match = baseClassName.match(/^(.+?)\[(.+)\]$/);
+    const match = CUSTOM_VALUE_FULL_REGEX.exec(baseClassName);
     if (match) {
       const [, prefix, dynamicValue] = match;
       const customKey = `${prefix}custom`;
@@ -9343,8 +9657,8 @@ 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(_ref3 => {
-        let [key, value] = _ref3;
+      const cssDeclarations = Object.entries(nestedVal).map(_ref => {
+        let [key, value] = _ref;
         // 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
@@ -9394,6 +9708,17 @@ function walkStyleTree(selector, val, styles, walk) {
     processNestedSelectors(nested, selector, styles, walk);
   } else if (typeof val === "string") {
     if (val.trim() === "") return;
+    // Handle @css string directive: '@css { ... }'
+    const trimmedVal = val.trim();
+    if (trimmedVal.startsWith('@css')) {
+      const cssMatch = trimmedVal.match(/^@css\s*\{([\s\S]*)\}\s*$/);
+      if (cssMatch) {
+        const rawCss = cssMatch[1].trim();
+        styles[selector] = styles[selector] || '';
+        styles[selector] += rawCss.split(';').filter(d => d.trim()).map(d => d.trim() + ';').join(' ') + '\n';
+        return;
+      }
+    }
     walk(selector, [expandGroupedClass(val)]);
   } else if (typeof val === "object" && val !== null) {
     const {
@@ -9410,8 +9735,8 @@ 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(_ref4 => {
-        let [key, value] = _ref4;
+      const cssDeclarations = Object.entries(val["@css"]).map(_ref2 => {
+        let [key, value] = _ref2;
         // 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
@@ -9662,6 +9987,17 @@ function twsxNoCache(obj) {
       let baseClass = "";
       const nested = {};
       if (typeof val === "string") {
+        // Handle @css string directive: '@css { ... }'
+        const trimmedVal = val.trim();
+        if (trimmedVal.startsWith('@css')) {
+          const cssMatch = trimmedVal.match(/^@css\s*\{([\s\S]*)\}\s*$/);
+          if (cssMatch) {
+            const rawCss = cssMatch[1].trim();
+            styles[selector] = styles[selector] || '';
+            styles[selector] += rawCss.split(';').filter(d => d.trim()).map(d => d.trim() + ';').join(' ') + '\n';
+            continue;
+          }
+        }
         // Check if this is a @css property value - if so, don't process through expandGroupedClass
         if (selector.includes(" @css ")) {
           // This is a CSS property value from @css flattening - keep as-is
@@ -9691,9 +10027,9 @@ function twsxNoCache(obj) {
 
     // Scan CSS for animation names (support camelCase like fadeIn, slideUp)
     const usedAnimations = new Set();
-    const animationRegex = /animation(?:-name)?:\s*([a-zA-Z0-9-]+)/gi;
+    ANIMATION_NAME_REGEX.lastIndex = 0; // Reset global regex
     let match;
-    while ((match = animationRegex.exec(cssString)) !== null) {
+    while ((match = ANIMATION_NAME_REGEX.exec(cssString)) !== null) {
       const animName = match[1];
       // Check both original case and lowercase
       if (BUILTIN_KEYFRAMES[animName]) {
@@ -9744,7 +10080,7 @@ function twsxNoCache(obj) {
       for (const [percentage, styles] of Object.entries(keyframe)) {
         customKeyframesCSS += `${percentage}{`;
         for (const [prop, value] of Object.entries(styles)) {
-          const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+          const cssProp = prop.replace(UPPERCASE_LETTER_REGEX, "-$1").toLowerCase();
           customKeyframesCSS += `${cssProp}:${value};`;
         }
         customKeyframesCSS += "}";
@@ -10350,7 +10686,7 @@ function twsx(obj) {
     const {
       inject = true
     } = options;
-    if (inject && typeof window !== "undefined" && typeof document !== "undefined") {
+    if (inject && (IS_BROWSER || _ssrCollecting)) {
       autoInjectCss(cached);
     }
     return cached;
@@ -10359,6 +10695,7 @@ function twsx(obj) {
   // Cache miss: call original twsxNoCache and cache result
   const result = twsxNoCache(obj, options);
   _twsxInputCache.set(cacheKey, result);
+  evictMap(_twsxInputCache);
   return result;
 }
 
@@ -10394,6 +10731,7 @@ function twsxVariants(className) {
   // Cache miss: call original twsxVariantsNoCache and cache result
   const result = twsxVariantsNoCache(className, config);
   _twsxVariantsResultCache.set(cacheKey, result);
+  evictMap(_twsxVariantsResultCache);
   return result;
 }
 
@@ -10411,25 +10749,64 @@ function getCssHash(str) {
   return hash;
 }
 
-// Enhanced auto-inject CSS with performance monitoring
+// Enhanced auto-inject CSS with performance monitoring & SSR support
 const injectedCssHashSet = new Set();
 function autoInjectCss(cssString) {
   const marker = performanceMonitor.start("css:inject");
   try {
-    if (typeof window !== "undefined" && typeof document !== "undefined") {
+    // SSR mode: collect CSS strings instead of DOM injection
+    if (_ssrCollecting) {
       const cssHash = getCssHash(cssString);
       if (injectedCssHashSet.has(cssHash)) {
         performanceMonitor.end(marker);
         return;
       }
       injectedCssHashSet.add(cssHash);
+      evictSet(injectedCssHashSet);
+      _ssrCollectedCss.push(cssString);
+      performanceMonitor.end(marker);
+      return;
+    }
+    if (IS_BROWSER) {
+      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);
       }
-      styleTag.textContent += `\n${cssString}`;
+
+      // Use insertRule for better performance (avoids full stylesheet reparse)
+      try {
+        const sheet = styleTag.sheet;
+        if (sheet) {
+          // Split CSS by closing brace to insert individual rules
+          const rules = cssString.split('}').filter(r => r.trim());
+          for (const rule of rules) {
+            const trimmed = rule.trim();
+            if (trimmed) {
+              try {
+                sheet.insertRule(trimmed + '}', sheet.cssRules.length);
+              } catch (e) {
+                // Fallback for complex rules (e.g., @keyframes, @media)
+                styleTag.textContent += `\n${trimmed}}`;
+              }
+            }
+          }
+        } else {
+          styleTag.textContent += `\n${cssString}`;
+        }
+      } catch (e) {
+        // Ultimate fallback
+        styleTag.textContent += `\n${cssString}`;
+      }
 
       // Log injection stats periodically
       if (injectedCssHashSet.size % 10 === 0) {
@@ -10499,6 +10876,5 @@ const performanceUtils = {
   }
 };
 
-// End of exports - v3.0.0 core only (tws, twsx, twsxVariants, configure)
-
-export { DYNAMIC_TEMPLATES, INLINE_ANIMATIONS, LRUCache, Logger, TwsError, animateElement, applyDynamicAnimation, applyInlineAnimation, applyWebAnimation, chainAnimations, clearConfigCache, configure, createDynamicAnimation, createPlugin, createTemplateAnimation, createUtilityPlugin, createVariantPlugin, debouncedTws, debouncedTwsx, getConfig, getTailwindCache, handleError, initWebAnimations, logger, onError, performanceUtils, resetConfig, resetTailwindCache, staggerAnimations, tws, twsx, twsxVariants };
+export { DYNAMIC_TEMPLATES, INLINE_ANIMATIONS, IS_BROWSER, IS_SERVER, LRUCache, Logger, TwsError, animateElement, applyDynamicAnimation, applyInlineAnimation, applyWebAnimation, chainAnimations, clearConfigCache, configure, createDynamicAnimation, createPlugin, createTemplateAnimation, createUtilityPlugin, createVariantPlugin, cx, debouncedTws, debouncedTwsx, getConfig, getSSRStyles, getTailwindCache, handleError, initWebAnimations, logger, onError, performanceUtils, resetConfig, resetTailwindCache, staggerAnimations, startSSR, stopSSR, tws, twsx, twsxVariants };
+//# sourceMappingURL=index.esm.js.map