tailwind-to-style 2.10.2 → 2.10.3

package/dist/index.esm.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
@@ -22,6 +22,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: {
@@ -1538,6 +1540,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: {
@@ -2443,18 +2470,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;
       }, {})
     };
@@ -2500,7 +2548,9 @@ function generator$2H() {
           }
         `;
     });
-    return cssString;
+
+    // Combine keyframes and animation classes
+    return keyframesCSS + cssString;
   }, configOptions);
   return responsiveCssString;
 }
@@ -8321,10 +8371,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 = {};
@@ -8618,11 +8668,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+)$/);
@@ -8683,11 +8733,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");
@@ -9131,17 +9181,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 "";
@@ -9218,12 +9269,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, {
@@ -9281,19 +9368,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