tailwind-to-style 2.7.5 → 2.7.7

package/dist/index.esm.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
@@ -1529,10 +1529,12 @@ function getConfigOptions() {
   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 => {
@@ -1543,6 +1545,9 @@ function getConfigOptions() {
         }
       });
     }
+    if (themeExtend[key]) {
+      newTheme[key] = Object.assign({}, newTheme[key], themeExtend[key]);
+    }
   });
   return {
     prefix: "",
@@ -1890,10 +1895,10 @@ function generator$2i() {
       }
       if (value === "custom_value") {
         return `
-            ${prefix}-${key} {
-              ${isValidCssColor(value) ? "background-color" : "background"}: ${value};
-            }
-          `;
+              ${prefix}-${key} {
+                ${isValidCssColor(value) ? "background-color" : "background"}: ${value};
+              }
+            `;
       }
       return `
             ${prefix}-${key} {
@@ -1915,6 +1920,7 @@ function generator$2h() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}bg`;
+  const customPrefix = `${globalPrefix}bg-image`;
   const {
     backgroundImage = {}
   } = theme;
@@ -1922,11 +1928,20 @@ function generator$2h() {
     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;
@@ -1989,6 +2004,7 @@ function generator$2e() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}bg`;
+  const customPrefix = `${globalPrefix}bg-position`;
   const {
     backgroundPosition = {}
   } = theme;
@@ -1996,11 +2012,20 @@ function generator$2e() {
     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;
@@ -2041,6 +2066,7 @@ function generator$2c() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}bg`;
+  const customPrefix = `${globalPrefix}bg-size`;
   const {
     backgroundSize = {}
   } = theme;
@@ -2048,11 +2074,20 @@ function generator$2c() {
     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;
@@ -2120,6 +2155,7 @@ function generator$29() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}border`;
+  const customPrefix = `${globalPrefix}border-color`;
   const {
     borderColor = {}
   } = theme;
@@ -2136,57 +2172,64 @@ function generator$29() {
       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);
@@ -2355,6 +2398,7 @@ function generator$24() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}border`;
+  const customPrefix = `${globalPrefix}border-width`;
   const {
     borderWidth = {}
   } = theme;
@@ -2364,41 +2408,48 @@ function generator$24() {
     } = _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);
@@ -2434,6 +2485,7 @@ function generator$22() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}shadow`;
+  const customPrefix = `${globalPrefix}box-shadow`;
   const {
     boxShadowColor,
     boxShadow = {}
@@ -2446,6 +2498,13 @@ function generator$22() {
     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};
@@ -3078,6 +3137,7 @@ function generator$1G() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}text`;
+  const customPrefix = `${globalPrefix}text-size`;
   const {
     fontSize = {}
   } = theme;
@@ -3085,11 +3145,20 @@ function generator$1G() {
     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;
@@ -4238,6 +4307,7 @@ function generator$$() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}outline`;
+  const customPrefix = `${globalPrefix}outline-color`;
   const {
     outlineColor = {}
   } = theme;
@@ -4254,6 +4324,13 @@ function generator$$() {
       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;
@@ -4359,6 +4436,7 @@ function generator$X() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}outline`;
+  const customPrefix = `${globalPrefix}outline-width`;
   const {
     outlineWidth = {}
   } = theme;
@@ -4367,11 +4445,18 @@ function generator$X() {
       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);
@@ -5352,6 +5437,7 @@ function generator$r() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}text`;
+  const customPrefix = `${globalPrefix}text-color`;
   const {
     textColor
   } = theme;
@@ -5364,13 +5450,20 @@ function generator$r() {
       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);
@@ -6374,179 +6467,19 @@ function convertCssToObject(cssString) {
 }
 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}`,
@@ -6596,9 +6529,6 @@ function resolveVariants(selector, variants) {
   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)) {
@@ -6794,7 +6724,7 @@ function processOpacityModifier(className, cssDeclaration) {
 
     // 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;
@@ -6822,8 +6752,6 @@ function processOpacityModifier(className, cssDeclaration) {
 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 ? {} : "";
@@ -7202,7 +7130,7 @@ function generateCssString(styles) {
  * 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) {
@@ -7213,13 +7141,9 @@ function twsx(obj) {
       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
@@ -7362,4 +7286,4 @@ const performanceUtils = {
   }
 };
 
-export { debouncedTws, debouncedTwsx, getConfig, performanceUtils, resetConfig, setConfig, tws, twsx };
+export { debouncedTws, debouncedTwsx, performanceUtils, tws, twsx };