tailwind-to-style 2.7.5 → 2.7.7

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.5
+ * tailwind-to-style v2.7.7
  * 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: "",
@@ -1893,10 +1898,10 @@ var tailwindToStyle = (function (exports) {
         }
         if (value === "custom_value") {
           return `
-            ${prefix}-${key} {
-              ${isValidCssColor(value) ? "background-color" : "background"}: ${value};
-            }
-          `;
+              ${prefix}-${key} {
+                ${isValidCssColor(value) ? "background-color" : "background"}: ${value};
+              }
+            `;
         }
         return `
             ${prefix}-${key} {
@@ -1918,6 +1923,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}bg`;
+    const customPrefix = `${globalPrefix}bg-image`;
     const {
       backgroundImage = {}
     } = theme;
@@ -1925,11 +1931,20 @@ var tailwindToStyle = (function (exports) {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(backgroundImage, (key, value) => `
+      const cssString = getCssByOptions(backgroundImage, (key, value) => {
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}-${key} {
+              background-image: ${value};
+            }
+          `;
+        }
+        return `
           ${prefix}-${key} {
             background-image: ${value};
           }
-        `);
+        `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
@@ -1992,6 +2007,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}bg`;
+    const customPrefix = `${globalPrefix}bg-position`;
     const {
       backgroundPosition = {}
     } = theme;
@@ -1999,11 +2015,20 @@ var tailwindToStyle = (function (exports) {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(backgroundPosition, (key, value) => `
+      const cssString = getCssByOptions(backgroundPosition, (key, value) => {
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}-${key} {
+              background-position: ${value};
+            }
+          `;
+        }
+        return `
           ${prefix}-${key} {
             background-position: ${value};
           }
-        `);
+        `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
@@ -2044,6 +2069,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}bg`;
+    const customPrefix = `${globalPrefix}bg-size`;
     const {
       backgroundSize = {}
     } = theme;
@@ -2051,11 +2077,20 @@ var tailwindToStyle = (function (exports) {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(backgroundSize, (key, value) => `
+      const cssString = getCssByOptions(backgroundSize, (key, value) => {
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}-${key} {
+              background-size: ${value};
+            }
+          `;
+        }
+        return `
           ${prefix}-${key} {
             background-size: ${value};
           }
-        `);
+        `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
@@ -2123,6 +2158,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}border`;
+    const customPrefix = `${globalPrefix}border-color`;
     const {
       borderColor = {}
     } = theme;
@@ -2139,57 +2175,64 @@ var tailwindToStyle = (function (exports) {
         if (rgbValue) {
           rgbPropertyValue = `border-color: rgba(${rgbValue}, var(--border-opacity));`;
         }
+        if (value === "custom_value") {
+          return `
+          ${customPrefix}${key} {
+            border-color: ${value};
+          }
+        `;
+        }
         return `
-            ${prefix}${key} {
-              --border-opacity: 1;
-              border-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-x${key} {
-              --border-opacity: 1;
-              border-left-color: ${value};
-              ${rgbPropertyValue}
-              border-right-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-y${key} {
-              --border-opacity: 1;
-              border-top-color: ${value};
-              ${rgbPropertyValue}
-              border-bottom-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-s${key} {
-              --border-opacity: 1;
-              border-inline-start-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-e${key} {
-              --border-opacity: 1;
-              border-inline-end-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-t${key} {
-              --border-opacity: 1;
-              border-top-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-r${key} {
-              --border-opacity: 1;
-              border-right-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-b${key} {
-              --border-opacity: 1;
-              border-bottom-color: ${value};
-              ${rgbPropertyValue}
-            }
-            ${prefix}-l${key} {
-              --border-opacity: 1;
-              border-left-color: ${value};
-              ${rgbPropertyValue}
-            }
-          `;
+        ${prefix}${key} {
+          --border-opacity: 1;
+          border-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-x${key} {
+          --border-opacity: 1;
+          border-left-color: ${value};
+          ${rgbPropertyValue}
+          border-right-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-y${key} {
+          --border-opacity: 1;
+          border-top-color: ${value};
+          ${rgbPropertyValue}
+          border-bottom-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-s${key} {
+          --border-opacity: 1;
+          border-inline-start-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-e${key} {
+          --border-opacity: 1;
+          border-inline-end-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-t${key} {
+          --border-opacity: 1;
+          border-top-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-r${key} {
+          --border-opacity: 1;
+          border-right-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-b${key} {
+          --border-opacity: 1;
+          border-bottom-color: ${value};
+          ${rgbPropertyValue}
+        }
+        ${prefix}-l${key} {
+          --border-opacity: 1;
+          border-left-color: ${value};
+          ${rgbPropertyValue}
+        }
+      `;
       });
       return cssString;
     }, configOptions);
@@ -2358,6 +2401,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}border`;
+    const customPrefix = `${globalPrefix}border-width`;
     const {
       borderWidth = {}
     } = theme;
@@ -2367,41 +2411,48 @@ var tailwindToStyle = (function (exports) {
       } = _ref;
       const cssString = getCssByOptions(borderWidth, (keyTmp, value) => {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
-        return `
-          ${prefix}${key} {
-            border-style: solid;
-            border-top-width: ${value};
-            border-bottom-width: ${value};
-            border-left-width: ${value};
-            border-right-width: ${value};
-          }
-          ${prefix}-x${key} {
-            border-left-width: ${value};
-            border-right-width: ${value};
-          }
-          ${prefix}-y${key} {
-            border-top-width: ${value};
-            border-bottom-width: ${value};
-          }
-          ${prefix}-s${key} {
-            border-inline-start-width: ${value};
-          }
-          ${prefix}-e${key} {
-            border-inline-end-width: ${value};
-          }
-          ${prefix}-t${key} {
-            border-top-width: ${value};
-          }
-          ${prefix}-r${key} {
-            border-right-width: ${value};
-          }
-          ${prefix}-b${key} {
-            border-bottom-width: ${value};
-          }
-          ${prefix}-l${key} {
-            border-left-width: ${value};
+        if (value === "custom_value") {
+          return `
+          ${customPrefix}-${key} {
+            border-width: ${value};
           }
         `;
+        }
+        return `
+        ${prefix}${key} {
+          border-style: solid;
+          border-top-width: ${value};
+          border-bottom-width: ${value};
+          border-left-width: ${value};
+          border-right-width: ${value};
+        }
+        ${prefix}-x${key} {
+          border-left-width: ${value};
+          border-right-width: ${value};
+        }
+        ${prefix}-y${key} {
+          border-top-width: ${value};
+          border-bottom-width: ${value};
+        }
+        ${prefix}-s${key} {
+          border-inline-start-width: ${value};
+        }
+        ${prefix}-e${key} {
+          border-inline-end-width: ${value};
+        }
+        ${prefix}-t${key} {
+          border-top-width: ${value};
+        }
+        ${prefix}-r${key} {
+          border-right-width: ${value};
+        }
+        ${prefix}-b${key} {
+          border-bottom-width: ${value};
+        }
+        ${prefix}-l${key} {
+          border-left-width: ${value};
+        }
+      `;
       });
       return cssString;
     }, configOptions);
@@ -2437,6 +2488,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}shadow`;
+    const customPrefix = `${globalPrefix}box-shadow`;
     const {
       boxShadowColor,
       boxShadow = {}
@@ -2449,6 +2501,13 @@ var tailwindToStyle = (function (exports) {
       let cssString = getCssByOptions(boxShadow, (keyTmp, value) => {
         const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
         const valueSplit = value.split(" ");
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}${key} {
+              box-shadow: ${value};
+            }
+          `;
+        }
         return `
           ${prefix}${key} {
             --shadow: ${value};
@@ -3081,6 +3140,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}text`;
+    const customPrefix = `${globalPrefix}text-size`;
     const {
       fontSize = {}
     } = theme;
@@ -3088,11 +3148,20 @@ var tailwindToStyle = (function (exports) {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(fontSize, (key, value) => `
+      const cssString = getCssByOptions(fontSize, (key, value) => {
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}${key} {
+              font-size: ${value};
+            }
+          `;
+        }
+        return `
           ${prefix}-${key} {
             font-size: ${value};
           }
-        `);
+        `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
@@ -4241,6 +4310,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}outline`;
+    const customPrefix = `${globalPrefix}outline-color`;
     const {
       outlineColor = {}
     } = theme;
@@ -4257,6 +4327,13 @@ var tailwindToStyle = (function (exports) {
         if (rgbValue) {
           rgbPropertyValue = `outline-color: rgba(${rgbValue}, var(--outline-opacity));`;
         }
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}${key} {
+              outline-color: ${value};
+            }
+          `;
+        }
         return `
             ${prefix}${key} {
               --outline-opacity: 1;
@@ -4362,6 +4439,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}outline`;
+    const customPrefix = `${globalPrefix}outline-width`;
     const {
       outlineWidth = {}
     } = theme;
@@ -4370,11 +4448,18 @@ var tailwindToStyle = (function (exports) {
         getCssByOptions
       } = _ref;
       const cssString = getCssByOptions(outlineWidth, (key, value) => {
-        return `
-          ${prefix}-${key} {
+        if (value === "custom_value") {
+          return `
+          ${customPrefix}-${key} {
             outline-width: ${value};
           }
         `;
+        }
+        return `
+        ${prefix}-${key} {
+          outline-width: ${value};
+        }
+      `;
       });
       return cssString;
     }, configOptions);
@@ -5355,6 +5440,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}text`;
+    const customPrefix = `${globalPrefix}text-color`;
     const {
       textColor
     } = theme;
@@ -5367,13 +5453,20 @@ var tailwindToStyle = (function (exports) {
         if (rgbValue) {
           rgbPropertyValue = `color: rgba(${rgbValue}, var(--text-opacity));`;
         }
+        if (value === "custom_value") {
+          return `
+          ${customPrefix}-${key} {
+            color: ${value};
+          }
+        `;
+        }
         return `
-            ${prefix}-${key} {
-              --text-opacity: 1;
-              color: ${value};
-              ${rgbPropertyValue}
-            }
-          `;
+        ${prefix}-${key} {
+          --text-opacity: 1;
+          color: ${value};
+          ${rgbPropertyValue}
+        }
+      `;
       });
       return cssString;
     }, configOptions);
@@ -6377,179 +6470,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
-  };
-  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 = {
-        ...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) {
-    // Reset CSS object cache when config changes
-    twString = null;
-    cssObject = null;
-    configOptionsCache.clear();
-
-    // 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();
-        }
-      }
-      if (!globalStorage.theme.screens) {
-        globalStorage.theme.screens = {};
-      }
-      Object.assign(globalStorage.theme.screens, screens);
-    }
-
-    // Update local reference
-    globalConfig = globalStorage;
-    initializeCss();
-    return {
-      ...globalStorage
-    };
-  }
-
-  /**
-   * Get current global configuration
-   * @returns {Object} Current global configuration
-   */
-  function getConfig() {
-    globalConfig = configManager.get();
-    return {
-      ...globalConfig
-    };
-  }
-
-  /**
-   * Reset global configuration to default
-   * @returns {Object} Default configuration
-   */
-  function resetConfig() {
-    twString = null;
-    cssObject = null;
-    configOptionsCache.clear();
-    const globalStorage = configManager.reset();
-
-    // 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}`,
@@ -6599,9 +6532,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)) {
@@ -6797,7 +6727,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;
@@ -6825,8 +6755,6 @@ var tailwindToStyle = (function (exports) {
   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 ? {} : "";
@@ -7205,7 +7133,7 @@ var tailwindToStyle = (function (exports) {
    * 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
+   * @param {Object} [options] - Additional options, e.g. { inject: true/false }
    * @returns {string} Generated CSS string
    */
   function twsx(obj) {
@@ -7216,13 +7144,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
@@ -7367,10 +7291,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;