tailwind-to-style 2.12.1 → 2.12.3

package/dist/index.browser.js

@@ -1,11 +1,11 @@
 /**
- * tailwind-to-style v2.12.1
+ * tailwind-to-style v2.12.3
  * 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
@@ -1724,9 +1724,9 @@ const theme = {
 };
 
 const vars = {
-  transform: `transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1));`,
-  filter: `filter: blur(var(--blur, 0)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1)) grayscale(var(--grayscale, 0)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0)) saturate(var(--saturate, 1)) sepia(var(--sepia, 0)) drop-shadow(var(--drop-shadow, 0 0 #0000));`,
-  backdropFilter: `-webkit-backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0)); backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0));`
+  transform: "transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1));",
+  filter: "filter: blur(var(--blur, 0)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1)) grayscale(var(--grayscale, 0)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0)) saturate(var(--saturate, 1)) sepia(var(--sepia, 0)) drop-shadow(var(--drop-shadow, 0 0 #0000));",
+  backdropFilter: "-webkit-backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0)); backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0));"
 };
 
 const configOptions = {
@@ -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;
 }
 
 /**
@@ -2128,7 +2155,7 @@ function getConfigOptions() {
 }
 function generateCssString$1() {
   let getCssString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : () => {};
-  let orientationPrefix = "";
+  const orientationPrefix = "";
   const hexToRgb = hex => {
     const rgba = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function () {
       return "#" + (arguments.length <= 1 ? undefined : arguments[1]) + (arguments.length <= 1 ? undefined : arguments[1]) + (arguments.length <= 2 ? undefined : arguments[2]) + (arguments.length <= 2 ? undefined : arguments[2]) + (arguments.length <= 3 ? undefined : arguments[3]) + (arguments.length <= 3 ? undefined : arguments[3]);
@@ -2148,7 +2175,7 @@ function generateCssString$1() {
     let str = "";
     Object.entries(nOptions).forEach(_ref => {
       let [key, value] = _ref;
-      str += getStr(key.replace("/", `\\/`).replace(".", "\\."), value);
+      str += getStr(key.replace("/", "\\/").replace(".", "\\."), value);
     });
     return str;
   };
@@ -4310,7 +4337,7 @@ function generator$1N() {
     let {
       getCssByOptions
     } = _ref;
-    let cssString = getCssByOptions(propertyOptions, (key, value) => `
+    const cssString = getCssByOptions(propertyOptions, (key, value) => `
           ${prefix}-${key} {
             float: ${value};
           }
@@ -4596,7 +4623,7 @@ function generator$1D() {
     prefix: globalPrefix,
     theme = {}
   } = configOptions;
-  let prefix = `${globalPrefix}auto-cols`;
+  const prefix = `${globalPrefix}auto-cols`;
   const {
     gridAutoColumns = {}
   } = theme;
@@ -4646,7 +4673,7 @@ function generator$1B() {
     prefix: globalPrefix,
     theme = {}
   } = configOptions;
-  let prefix = `${globalPrefix}auto-rows`;
+  const prefix = `${globalPrefix}auto-rows`;
   const {
     gridAutoRows = {}
   } = theme;
@@ -4670,7 +4697,7 @@ function generator$1A() {
     prefix: globalPrefix,
     theme = {}
   } = configOptions;
-  let prefix = `${globalPrefix}col`;
+  const prefix = `${globalPrefix}col`;
   const {
     gridColumn = {}
   } = theme;
@@ -4694,7 +4721,7 @@ function generator$1z() {
     prefix: globalPrefix,
     theme = {}
   } = configOptions;
-  let prefix = `${globalPrefix}col-end`;
+  const prefix = `${globalPrefix}col-end`;
   const {
     gridColumnEnd = {}
   } = theme;
@@ -4718,7 +4745,7 @@ function generator$1y() {
     prefix: globalPrefix,
     theme = {}
   } = configOptions;
-  let prefix = `${globalPrefix}col-start`;
+  const prefix = `${globalPrefix}col-start`;
   const {
     gridColumnStart = {}
   } = theme;
@@ -4742,7 +4769,7 @@ function generator$1x() {
     prefix: globalPrefix,
     theme = {}
   } = configOptions;
-  let prefix = `${globalPrefix}row`;
+  const prefix = `${globalPrefix}row`;
   const {
     gridRow = {}
   } = theme;
@@ -4766,7 +4793,7 @@ function generator$1w() {
     prefix: globalPrefix,
     theme = {}
   } = configOptions;
-  let prefix = `${globalPrefix}row-end`;
+  const prefix = `${globalPrefix}row-end`;
   const {
     gridRowEnd = {}
   } = theme;
@@ -4790,7 +4817,7 @@ function generator$1v() {
     prefix: globalPrefix,
     theme = {}
   } = configOptions;
-  let prefix = `${globalPrefix}row-start`;
+  const prefix = `${globalPrefix}row-start`;
   const {
     gridRowStart = {}
   } = theme;
@@ -4814,7 +4841,7 @@ function generator$1u() {
     prefix: globalPrefix,
     theme = {}
   } = configOptions;
-  let prefix = `${globalPrefix}grid-cols`;
+  const prefix = `${globalPrefix}grid-cols`;
   const {
     gridTemplateColumns = {}
   } = theme;
@@ -4822,7 +4849,7 @@ function generator$1u() {
     let {
       getCssByOptions
     } = _ref;
-    let cssString = getCssByOptions(gridTemplateColumns, (key, value) => `
+    const cssString = getCssByOptions(gridTemplateColumns, (key, value) => `
           ${prefix}-${key} {
             grid-template-columns: ${isNaN(value) ? value : `repeat(${value}, minmax(0, 1fr))`};
           }
@@ -4838,7 +4865,7 @@ function generator$1t() {
     prefix: globalPrefix,
     theme = {}
   } = configOptions;
-  let prefix = `${globalPrefix}grid-rows`;
+  const prefix = `${globalPrefix}grid-rows`;
   const {
     gridTemplateRows = {}
   } = theme;
@@ -4846,7 +4873,7 @@ function generator$1t() {
     let {
       getCssByOptions
     } = _ref;
-    let cssString = getCssByOptions(gridTemplateRows, (key, value) => `
+    const cssString = getCssByOptions(gridTemplateRows, (key, value) => `
           ${prefix}-${key} {
             grid-template-rows: ${isNaN(value) ? value : `repeat(${value}, minmax(0, 1fr));`};
           }
@@ -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] : {};
@@ -9070,12 +9108,24 @@ 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
  * @param {string} str - String to hash
@@ -9193,14 +9243,23 @@ function updateGlobalKeyframes(keyframes) {
   if (hasNewKeyframes) {
     // Rebuild all keyframes CSS from cache
     const allKeyframesCSS = Array.from(globalKeyframesCache.values()).join("\n");
-    keyframesElement.textContent = allKeyframesCSS;
+
+    // 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;
+  }
 }
 
 /**
@@ -9215,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(() => {
@@ -9241,7 +9312,7 @@ 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);
@@ -9256,9 +9327,6 @@ function useTwsx(styles) {
     if (!globalCssCache.has(cssKey)) {
       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
@@ -9266,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;
 }
 
@@ -9293,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 => {
@@ -9332,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));
 }
 
 /**