tailwind-to-style 2.7.3 → 2.7.5

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.3
+ * tailwind-to-style v2.7.5
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -6377,7 +6377,12 @@ var tailwindToStyle = (function (exports) {
   }
   let twString = null;
   let cssObject = null;
-  let globalConfig = {
+
+  // Global config storage key
+  const CONFIG_STORAGE_KEY = "__tailwind_to_style_global_config__";
+
+  // Default configuration
+  const defaultConfig = {
     theme: {
       extend: {
         colors: {}
@@ -6392,12 +6397,72 @@ var tailwindToStyle = (function (exports) {
     },
     inject: true
   };
+  class ConfigManager {
+    constructor() {
+      this.storage = null;
+      this.initialized = false;
+    }
+    initialize() {
+      if (this.initialized) return this.storage;
+      if (typeof window !== "undefined") {
+        if (!window[CONFIG_STORAGE_KEY]) {
+          window[CONFIG_STORAGE_KEY] = JSON.parse(JSON.stringify(defaultConfig));
+        }
+        this.storage = window[CONFIG_STORAGE_KEY];
+      } else if (typeof global !== "undefined") {
+        // Node.js environment
+        if (!global[CONFIG_STORAGE_KEY]) {
+          global[CONFIG_STORAGE_KEY] = JSON.parse(JSON.stringify(defaultConfig));
+        }
+        this.storage = global[CONFIG_STORAGE_KEY];
+      } else {
+        // Fallback
+        console.warn("tailwind-to-style: Unable to create global config storage. Config will only work within the same module.");
+        this.storage = JSON.parse(JSON.stringify(defaultConfig));
+      }
+      this.initialized = true;
+      return this.storage;
+    }
+    get() {
+      return this.initialize();
+    }
+    set(config) {
+      const storage = this.initialize();
+      this.deepMerge(storage, config);
+      return storage;
+    }
+    reset() {
+      const storage = this.initialize();
+      Object.keys(storage).forEach(key => delete storage[key]);
+      Object.assign(storage, JSON.parse(JSON.stringify(defaultConfig)));
+      return storage;
+    }
+    deepMerge(target, source) {
+      for (const key in source) {
+        if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
+          if (!target[key] || typeof target[key] !== "object") {
+            target[key] = {};
+          }
+          this.deepMerge(target[key], source[key]);
+        } else {
+          target[key] = source[key];
+        }
+      }
+    }
+  }
+  const configManager = new ConfigManager();
+  function getGlobalStorage() {
+    return configManager.get();
+  }
+  let globalConfig = null;
   function initializeCss() {
     if (!twString) {
+      // Always get fresh config from global storage
+      const currentConfig = getGlobalStorage();
       const configForGeneration = {
-        ...globalConfig,
+        ...currentConfig,
         theme: {
-          ...globalConfig.theme
+          ...currentConfig.theme
         }
       };
       twString = generateTailwindCssString(configForGeneration).replace(/\s\s+/g, " ");
@@ -6421,37 +6486,39 @@ var tailwindToStyle = (function (exports) {
    * @returns {Object} Current global configuration
    */
   function setConfig(config) {
-    var _config$theme, _config$theme2, _config$theme2$extend, _config$theme3;
     // Reset CSS object cache when config changes
     twString = null;
     cssObject = null;
     configOptionsCache.clear();
-    globalConfig = {
-      ...globalConfig,
-      ...config,
-      theme: {
-        ...globalConfig.theme,
-        ...(config.theme || {}),
-        extend: {
-          ...globalConfig.theme.extend,
-          ...(((_config$theme = config.theme) === null || _config$theme === void 0 ? void 0 : _config$theme.extend) || {}),
-          colors: {
-            ...globalConfig.theme.extend.colors,
-            ...(((_config$theme2 = config.theme) === null || _config$theme2 === void 0 ? void 0 : (_config$theme2$extend = _config$theme2.extend) === null || _config$theme2$extend === void 0 ? void 0 : _config$theme2$extend.colors) || {})
-          }
+
+    // Use ConfigManager to set config
+    const globalStorage = configManager.set(config);
+
+    // Handle legacy breakpoints with deprecation warning
+    if (config.breakpoints) {
+      console.warn("Warning: config.breakpoints is deprecated. Use config.theme.screens instead.");
+
+      // Convert legacy breakpoints to screens format
+      const screens = {};
+      for (const [key, value] of Object.entries(config.breakpoints)) {
+        // Extract min-width value from media query
+        const match = value.match(/min-width:\s*([^)]+)/);
+        if (match) {
+          screens[key] = match[1].trim();
         }
       }
-    };
-
-    // Handle screens configuration
-    if ((_config$theme3 = config.theme) !== null && _config$theme3 !== void 0 && _config$theme3.screens) {
-      globalConfig.theme.screens = {
-        ...globalConfig.theme.screens,
-        ...config.theme.screens
-      };
+      if (!globalStorage.theme.screens) {
+        globalStorage.theme.screens = {};
+      }
+      Object.assign(globalStorage.theme.screens, screens);
     }
+
+    // Update local reference
+    globalConfig = globalStorage;
     initializeCss();
-    return globalConfig;
+    return {
+      ...globalStorage
+    };
   }
 
   /**
@@ -6459,6 +6526,7 @@ var tailwindToStyle = (function (exports) {
    * @returns {Object} Current global configuration
    */
   function getConfig() {
+    globalConfig = configManager.get();
     return {
       ...globalConfig
     };
@@ -6472,24 +6540,15 @@ var tailwindToStyle = (function (exports) {
     twString = null;
     cssObject = null;
     configOptionsCache.clear();
-    globalConfig = {
-      theme: {
-        extend: {
-          colors: {}
-        },
-        screens: {
-          sm: "640px",
-          md: "768px",
-          lg: "1024px",
-          xl: "1280px",
-          "2xl": "1536px"
-        }
-      },
-      inject: true
-    };
+    const globalStorage = configManager.reset();
+
+    // Update local reference
+    globalConfig = globalStorage;
     twString = generateTailwindCssString(globalConfig).replace(/\s\s+/g, " ");
     cssObject = convertCssToObject(twString);
-    return globalConfig;
+    return {
+      ...globalConfig
+    };
   }
   const pseudoVariants = new Set(["hover", "focus", "focus-within", "active", "visited", "disabled", "first", "last", "checked", "invalid", "required"]);
   const specialVariants = {
@@ -6540,7 +6599,9 @@ var tailwindToStyle = (function (exports) {
     let media = null;
     let finalSelector = selector;
     for (const v of variants) {
-      const breakpoints = convertScreensToBreakpoints(globalConfig.theme.screens || {});
+      // Always get fresh config from global storage
+      const currentConfig = getGlobalStorage();
+      const breakpoints = convertScreensToBreakpoints(currentConfig.theme.screens || {});
       if (breakpoints[v]) {
         media = breakpoints[v];
       } else if (pseudoVariants.has(v)) {
@@ -7156,7 +7217,7 @@ var tailwindToStyle = (function (exports) {
         return "";
       }
       const mergedOptions = {
-        ...globalConfig,
+        ...getGlobalStorage(),
         ...options
       };
       const {

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.3
+ * tailwind-to-style v2.7.5
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -6378,7 +6378,12 @@ function convertCssToObject(cssString) {
 }
 let twString = null;
 let cssObject = null;
-let globalConfig = {
+
+// Global config storage key
+const CONFIG_STORAGE_KEY = "__tailwind_to_style_global_config__";
+
+// Default configuration
+const defaultConfig = {
   theme: {
     extend: {
       colors: {}
@@ -6393,12 +6398,72 @@ let globalConfig = {
   },
   inject: true
 };
+class ConfigManager {
+  constructor() {
+    this.storage = null;
+    this.initialized = false;
+  }
+  initialize() {
+    if (this.initialized) return this.storage;
+    if (typeof window !== "undefined") {
+      if (!window[CONFIG_STORAGE_KEY]) {
+        window[CONFIG_STORAGE_KEY] = JSON.parse(JSON.stringify(defaultConfig));
+      }
+      this.storage = window[CONFIG_STORAGE_KEY];
+    } else if (typeof global !== "undefined") {
+      // Node.js environment
+      if (!global[CONFIG_STORAGE_KEY]) {
+        global[CONFIG_STORAGE_KEY] = JSON.parse(JSON.stringify(defaultConfig));
+      }
+      this.storage = global[CONFIG_STORAGE_KEY];
+    } else {
+      // Fallback
+      console.warn("tailwind-to-style: Unable to create global config storage. Config will only work within the same module.");
+      this.storage = JSON.parse(JSON.stringify(defaultConfig));
+    }
+    this.initialized = true;
+    return this.storage;
+  }
+  get() {
+    return this.initialize();
+  }
+  set(config) {
+    const storage = this.initialize();
+    this.deepMerge(storage, config);
+    return storage;
+  }
+  reset() {
+    const storage = this.initialize();
+    Object.keys(storage).forEach(key => delete storage[key]);
+    Object.assign(storage, JSON.parse(JSON.stringify(defaultConfig)));
+    return storage;
+  }
+  deepMerge(target, source) {
+    for (const key in source) {
+      if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
+        if (!target[key] || typeof target[key] !== "object") {
+          target[key] = {};
+        }
+        this.deepMerge(target[key], source[key]);
+      } else {
+        target[key] = source[key];
+      }
+    }
+  }
+}
+const configManager = new ConfigManager();
+function getGlobalStorage() {
+  return configManager.get();
+}
+let globalConfig = null;
 function initializeCss() {
   if (!twString) {
+    // Always get fresh config from global storage
+    const currentConfig = getGlobalStorage();
     const configForGeneration = {
-      ...globalConfig,
+      ...currentConfig,
       theme: {
-        ...globalConfig.theme
+        ...currentConfig.theme
       }
     };
     twString = generateTailwindCssString(configForGeneration).replace(/\s\s+/g, " ");
@@ -6422,37 +6487,39 @@ function convertScreensToBreakpoints(screens) {
  * @returns {Object} Current global configuration
  */
 function setConfig(config) {
-  var _config$theme, _config$theme2, _config$theme2$extend, _config$theme3;
   // Reset CSS object cache when config changes
   twString = null;
   cssObject = null;
   configOptionsCache.clear();
-  globalConfig = {
-    ...globalConfig,
-    ...config,
-    theme: {
-      ...globalConfig.theme,
-      ...(config.theme || {}),
-      extend: {
-        ...globalConfig.theme.extend,
-        ...(((_config$theme = config.theme) === null || _config$theme === void 0 ? void 0 : _config$theme.extend) || {}),
-        colors: {
-          ...globalConfig.theme.extend.colors,
-          ...(((_config$theme2 = config.theme) === null || _config$theme2 === void 0 ? void 0 : (_config$theme2$extend = _config$theme2.extend) === null || _config$theme2$extend === void 0 ? void 0 : _config$theme2$extend.colors) || {})
-        }
+
+  // Use ConfigManager to set config
+  const globalStorage = configManager.set(config);
+
+  // Handle legacy breakpoints with deprecation warning
+  if (config.breakpoints) {
+    console.warn("Warning: config.breakpoints is deprecated. Use config.theme.screens instead.");
+
+    // Convert legacy breakpoints to screens format
+    const screens = {};
+    for (const [key, value] of Object.entries(config.breakpoints)) {
+      // Extract min-width value from media query
+      const match = value.match(/min-width:\s*([^)]+)/);
+      if (match) {
+        screens[key] = match[1].trim();
       }
     }
-  };
-
-  // Handle screens configuration
-  if ((_config$theme3 = config.theme) !== null && _config$theme3 !== void 0 && _config$theme3.screens) {
-    globalConfig.theme.screens = {
-      ...globalConfig.theme.screens,
-      ...config.theme.screens
-    };
+    if (!globalStorage.theme.screens) {
+      globalStorage.theme.screens = {};
+    }
+    Object.assign(globalStorage.theme.screens, screens);
   }
+
+  // Update local reference
+  globalConfig = globalStorage;
   initializeCss();
-  return globalConfig;
+  return {
+    ...globalStorage
+  };
 }
 
 /**
@@ -6460,6 +6527,7 @@ function setConfig(config) {
  * @returns {Object} Current global configuration
  */
 function getConfig() {
+  globalConfig = configManager.get();
   return {
     ...globalConfig
   };
@@ -6473,24 +6541,15 @@ function resetConfig() {
   twString = null;
   cssObject = null;
   configOptionsCache.clear();
-  globalConfig = {
-    theme: {
-      extend: {
-        colors: {}
-      },
-      screens: {
-        sm: "640px",
-        md: "768px",
-        lg: "1024px",
-        xl: "1280px",
-        "2xl": "1536px"
-      }
-    },
-    inject: true
-  };
+  const globalStorage = configManager.reset();
+
+  // Update local reference
+  globalConfig = globalStorage;
   twString = generateTailwindCssString(globalConfig).replace(/\s\s+/g, " ");
   cssObject = convertCssToObject(twString);
-  return globalConfig;
+  return {
+    ...globalConfig
+  };
 }
 const pseudoVariants = new Set(["hover", "focus", "focus-within", "active", "visited", "disabled", "first", "last", "checked", "invalid", "required"]);
 const specialVariants = {
@@ -6541,7 +6600,9 @@ function resolveVariants(selector, variants) {
   let media = null;
   let finalSelector = selector;
   for (const v of variants) {
-    const breakpoints = convertScreensToBreakpoints(globalConfig.theme.screens || {});
+    // Always get fresh config from global storage
+    const currentConfig = getGlobalStorage();
+    const breakpoints = convertScreensToBreakpoints(currentConfig.theme.screens || {});
     if (breakpoints[v]) {
       media = breakpoints[v];
     } else if (pseudoVariants.has(v)) {
@@ -7157,7 +7218,7 @@ function twsx(obj) {
       return "";
     }
     const mergedOptions = {
-      ...globalConfig,
+      ...getGlobalStorage(),
       ...options
     };
     const {

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.3
+ * tailwind-to-style v2.7.5
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -6374,7 +6374,12 @@ function convertCssToObject(cssString) {
 }
 let twString = null;
 let cssObject = null;
-let globalConfig = {
+
+// Global config storage key
+const CONFIG_STORAGE_KEY = "__tailwind_to_style_global_config__";
+
+// Default configuration
+const defaultConfig = {
   theme: {
     extend: {
       colors: {}
@@ -6389,12 +6394,72 @@ let globalConfig = {
   },
   inject: true
 };
+class ConfigManager {
+  constructor() {
+    this.storage = null;
+    this.initialized = false;
+  }
+  initialize() {
+    if (this.initialized) return this.storage;
+    if (typeof window !== "undefined") {
+      if (!window[CONFIG_STORAGE_KEY]) {
+        window[CONFIG_STORAGE_KEY] = JSON.parse(JSON.stringify(defaultConfig));
+      }
+      this.storage = window[CONFIG_STORAGE_KEY];
+    } else if (typeof global !== "undefined") {
+      // Node.js environment
+      if (!global[CONFIG_STORAGE_KEY]) {
+        global[CONFIG_STORAGE_KEY] = JSON.parse(JSON.stringify(defaultConfig));
+      }
+      this.storage = global[CONFIG_STORAGE_KEY];
+    } else {
+      // Fallback
+      console.warn("tailwind-to-style: Unable to create global config storage. Config will only work within the same module.");
+      this.storage = JSON.parse(JSON.stringify(defaultConfig));
+    }
+    this.initialized = true;
+    return this.storage;
+  }
+  get() {
+    return this.initialize();
+  }
+  set(config) {
+    const storage = this.initialize();
+    this.deepMerge(storage, config);
+    return storage;
+  }
+  reset() {
+    const storage = this.initialize();
+    Object.keys(storage).forEach(key => delete storage[key]);
+    Object.assign(storage, JSON.parse(JSON.stringify(defaultConfig)));
+    return storage;
+  }
+  deepMerge(target, source) {
+    for (const key in source) {
+      if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
+        if (!target[key] || typeof target[key] !== "object") {
+          target[key] = {};
+        }
+        this.deepMerge(target[key], source[key]);
+      } else {
+        target[key] = source[key];
+      }
+    }
+  }
+}
+const configManager = new ConfigManager();
+function getGlobalStorage() {
+  return configManager.get();
+}
+let globalConfig = null;
 function initializeCss() {
   if (!twString) {
+    // Always get fresh config from global storage
+    const currentConfig = getGlobalStorage();
     const configForGeneration = {
-      ...globalConfig,
+      ...currentConfig,
       theme: {
-        ...globalConfig.theme
+        ...currentConfig.theme
       }
     };
     twString = generateTailwindCssString(configForGeneration).replace(/\s\s+/g, " ");
@@ -6418,37 +6483,39 @@ function convertScreensToBreakpoints(screens) {
  * @returns {Object} Current global configuration
  */
 function setConfig(config) {
-  var _config$theme, _config$theme2, _config$theme2$extend, _config$theme3;
   // Reset CSS object cache when config changes
   twString = null;
   cssObject = null;
   configOptionsCache.clear();
-  globalConfig = {
-    ...globalConfig,
-    ...config,
-    theme: {
-      ...globalConfig.theme,
-      ...(config.theme || {}),
-      extend: {
-        ...globalConfig.theme.extend,
-        ...(((_config$theme = config.theme) === null || _config$theme === void 0 ? void 0 : _config$theme.extend) || {}),
-        colors: {
-          ...globalConfig.theme.extend.colors,
-          ...(((_config$theme2 = config.theme) === null || _config$theme2 === void 0 ? void 0 : (_config$theme2$extend = _config$theme2.extend) === null || _config$theme2$extend === void 0 ? void 0 : _config$theme2$extend.colors) || {})
-        }
+
+  // Use ConfigManager to set config
+  const globalStorage = configManager.set(config);
+
+  // Handle legacy breakpoints with deprecation warning
+  if (config.breakpoints) {
+    console.warn("Warning: config.breakpoints is deprecated. Use config.theme.screens instead.");
+
+    // Convert legacy breakpoints to screens format
+    const screens = {};
+    for (const [key, value] of Object.entries(config.breakpoints)) {
+      // Extract min-width value from media query
+      const match = value.match(/min-width:\s*([^)]+)/);
+      if (match) {
+        screens[key] = match[1].trim();
       }
     }
-  };
-
-  // Handle screens configuration
-  if ((_config$theme3 = config.theme) !== null && _config$theme3 !== void 0 && _config$theme3.screens) {
-    globalConfig.theme.screens = {
-      ...globalConfig.theme.screens,
-      ...config.theme.screens
-    };
+    if (!globalStorage.theme.screens) {
+      globalStorage.theme.screens = {};
+    }
+    Object.assign(globalStorage.theme.screens, screens);
   }
+
+  // Update local reference
+  globalConfig = globalStorage;
   initializeCss();
-  return globalConfig;
+  return {
+    ...globalStorage
+  };
 }
 
 /**
@@ -6456,6 +6523,7 @@ function setConfig(config) {
  * @returns {Object} Current global configuration
  */
 function getConfig() {
+  globalConfig = configManager.get();
   return {
     ...globalConfig
   };
@@ -6469,24 +6537,15 @@ function resetConfig() {
   twString = null;
   cssObject = null;
   configOptionsCache.clear();
-  globalConfig = {
-    theme: {
-      extend: {
-        colors: {}
-      },
-      screens: {
-        sm: "640px",
-        md: "768px",
-        lg: "1024px",
-        xl: "1280px",
-        "2xl": "1536px"
-      }
-    },
-    inject: true
-  };
+  const globalStorage = configManager.reset();
+
+  // Update local reference
+  globalConfig = globalStorage;
   twString = generateTailwindCssString(globalConfig).replace(/\s\s+/g, " ");
   cssObject = convertCssToObject(twString);
-  return globalConfig;
+  return {
+    ...globalConfig
+  };
 }
 const pseudoVariants = new Set(["hover", "focus", "focus-within", "active", "visited", "disabled", "first", "last", "checked", "invalid", "required"]);
 const specialVariants = {
@@ -6537,7 +6596,9 @@ function resolveVariants(selector, variants) {
   let media = null;
   let finalSelector = selector;
   for (const v of variants) {
-    const breakpoints = convertScreensToBreakpoints(globalConfig.theme.screens || {});
+    // Always get fresh config from global storage
+    const currentConfig = getGlobalStorage();
+    const breakpoints = convertScreensToBreakpoints(currentConfig.theme.screens || {});
     if (breakpoints[v]) {
       media = breakpoints[v];
     } else if (pseudoVariants.has(v)) {
@@ -7153,7 +7214,7 @@ function twsx(obj) {
       return "";
     }
     const mergedOptions = {
-      ...globalConfig,
+      ...getGlobalStorage(),
       ...options
     };
     const {