Fix Svelte class sorting with prettier-plugin-svelte v4

package.json

@@ -75,7 +75,7 @@
     "prettier-plugin-organize-attributes": "^1.0.0",
     "prettier-plugin-organize-imports": "^4.2.0",
     "prettier-plugin-sort-imports": "^1.8.8",
-    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-svelte": "^4.0.1",
     "pug-lexer": "^5.0.1",
     "svelte": "^5.38.2",
     "tailwindcss-v3": "npm:tailwindcss@^3.4.18",

src/index.ts

@@ -945,14 +945,16 @@ function transformSvelte(ast: any, env: TransformerEnv) {
       continue
     }
 
-    for (let i = 0; i < attr.value.length; i++) {
-      let value = attr.value[i]
+    let values = getSvelteAttributeValues(attr)
+
+    for (let i = 0; i < values.length; i++) {
+      let value = values[i]
       if (value.type === 'Text') {
         let same = value.raw === value.data
         value.raw = sortClasses(value.raw, {
           env,
           ignoreFirst: i > 0 && !/^\s/.test(value.raw),
-          ignoreLast: i < attr.value.length - 1 && !/\s$/.test(value.raw),
+          ignoreLast: i < values.length - 1 && !/\s$/.test(value.raw),
           removeDuplicates: true,
           collapseWhitespace: false,
         })
@@ -961,11 +963,11 @@ function transformSvelte(ast: any, env: TransformerEnv) {
           : sortClasses(value.data, {
               env,
               ignoreFirst: i > 0 && !/^\s/.test(value.data),
-              ignoreLast: i < attr.value.length - 1 && !/\s$/.test(value.data),
+              ignoreLast: i < values.length - 1 && !/\s$/.test(value.data),
               removeDuplicates: true,
               collapseWhitespace: false,
             })
-      } else if (value.type === 'MustacheTag') {
+      } else if (value.type === 'MustacheTag' || value.type === 'ExpressionTag') {
         visit(value.expression, {
           Literal(node) {
             if (isStringLiteral(node)) {
@@ -1010,27 +1012,46 @@ function transformSvelte(ast: any, env: TransformerEnv) {
     }
   }
 
-  for (let child of ast.children ?? []) {
+  for (let child of getSvelteChildNodes(ast)) {
     transformSvelte(child, env)
   }
+}
 
-  if (ast.type === 'IfBlock') {
-    for (let child of ast.else?.children ?? []) {
-      transformSvelte(child, env)
-    }
-  }
-
-  if (ast.type === 'AwaitBlock') {
-    let nodes = [ast.pending, ast.then, ast.catch]
+function getSvelteAttributeValues(attr: any) {
+  if (Array.isArray(attr.value)) return attr.value
+  if (attr.value && typeof attr.value === 'object') return [attr.value]
+  return []
+}
 
-    for (let child of nodes) {
-      transformSvelte(child, env)
-    }
+function getSvelteChildNodes(node: any) {
+  let children = []
+
+  for (let key of [
+    'children',
+    'nodes',
+    'fragment',
+    'html',
+    'else',
+    'consequent',
+    'alternate',
+    'body',
+    'fallback',
+    'pending',
+    'then',
+    'catch',
+  ]) {
+    children.push(...getSvelteNodes(node[key]))
   }
 
-  if (ast.html) {
-    transformSvelte(ast.html, env)
-  }
+  return children
+}
+
+function getSvelteNodes(value: any) {
+  if (Array.isArray(value)) return value.filter((node) => node?.type)
+  if (Array.isArray(value?.nodes)) return value.nodes
+  if (Array.isArray(value?.children)) return value.children
+  if (value?.type) return [value]
+  return []
 }
 
 export { options } from './options.js'

tests/plugins.test.ts

@@ -396,6 +396,7 @@ import Custom from '../components/Custom.astro'
   },
   {
     plugins: ['prettier-plugin-svelte'],
+    options: { tailwindFunctions: ['cn'] },
     tests: {
       svelte: [
         t`<div class="${yes}" />`,
@@ -409,6 +410,10 @@ import Custom from '../components/Custom.astro'
         t`<div class={\`${yes}\`} />`,
         t`<div class={\`${yes} \${'${yes}' + \`${yes}\`} ${yes}\`} />`,
         t`<div class={\`${no}\${someVar}${no}\`} />`,
+        [
+          `<Component class={cn('bottom-0 sticky transition-all justify-end', { 'bg-red-500': active })} />`,
+          `<Component class={cn('sticky bottom-0 justify-end transition-all', { 'bg-red-500': active })} />`,
+        ],
         t`<div class="${yes} {\`${yes}\`}" />`,
         t`<div let:class={clazz} class="${yes} {clazz}" />`,
         t`{#if something} <div class="${yes}" /> {:else} <div class="${yes}" /> {/if}`,