tailwind-to-style 2.7.4 → 2.7.6

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.4
+ * tailwind-to-style v2.7.6
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -1532,10 +1532,12 @@ var tailwindToStyle = (function (exports) {
     const themeKeys = Object.keys(configOptions.theme);
     themeKeys.forEach(key => {
       newTheme[key] = theme[key] || configOptions.theme[key];
-    });
-    themeKeys.forEach(key => {
-      if (themeExtend[key] && newTheme[key]) {
-        newTheme[key] = Object.assign({}, newTheme[key], themeExtend[key]);
+      if (isFunction(newTheme[key])) {
+        newTheme[key] = newTheme[key]({
+          theme: keyRef => {
+            return configOptions.theme[keyRef];
+          }
+        });
       }
     });
     themeKeys.forEach(key => {
@@ -1546,6 +1548,9 @@ var tailwindToStyle = (function (exports) {
           }
         });
       }
+      if (themeExtend[key]) {
+        newTheme[key] = Object.assign({}, newTheme[key], themeExtend[key]);
+      }
     });
     return {
       prefix: "",
@@ -6307,10 +6312,10 @@ var tailwindToStyle = (function (exports) {
     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 = {};
@@ -6377,196 +6382,19 @@ var tailwindToStyle = (function (exports) {
   }
   let twString = null;
   let cssObject = null;
-
-  // Global config storage key
-  const CONFIG_STORAGE_KEY = "__tailwind_to_style_global_config__";
-
-  // Default configuration
-  const defaultConfig = {
-    theme: {
-      extend: {
-        colors: {}
-      },
-      screens: {
-        sm: "640px",
-        md: "768px",
-        lg: "1024px",
-        xl: "1280px",
-        "2xl": "1536px"
-      }
-    },
-    inject: true
-  };
-
-  // Detect environment and create global storage
-  function getGlobalStorage() {
-    if (typeof window !== "undefined") {
-      // Browser environment - use window object
-      if (!window[CONFIG_STORAGE_KEY]) {
-        window[CONFIG_STORAGE_KEY] = {
-          ...defaultConfig
-        };
-      }
-      return window[CONFIG_STORAGE_KEY];
-    } else if (typeof global !== "undefined") {
-      // Node.js environment - use global object
-      if (!global[CONFIG_STORAGE_KEY]) {
-        global[CONFIG_STORAGE_KEY] = {
-          ...defaultConfig
-        };
-      }
-      return global[CONFIG_STORAGE_KEY];
-    } else {
-      // Fallback - use module-level variable (will work only within same file)
-      console.warn("tailwind-to-style: Unable to create global config storage. Config will only work within the same module.");
-      return defaultConfig;
-    }
-  }
-
-  // Get global config reference
-  let globalConfig = getGlobalStorage();
-  function initializeCss() {
-    if (!twString) {
-      // Always get fresh config from global storage
-      const currentConfig = getGlobalStorage();
-      const configForGeneration = {
-        ...currentConfig,
-        theme: {
-          ...currentConfig.theme
-        }
-      };
-      twString = generateTailwindCssString(configForGeneration).replace(/\s\s+/g, " ");
-    }
-    if (!cssObject) {
-      cssObject = convertCssToObject(twString);
-    }
-  }
-  initializeCss();
-  function convertScreensToBreakpoints(screens) {
-    const breakpoints = {};
-    for (const [key, value] of Object.entries(screens)) {
-      breakpoints[key] = `@media (min-width: ${value})`;
-    }
-    return breakpoints;
+  if (!twString) {
+    twString = generateTailwindCssString().replace(/\s\s+/g, " ");
   }
-
-  /**
-   * Set global configuration for both tws and twsx functions
-   * @param {Object} config - Global configuration object
-   * @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();
-
-    // Get current global storage reference
-    const globalStorage = getGlobalStorage();
-
-    // Update global storage directly
-    Object.assign(globalStorage, {
-      ...globalStorage,
-      ...config,
-      theme: {
-        ...globalStorage.theme,
-        ...(config.theme || {}),
-        extend: {
-          ...globalStorage.theme.extend,
-          ...(((_config$theme = config.theme) === null || _config$theme === void 0 ? void 0 : _config$theme.extend) || {}),
-          colors: {
-            ...globalStorage.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) || {})
-          }
-        }
-      }
-    });
-
-    // Handle screens configuration
-    if ((_config$theme3 = config.theme) !== null && _config$theme3 !== void 0 && _config$theme3.screens) {
-      globalStorage.theme.screens = {
-        ...globalStorage.theme.screens,
-        ...config.theme.screens
-      };
-    }
-
-    // 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();
-        }
-      }
-      globalStorage.theme.screens = {
-        ...globalStorage.theme.screens,
-        ...screens
-      };
-    }
-
-    // Update local reference
-    globalConfig = globalStorage;
-    initializeCss();
-    return {
-      ...globalConfig
-    };
-  }
-
-  /**
-   * Get current global configuration
-   * @returns {Object} Current global configuration
-   */
-  function getConfig() {
-    // Always get fresh reference from global storage
-    globalConfig = getGlobalStorage();
-    return {
-      ...globalConfig
-    };
-  }
-
-  /**
-   * Reset global configuration to default
-   * @returns {Object} Default configuration
-   */
-  function resetConfig() {
-    twString = null;
-    cssObject = null;
-    configOptionsCache.clear();
-
-    // Get global storage reference and reset it
-    const globalStorage = getGlobalStorage();
-
-    // Reset to default config
-    Object.assign(globalStorage, {
-      theme: {
-        extend: {
-          colors: {}
-        },
-        screens: {
-          sm: "640px",
-          md: "768px",
-          lg: "1024px",
-          xl: "1280px",
-          "2xl": "1536px"
-        }
-      },
-      inject: true
-    });
-
-    // Update local reference
-    globalConfig = globalStorage;
-    twString = generateTailwindCssString(globalConfig).replace(/\s\s+/g, " ");
+  if (!cssObject) {
     cssObject = convertCssToObject(twString);
-    return {
-      ...globalConfig
-    };
   }
+  const breakpoints = {
+    sm: "@media (min-width: 640px)",
+    md: "@media (min-width: 768px)",
+    lg: "@media (min-width: 1024px)",
+    xl: "@media (min-width: 1280px)",
+    "2xl": "@media (min-width: 1536px)"
+  };
   const pseudoVariants = new Set(["hover", "focus", "focus-within", "active", "visited", "disabled", "first", "last", "checked", "invalid", "required"]);
   const specialVariants = {
     group: (state, sel) => `.group:${state} ${sel}`,
@@ -6616,9 +6444,6 @@ var tailwindToStyle = (function (exports) {
     let media = null;
     let finalSelector = selector;
     for (const v of variants) {
-      // 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)) {
@@ -6768,11 +6593,11 @@ var tailwindToStyle = (function (exports) {
     }
   }
 
-  /**
-   * 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+)$/);
@@ -6814,7 +6639,7 @@ var tailwindToStyle = (function (exports) {
 
       // Handle hex colors
       const hexRegex = new RegExp(`(${prop}\\s*:\\s*)(#[0-9a-fA-F]{3,6})`, "gi");
-      modifiedDeclaration = modifiedDeclaration.replace(hexRegex, (_, propPart, hexColor) => {
+      modifiedDeclaration = modifiedDeclaration.replace(hexRegex, (match, propPart, hexColor) => {
         // Convert hex to rgba
         const hex = hexColor.replace("#", "");
         let r, g, b;
@@ -6833,17 +6658,15 @@ var tailwindToStyle = (function (exports) {
     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");
     try {
-      // Ensure CSS is initialized with current global config
-      initializeCss();
       if ([!classNames, typeof classNames !== "string", classNames.trim() === ""].includes(true)) {
         performanceMonitor.end(totalMarker);
         return convertToJson ? {} : "";
@@ -7218,12 +7041,12 @@ var tailwindToStyle = (function (exports) {
     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, merges with global config
-   * @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] : {};
@@ -7233,13 +7056,9 @@ var tailwindToStyle = (function (exports) {
         console.warn("twsx: Expected an object but received:", obj);
         return "";
       }
-      const mergedOptions = {
-        ...getGlobalStorage(),
-        ...options
-      };
       const {
         inject = true
-      } = mergedOptions;
+      } = options;
       const styles = {};
 
       // Create walk function with closure over styles
@@ -7334,19 +7153,19 @@ var tailwindToStyle = (function (exports) {
   }
 
   // Enhanced debounced functions with performance monitoring configuration
-  /**
-   * Debounced version of tws function with performance monitoring
-   * @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
+  /**
+   * Debounced version of tws function with performance monitoring
+   * @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
    */
   const debouncedTws = debounce(tws, 50); // Faster debounce for tws
 
-  /**
-   * Debounced version of twsx function with performance monitoring
-   * @param {Object} obj - Object with SCSS-like style format
-   * @param {Object} [options] - Additional options
-   * @returns {string} Generated CSS string
+  /**
+   * Debounced version of twsx function with performance monitoring
+   * @param {Object} obj - Object with SCSS-like style format
+   * @param {Object} [options] - Additional options
+   * @returns {string} Generated CSS string
    */
   const debouncedTwsx = debounce(twsx, 100); // Standard debounce for twsx
 
@@ -7384,10 +7203,7 @@ var tailwindToStyle = (function (exports) {
 
   exports.debouncedTws = debouncedTws;
   exports.debouncedTwsx = debouncedTwsx;
-  exports.getConfig = getConfig;
   exports.performanceUtils = performanceUtils;
-  exports.resetConfig = resetConfig;
-  exports.setConfig = setConfig;
   exports.tws = tws;
   exports.twsx = twsx;