tailwind-to-style 2.7.2 → 2.7.3

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.2
+ * tailwind-to-style v2.7.3
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -1532,12 +1532,10 @@ var tailwindToStyle = (function (exports) {
     const themeKeys = Object.keys(configOptions.theme);
     themeKeys.forEach(key => {
       newTheme[key] = theme[key] || configOptions.theme[key];
-      if (isFunction(newTheme[key])) {
-        newTheme[key] = newTheme[key]({
-          theme: keyRef => {
-            return configOptions.theme[keyRef];
-          }
-        });
+    });
+    themeKeys.forEach(key => {
+      if (themeExtend[key] && newTheme[key]) {
+        newTheme[key] = Object.assign({}, newTheme[key], themeExtend[key]);
       }
     });
     themeKeys.forEach(key => {
@@ -1548,9 +1546,6 @@ var tailwindToStyle = (function (exports) {
           }
         });
       }
-      if (themeExtend[key]) {
-        newTheme[key] = Object.assign({}, newTheme[key], themeExtend[key]);
-      }
     });
     return {
       prefix: "",
@@ -6312,10 +6307,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 = {};
@@ -6382,19 +6377,120 @@ var tailwindToStyle = (function (exports) {
   }
   let twString = null;
   let cssObject = null;
-  if (!twString) {
-    twString = generateTailwindCssString().replace(/\s\s+/g, " ");
+  let globalConfig = {
+    theme: {
+      extend: {
+        colors: {}
+      },
+      screens: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1536px"
+      }
+    },
+    inject: true
+  };
+  function initializeCss() {
+    if (!twString) {
+      const configForGeneration = {
+        ...globalConfig,
+        theme: {
+          ...globalConfig.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 (!cssObject) {
+
+  /**
+   * 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();
+    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) || {})
+          }
+        }
+      }
+    };
+
+    // 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
+      };
+    }
+    initializeCss();
+    return globalConfig;
+  }
+
+  /**
+   * Get current global configuration
+   * @returns {Object} Current global configuration
+   */
+  function getConfig() {
+    return {
+      ...globalConfig
+    };
+  }
+
+  /**
+   * Reset global configuration to default
+   * @returns {Object} Default configuration
+   */
+  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
+    };
+    twString = generateTailwindCssString(globalConfig).replace(/\s\s+/g, " ");
     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}`,
@@ -6444,6 +6540,7 @@ var tailwindToStyle = (function (exports) {
     let media = null;
     let finalSelector = selector;
     for (const v of variants) {
+      const breakpoints = convertScreensToBreakpoints(globalConfig.theme.screens || {});
       if (breakpoints[v]) {
         media = breakpoints[v];
       } else if (pseudoVariants.has(v)) {
@@ -6505,7 +6602,7 @@ var tailwindToStyle = (function (exports) {
       callCount++;
       clearTimeout(timeout);
       timeout = setTimeout(() => {
-        const marker = performanceMonitor.start(`debounced:${func.name || 'anonymous'}`);
+        const marker = performanceMonitor.start(`debounced:${func.name || "anonymous"}`);
         try {
           const result = func.apply(context, args);
           performanceMonitor.end(marker);
@@ -6593,11 +6690,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+)$/);
@@ -6610,20 +6707,20 @@ var tailwindToStyle = (function (exports) {
     let modifiedDeclaration = cssDeclaration;
 
     // Replace opacity custom properties
-    const opacityProperties = ['--text-opacity', '--bg-opacity', '--border-opacity', '--ring-opacity', '--divide-opacity', '--placeholder-opacity', '--text-decoration-opacity', '--outline-opacity', '--accent-opacity', '--caret-opacity'];
+    const opacityProperties = ["--text-opacity", "--bg-opacity", "--border-opacity", "--ring-opacity", "--divide-opacity", "--placeholder-opacity", "--text-decoration-opacity", "--outline-opacity", "--accent-opacity", "--caret-opacity"];
     opacityProperties.forEach(prop => {
-      const propRegex = new RegExp(`${prop}\\s*:\\s*[\\d.]+`, 'gi');
+      const propRegex = new RegExp(`${prop}\\s*:\\s*[\\d.]+`, "gi");
       modifiedDeclaration = modifiedDeclaration.replace(propRegex, `${prop}: ${alphaValue}`);
     });
 
     // Also handle direct color values that might not use CSS variables
-    const colorProperties = ['color', 'background-color', 'border-color', 'text-decoration-color', 'outline-color', 'fill', 'stroke', 'caret-color', 'accent-color'];
+    const colorProperties = ["color", "background-color", "border-color", "text-decoration-color", "outline-color", "fill", "stroke", "caret-color", "accent-color"];
     colorProperties.forEach(prop => {
       // Match rgb(), rgba(), hsl(), hsla() functions
-      const rgbRegex = new RegExp(`(${prop}\\s*:\\s*)rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)`, 'gi');
-      const rgbaRegex = new RegExp(`(${prop}\\s*:\\s*)rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)`, 'gi');
-      const hslRegex = new RegExp(`(${prop}\\s*:\\s*)hsl\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%)\\)`, 'gi');
-      const hslaRegex = new RegExp(`(${prop}\\s*:\\s*)hsla\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%),\\s*[\\d.]+\\)`, 'gi');
+      const rgbRegex = new RegExp(`(${prop}\\s*:\\s*)rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)`, "gi");
+      const rgbaRegex = new RegExp(`(${prop}\\s*:\\s*)rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)`, "gi");
+      const hslRegex = new RegExp(`(${prop}\\s*:\\s*)hsl\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%)\\)`, "gi");
+      const hslaRegex = new RegExp(`(${prop}\\s*:\\s*)hsla\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%),\\s*[\\d.]+\\)`, "gi");
 
       // Convert rgb to rgba with opacity
       modifiedDeclaration = modifiedDeclaration.replace(rgbRegex, `$1rgba($2, $3, $4, ${alphaValue})`);
@@ -6638,10 +6735,10 @@ var tailwindToStyle = (function (exports) {
       modifiedDeclaration = modifiedDeclaration.replace(hslaRegex, `$1hsla($2, $3, $4, ${alphaValue})`);
 
       // Handle hex colors
-      const hexRegex = new RegExp(`(${prop}\\s*:\\s*)(#[0-9a-fA-F]{3,6})`, 'gi');
-      modifiedDeclaration = modifiedDeclaration.replace(hexRegex, (match, propPart, hexColor) => {
+      const hexRegex = new RegExp(`(${prop}\\s*:\\s*)(#[0-9a-fA-F]{3,6})`, "gi");
+      modifiedDeclaration = modifiedDeclaration.replace(hexRegex, (_, propPart, hexColor) => {
         // Convert hex to rgba
-        const hex = hexColor.replace('#', '');
+        const hex = hexColor.replace("#", "");
         let r, g, b;
         if (hex.length === 3) {
           r = parseInt(hex[0] + hex[0], 16);
@@ -6658,15 +6755,17 @@ 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 ? {} : "";
@@ -6693,11 +6792,11 @@ var tailwindToStyle = (function (exports) {
       const processMarker = performanceMonitor.start("tws:process");
       let cssResult = classes.map(className => {
         // Extract base class name without opacity modifier
-        const baseClassName = className.replace(/\/\d+$/, '');
+        const baseClassName = className.replace(/\/\d+$/, "");
         let result = cssObject[baseClassName] || cssObject[baseClassName.replace(/(\/)/g, "\\$1")] || cssObject[baseClassName.replace(/\./g, "\\.")];
         if (result) {
           // Apply opacity modifier if present
-          if (className.includes('/') && /\/\d+$/.test(className)) {
+          if (className.includes("/") && /\/\d+$/.test(className)) {
             result = processOpacityModifier(className, result);
           }
           return resolveCssToClearCss(result);
@@ -6709,7 +6808,7 @@ var tailwindToStyle = (function (exports) {
             if (cssObject[`${baseKey}custom`]) {
               let customResult = cssObject[`${baseKey}custom`].replace(/custom_value/g, customValue);
               // Apply opacity modifier to custom values too
-              if (className.includes('/') && /\/\d+$/.test(className)) {
+              if (className.includes("/") && /\/\d+$/.test(className)) {
                 customResult = processOpacityModifier(className, customResult);
               }
               return customResult;
@@ -6845,7 +6944,7 @@ var tailwindToStyle = (function (exports) {
     } = resolveVariants(selector, rawVariants);
 
     // Extract base class name without opacity modifier for CSS lookup
-    const baseClassName = pureClassName.replace(/\/\d+$/, '');
+    const baseClassName = pureClassName.replace(/\/\d+$/, "");
     let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(/(\/)/g, "\\$1")] || cssObject[baseClassName.replace(/\./g, "\\.")];
     if (!declarations && baseClassName.includes("[")) {
       const match = baseClassName.match(/^(.+?)\[(.+)\]$/);
@@ -6866,7 +6965,7 @@ var tailwindToStyle = (function (exports) {
     }
 
     // Apply opacity modifier if present
-    if (pureClassName.includes('/') && /\/\d+$/.test(pureClassName)) {
+    if (pureClassName.includes("/") && /\/\d+$/.test(pureClassName)) {
       declarations = processOpacityModifier(pureClassName, declarations);
     }
     if (isImportant) {
@@ -7041,12 +7140,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, e.g. { inject: true/false }
-   * @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, merges with global config
+   * @returns {string} Generated CSS string
    */
   function twsx(obj) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -7056,9 +7155,13 @@ var tailwindToStyle = (function (exports) {
         console.warn("twsx: Expected an object but received:", obj);
         return "";
       }
+      const mergedOptions = {
+        ...globalConfig,
+        ...options
+      };
       const {
         inject = true
-      } = options;
+      } = mergedOptions;
       const styles = {};
 
       // Create walk function with closure over styles
@@ -7153,19 +7256,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
 
@@ -7197,13 +7300,16 @@ var tailwindToStyle = (function (exports) {
     enablePerformanceLogging() {
       let enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       performanceMonitor.enabled = enabled && typeof performance !== "undefined";
-      console.log(`Performance monitoring ${enabled ? 'enabled' : 'disabled'}`);
+      console.log(`Performance monitoring ${enabled ? "enabled" : "disabled"}`);
     }
   };
 
   exports.debouncedTws = debouncedTws;
   exports.debouncedTwsx = debouncedTwsx;
+  exports.getConfig = getConfig;
   exports.performanceUtils = performanceUtils;
+  exports.resetConfig = resetConfig;
+  exports.setConfig = setConfig;
   exports.tws = tws;
   exports.twsx = twsx;