tailwind-to-style 2.12.0 → 2.12.2

package/dist/index.browser.js

@@ -1,11 +1,11 @@
 /**
- * tailwind-to-style v2.12.0
+ * tailwind-to-style v2.12.2
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
  * @license MIT
  */
-import React, { useMemo, useEffect, useState, createElement, createContext, useContext } from 'react';
+import React, { useContext, createContext, useMemo, useEffect, useState, useRef, createElement } from 'react';
 
 /**
  * Tailwind Variants (tv) - Type-safe variant system
@@ -1916,6 +1916,14 @@ const logger = new Logger(isProduction ? "error" : "warn");
  */
 
 
+// Import clearConfigCache - will be set after module loads
+let clearConfigCache$1 = null;
+
+// Lazy import to avoid circular dependency
+function setClearConfigCache(fn) {
+  clearConfigCache$1 = fn;
+}
+
 /**
  * User configuration state
  */
@@ -1928,6 +1936,9 @@ let userConfig = {
   prefix: ""
 };
 
+// Cache for extended theme to avoid redundant lookups
+const extendedThemeCache = new Map();
+
 /**
  * Deep merge two objects
  * @param {Object} target - Target object
@@ -1983,6 +1994,9 @@ function configure() {
       return;
     }
 
+    // Clear extended theme cache when config changes
+    extendedThemeCache.clear();
+
     // Merge user config with defaults
     if (config.theme) {
       if (config.theme.extend) {
@@ -2019,6 +2033,11 @@ function configure() {
 
     // Reset cache to apply new configuration
     resetTailwindCache();
+
+    // Also clear config options cache if available
+    if (clearConfigCache$1) {
+      clearConfigCache$1();
+    }
     logger.info("Configuration applied successfully");
   } catch (error) {
     logger.error("Error applying configuration:", error);
@@ -2042,7 +2061,15 @@ function getConfig() {
  * @returns {Object} Extended theme values
  */
 function getExtendedTheme(key) {
-  return userConfig.theme.extend[key] || {};
+  // Check cache first
+  if (extendedThemeCache.has(key)) {
+    return extendedThemeCache.get(key);
+  }
+  const result = userConfig.theme.extend[key] || {};
+
+  // Cache the result
+  extendedThemeCache.set(key, result);
+  return result;
 }
 
 /**
@@ -7992,10 +8019,10 @@ function parseCustomClassWithPatterns(className) {
   return null;
 }
 
-/**
- * Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
- * @param {string} cssString
- * @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
+/**
+ * Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
+ * @param {string} cssString
+ * @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
  */
 function resolveCssToClearCss(cssString) {
   const customVars = {};
@@ -8028,6 +8055,17 @@ function resolveCssToClearCss(cssString) {
 
 // Cache for getConfigOptions - use LRU cache
 const configOptionsCache = new LRUCache(500);
+
+/**
+ * Clear config options cache (internal use)
+ * Called when user configuration changes
+ */
+function clearConfigCache() {
+  configOptionsCache.clear();
+}
+
+// Register clearConfigCache with userConfig module
+setClearConfigCache(clearConfigCache);
 function generateTailwindCssString() {
   var _options$theme, _userConfigData$theme;
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -8362,11 +8400,11 @@ function separateAndResolveCSS(arr) {
   }
 }
 
-/**
- * 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
+/**
+ * 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 = className.match(/\/(\d+)$/);
@@ -8427,11 +8465,11 @@ function processOpacityModifier(className, cssDeclaration) {
   return modifiedDeclaration;
 }
 
-/**
- * Convert Tailwind class string to inline CSS styles or JSON object
- * @param {string} classNames - String containing Tailwind classes to convert
- * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
- * @returns {string|Object} Inline CSS string or style JSON object
+/**
+ * Convert Tailwind class string to inline CSS styles or JSON object
+ * @param {string} classNames - String containing Tailwind classes to convert
+ * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
+ * @returns {string|Object} Inline CSS string or style JSON object
  */
 function tws(classNames, convertToJson) {
   const totalMarker = performanceMonitor.start("tws:total");
@@ -8875,12 +8913,12 @@ function generateCssString(styles) {
   return cssString.trim();
 }
 
-/**
- * Generate CSS string from style object with SCSS-like syntax
- * Supports nested selectors, state variants, responsive variants, and @css directives
- * @param {Object} obj - Object with SCSS-like style format
- * @param {Object} [options] - Additional options, e.g. { inject: true/false }
- * @returns {string} Generated CSS string
+/**
+ * Generate CSS string from style object with SCSS-like syntax
+ * Supports nested selectors, state variants, responsive variants, and @css directives
+ * @param {Object} obj - Object with SCSS-like style format
+ * @param {Object} [options] - Additional options, e.g. { inject: true/false }
+ * @returns {string} Generated CSS string
  */
 function twsx(obj) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -9070,9 +9108,23 @@ function autoInjectCss(cssString) {
  */
 
 
+// Create context for config change notifications
+const TwsxConfigContext = /*#__PURE__*/createContext(null);
+
 // Global CSS cache to prevent duplicate injections
 const globalCssCache = new Map();
+const globalKeyframesCache = new Map(); // Track injected keyframes: name -> css
 let globalStyleElement = null;
+let globalKeyframesElement = null;
+
+// Export function to clear caches (called when config changes)
+function clearTwsxCache() {
+  // Clear internal caches so new CSS can be generated
+  globalCssCache.clear();
+  globalKeyframesCache.clear();
+  // DON'T clear DOM content - let new CSS replace it naturally
+  // This prevents white flash when navigating between pages
+}
 
 /**
  * Simple hash function for CSS content
@@ -9089,6 +9141,7 @@ function simpleHash$1(str) {
   return Math.abs(hash).toString(36);
 }
 function getOrCreateGlobalStyleElement() {
+  if (typeof document === "undefined") return null;
   if (!globalStyleElement) {
     globalStyleElement = document.createElement("style");
     globalStyleElement.setAttribute("data-twsx-global", "true");
@@ -9096,11 +9149,117 @@ function getOrCreateGlobalStyleElement() {
   }
   return globalStyleElement;
 }
+function getOrCreateGlobalKeyframesElement() {
+  if (typeof document === "undefined") return null;
+  if (!globalKeyframesElement) {
+    globalKeyframesElement = document.createElement("style");
+    globalKeyframesElement.setAttribute("data-twsx-keyframes", "true");
+    document.head.appendChild(globalKeyframesElement);
+  }
+  return globalKeyframesElement;
+}
+function extractKeyframes(cssString) {
+  const keyframesRegex = /@keyframes\s+([^\s{]+)\s*\{/g;
+  const keyframes = [];
+  let match;
+  while ((match = keyframesRegex.exec(cssString)) !== null) {
+    const keyframeName = match[1];
+    const start = match.index;
+
+    // Find matching closing brace
+    let braceCount = 0;
+    let endIndex = start;
+    let inKeyframe = false;
+    for (let i = start; i < cssString.length; i++) {
+      if (cssString[i] === "{") {
+        braceCount++;
+        inKeyframe = true;
+      } else if (cssString[i] === "}") {
+        braceCount--;
+        if (inKeyframe && braceCount === 0) {
+          endIndex = i + 1;
+          break;
+        }
+      }
+    }
+    const keyframeBlock = cssString.substring(start, endIndex);
+    keyframes.push({
+      name: keyframeName,
+      css: keyframeBlock
+    });
+  }
+  return keyframes;
+}
+function removeKeyframes(cssString) {
+  // Remove keyframes but keep the rest
+  let result = cssString;
+  const keyframesRegex = /@keyframes\s+([^\s{]+)\s*\{/g;
+  let match;
+  const toRemove = [];
+  while ((match = keyframesRegex.exec(cssString)) !== null) {
+    const start = match.index;
+    let braceCount = 0;
+    let inKeyframe = false;
+    for (let i = start; i < cssString.length; i++) {
+      if (cssString[i] === "{") {
+        braceCount++;
+        inKeyframe = true;
+      } else if (cssString[i] === "}") {
+        braceCount--;
+        if (inKeyframe && braceCount === 0) {
+          toRemove.push({
+            start,
+            end: i + 1
+          });
+          break;
+        }
+      }
+    }
+  }
+
+  // Remove from end to start to preserve indices
+  for (let i = toRemove.length - 1; i >= 0; i--) {
+    const {
+      start,
+      end
+    } = toRemove[i];
+    result = result.substring(0, start) + result.substring(end);
+  }
+  return result.trim();
+}
+function updateGlobalKeyframes(keyframes) {
+  if (typeof document === "undefined") return;
+  const keyframesElement = getOrCreateGlobalKeyframesElement();
+  let hasNewKeyframes = false;
+  for (const {
+    name,
+    css
+  } of keyframes) {
+    if (!globalKeyframesCache.has(name)) {
+      globalKeyframesCache.set(name, css);
+      hasNewKeyframes = true;
+    }
+  }
+  if (hasNewKeyframes) {
+    // Rebuild all keyframes CSS from cache
+    const allKeyframesCSS = Array.from(globalKeyframesCache.values()).join("\n");
+
+    // Only update if content actually changed
+    if (keyframesElement.textContent !== allKeyframesCSS) {
+      keyframesElement.textContent = allKeyframesCSS;
+    }
+  }
+}
 function updateGlobalCSS() {
   if (typeof document === "undefined") return;
   const styleElement = getOrCreateGlobalStyleElement();
+  // Rebuild CSS from cache - this replaces old content with fresh content
   const allCSS = Array.from(globalCssCache.values()).join("\n");
-  styleElement.textContent = allCSS;
+
+  // Only update if content actually changed to avoid unnecessary reflows
+  if (styleElement.textContent !== allCSS) {
+    styleElement.textContent = allCSS;
+  }
 }
 
 /**
@@ -9115,22 +9274,34 @@ function updateGlobalCSS() {
  */
 function useTwsx(styles) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  // Get config version from context to trigger re-generation when config changes
+  const configContext = useContext(TwsxConfigContext);
+  const configVersion = (configContext === null || configContext === void 0 ? void 0 : configContext.version) || 0;
+
+  // Stable options reference to prevent unnecessary re-renders
+  const injectOption = options.inject !== false; // Default to true
+
+  // Serialize styles for stable dependency checking
+  const stylesKey = useMemo(() => {
+    if (!styles) return null;
+    return typeof styles === "string" ? styles : JSON.stringify(styles);
+  }, [styles]);
+
   // Generate CSS with memoization for performance
+  // Include configVersion in deps to regenerate when config changes
   const css = useMemo(() => {
     if (!styles) return "";
-    console.log("useTwsx - Input styles:", styles);
     try {
       const result = twsx(styles, {
         inject: false,
         ...options
       });
-      console.log("useTwsx - Generated CSS:", result);
       return result;
     } catch (error) {
       console.error("TWSX Error:", error);
       return "";
     }
-  }, [styles, options]);
+  }, [stylesKey, configVersion]); // Remove options from deps
 
   // Create a unique key for this CSS based on content hash
   const cssKey = useMemo(() => {
@@ -9141,15 +9312,21 @@ function useTwsx(styles) {
 
   // Auto-inject CSS into global style element (unless inject: false)
   useEffect(() => {
-    if (!css || !cssKey || options.inject === false) return;
+    if (!css || !cssKey || !injectOption) return;
+
+    // Extract keyframes from CSS
+    const keyframes = extractKeyframes(css);
+    const cssWithoutKeyframes = removeKeyframes(css);
+
+    // Inject keyframes separately (once per keyframe name)
+    if (keyframes.length > 0) {
+      updateGlobalKeyframes(keyframes);
+    }
 
-    // Only add to cache if not already present
+    // Only add component CSS to cache if not already present
     if (!globalCssCache.has(cssKey)) {
-      globalCssCache.set(cssKey, css);
+      globalCssCache.set(cssKey, cssWithoutKeyframes);
       updateGlobalCSS();
-      console.log("useTwsx - Injected NEW CSS with key:", cssKey);
-    } else {
-      console.log("useTwsx - CSS already cached with key:", cssKey);
     }
 
     // Cleanup function - use ref counting to track usage
@@ -9157,7 +9334,8 @@ function useTwsx(styles) {
       // Note: We don't delete immediately as other components might use same styles
       // In a production implementation, you'd want ref counting here
     };
-  }, [css, cssKey, options.inject]);
+  }, [css, cssKey, injectOption]); // Stable dependencies
+
   return css;
 }
 
@@ -9184,23 +9362,39 @@ function TwsxProvider(_ref) {
   } = _ref;
   const [currentConfig, setCurrentConfig] = useState(null);
   const [isConfigured, setIsConfigured] = useState(false);
+  const [configVersion, setConfigVersion] = useState(0);
+
+  // Use ref to store callback without triggering re-renders
+  const onConfigChangeRef = useRef(onConfigChange);
+  useEffect(() => {
+    onConfigChangeRef.current = onConfigChange;
+  }, [onConfigChange]);
+
+  // Serialize config for stable comparison
+  const configKey = useMemo(() => {
+    return config ? JSON.stringify(config) : null;
+  }, [config]);
 
   // Apply configuration on mount and when config changes
   useEffect(() => {
-    if (config) {
-      try {
-        configure(config);
-        setCurrentConfig(config);
-        setIsConfigured(true);
-        if (onConfigChange) {
-          onConfigChange(config);
-        }
-      } catch (error) {
-        console.error("TWSX Configuration Error:", error);
-        setIsConfigured(false);
+    if (!config) return;
+    try {
+      // Clear caches before applying new config
+      clearTwsxCache();
+      configure(config);
+      setCurrentConfig(config);
+      setIsConfigured(true);
+
+      // Increment version to trigger useTwsx re-generation
+      setConfigVersion(prev => prev + 1);
+      if (onConfigChangeRef.current) {
+        onConfigChangeRef.current(config);
       }
+    } catch (error) {
+      console.error("TWSX Configuration Error:", error);
+      setIsConfigured(false);
     }
-  }, [config, onConfigChange]);
+  }, [configKey]); // Only re-run when config actually changes
 
   // Function to update configuration dynamically
   const updateConfig = newConfig => {
@@ -9223,9 +9417,16 @@ function TwsxProvider(_ref) {
     updateConfig,
     isConfigured
   };
+
+  // Provide config version for useTwsx to detect changes
+  const configContextValue = {
+    version: configVersion
+  };
   return /*#__PURE__*/createElement(TwsxContext.Provider, {
     value: contextValue
-  }, children);
+  }, /*#__PURE__*/createElement(TwsxConfigContext.Provider, {
+    value: configContextValue
+  }, children));
 }
 
 /**
@@ -9263,31 +9464,31 @@ function useUpdateTwsxConfig() {
   return updateConfig;
 }
 
-/**
- * styled() - Component factory for tailwind-to-style
- * Create styled components with Tailwind classes and variants
- *
- * @example
- * const Button = styled('button', {
- *   base: 'px-4 py-2 rounded-lg',
- *   hover: 'bg-blue-600',
- *   variants: {
- *     color: {
- *       primary: 'bg-blue-500 text-white',
- *       secondary: 'bg-gray-500 text-white'
- *     }
- *   },
- *   nested: {
- *     '.icon': 'w-4 h-4'
- *   }
- * })
+/**
+ * styled() - Component factory for tailwind-to-style
+ * Create styled components with Tailwind classes and variants
+ *
+ * @example
+ * const Button = styled('button', {
+ *   base: 'px-4 py-2 rounded-lg',
+ *   hover: 'bg-blue-600',
+ *   variants: {
+ *     color: {
+ *       primary: 'bg-blue-500 text-white',
+ *       secondary: 'bg-gray-500 text-white'
+ *     }
+ *   },
+ *   nested: {
+ *     '.icon': 'w-4 h-4'
+ *   }
+ * })
  */
 
 
-/**
- * Simple hash function for deterministic class names
- * @param {string} str - String to hash
- * @returns {string} Hash string
+/**
+ * Simple hash function for deterministic class names
+ * @param {string} str - String to hash
+ * @returns {string} Hash string
  */
 function simpleHash(str) {
   let hash = 0;
@@ -9299,12 +9500,12 @@ function simpleHash(str) {
   return Math.abs(hash).toString(36).substr(0, 6);
 }
 
-/**
- * Generate deterministic class name based on config and component instance
- * @param {Object|Function} config - Style configuration
- * @param {string} componentType - Component type (e.g., 'button', 'div')
- * @param {string} instanceId - Unique instance identifier (optional)
- * @returns {string} Deterministic class name
+/**
+ * Generate deterministic class name based on config and component instance
+ * @param {Object|Function} config - Style configuration
+ * @param {string} componentType - Component type (e.g., 'button', 'div')
+ * @param {string} instanceId - Unique instance identifier (optional)
+ * @returns {string} Deterministic class name
  */
 function generateClassName(config) {
   let componentType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "component";
@@ -9321,14 +9522,14 @@ function generateClassName(config) {
   return `twsx-${componentType}-${hash}${suffix}`;
 }
 
-/**
- * Create a styled component with Tailwind classes
- * @param {string|React.Component} component - HTML tag or React component
- * @param {Object} config - Style configuration
- * @param {Object} options - Additional options
- * @param {string} options.scope - Component scope for isolation (optional)
- * @param {boolean} options.isolate - Whether to isolate from other components (default: false)
- * @returns {React.Component} Styled component
+/**
+ * Create a styled component with Tailwind classes
+ * @param {string|React.Component} component - HTML tag or React component
+ * @param {Object} config - Style configuration
+ * @param {Object} options - Additional options
+ * @param {string} options.scope - Component scope for isolation (optional)
+ * @param {boolean} options.isolate - Whether to isolate from other components (default: false)
+ * @returns {React.Component} Styled component
  */
 function styled(component) {
   let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -9618,21 +9819,21 @@ function styled(component) {
   return StyledComponent;
 }
 
-/**
- * Create a styled component factory for a specific tag
- * @param {string} tag - HTML tag name
- * @returns {Function} Styled component factory
+/**
+ * Create a styled component factory for a specific tag
+ * @param {string} tag - HTML tag name
+ * @returns {Function} Styled component factory
  */
 function createStyledTag(tag) {
   return (config, options) => styled(tag, config, options);
 }
 
-/**
- * Create an isolated styled component (automatically scoped)
- * @param {string|React.Component} component - HTML tag or React component
- * @param {Object} config - Style configuration
- * @param {string} scope - Optional scope name
- * @returns {React.Component} Isolated styled component
+/**
+ * Create an isolated styled component (automatically scoped)
+ * @param {string|React.Component} component - HTML tag or React component
+ * @param {Object} config - Style configuration
+ * @param {string} scope - Optional scope name
+ * @returns {React.Component} Isolated styled component
  */
 function isolatedStyled(component) {
   let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -9643,10 +9844,10 @@ function isolatedStyled(component) {
   });
 }
 
-/**
- * Create a scoped styled component
- * @param {string} scope - Scope name for component isolation
- * @returns {Function} Scoped styled function
+/**
+ * Create a scoped styled component
+ * @param {string} scope - Scope name for component isolation
+ * @returns {Function} Scoped styled function
  */
 function createScopedStyled(scope) {
   return function (component) {