feat: Improve Tailwind class formatting by unifying multi-line expansion logic, adding nesting depth calculation, and removing custom template literal printer.

Author: 1yasa

src/categorizer.ts

@@ -33,6 +33,9 @@ export function categorizeTailwindClasses(
   closingIndent?: string,
   sorter?: (classList: string[]) => string[]
 ): string {
+  // Ensure class names are clean
+  classList = classList.map(c => c.trim()).filter(Boolean)
+
   if (classList.length === 0) {
     return ''
   }
@@ -266,12 +269,12 @@ function formatCategoryWithLineWrapping(
 
   while (remainingGroups.length > 0) {
     let currentLineGroups = [...remainingGroups]
-    let currentLineString = currentLineGroups.map((g) => g.join(' ')).join(' ')
+    let currentLineString = currentLineGroups.map((g) => g.map(c => c.trim()).join(' ')).join(' ')
 
     // If line exceeds printWidth and has more than one group, remove the last group
     while (currentLineString.length > effectivePrintWidth && currentLineGroups.length > 1) {
       currentLineGroups.pop()
-      currentLineString = currentLineGroups.map((g) => g.join(' ')).join(' ')
+      currentLineString = currentLineGroups.map((g) => g.map(c => c.trim()).join(' ')).join(' ')
     }
 
     // Add the line

src/index.ts

@@ -479,7 +479,7 @@ function sortStringLiteral(
     env,
     removeDuplicates,
     collapseWhitespace,
-    column: column ?? node.loc?.start?.column,
+    column: column,
   })
 
   let didChange = result !== node.value
@@ -672,6 +672,38 @@ function canCollapseWhitespaceIn(path: Path<import('@babel/types').Node, any>) {
 //
 // We cross several parsers that share roughly the same shape so things are
 // good enough. The actual AST we should be using is probably estree + ts.
+function getNestingDepth(path: any[]): number {
+  let depth = 0
+  for (const entry of path) {
+    const node = entry.node || entry
+    if (node) {
+      if (
+        node.type === 'JSXElement' || 
+        node.type === 'JSXFragment' ||
+        node.type === 'BlockStatement' ||
+        node.type === 'ObjectExpression' ||
+        node.type === 'ArrayExpression' ||
+        node.type === 'ClassBody' ||
+        node.type === 'SwitchCase' ||
+        node.type === 'TSModuleBlock'
+      ) {
+        depth++
+      } else if (
+        node.type === 'ArrowFunctionExpression' &&
+        node.body.type !== 'BlockStatement'
+      ) {
+        depth++
+      } else if (
+        node.type === 'ConditionalExpression' ||
+        node.type === 'LogicalExpression'
+      ) {
+        depth++
+      }
+    }
+  }
+  return depth
+}
+
 function transformJavaScript(ast: import('@babel/types').Node, { env }: TransformerContext) {
   let { matcher } = env
 
@@ -758,7 +790,7 @@ function transformJavaScript(ast: import('@babel/types').Node, { env }: Transfor
       // Or simply: indent = (depth + 1) * tabWidth.
       // getNestingDepth includes the JSXElement itself. So depth is N+1 (if we count 1 for Element).
       // If we use base depth of JSXElement, then attribute is +1 level deep.
-      const depth = getNestingDepth(path) + 1
+      const depth = getNestingDepth(path)
 
       if (isStringLiteral(node.value)) {
         sortStringLiteral(node.value, { env, column: depth })
@@ -1197,116 +1229,6 @@ export const printers: Record<string, Printer> = (function () {
     printers['svelte-ast'] = printer
   }
 
-  // Helper function to traverse and modify Prettier Doc structure
-  function traverseDoc(doc: any, callback: (doc: any, parent: any, key: string | number) => any): any {
-    if (!doc || typeof doc !== 'object') {
-      return doc
-    }
-
-    // Arrays in Doc (like concat)
-    if (Array.isArray(doc)) {
-      return doc.map((item, index) => {
-        const modified = callback(item, doc, index)
-        return modified !== undefined ? modified : traverseDoc(item, callback)
-      })
-    }
-
-    // Objects in Doc
-    const result: any = {}
-    for (const key in doc) {
-      if (doc.hasOwnProperty(key)) {
-        const modified = callback(doc[key], doc, key)
-        result[key] = modified !== undefined ? modified : traverseDoc(doc[key], callback)
-      }
-    }
-    return result
-  }
-
-  // Add estree printer for JSX/TSX template literal formatting
-  // estree is the printer used by babel and typescript parsers
-  if (base.printers['estree']) {
-    let original = base.printers['estree']
-    let printer = { ...original }
-
-    // Intercept print to handle template literals in className
-    const originalPrint = original.print
-    printer.print = function(path: any, options: any, print: any) {
-      const node = path.getValue()
-      
-      // Check if this is a className attribute with template literal
-      if (node.type === 'JSXAttribute' &&
-          node.name?.name === 'className' &&
-          node.value?.type === 'JSXExpressionContainer' &&
-          node.value.expression?.type === 'TemplateLiteral' &&
-          options.useTailwindFormat) {
-        
-        // Print the attribute normally first
-        let result = originalPrint.call(this, path, options, print)
-        
-        // Modify the Doc to add newline before closing backtick
-        // In the Doc structure, the backtick is a standalone string "`"
-        // We need to find its parent array and insert a hardline before it
-        let backtickCount = 0  // Count backticks: first is opening, second is closing
-        
-        function modifyDoc(doc: any, parent: any, key: string | number): any {
-          // If this is an array, check if it contains the closing backtick
-          if (Array.isArray(doc)) {
-            for (let i = 0; i < doc.length; i++) {
-              // Look for backtick strings
-              if (doc[i] === '`') {
-                backtickCount++
-                
-                // Only modify the second backtick (closing one)
-                if (backtickCount === 2 && i >= 1 && typeof doc[i-1] !== 'undefined') {
-                  
-                  // Calculate indent (one level less than classes)
-                  const tabWidth = options.tabWidth || 2
-                  const baseIndent = options.useTabs ? '\t' : ' '.repeat(tabWidth)
-                  const closingIndent = baseIndent.repeat(3) // 3 levels for className backtick
-                  
-                  // Insert hardline and indent before the backtick
-                  doc.splice(i, 0, 
-                    { type: 'line', hard: true, literal: true },
-                    { type: 'break-parent' },
-                    closingIndent
-                  )
-                  
-                  return doc
-                }
-              }
-              
-              // Recursively modify nested structures
-              const modified = modifyDoc(doc[i], doc, i)
-              if (modified !== undefined) {
-                doc[i] = modified
-              }
-            }
-          } else if (typeof doc === 'object' && doc !== null) {
-            // Recursively modify object properties
-            for (const key in doc) {
-              if (doc.hasOwnProperty(key)) {
-                const modified = modifyDoc(doc[key], doc, key)
-                if (modified !== undefined) {
-                  doc[key] = modified
-                }
-              }
-            }
-          }
-          
-          return undefined
-        }
-        
-        modifyDoc(result, null, 0)
-        
-        return result
-      }
-      
-      return originalPrint.call(this, path, options, print)
-    }
-
-    printers['estree'] = printer
-  }
-
   return printers
 })()
 

src/sorting.ts

@@ -49,73 +49,21 @@ export function sortClasses(
 
   // When useTailwindFormat is enabled, use category-based formatting
   if (env.options.useTailwindFormat) {
-    let parts = classStr.split(/([\t\r\f\n ]+)/)
-    let classes = parts.filter((_, i) => i % 2 === 0).filter(Boolean)
+    const originalHasNewline = classStr.includes('\n')
+    const tabWidth = env.options.tabWidth || 2
+    const useTabs = env.options.useTabs || false
+    
+    // Collapse all whitespace to get a clean list of classes
+    const classes = classStr.split(/[\s\t\n\r]+/).map(c => c.trim()).filter(Boolean)
 
     if (classes.length === 0) {
       return classStr
     }
 
-    const tabWidth = env.options.tabWidth || 2
-    const useTabs = env.options.useTabs || false
-    const printWidth = env.options.printWidth || 80
+    // Determine if it should be multi-line
+    const shouldExpand = originalHasNewline || classes.length >= 5
 
-    // Check if the className already has newlines (multi-line)
-    const hasNewline = classStr.includes('\n')
-    
-    // For single-line className, check if it should be expanded to multi-line
-    // Expand if there are 5+ classes (enough to benefit from categorization)
-    if (!hasNewline) {
-      // For single-line string, only expand if 5+ classes
-      if (classes.length >= 5) {
-        // Calculate indentation based on column if available
-        let indent: string
-        let closingIndent: string | undefined
-
-        if (column !== undefined && column >= 0) {
-          const level = column
-          if (useTabs) {
-            indent = '\t'.repeat(level + 1)
-            closingIndent = useClosingIndent ? '\t'.repeat(level) : undefined
-          } else {
-            indent = ' '.repeat((level + 1) * tabWidth)
-            closingIndent = useClosingIndent ? ' '.repeat(level * tabWidth) : undefined
-          }
-        } else {
-          const baseIndent = useTabs ? '\t' : ' '.repeat(tabWidth)
-          indent = baseIndent.repeat(4) // Default fallback
-          closingIndent = useClosingIndent ? baseIndent.repeat(3) : undefined
-        }
-        
-        // Extract custom categories and format
-        let customCategories: Record<string, string> | undefined
-        const categoriesPath = env.options.useTailwindFormatCategories
-        
-        if (categoriesPath && typeof categoriesPath === 'string') {
-          try {
-            const fs = require('fs')
-            const path = require('path')
-            const resolvedPath = path.isAbsolute(categoriesPath) 
-              ? categoriesPath 
-              : path.resolve(process.cwd(), categoriesPath)
-            const fileContent = fs.readFileSync(resolvedPath, 'utf-8')
-            customCategories = JSON.parse(fileContent)
-          } catch (e) {
-            console.warn(`Failed to load custom categories from ${categoriesPath}:`, e)
-          }
-        }
-
-        return categorizeTailwindClasses(
-          classes,
-          env,
-          indent,
-          customCategories,
-          tabWidth,
-          closingIndent
-        )
-      }
-    } else {
-      // Already multi-line - AWLAYS force logical indentation if column is available
+    if (shouldExpand) {
       let indent: string
       let closingIndent: string | undefined
 
@@ -129,25 +77,12 @@ export function sortClasses(
           closingIndent = useClosingIndent ? ' '.repeat(level * tabWidth) : undefined
         }
       } else {
-        // Fallback to extraction ONLY if column is missing (e.g. non-JavaScript contexts)
-        const indentMatch = classStr.match(/\n([ \t]+)/)
-        if (indentMatch) {
-          indent = indentMatch[1]
-          if (useClosingIndent) {
-            if (indent.includes('\t')) {
-              closingIndent = indent.length > 1 ? indent.slice(0, -1) : ''
-            } else {
-              closingIndent = indent.length > tabWidth ? indent.slice(0, -tabWidth) : ''
-            }
-          }
-        } else {
-          const baseIndent = useTabs ? '\t' : ' '.repeat(tabWidth)
-          indent = baseIndent.repeat(4)
-          closingIndent = useClosingIndent ? baseIndent.repeat(3) : undefined
-        }
+        const baseIndent = useTabs ? '\t' : ' '.repeat(tabWidth)
+        indent = baseIndent.repeat(4) // Fallback
+        closingIndent = useClosingIndent ? baseIndent.repeat(3) : undefined
       }
 
-      // Extract custom categories if provided
+      // Extract custom categories
       let customCategories: Record<string, string> | undefined
       const categoriesPath = env.options.useTailwindFormatCategories
 
@@ -165,7 +100,6 @@ export function sortClasses(
         }
       }
 
-      // Categorize classes and return formatted string with indentation
       return categorizeTailwindClasses(
         classes,
         env,
@@ -174,6 +108,9 @@ export function sortClasses(
         tabWidth,
         closingIndent
       )
+    } else {
+      // Small single-line class list - use the clean collapsed version for subsequent sorting
+      classStr = classes.join(' ')
     }
   }
 

tests/categories/complex-jsx/complex-jsx.expected.tsx

@@ -20,27 +20,27 @@ const Index = (props: IProps) => {
 	return (
 		<div
 			className='
-						flex flex-col
-						items-center justify-center
-						w-screen h-screen
-						gap-4
-					'
+					flex flex-col
+					items-center justify-center
+					w-screen h-screen
+					gap-4
+				'
 		>
 			<AirplaneTiltIcon className='size-20'></AirplaneTiltIcon>
 			<span>Permissions required</span>
 			<div className='flex flex-col gap-3'>
 				{keys.map((item) => (
 					<button
 						className='
-									relative
-									flex
-									items-center justify-center
-									w-72 h-10
-									px-4
-									rounded-3xl
-									bg-std-100
-									clickable capitalize
-								'
+								relative
+								flex
+								items-center justify-center
+								w-72 h-10
+								px-4
+								rounded-3xl
+								bg-std-100
+								clickable capitalize
+							'
 						key={item}
 						onClick={() => onItem(item)}
 					>

tests/categories/custom-categories/custom-categories.expected.tsx

@@ -2,12 +2,12 @@ function Component() {
       return (
             <div
                   className="
-                                    custom-btn
-                                    primary-color
-                                    large-size
-                                    hover-effect shadow-md
-                                    rounded-lg p-4 m-2
-                              "
+                              custom-btn
+                              primary-color
+                              large-size
+                              hover-effect shadow-md
+                              rounded-lg p-4 m-2
+                        "
             >
                   Custom Categories Content
             </div>