tailwind-to-style 2.10.2 → 2.10.3

package/dist/react.cjs.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
@@ -28,6 +28,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: {
@@ -1544,6 +1546,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: {
@@ -2319,18 +2346,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;
       }, {})
     };
@@ -2376,7 +2424,9 @@ function generator$2H() {
           }
         `;
     });
-    return cssString;
+
+    // Combine keyframes and animation classes
+    return keyframesCSS + cssString;
   }, configOptions);
   return responsiveCssString;
 }
@@ -7792,10 +7842,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 = {};
@@ -8059,11 +8109,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+)$/);
@@ -8124,11 +8174,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");
@@ -8572,17 +8622,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 "";
@@ -8659,12 +8710,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, {
@@ -8721,20 +8808,20 @@ function autoInjectCss(cssString) {
   }
 }
 
-/**
- * React Hook for TWSX Integration
- * Provides seamless integration between TWSX and React components
+/**
+ * React Hook for TWSX Integration
+ * Provides seamless integration between TWSX and React components
  */
 
-/**
- * Custom hook for using TWSX in React components
- * @param {Object|string} styles - TWSX style object or class string
- * @param {Object} options - TWSX options (inject: true by default)
- * @returns {string} Generated CSS string
- *
- * Examples:
- * - Auto-inject CSS: useTwsx({ '.card': 'bg-white p-4' })
- * - Get CSS only: useTwsx({ '.card': 'bg-white p-4' }, { inject: false })
+/**
+ * Custom hook for using TWSX in React components
+ * @param {Object|string} styles - TWSX style object or class string
+ * @param {Object} options - TWSX options (inject: true by default)
+ * @returns {string} Generated CSS string
+ *
+ * Examples:
+ * - Auto-inject CSS: useTwsx({ '.card': 'bg-white p-4' })
+ * - Get CSS only: useTwsx({ '.card': 'bg-white p-4' }, { inject: false })
  */
 function useTwsx(styles) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

package/dist/react.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
@@ -24,6 +24,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: {
@@ -1540,6 +1542,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: {
@@ -2315,18 +2342,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;
       }, {})
     };
@@ -2372,7 +2420,9 @@ function generator$2H() {
           }
         `;
     });
-    return cssString;
+
+    // Combine keyframes and animation classes
+    return keyframesCSS + cssString;
   }, configOptions);
   return responsiveCssString;
 }
@@ -7788,10 +7838,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 = {};
@@ -8055,11 +8105,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+)$/);
@@ -8120,11 +8170,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");
@@ -8568,17 +8618,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 "";
@@ -8655,12 +8706,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, {
@@ -8717,20 +8804,20 @@ function autoInjectCss(cssString) {
   }
 }
 
-/**
- * React Hook for TWSX Integration
- * Provides seamless integration between TWSX and React components
+/**
+ * React Hook for TWSX Integration
+ * Provides seamless integration between TWSX and React components
  */
 
-/**
- * Custom hook for using TWSX in React components
- * @param {Object|string} styles - TWSX style object or class string
- * @param {Object} options - TWSX options (inject: true by default)
- * @returns {string} Generated CSS string
- *
- * Examples:
- * - Auto-inject CSS: useTwsx({ '.card': 'bg-white p-4' })
- * - Get CSS only: useTwsx({ '.card': 'bg-white p-4' }, { inject: false })
+/**
+ * Custom hook for using TWSX in React components
+ * @param {Object|string} styles - TWSX style object or class string
+ * @param {Object} options - TWSX options (inject: true by default)
+ * @returns {string} Generated CSS string
+ *
+ * Examples:
+ * - Auto-inject CSS: useTwsx({ '.card': 'bg-white p-4' })
+ * - Get CSS only: useTwsx({ '.card': 'bg-white p-4' }, { inject: false })
  */
 function useTwsx(styles) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-to-style",
-  "version": "2.10.2",
+  "version": "2.10.3",
   "description": "Convert tailwind classes to inline style",
   "type": "module",
   "main": "dist/index.cjs",