tailwind-to-style 2.7.2 → 2.7.4

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.2
+ * tailwind-to-style v2.7.4
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -1529,12 +1529,10 @@ function getConfigOptions() {
   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 => {
@@ -1545,9 +1543,6 @@ function getConfigOptions() {
         }
       });
     }
-    if (themeExtend[key]) {
-      newTheme[key] = Object.assign({}, newTheme[key], themeExtend[key]);
-    }
   });
   return {
     prefix: "",
@@ -6309,10 +6304,10 @@ function parseCustomClassWithPatterns(className) {
   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 = {};
@@ -6379,19 +6374,196 @@ function convertCssToObject(cssString) {
 }
 let twString = null;
 let cssObject = null;
-if (!twString) {
-  twString = generateTailwindCssString().replace(/\s\s+/g, " ");
+
+// 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;
+}
+
+/**
+ * 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
+  };
 }
-if (!cssObject) {
+
+/**
+ * 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, " ");
   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}`,
@@ -6441,6 +6613,9 @@ 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)) {
@@ -6502,7 +6677,7 @@ function debounce(func) {
     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);
@@ -6590,11 +6765,11 @@ function separateAndResolveCSS(arr) {
   }
 }
 
-/**
- * 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+)$/);
@@ -6607,20 +6782,20 @@ function processOpacityModifier(className, cssDeclaration) {
   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})`);
@@ -6635,10 +6810,10 @@ function processOpacityModifier(className, cssDeclaration) {
     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);
@@ -6655,15 +6830,17 @@ function processOpacityModifier(className, cssDeclaration) {
   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 ? {} : "";
@@ -6690,11 +6867,11 @@ function tws(classNames, convertToJson) {
     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);
@@ -6706,7 +6883,7 @@ function tws(classNames, convertToJson) {
           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;
@@ -6842,7 +7019,7 @@ function processClass(cls, selector, styles) {
   } = 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(/^(.+?)\[(.+)\]$/);
@@ -6863,7 +7040,7 @@ function processClass(cls, selector, styles) {
   }
 
   // Apply opacity modifier if present
-  if (pureClassName.includes('/') && /\/\d+$/.test(pureClassName)) {
+  if (pureClassName.includes("/") && /\/\d+$/.test(pureClassName)) {
     declarations = processOpacityModifier(pureClassName, declarations);
   }
   if (isImportant) {
@@ -7038,12 +7215,12 @@ function generateCssString(styles) {
   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] : {};
@@ -7053,9 +7230,13 @@ function twsx(obj) {
       console.warn("twsx: Expected an object but received:", obj);
       return "";
     }
+    const mergedOptions = {
+      ...getGlobalStorage(),
+      ...options
+    };
     const {
       inject = true
-    } = options;
+    } = mergedOptions;
     const styles = {};
 
     // Create walk function with closure over styles
@@ -7150,19 +7331,19 @@ function autoInjectCss(cssString) {
 }
 
 // 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
 
@@ -7194,8 +7375,8 @@ const performanceUtils = {
   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"}`);
   }
 };
 
-export { debouncedTws, debouncedTwsx, performanceUtils, tws, twsx };
+export { debouncedTws, debouncedTwsx, getConfig, performanceUtils, resetConfig, setConfig, tws, twsx };