tailwind-to-style 2.10.1 → 2.10.2

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.2
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -8324,10 +8324,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 +8621,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 +8686,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,12 +9134,12 @@ 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] : {};
@@ -9284,19 +9284,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.1
+ * tailwind-to-style v2.10.2
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -8325,10 +8325,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 +8622,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 +8687,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,12 +9135,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, 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] : {};
@@ -9285,19 +9285,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
 

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.10.1
+ * tailwind-to-style v2.10.2
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -8321,10 +8321,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 +8618,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 +8683,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,12 +9131,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, 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] : {};
@@ -9281,19 +9281,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