tailwind-to-style 2.9.1 → 2.9.2

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.9.1
+ * tailwind-to-style v2.9.2
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -3247,6 +3247,7 @@ var tailwindToStyle = (function (exports) {
       theme = {}
     } = configOptions;
     const prefix = `${globalPrefix}font`;
+    const customPrefix = `${globalPrefix}font-weight`;
     const {
       fontWeight = {}
     } = theme;
@@ -3254,11 +3255,20 @@ var tailwindToStyle = (function (exports) {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(fontWeight, (key, value) => `
+      const cssString = getCssByOptions(fontWeight, (key, value) => {
+        if (value === "custom_value") {
+          return `
+            ${customPrefix}${key} {
+              font-weight: ${value};
+            }
+          `;
+        }
+        return `
           ${prefix}-${key} {
             font-weight: ${value};
           }
-        `);
+        `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
@@ -6222,8 +6232,32 @@ var tailwindToStyle = (function (exports) {
     }
   };
 
+  const fontFamily = {
+    fontCustom: {
+      regex: /^font-\[([^\]]+)\]$/,
+      cssProp: "font-family",
+      formatter: value => {
+        // Decode URL-encoded value first (in case it comes from bracket encoding)
+        const decodedValue = decodeURIComponent(value.replace(/__P__/g, "(").replace(/__C__/g, ")"));
+
+        // Split by comma and process each font
+        const fonts = decodedValue.split(",").map(font => {
+          const trimmedFont = font.trim();
+
+          // If font contains spaces and is not already quoted, add quotes
+          if (trimmedFont.includes(" ") && !trimmedFont.startsWith('"') && !trimmedFont.startsWith("'")) {
+            return `"${trimmedFont}"`;
+          }
+          return trimmedFont;
+        });
+        return fonts.join(", ");
+      }
+    }
+  };
+
   const patterns = {
-    ...transition
+    ...transition,
+    ...fontFamily
   };
 
   const plugins = {
@@ -6400,10 +6434,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 = {};
@@ -6539,7 +6573,7 @@ var tailwindToStyle = (function (exports) {
         media = breakpoints[v];
       } else if (pseudoVariants.has(v)) {
         finalSelector += `:${v}`;
-      } else if (v === 'dark') {
+      } else if (v === "dark") {
         // Special handling for dark variant
         finalSelector = `.dark ${finalSelector}`;
       } else {
@@ -6687,11 +6721,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+)$/);
@@ -6752,11 +6786,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");
@@ -6882,7 +6916,7 @@ var tailwindToStyle = (function (exports) {
   function expandDirectiveGroups(str) {
     return str.replace(/(\w+)\(([^()]+)\)/g, (_, directive, content) => {
       // Special handling for dark mode syntax: dark:(classes)
-      if (directive === 'dark') {
+      if (directive === "dark") {
         return content.trim().split(/\s+/).map(cls => `dark:${cls}`).join(" ");
       }
       return content.trim().split(/\s+/).map(val => {
@@ -7024,7 +7058,7 @@ var tailwindToStyle = (function (exports) {
         const cssDeclarations = Object.entries(nestedVal).map(_ref3 => {
           let [key, value] = _ref3;
           // Ensure CSS values are properly formatted and not processed through Tailwind conversion
-          const cleanValue = typeof value === 'string' ? value.trim() : String(value);
+          const cleanValue = typeof value === "string" ? value.trim() : String(value);
           return `${key}: ${cleanValue};`;
         }).join(" ");
         if (selector in styles) {
@@ -7084,12 +7118,12 @@ var tailwindToStyle = (function (exports) {
       }
 
       // Check if this is a @css object within the current object
-      if (val['@css'] && typeof val['@css'] === 'object') {
+      if (val["@css"] && typeof val["@css"] === "object") {
         // Handle object with @css directive - process the @css part specially
-        const cssDeclarations = Object.entries(val['@css']).map(_ref4 => {
+        const cssDeclarations = Object.entries(val["@css"]).map(_ref4 => {
           let [key, value] = _ref4;
           // Keep CSS values intact without any processing
-          const cleanValue = typeof value === 'string' ? value.trim() : String(value);
+          const cleanValue = typeof value === "string" ? value.trim() : String(value);
           return `${key}: ${cleanValue};`;
         }).join(" ");
         if (selector in styles) {
@@ -7102,7 +7136,7 @@ var tailwindToStyle = (function (exports) {
         const otherProps = {
           ...val
         };
-        delete otherProps['@css'];
+        delete otherProps["@css"];
         if (Object.keys(otherProps).length > 0) {
           processNestedSelectors(otherProps, selector, styles, walk);
         }
@@ -7193,12 +7227,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] : {};
@@ -7340,19 +7374,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.9.1
+ * tailwind-to-style v2.9.2
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -3248,6 +3248,7 @@ function generator$1C() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}font`;
+  const customPrefix = `${globalPrefix}font-weight`;
   const {
     fontWeight = {}
   } = theme;
@@ -3255,11 +3256,20 @@ function generator$1C() {
     let {
       getCssByOptions
     } = _ref;
-    const cssString = getCssByOptions(fontWeight, (key, value) => `
+    const cssString = getCssByOptions(fontWeight, (key, value) => {
+      if (value === "custom_value") {
+        return `
+            ${customPrefix}${key} {
+              font-weight: ${value};
+            }
+          `;
+      }
+      return `
           ${prefix}-${key} {
             font-weight: ${value};
           }
-        `);
+        `;
+    });
     return cssString;
   }, configOptions);
   return responsiveCssString;
@@ -6223,8 +6233,32 @@ const transition = {
   }
 };
 
+const fontFamily = {
+  fontCustom: {
+    regex: /^font-\[([^\]]+)\]$/,
+    cssProp: "font-family",
+    formatter: value => {
+      // Decode URL-encoded value first (in case it comes from bracket encoding)
+      const decodedValue = decodeURIComponent(value.replace(/__P__/g, "(").replace(/__C__/g, ")"));
+
+      // Split by comma and process each font
+      const fonts = decodedValue.split(",").map(font => {
+        const trimmedFont = font.trim();
+
+        // If font contains spaces and is not already quoted, add quotes
+        if (trimmedFont.includes(" ") && !trimmedFont.startsWith('"') && !trimmedFont.startsWith("'")) {
+          return `"${trimmedFont}"`;
+        }
+        return trimmedFont;
+      });
+      return fonts.join(", ");
+    }
+  }
+};
+
 const patterns = {
-  ...transition
+  ...transition,
+  ...fontFamily
 };
 
 const plugins = {
@@ -6401,10 +6435,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 = {};
@@ -6540,7 +6574,7 @@ function resolveVariants(selector, variants) {
       media = breakpoints[v];
     } else if (pseudoVariants.has(v)) {
       finalSelector += `:${v}`;
-    } else if (v === 'dark') {
+    } else if (v === "dark") {
       // Special handling for dark variant
       finalSelector = `.dark ${finalSelector}`;
     } else {
@@ -6688,11 +6722,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+)$/);
@@ -6753,11 +6787,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");
@@ -6883,7 +6917,7 @@ const performanceMonitor = {
 function expandDirectiveGroups(str) {
   return str.replace(/(\w+)\(([^()]+)\)/g, (_, directive, content) => {
     // Special handling for dark mode syntax: dark:(classes)
-    if (directive === 'dark') {
+    if (directive === "dark") {
       return content.trim().split(/\s+/).map(cls => `dark:${cls}`).join(" ");
     }
     return content.trim().split(/\s+/).map(val => {
@@ -7025,7 +7059,7 @@ function processNestedSelectors(nested, selector, styles, walk) {
       const cssDeclarations = Object.entries(nestedVal).map(_ref3 => {
         let [key, value] = _ref3;
         // Ensure CSS values are properly formatted and not processed through Tailwind conversion
-        const cleanValue = typeof value === 'string' ? value.trim() : String(value);
+        const cleanValue = typeof value === "string" ? value.trim() : String(value);
         return `${key}: ${cleanValue};`;
       }).join(" ");
       if (selector in styles) {
@@ -7085,12 +7119,12 @@ function walkStyleTree(selector, val, styles, walk) {
     }
 
     // Check if this is a @css object within the current object
-    if (val['@css'] && typeof val['@css'] === 'object') {
+    if (val["@css"] && typeof val["@css"] === "object") {
       // Handle object with @css directive - process the @css part specially
-      const cssDeclarations = Object.entries(val['@css']).map(_ref4 => {
+      const cssDeclarations = Object.entries(val["@css"]).map(_ref4 => {
         let [key, value] = _ref4;
         // Keep CSS values intact without any processing
-        const cleanValue = typeof value === 'string' ? value.trim() : String(value);
+        const cleanValue = typeof value === "string" ? value.trim() : String(value);
         return `${key}: ${cleanValue};`;
       }).join(" ");
       if (selector in styles) {
@@ -7103,7 +7137,7 @@ function walkStyleTree(selector, val, styles, walk) {
       const otherProps = {
         ...val
       };
-      delete otherProps['@css'];
+      delete otherProps["@css"];
       if (Object.keys(otherProps).length > 0) {
         processNestedSelectors(otherProps, selector, styles, walk);
       }
@@ -7194,12 +7228,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] : {};
@@ -7341,19 +7375,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.9.1
+ * tailwind-to-style v2.9.2
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -3244,6 +3244,7 @@ function generator$1C() {
     theme = {}
   } = configOptions;
   const prefix = `${globalPrefix}font`;
+  const customPrefix = `${globalPrefix}font-weight`;
   const {
     fontWeight = {}
   } = theme;
@@ -3251,11 +3252,20 @@ function generator$1C() {
     let {
       getCssByOptions
     } = _ref;
-    const cssString = getCssByOptions(fontWeight, (key, value) => `
+    const cssString = getCssByOptions(fontWeight, (key, value) => {
+      if (value === "custom_value") {
+        return `
+            ${customPrefix}${key} {
+              font-weight: ${value};
+            }
+          `;
+      }
+      return `
           ${prefix}-${key} {
             font-weight: ${value};
           }
-        `);
+        `;
+    });
     return cssString;
   }, configOptions);
   return responsiveCssString;
@@ -6219,8 +6229,32 @@ const transition = {
   }
 };
 
+const fontFamily = {
+  fontCustom: {
+    regex: /^font-\[([^\]]+)\]$/,
+    cssProp: "font-family",
+    formatter: value => {
+      // Decode URL-encoded value first (in case it comes from bracket encoding)
+      const decodedValue = decodeURIComponent(value.replace(/__P__/g, "(").replace(/__C__/g, ")"));
+
+      // Split by comma and process each font
+      const fonts = decodedValue.split(",").map(font => {
+        const trimmedFont = font.trim();
+
+        // If font contains spaces and is not already quoted, add quotes
+        if (trimmedFont.includes(" ") && !trimmedFont.startsWith('"') && !trimmedFont.startsWith("'")) {
+          return `"${trimmedFont}"`;
+        }
+        return trimmedFont;
+      });
+      return fonts.join(", ");
+    }
+  }
+};
+
 const patterns = {
-  ...transition
+  ...transition,
+  ...fontFamily
 };
 
 const plugins = {
@@ -6397,10 +6431,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 = {};
@@ -6536,7 +6570,7 @@ function resolveVariants(selector, variants) {
       media = breakpoints[v];
     } else if (pseudoVariants.has(v)) {
       finalSelector += `:${v}`;
-    } else if (v === 'dark') {
+    } else if (v === "dark") {
       // Special handling for dark variant
       finalSelector = `.dark ${finalSelector}`;
     } else {
@@ -6684,11 +6718,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+)$/);
@@ -6749,11 +6783,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");
@@ -6879,7 +6913,7 @@ const performanceMonitor = {
 function expandDirectiveGroups(str) {
   return str.replace(/(\w+)\(([^()]+)\)/g, (_, directive, content) => {
     // Special handling for dark mode syntax: dark:(classes)
-    if (directive === 'dark') {
+    if (directive === "dark") {
       return content.trim().split(/\s+/).map(cls => `dark:${cls}`).join(" ");
     }
     return content.trim().split(/\s+/).map(val => {
@@ -7021,7 +7055,7 @@ function processNestedSelectors(nested, selector, styles, walk) {
       const cssDeclarations = Object.entries(nestedVal).map(_ref3 => {
         let [key, value] = _ref3;
         // Ensure CSS values are properly formatted and not processed through Tailwind conversion
-        const cleanValue = typeof value === 'string' ? value.trim() : String(value);
+        const cleanValue = typeof value === "string" ? value.trim() : String(value);
         return `${key}: ${cleanValue};`;
       }).join(" ");
       if (selector in styles) {
@@ -7081,12 +7115,12 @@ function walkStyleTree(selector, val, styles, walk) {
     }
 
     // Check if this is a @css object within the current object
-    if (val['@css'] && typeof val['@css'] === 'object') {
+    if (val["@css"] && typeof val["@css"] === "object") {
       // Handle object with @css directive - process the @css part specially
-      const cssDeclarations = Object.entries(val['@css']).map(_ref4 => {
+      const cssDeclarations = Object.entries(val["@css"]).map(_ref4 => {
         let [key, value] = _ref4;
         // Keep CSS values intact without any processing
-        const cleanValue = typeof value === 'string' ? value.trim() : String(value);
+        const cleanValue = typeof value === "string" ? value.trim() : String(value);
         return `${key}: ${cleanValue};`;
       }).join(" ");
       if (selector in styles) {
@@ -7099,7 +7133,7 @@ function walkStyleTree(selector, val, styles, walk) {
       const otherProps = {
         ...val
       };
-      delete otherProps['@css'];
+      delete otherProps["@css"];
       if (Object.keys(otherProps).length > 0) {
         processNestedSelectors(otherProps, selector, styles, walk);
       }
@@ -7190,12 +7224,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] : {};
@@ -7337,19 +7371,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