tailwind-to-style 2.7.7 → 2.8.0

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.7.7
+ * tailwind-to-style v2.8.0
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -6401,10 +6401,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 = {};
@@ -6682,11 +6682,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+)$/);
@@ -6747,11 +6747,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");
@@ -6782,11 +6782,29 @@ function tws(classNames, convertToJson) {
     const processMarker = performanceMonitor.start("tws:process");
     let cssResult = classes.map(className => {
       // 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, "\\.")];
+      // Only remove /digits if it's an opacity modifier (not a fraction like w-2/3)
+      // Opacity modifiers are typically /0-100, fractions are /2, /3, /4, /5, /6, /12
+      const opacityMatch = className.match(/\/(\d+)$/);
+      let baseClassName = className;
+      let hasOpacityModifier = false;
+      if (opacityMatch) {
+        const opacityValue = parseInt(opacityMatch[1], 10);
+        // If it's a valid opacity value (0-100), treat it as opacity modifier
+        if (opacityValue >= 0 && opacityValue <= 100) {
+          // Check if this could be a fraction (e.g., w-2/3, h-1/2)
+          // Fractions typically have denominators of 2, 3, 4, 5, 6, 12
+          const fractionDenominators = [2, 3, 4, 5, 6, 12];
+          const couldBeFraction = fractionDenominators.includes(opacityValue) && (className.startsWith('w-') || className.startsWith('h-') || className.startsWith('max-w-') || className.startsWith('max-h-') || className.startsWith('min-w-') || className.startsWith('min-h-'));
+          if (!couldBeFraction) {
+            baseClassName = className.replace(/\/\d+$/, "");
+            hasOpacityModifier = true;
+          }
+        }
+      }
+      let result = cssObject[baseClassName] || cssObject[baseClassName.replace(/\//g, "\\/")] || cssObject[baseClassName.replace(/\./g, "\\.")];
       if (result) {
         // Apply opacity modifier if present
-        if (className.includes("/") && /\/\d+$/.test(className)) {
+        if (hasOpacityModifier && className.includes("/") && /\/\d+$/.test(className)) {
           result = processOpacityModifier(className, result);
         }
         return resolveCssToClearCss(result);
@@ -6798,7 +6816,7 @@ function tws(classNames, convertToJson) {
           if (cssObject[`${baseKey}custom`]) {
             let customResult = cssObject[`${baseKey}custom`].replace(/custom_value/g, customValue);
             // Apply opacity modifier to custom values too
-            if (className.includes("/") && /\/\d+$/.test(className)) {
+            if (hasOpacityModifier && className.includes("/") && /\/\d+$/.test(className)) {
               customResult = processOpacityModifier(className, customResult);
             }
             return customResult;
@@ -6934,7 +6952,23 @@ function processClass(cls, selector, styles) {
   } = resolveVariants(selector, rawVariants);
 
   // Extract base class name without opacity modifier for CSS lookup
-  const baseClassName = pureClassName.replace(/\/\d+$/, "");
+  // Only remove /digits if it's an opacity modifier (not a fraction like w-2/3)
+  const opacityMatch = pureClassName.match(/\/(\d+)$/);
+  let baseClassName = pureClassName;
+  let hasOpacityModifier = false;
+  if (opacityMatch) {
+    const opacityValue = parseInt(opacityMatch[1], 10);
+    // If it's a valid opacity value (0-100), treat it as opacity modifier
+    if (opacityValue >= 0 && opacityValue <= 100) {
+      // Check if this could be a fraction (e.g., w-2/3, h-1/2)
+      const fractionDenominators = [2, 3, 4, 5, 6, 12];
+      const couldBeFraction = fractionDenominators.includes(opacityValue) && (pureClassName.startsWith('w-') || pureClassName.startsWith('h-') || pureClassName.startsWith('max-w-') || pureClassName.startsWith('max-h-') || pureClassName.startsWith('min-w-') || pureClassName.startsWith('min-h-'));
+      if (!couldBeFraction) {
+        baseClassName = pureClassName.replace(/\/\d+$/, "");
+        hasOpacityModifier = true;
+      }
+    }
+  }
   let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(/(\/)/g, "\\$1")] || cssObject[baseClassName.replace(/\./g, "\\.")];
   if (!declarations && baseClassName.includes("[")) {
     const match = baseClassName.match(/^(.+?)\[(.+)\]$/);
@@ -6955,7 +6989,7 @@ function processClass(cls, selector, styles) {
   }
 
   // Apply opacity modifier if present
-  if (pureClassName.includes("/") && /\/\d+$/.test(pureClassName)) {
+  if (hasOpacityModifier && pureClassName.includes("/") && /\/\d+$/.test(pureClassName)) {
     declarations = processOpacityModifier(pureClassName, declarations);
   }
   if (isImportant) {
@@ -7130,12 +7164,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] : {};
@@ -7242,19 +7276,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.7.7
+ * tailwind-to-style v2.8.0
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -6397,10 +6397,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 = {};
@@ -6678,11 +6678,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+)$/);
@@ -6743,11 +6743,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");
@@ -6778,11 +6778,29 @@ function tws(classNames, convertToJson) {
     const processMarker = performanceMonitor.start("tws:process");
     let cssResult = classes.map(className => {
       // 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, "\\.")];
+      // Only remove /digits if it's an opacity modifier (not a fraction like w-2/3)
+      // Opacity modifiers are typically /0-100, fractions are /2, /3, /4, /5, /6, /12
+      const opacityMatch = className.match(/\/(\d+)$/);
+      let baseClassName = className;
+      let hasOpacityModifier = false;
+      if (opacityMatch) {
+        const opacityValue = parseInt(opacityMatch[1], 10);
+        // If it's a valid opacity value (0-100), treat it as opacity modifier
+        if (opacityValue >= 0 && opacityValue <= 100) {
+          // Check if this could be a fraction (e.g., w-2/3, h-1/2)
+          // Fractions typically have denominators of 2, 3, 4, 5, 6, 12
+          const fractionDenominators = [2, 3, 4, 5, 6, 12];
+          const couldBeFraction = fractionDenominators.includes(opacityValue) && (className.startsWith('w-') || className.startsWith('h-') || className.startsWith('max-w-') || className.startsWith('max-h-') || className.startsWith('min-w-') || className.startsWith('min-h-'));
+          if (!couldBeFraction) {
+            baseClassName = className.replace(/\/\d+$/, "");
+            hasOpacityModifier = true;
+          }
+        }
+      }
+      let result = cssObject[baseClassName] || cssObject[baseClassName.replace(/\//g, "\\/")] || cssObject[baseClassName.replace(/\./g, "\\.")];
       if (result) {
         // Apply opacity modifier if present
-        if (className.includes("/") && /\/\d+$/.test(className)) {
+        if (hasOpacityModifier && className.includes("/") && /\/\d+$/.test(className)) {
           result = processOpacityModifier(className, result);
         }
         return resolveCssToClearCss(result);
@@ -6794,7 +6812,7 @@ function tws(classNames, convertToJson) {
           if (cssObject[`${baseKey}custom`]) {
             let customResult = cssObject[`${baseKey}custom`].replace(/custom_value/g, customValue);
             // Apply opacity modifier to custom values too
-            if (className.includes("/") && /\/\d+$/.test(className)) {
+            if (hasOpacityModifier && className.includes("/") && /\/\d+$/.test(className)) {
               customResult = processOpacityModifier(className, customResult);
             }
             return customResult;
@@ -6930,7 +6948,23 @@ function processClass(cls, selector, styles) {
   } = resolveVariants(selector, rawVariants);
 
   // Extract base class name without opacity modifier for CSS lookup
-  const baseClassName = pureClassName.replace(/\/\d+$/, "");
+  // Only remove /digits if it's an opacity modifier (not a fraction like w-2/3)
+  const opacityMatch = pureClassName.match(/\/(\d+)$/);
+  let baseClassName = pureClassName;
+  let hasOpacityModifier = false;
+  if (opacityMatch) {
+    const opacityValue = parseInt(opacityMatch[1], 10);
+    // If it's a valid opacity value (0-100), treat it as opacity modifier
+    if (opacityValue >= 0 && opacityValue <= 100) {
+      // Check if this could be a fraction (e.g., w-2/3, h-1/2)
+      const fractionDenominators = [2, 3, 4, 5, 6, 12];
+      const couldBeFraction = fractionDenominators.includes(opacityValue) && (pureClassName.startsWith('w-') || pureClassName.startsWith('h-') || pureClassName.startsWith('max-w-') || pureClassName.startsWith('max-h-') || pureClassName.startsWith('min-w-') || pureClassName.startsWith('min-h-'));
+      if (!couldBeFraction) {
+        baseClassName = pureClassName.replace(/\/\d+$/, "");
+        hasOpacityModifier = true;
+      }
+    }
+  }
   let declarations = cssObject[baseClassName] || cssObject[baseClassName.replace(/(\/)/g, "\\$1")] || cssObject[baseClassName.replace(/\./g, "\\.")];
   if (!declarations && baseClassName.includes("[")) {
     const match = baseClassName.match(/^(.+?)\[(.+)\]$/);
@@ -6951,7 +6985,7 @@ function processClass(cls, selector, styles) {
   }
 
   // Apply opacity modifier if present
-  if (pureClassName.includes("/") && /\/\d+$/.test(pureClassName)) {
+  if (hasOpacityModifier && pureClassName.includes("/") && /\/\d+$/.test(pureClassName)) {
     declarations = processOpacityModifier(pureClassName, declarations);
   }
   if (isImportant) {
@@ -7126,12 +7160,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] : {};
@@ -7238,19 +7272,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