tailwind-to-style 2.10.2 → 2.10.3

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.10.2
+ * tailwind-to-style v2.10.3
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -25,6 +25,8 @@ var tailwindToStyle = (function (exports) {
       ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
       pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       bounce: "bounce 1s infinite",
+      "fade-in": "fadeIn 2s ease-in-out infinite",
+      "slide-up": "slideUp 2s ease-in-out infinite",
       custom: "custom_value"
     },
     aspectRatio: {
@@ -1541,6 +1543,31 @@ var tailwindToStyle = (function (exports) {
           transform: "none",
           animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
         }
+      },
+      fadeIn: {
+        "0%": {
+          opacity: "0"
+        },
+        "50%": {
+          opacity: "1"
+        },
+        "100%": {
+          opacity: "0"
+        }
+      },
+      slideUp: {
+        "0%": {
+          transform: "translateY(20px)",
+          opacity: "0"
+        },
+        "50%": {
+          transform: "translateY(0)",
+          opacity: "1"
+        },
+        "100%": {
+          transform: "translateY(-20px)",
+          opacity: "0"
+        }
       }
     },
     transitionProperty: {
@@ -2446,18 +2473,39 @@ var tailwindToStyle = (function (exports) {
     } = configOptions;
     const prefix = `${globalPrefix}animate`;
     const {
-      animation = {}
+      animation = {},
+      keyframes = {}
     } = theme;
     const responsiveCssString = generateCssString$1(_ref => {
       let {
         getCssByOptions
       } = _ref;
-      // Merge theme animations with inline animations
+      // Generate keyframes first
+      let keyframesCSS = "";
+      for (const [name, keyframe] of Object.entries(keyframes)) {
+        keyframesCSS += `@keyframes ${name} {\n`;
+        for (const [percentage, styles] of Object.entries(keyframe)) {
+          keyframesCSS += `  ${percentage} {\n`;
+          for (const [prop, value] of Object.entries(styles)) {
+            const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+            keyframesCSS += `    ${cssProp}: ${value};\n`;
+          }
+          keyframesCSS += "  }\n";
+        }
+        keyframesCSS += "}\n";
+      }
+
+      // Merge theme animations with inline animations (but skip inline if keyframes exist)
       const allAnimations = {
         ...animation,
-        // Add inline animations to the mix
+        // Add inline animations to the mix, but skip if keyframes version exists
         ...Object.keys(INLINE_ANIMATIONS).reduce((acc, key) => {
-          acc[key] = `inline-${key}`; // Special marker for inline animations
+          // Check if keyframes version exists (both camelCase and kebab-case)
+          const camelCaseKey = key.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+          const hasKeyframes = keyframes[key] || keyframes[camelCaseKey];
+          if (!hasKeyframes) {
+            acc[key] = `inline-${key}`; // Special marker for inline animations
+          }
           return acc;
         }, {})
       };
@@ -2503,7 +2551,9 @@ var tailwindToStyle = (function (exports) {
           }
         `;
       });
-      return cssString;
+
+      // Combine keyframes and animation classes
+      return keyframesCSS + cssString;
     }, configOptions);
     return responsiveCssString;
   }
@@ -8324,10 +8374,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 = {};
@@ -8621,11 +8671,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+)$/);
@@ -8686,11 +8736,11 @@ 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");
@@ -9134,17 +9184,18 @@ 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, e.g. { inject: true/false }
+   * @returns {string} Generated CSS string
    */
   function twsx(obj) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const totalMarker = performanceMonitor.start("twsx:total");
     try {
+      var _options$theme2, _userConfigData$theme2;
       if (!obj || typeof obj !== "object") {
         logger.warn("twsx: Expected an object but received:", obj);
         return "";
@@ -9221,12 +9272,48 @@ var tailwindToStyle = (function (exports) {
       // Generate CSS string
       const cssString = performanceMonitor.measure(() => generateCssString(styles), "twsx:generate");
 
+      // Generate keyframes CSS separately
+      const keyframesMarker = performanceMonitor.start("twsx:keyframes");
+      const userConfigData = getConfig();
+      const mergedOptions = {
+        ...options,
+        theme: {
+          ...options.theme,
+          ...userConfigData.theme,
+          extend: {
+            ...((_options$theme2 = options.theme) === null || _options$theme2 === void 0 ? void 0 : _options$theme2.extend),
+            ...((_userConfigData$theme2 = userConfigData.theme) === null || _userConfigData$theme2 === void 0 ? void 0 : _userConfigData$theme2.extend)
+          }
+        }
+      };
+      const configOptions = getConfigOptions(mergedOptions, Object.keys(plugins));
+      const {
+        keyframes = {}
+      } = configOptions.theme || {};
+      let keyframesCSS = "";
+      for (const [name, keyframe] of Object.entries(keyframes)) {
+        keyframesCSS += `@keyframes ${name} {\n`;
+        for (const [percentage, styles] of Object.entries(keyframe)) {
+          keyframesCSS += `  ${percentage} {\n`;
+          for (const [prop, value] of Object.entries(styles)) {
+            const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+            keyframesCSS += `    ${cssProp}: ${value};\n`;
+          }
+          keyframesCSS += `  }\n`;
+        }
+        keyframesCSS += `}\n`;
+      }
+      performanceMonitor.end(keyframesMarker);
+
+      // Combine keyframes and regular CSS
+      const finalCSS = keyframesCSS + cssString;
+
       // Auto-inject if needed
       if (inject && typeof window !== "undefined" && typeof document !== "undefined") {
-        performanceMonitor.measure(() => autoInjectCss(cssString), "twsx:inject");
+        performanceMonitor.measure(() => autoInjectCss(finalCSS), "twsx:inject");
       }
       performanceMonitor.end(totalMarker);
-      return cssString;
+      return finalCSS;
     } catch (error) {
       performanceMonitor.end(totalMarker);
       handleError(error, {
@@ -9284,19 +9371,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
 

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.10.2
+ * tailwind-to-style v2.10.3
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -26,6 +26,8 @@ const theme = {
     ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
     pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
     bounce: "bounce 1s infinite",
+    "fade-in": "fadeIn 2s ease-in-out infinite",
+    "slide-up": "slideUp 2s ease-in-out infinite",
     custom: "custom_value"
   },
   aspectRatio: {
@@ -1542,6 +1544,31 @@ const theme = {
         transform: "none",
         animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
       }
+    },
+    fadeIn: {
+      "0%": {
+        opacity: "0"
+      },
+      "50%": {
+        opacity: "1"
+      },
+      "100%": {
+        opacity: "0"
+      }
+    },
+    slideUp: {
+      "0%": {
+        transform: "translateY(20px)",
+        opacity: "0"
+      },
+      "50%": {
+        transform: "translateY(0)",
+        opacity: "1"
+      },
+      "100%": {
+        transform: "translateY(-20px)",
+        opacity: "0"
+      }
     }
   },
   transitionProperty: {
@@ -2447,18 +2474,39 @@ function generator$2H() {
   } = configOptions;
   const prefix = `${globalPrefix}animate`;
   const {
-    animation = {}
+    animation = {},
+    keyframes = {}
   } = theme;
   const responsiveCssString = generateCssString$1(_ref => {
     let {
       getCssByOptions
     } = _ref;
-    // Merge theme animations with inline animations
+    // Generate keyframes first
+    let keyframesCSS = "";
+    for (const [name, keyframe] of Object.entries(keyframes)) {
+      keyframesCSS += `@keyframes ${name} {\n`;
+      for (const [percentage, styles] of Object.entries(keyframe)) {
+        keyframesCSS += `  ${percentage} {\n`;
+        for (const [prop, value] of Object.entries(styles)) {
+          const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+          keyframesCSS += `    ${cssProp}: ${value};\n`;
+        }
+        keyframesCSS += "  }\n";
+      }
+      keyframesCSS += "}\n";
+    }
+
+    // Merge theme animations with inline animations (but skip inline if keyframes exist)
     const allAnimations = {
       ...animation,
-      // Add inline animations to the mix
+      // Add inline animations to the mix, but skip if keyframes version exists
       ...Object.keys(INLINE_ANIMATIONS).reduce((acc, key) => {
-        acc[key] = `inline-${key}`; // Special marker for inline animations
+        // Check if keyframes version exists (both camelCase and kebab-case)
+        const camelCaseKey = key.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+        const hasKeyframes = keyframes[key] || keyframes[camelCaseKey];
+        if (!hasKeyframes) {
+          acc[key] = `inline-${key}`; // Special marker for inline animations
+        }
         return acc;
       }, {})
     };
@@ -2504,7 +2552,9 @@ function generator$2H() {
           }
         `;
     });
-    return cssString;
+
+    // Combine keyframes and animation classes
+    return keyframesCSS + cssString;
   }, configOptions);
   return responsiveCssString;
 }
@@ -8325,10 +8375,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 = {};
@@ -8622,11 +8672,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+)$/);
@@ -8687,11 +8737,11 @@ 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");
@@ -9135,17 +9185,18 @@ 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, e.g. { inject: true/false }
+ * @returns {string} Generated CSS string
  */
 function twsx(obj) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const totalMarker = performanceMonitor.start("twsx:total");
   try {
+    var _options$theme2, _userConfigData$theme2;
     if (!obj || typeof obj !== "object") {
       logger.warn("twsx: Expected an object but received:", obj);
       return "";
@@ -9222,12 +9273,48 @@ function twsx(obj) {
     // Generate CSS string
     const cssString = performanceMonitor.measure(() => generateCssString(styles), "twsx:generate");
 
+    // Generate keyframes CSS separately
+    const keyframesMarker = performanceMonitor.start("twsx:keyframes");
+    const userConfigData = getConfig();
+    const mergedOptions = {
+      ...options,
+      theme: {
+        ...options.theme,
+        ...userConfigData.theme,
+        extend: {
+          ...((_options$theme2 = options.theme) === null || _options$theme2 === void 0 ? void 0 : _options$theme2.extend),
+          ...((_userConfigData$theme2 = userConfigData.theme) === null || _userConfigData$theme2 === void 0 ? void 0 : _userConfigData$theme2.extend)
+        }
+      }
+    };
+    const configOptions = getConfigOptions(mergedOptions, Object.keys(plugins));
+    const {
+      keyframes = {}
+    } = configOptions.theme || {};
+    let keyframesCSS = "";
+    for (const [name, keyframe] of Object.entries(keyframes)) {
+      keyframesCSS += `@keyframes ${name} {\n`;
+      for (const [percentage, styles] of Object.entries(keyframe)) {
+        keyframesCSS += `  ${percentage} {\n`;
+        for (const [prop, value] of Object.entries(styles)) {
+          const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+          keyframesCSS += `    ${cssProp}: ${value};\n`;
+        }
+        keyframesCSS += `  }\n`;
+      }
+      keyframesCSS += `}\n`;
+    }
+    performanceMonitor.end(keyframesMarker);
+
+    // Combine keyframes and regular CSS
+    const finalCSS = keyframesCSS + cssString;
+
     // Auto-inject if needed
     if (inject && typeof window !== "undefined" && typeof document !== "undefined") {
-      performanceMonitor.measure(() => autoInjectCss(cssString), "twsx:inject");
+      performanceMonitor.measure(() => autoInjectCss(finalCSS), "twsx:inject");
     }
     performanceMonitor.end(totalMarker);
-    return cssString;
+    return finalCSS;
   } catch (error) {
     performanceMonitor.end(totalMarker);
     handleError(error, {
@@ -9285,19 +9372,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