tailwind-to-style 2.7.0 → 2.7.2

package/README.md

@@ -79,8 +79,8 @@ This will apply the Tailwind classes directly as inline styles in the React comp
 
 #### Features of `twsx`:
 - Allows **nested styles** similar to SCSS, enabling more complex CSS structures.
-- **Grouping**: Supports grouping utilities inside parentheses, making the code more readable and modular.
-- Fully supports **responsive variants** (`sm`, `md`, `lg`, etc.).
+- **Grouping**: Supports grouping utilities inside parentheses, including responsive variants.
+- Supports **responsive variants** (`sm`, `md`, `lg`, etc.) when used within Tailwind utility classes or in grouping syntax.
 - Handles **state variants** like `hover`, `focus`, and more.
 - Supports **dynamic utilities** such as `w-[300px]`, `bg-[rgba(0,0,0,0.5)]`.
 - **@css directive**: Apply custom CSS properties directly for more complex styles like transitions and animations.
@@ -232,6 +232,62 @@ console.log(styles);
 }
 ```
 
+#### Responsive Variants:
+
+Responsive variants work within Tailwind utility classes and in grouping syntax:
+
+```javascript
+const styles = twsx({
+  ".responsive-card": [
+    "w-full md:w-1/2 lg:w-1/3 p-4 bg-white", 
+    {
+      "&:hover": "shadow-lg transform:scale-105"
+    }
+  ],
+  ".grouped-responsive": "text-sm md:(text-lg px-6) lg:(text-xl px-8)"
+});
+```
+
+**Output**:
+```css
+.responsive-card {
+  width: 100%;
+  padding: 1rem;
+  background-color: white;
+}
+@media (min-width: 768px) {
+  .responsive-card {
+    width: 50%;
+  }
+}
+@media (min-width: 1024px) {
+  .responsive-card {
+    width: 33.333333%;
+  }
+}
+.responsive-card:hover {
+  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
+  transform: scale(1.05);
+}
+.grouped-responsive {
+  font-size: 0.875rem;
+}
+@media (min-width: 768px) {
+  .grouped-responsive {
+    font-size: 1.125rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+@media (min-width: 1024px) {
+  .grouped-responsive {
+    font-size: 1.25rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+```
+
 #### `@css` Direct CSS Properties:
 
 With the `@css` feature, you can directly add CSS properties that aren't available as Tailwind utilities or when you need more complex CSS values like transitions, animations, or custom properties.
@@ -285,7 +341,7 @@ The `@css` feature is particularly helpful for properties that require complex v
 
 #### Advanced `@css` Examples:
 
-You can combine `@css` with responsive and state variants:
+You can combine `@css` with state variants:
 
 ```javascript
 const styles = twsx({
@@ -293,20 +349,18 @@ const styles = twsx({
     "bg-white rounded-lg shadow-xl",
     {
       "@css": {
-        transform: "translateY(0)",
-        transition: "transform 0.3s ease-out, opacity 0.2s ease-in-out",
+        transform: "translateX(0px)",
+        transition: "all 0.3s ease-out",
         "will-change": "transform, opacity"
       },
       "&.hidden": [
         "opacity-0",
         {
           "@css": {
-            transform: "translateY(-20px)"
+            transform: "translateX(-100px)"
           }
         }
-      ],
-      "md:@css width": "500px",
-      "lg:@css width": "700px"
+      ]
     }
   ]
 });
@@ -318,26 +372,24 @@ const styles = twsx({
   background-color: white;
   border-radius: 0.5rem;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  transform: translateY(0);
-  transition: transform 0.3s ease-out, opacity 0.2s ease-in-out;
+  transform: translateX(0px);
+  transition: all 0.3s ease-out;
   will-change: transform, opacity;
 }
 .modal.hidden {
   opacity: 0;
-  transform: translateY(-20px);
-}
-@media (min-width: 768px) {
-  .modal {
-    width: 500px;
-  }
-}
-@media (min-width: 1024px) {
-  .modal {
-    width: 700px;
-  }
+  transform: translateX(-100px);
 }
 ```
 
+For responsive styles, you can use standard Tailwind responsive utilities within your classes:
+
+```javascript
+const styles = twsx({
+  ".responsive-box": "w-full md:w-1/2 lg:w-1/3 p-4 bg-blue-500"
+});
+```
+
 The `@css` feature provides a powerful way to bridge the gap between Tailwind's utility classes and custom CSS when needed, without leaving the `twsx` syntax.
 
 ### Inject Option (Browser Only)
@@ -430,9 +482,9 @@ const complexStyles = twsx({
   ".hero": [
     "bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen",
     {
-      "h1": "text-6xl font-bold text-white",
-      "@media (max-width: 768px)": {
-        "h1": "text-4xl"
+      "h1": "text-6xl font-bold text-white md:text-4xl",
+      "@css": {
+        transition: "font-size 0.3s ease-in-out"
       }
     }
   ]

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.0
+ * tailwind-to-style v2.7.2
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -6342,13 +6342,13 @@ var tailwindToStyle = (function (exports) {
     }).join(" ");
   }
 
-  // Cache untuk getConfigOptions
+  // Cache for getConfigOptions
   const configOptionsCache = new Map();
   const cacheKey = options => JSON.stringify(options);
   function generateTailwindCssString() {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const pluginKeys = Object.keys(plugins);
-    // Menggunakan cache untuk mencegah pemrosesan ulang yang tidak perlu
+    // Use cache to prevent unnecessary reprocessing
     const key = cacheKey(options);
     if (!configOptionsCache.has(key)) {
       configOptionsCache.set(key, getConfigOptions(options, pluginKeys));
@@ -6409,7 +6409,7 @@ var tailwindToStyle = (function (exports) {
     number: arg => `> :nth-child(${arg})`
   };
 
-  // Mengoptimalkan encoding/decoding bracket values dengan memoization
+  // Optimize encoding/decoding bracket values with memoization
   const encodeBracketCache = new Map();
   function encodeBracketValues(input) {
     if (!input) return input;
@@ -6476,7 +6476,7 @@ var tailwindToStyle = (function (exports) {
     return styleObject;
   }
 
-  // Cache untuk CSS resolusi
+  // Cache for CSS resolution
   const cssResolutionCache = new Map();
 
   // Enhanced cache management with performance monitoring
@@ -6484,7 +6484,7 @@ var tailwindToStyle = (function (exports) {
     let maxSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
     if (cache.size > maxSize) {
       const cleanupMarker = performanceMonitor.start("cache:cleanup");
-      // Hapus 20% entri yang paling lama
+      // Remove 20% of the oldest entries
       const entriesToRemove = Math.floor(cache.size * 0.2);
       const keys = Array.from(cache.keys()).slice(0, entriesToRemove);
       keys.forEach(key => cache.delete(key));
@@ -6523,14 +6523,14 @@ var tailwindToStyle = (function (exports) {
   function separateAndResolveCSS(arr) {
     const marker = performanceMonitor.start("css:resolve");
     try {
-      // Perbaiki: cacheKey harus unik untuk setiap input array
+      // Fix: cacheKey must be unique for each input array
       const cacheKey = Array.isArray(arr) ? arr.join("|") : String(arr);
       if (cssResolutionCache.has(cacheKey)) {
         performanceMonitor.end(marker);
         return cssResolutionCache.get(cacheKey);
       }
 
-      // Batasi ukuran cache untuk menghindari memory leak
+      // Limit cache size to avoid memory leaks
       limitCacheSize(cssResolutionCache);
       const cssProperties = {};
       arr.forEach(item => {
@@ -6543,7 +6543,7 @@ var tailwindToStyle = (function (exports) {
             const key = declaration.substring(0, colonIndex).trim();
             const value = declaration.substring(colonIndex + 1).trim();
             if (key && value) {
-              // Prioritaskan nilai yang lebih spesifik (misalnya !important)
+              // Prioritize more specific values (e.g., !important)
               if (value.includes("!important") || !cssProperties[key]) {
                 cssProperties[key] = value;
               }
@@ -6594,10 +6594,75 @@ var tailwindToStyle = (function (exports) {
   }
 
   /**
-   * Mengkonversi string kelas Tailwind menjadi inline styles CSS atau objek JSON
-   * @param {string} classNames - String berisi kelas Tailwind yang akan dikonversi
-   * @param {boolean} convertToJson - Jika true, hasil akan menjadi objek JSON, jika false menjadi string CSS
-   * @returns {string|Object} String CSS inline atau objek style JSON
+   * 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+)$/);
+    if (!opacityMatch) return cssDeclaration;
+    const opacityValue = parseInt(opacityMatch[1], 10);
+    if (opacityValue < 0 || opacityValue > 100) return cssDeclaration;
+    const alphaValue = (opacityValue / 100).toString();
+
+    // Handle Tailwind's CSS custom property pattern
+    let modifiedDeclaration = cssDeclaration;
+
+    // Replace opacity custom properties
+    const opacityProperties = ['--text-opacity', '--bg-opacity', '--border-opacity', '--ring-opacity', '--divide-opacity', '--placeholder-opacity', '--text-decoration-opacity', '--outline-opacity', '--accent-opacity', '--caret-opacity'];
+    opacityProperties.forEach(prop => {
+      const propRegex = new RegExp(`${prop}\\s*:\\s*[\\d.]+`, 'gi');
+      modifiedDeclaration = modifiedDeclaration.replace(propRegex, `${prop}: ${alphaValue}`);
+    });
+
+    // Also handle direct color values that might not use CSS variables
+    const colorProperties = ['color', 'background-color', 'border-color', 'text-decoration-color', 'outline-color', 'fill', 'stroke', 'caret-color', 'accent-color'];
+    colorProperties.forEach(prop => {
+      // Match rgb(), rgba(), hsl(), hsla() functions
+      const rgbRegex = new RegExp(`(${prop}\\s*:\\s*)rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)`, 'gi');
+      const rgbaRegex = new RegExp(`(${prop}\\s*:\\s*)rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)`, 'gi');
+      const hslRegex = new RegExp(`(${prop}\\s*:\\s*)hsl\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%)\\)`, 'gi');
+      const hslaRegex = new RegExp(`(${prop}\\s*:\\s*)hsla\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%),\\s*[\\d.]+\\)`, 'gi');
+
+      // Convert rgb to rgba with opacity
+      modifiedDeclaration = modifiedDeclaration.replace(rgbRegex, `$1rgba($2, $3, $4, ${alphaValue})`);
+
+      // Update existing rgba opacity
+      modifiedDeclaration = modifiedDeclaration.replace(rgbaRegex, `$1rgba($2, $3, $4, ${alphaValue})`);
+
+      // Convert hsl to hsla with opacity
+      modifiedDeclaration = modifiedDeclaration.replace(hslRegex, `$1hsla($2, $3, $4, ${alphaValue})`);
+
+      // Update existing hsla opacity
+      modifiedDeclaration = modifiedDeclaration.replace(hslaRegex, `$1hsla($2, $3, $4, ${alphaValue})`);
+
+      // Handle hex colors
+      const hexRegex = new RegExp(`(${prop}\\s*:\\s*)(#[0-9a-fA-F]{3,6})`, 'gi');
+      modifiedDeclaration = modifiedDeclaration.replace(hexRegex, (match, propPart, hexColor) => {
+        // Convert hex to rgba
+        const hex = hexColor.replace('#', '');
+        let r, g, b;
+        if (hex.length === 3) {
+          r = parseInt(hex[0] + hex[0], 16);
+          g = parseInt(hex[1] + hex[1], 16);
+          b = parseInt(hex[2] + hex[2], 16);
+        } else {
+          r = parseInt(hex.substring(0, 2), 16);
+          g = parseInt(hex.substring(2, 4), 16);
+          b = parseInt(hex.substring(4, 6), 16);
+        }
+        return `${propPart}rgba(${r}, ${g}, ${b}, ${alphaValue})`;
+      });
+    });
+    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
    */
   function tws(classNames, convertToJson) {
     const totalMarker = performanceMonitor.start("tws:total");
@@ -6609,10 +6674,10 @@ var tailwindToStyle = (function (exports) {
       let classes;
       try {
         const parseMarker = performanceMonitor.start("tws:parse");
-        classes = classNames.match(/[\w-\/]+(?:\[[^\]]+\])?/g);
+        classes = classNames.match(/[\w-\/]+(?:\/\d+)?(?:\[[^\]]+\])?/g);
         performanceMonitor.end(parseMarker);
 
-        // Jika tidak ada class yang valid ditemukan
+        // If no valid classes are found
         if (!classes || classes.length === 0) {
           console.warn(`No valid Tailwind classes found in input: "${classNames}"`);
           performanceMonitor.end(totalMarker);
@@ -6627,16 +6692,27 @@ var tailwindToStyle = (function (exports) {
       // Process classes with performance monitoring
       const processMarker = performanceMonitor.start("tws:process");
       let cssResult = classes.map(className => {
-        let result = cssObject[className] || cssObject[className.replace(/(\/)/g, "\\$1")] || cssObject[className.replace(/\./g, "\\.")];
+        // Extract base class name without opacity modifier
+        const baseClassName = className.replace(/\/\d+$/, '');
+        let result = cssObject[baseClassName] || cssObject[baseClassName.replace(/(\/)/g, "\\$1")] || cssObject[baseClassName.replace(/\./g, "\\.")];
         if (result) {
+          // Apply opacity modifier if present
+          if (className.includes('/') && /\/\d+$/.test(className)) {
+            result = processOpacityModifier(className, result);
+          }
           return resolveCssToClearCss(result);
-        } else if (className.includes("[")) {
-          const match = className.match(/\[([^\]]+)\]/);
+        } else if (baseClassName.includes("[")) {
+          const match = baseClassName.match(/\[([^\]]+)\]/);
           if (match) {
             const customValue = match[1];
-            const baseKey = className.split("[")[0];
+            const baseKey = baseClassName.split("[")[0];
             if (cssObject[`${baseKey}custom`]) {
-              return cssObject[`${baseKey}custom`].replace(/custom_value/g, customValue);
+              let customResult = cssObject[`${baseKey}custom`].replace(/custom_value/g, customValue);
+              // Apply opacity modifier to custom values too
+              if (className.includes('/') && /\/\d+$/.test(className)) {
+                customResult = processOpacityModifier(className, customResult);
+              }
+              return customResult;
             }
           }
         }
@@ -6767,9 +6843,12 @@ var tailwindToStyle = (function (exports) {
       media,
       finalSelector
     } = resolveVariants(selector, rawVariants);
-    let declarations = cssObject[pureClassName] || cssObject[pureClassName.replace(/(\/)/g, "\\$1")] || cssObject[pureClassName.replace(/\./g, "\\.")];
-    if (!declarations && pureClassName.includes("[")) {
-      const match = pureClassName.match(/^(.+?)\[(.+)\]$/);
+
+    // Extract base class name without opacity modifier for CSS lookup
+    const baseClassName = pureClassName.replace(/\/\d+$/, '');
+    let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(/(\/)/g, "\\$1")] || cssObject[baseClassName.replace(/\./g, "\\.")];
+    if (!declarations && baseClassName.includes("[")) {
+      const match = baseClassName.match(/^(.+?)\[(.+)\]$/);
       if (match) {
         const [, prefix, dynamicValue] = match;
         const customKey = `${prefix}custom`;
@@ -6780,17 +6859,22 @@ var tailwindToStyle = (function (exports) {
       }
     }
     if (!declarations) {
-      declarations = parseCustomClassWithPatterns(pureClassName);
+      declarations = parseCustomClassWithPatterns(baseClassName);
     }
     if (!declarations) {
       return;
     }
+
+    // Apply opacity modifier if present
+    if (pureClassName.includes('/') && /\/\d+$/.test(pureClassName)) {
+      declarations = processOpacityModifier(pureClassName, declarations);
+    }
     if (isImportant) {
       declarations = declarations.replace(/([^:;]+):([^;]+)(;?)/g, (_, prop, value) => {
         return prop.trim().startsWith("--") ? `${prop}:${value};` : `${prop}:${value.trim()} !important;`;
       });
     }
-    const isSpaceOrDivide = ["space-x-", "-space-x-", "space-y-", "-space-y-", "divide-"].some(prefix => pureClassName.startsWith(prefix));
+    const isSpaceOrDivide = ["space-x-", "-space-x-", "space-y-", "-space-y-", "divide-"].some(prefix => baseClassName.startsWith(prefix));
     const expandedSelector = replaceSelector(finalSelector);
     const targetSelector = isSpaceOrDivide ? `${expandedSelector} > :not([hidden]) ~ :not([hidden])` : expandedSelector;
     if (media) {
@@ -6958,11 +7042,11 @@ var tailwindToStyle = (function (exports) {
   }
 
   /**
-   * Menghasilkan string CSS dari objek style dengan sintaks mirip SCSS
-   * Mendukung nested selectors, state variants, responsive variants, dan @css directives
-   * @param {Object} obj - Objek dengan format style mirip SCSS
-   * @param {Object} [options] - Opsi tambahan, misal { inject: true/false }
-   * @returns {string} String CSS yang dihasilkan
+   * 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] : {};
@@ -7022,7 +7106,7 @@ var tailwindToStyle = (function (exports) {
     }
   }
 
-  // Fungsi hashCode sederhana untuk deduplikasi CSS
+  // Simple hashCode function for CSS deduplication
   function getCssHash(str) {
     let hash = 0,
       i,
@@ -7036,7 +7120,7 @@ var tailwindToStyle = (function (exports) {
     return hash;
   }
 
-  // Enhanced auto-inject CSS dengan performance monitoring
+  // Enhanced auto-inject CSS with performance monitoring
   const injectedCssHashSet = new Set();
   function autoInjectCss(cssString) {
     const marker = performanceMonitor.start("css:inject");
@@ -7068,24 +7152,24 @@ var tailwindToStyle = (function (exports) {
     }
   }
 
-  // Enhanced debounced functions dengan konfigurasi performance monitoring
+  // Enhanced debounced functions with performance monitoring configuration
   /**
-   * Versi debounced dari fungsi tws dengan performance monitoring
-   * @param {string} classNames - String berisi kelas Tailwind yang akan dikonversi
-   * @param {boolean} convertToJson - Jika true, hasil akan menjadi objek JSON, jika false menjadi string CSS
-   * @returns {string|Object} String CSS inline atau objek style JSON
+   * 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
 
   /**
-   * Versi debounced dari fungsi twsx dengan performance monitoring
-   * @param {Object} obj - Objek dengan format style mirip SCSS
-   * @param {Object} [options] - Opsi tambahan
-   * @returns {string} String CSS yang dihasilkan
+   * 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
 
-  // Export performance utilities untuk debugging
+  // Export performance utilities for debugging
   const performanceUtils = {
     getStats() {
       return {