tailwind-to-style 2.7.4 → 2.7.6

package/dist/index.esm.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
@@ -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: "",
@@ -6304,10 +6309,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 = {};
@@ -6374,196 +6379,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
-};
-
-// 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 (!twString) {
+  twString = generateTailwindCssString().replace(/\s\s+/g, " ");
 }
-
-/**
- * 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}`,
@@ -6613,9 +6441,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)) {
@@ -6765,11 +6590,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+)$/);
@@ -6811,7 +6636,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;
@@ -6830,17 +6655,15 @@ 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 ? {} : "";
@@ -7215,12 +7038,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, 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] : {};
@@ -7230,13 +7053,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
@@ -7331,19 +7150,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
 
@@ -7379,4 +7198,4 @@ const performanceUtils = {
   }
 };
 
-export { debouncedTws, debouncedTwsx, getConfig, performanceUtils, resetConfig, setConfig, tws, twsx };
+export { debouncedTws, debouncedTwsx, performanceUtils, tws, twsx };