tailwind-to-style 2.10.1 → 2.10.3

package/README.md

@@ -15,15 +15,14 @@ The library exposes two main functions and a CLI tool:
 2. **`twsx`**: A more advanced function that allows you to define nested and complex styles similar to SCSS, including support for responsive design, state variants, grouping, and enhanced CSS capabilities.
 3. **`twsx-cli`**: A command-line tool for generating CSS files from `twsx.*.js` files with watch mode support.
 
-## ✨ What's New in v2.12.0
+## ✨ What's New in v2.10.2
 
-- 🎬 **Animation Support**: Full support for `animate-spin`, `animate-pulse`, `animate-bounce`, `animate-ping`!
-- 🔄 **Transition Utilities**: Complete transition system with `duration`, `delay`, `ease`, and property control
-- ⏱️ **Keyframes**: Built-in keyframes with support for custom animations via `configure()`
-- 🎨 **Custom Animations**: Create your own animations through theme extension or plugin API
-- 📝 **Examples**: New comprehensive animation examples
-
-Now you can create smooth transitions and eye-catching animations like Tailwind CSS!
+- **⚛️ React Integration**: Built-in React hooks and provider for seamless integration
+- **🎬 Enhanced Animations**: Complete animation system with custom keyframes support
+- **🔄 Improved Transitions**: Full transition utilities with duration, delay, and easing
+- **🎨 Advanced Theming**: More flexible theme customization and plugin system
+- **⚡ Performance Boost**: Better caching and optimized CSS generation
+- **📱 Responsive Selector Syntax**: New intuitive `'md:.title': 'text-lg'` format
 
 ## ✨ What's New in v2.11.0
 
@@ -58,18 +57,233 @@ All changes are **backward compatible** - your existing code continues to work!
 
 ## Installation
 
-To use `tailwind-to-style`, install the library using either npm or yarn:
-
-### Using npm
-
 ```bash
 npm install tailwind-to-style
 ```
 
-### Using yarn
+## React Integration
 
-```bash
-yarn add tailwind-to-style
+### Quick Start with React
+
+```javascript
+import { useTwsx, TwsxProvider } from 'tailwind-to-style'
+
+// Theme configuration
+const config = {
+  theme: {
+    extend: {
+      colors: {
+        brand: { 500: '#3b82f6', 600: '#2563eb' }
+      }
+    }
+  }
+}
+
+function App() {
+  return (
+    <TwsxProvider config={config}>
+      <MyComponent />
+    </TwsxProvider>
+  )
+}
+
+function MyComponent() {
+  // Auto-inject CSS into document head
+  useTwsx({
+    '.card': [
+      'bg-brand-500 text-white p-6 rounded-lg',
+      {
+        '&:hover': 'bg-brand-600 transform scale-105',
+        '.title': 'text-xl font-bold mb-2'
+      }
+    ]
+  })
+
+  return (
+    <div className="card">
+      <h2 className="title">Interactive Card</h2>
+      <p>Hover me to see the effect!</p>
+    </div>
+  )
+}
+```
+
+### Import Options
+
+```javascript
+// Import from main package (recommended)
+import { useTwsx, TwsxProvider } from 'tailwind-to-style'
+
+// Or from React subpath
+import { useTwsx, TwsxProvider } from 'tailwind-to-style/react'
+```
+
+### `useTwsx()` Hook
+
+The main React hook for component styling:
+
+```javascript
+import { useTwsx } from 'tailwind-to-style'
+
+function MyComponent() {
+  // Auto-inject CSS (default behavior)
+  useTwsx({
+    '.button': [
+      'bg-blue-500 text-white px-6 py-3 rounded-lg font-medium',
+      {
+        '&:hover': 'bg-blue-600 transform scale-105',
+        '&:active': 'bg-blue-700 scale-95',
+        '&:disabled': 'bg-gray-400 cursor-not-allowed'
+      }
+    ]
+  })
+
+  // Get CSS without injection
+  const css = useTwsx({
+    '.card': 'bg-white p-6 rounded-lg shadow-md'
+  }, { inject: false })
+
+  return (
+    <>
+      <style>{css}</style>
+      <div className="card">
+        <button className="button">Click me</button>
+      </div>
+    </>
+  )
+}
+```
+
+### `TwsxProvider` - Theme Configuration
+
+Provide global theme configuration and custom colors:
+
+```javascript
+import { TwsxProvider, useTwsx } from 'tailwind-to-style'
+
+const themeConfig = {
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: '#eff6ff',
+          500: '#3b82f6',
+          600: '#2563eb',
+          900: '#1e3a8a'
+        },
+        accent: '#f59e0b'
+      },
+      spacing: {
+        '128': '32rem',
+        '144': '36rem'
+      }
+    }
+  }
+}
+
+function App() {
+  return (
+    <TwsxProvider config={themeConfig}>
+      <Header />
+      <Main />
+      <Footer />
+    </TwsxProvider>
+  )
+}
+
+function Header() {
+  useTwsx({
+    '.header': [
+      'bg-brand-500 text-white p-128', // Uses custom spacing
+      {
+        '.logo': 'text-accent font-bold text-2xl', // Uses custom color
+        '&:hover': 'bg-brand-600'
+      }
+    ]
+  })
+
+  return (
+    <header className="header">
+      <div className="logo">My Brand</div>
+    </header>
+  )
+}
+```
+
+### Dynamic Styling with State
+
+Create dynamic styles that respond to component state:
+
+```javascript
+import { useTwsx } from 'tailwind-to-style'
+import { useState } from 'react'
+
+function ThemeToggle() {
+  const [theme, setTheme] = useState('light')
+  
+  useTwsx({
+    '.theme-container': [
+      `bg-${theme === 'dark' ? 'gray-900' : 'white'} p-6 rounded-lg transition-all duration-300`,
+      {
+        [`&.${theme}`]: theme === 'dark' 
+          ? 'text-white border-gray-700' 
+          : 'text-gray-900 border-gray-200',
+        '.theme-title': 'text-2xl font-bold mb-4',
+        '.theme-button': [
+          'px-4 py-2 rounded-lg font-medium transition-colors',
+          theme === 'dark' 
+            ? 'bg-yellow-500 text-gray-900 hover:bg-yellow-400'
+            : 'bg-gray-800 text-white hover:bg-gray-700'
+        ]
+      }
+    ]
+  })
+
+  return (
+    <div className={`theme-container ${theme}`}>
+      <h2 className="theme-title">🌓 Dynamic Theme</h2>
+      <button 
+        className="theme-button"
+        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+      >
+        Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
+      </button>
+    </div>
+  )
+}
+```
+
+### Available React Hooks
+
+```javascript
+import { 
+  useTwsx,           // Main hook for styling
+  TwsxProvider,      // Context provider
+  useTwsxContext,    // Access provider context
+  useTwsxConfig,     // Get current config
+  useUpdateTwsxConfig // Update config
+} from 'tailwind-to-style'
+
+// Example usage
+function ConfigAwareComponent() {
+  const { config, isConfigured } = useTwsxConfig()
+  const updateConfig = useUpdateTwsxConfig()
+  
+  if (!isConfigured) {
+    return <div>Loading theme...</div>
+  }
+  
+  return (
+    <div>
+      <p>Current theme: {config.theme?.extend?.colors?.brand ? 'Custom' : 'Default'}</p>
+      <button onClick={() => updateConfig({ 
+        theme: { extend: { colors: { brand: { 500: '#ef4444' } } } }
+      })}>
+        Change Brand Color
+      </button>
+    </div>
+  )
+}
 ```
 
 ## Core Functions

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.10.1
+ * 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;
   }
@@ -9145,6 +9195,7 @@ var tailwindToStyle = (function (exports) {
     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, {

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.10.1
+ * 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;
 }
@@ -9146,6 +9196,7 @@ 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, {