Sort template literals in Angular expressions (#377)

* Sort template literals in Angular expressions

Prettier fixed their parser bug in v3.6 so we just need to check for template literals

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 - Add support for OXC + Hermes Prettier plugins ([#376](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/376))
+- Sort template literals in Angular expressions ([#377](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/377))
 
 ## [0.6.13] - 2025-06-19
 

src/index.ts

@@ -141,6 +141,44 @@ function transformDynamicAngularAttribute(attr: any, env: TransformerEnv) {
         }),
       })
     },
+
+    TemplateLiteral(node, path) {
+      if (!node.quasis.length) return
+
+      let concat = path.find((entry) => {
+        return (
+          entry.parent &&
+          entry.parent.type === 'BinaryExpression' &&
+          entry.parent.operator === '+'
+        )
+      })
+
+      for (let i = 0; i < node.quasis.length; i++) {
+        let quasi = node.quasis[i]
+
+        changes.push({
+          start: quasi.start,
+          end: quasi.end,
+          before: quasi.value.raw,
+          after: sortClasses(quasi.value.raw, {
+            env,
+
+            // Is not the first "item" and does not start with a space
+            ignoreFirst: i > 0 && !/^\s/.test(quasi.value.raw),
+
+            // Is between two expressions
+            // And does not end with a space
+            ignoreLast:
+              i < node.expressions.length && !/\s$/.test(quasi.value.raw),
+
+            collapseWhitespace: {
+              start: concat?.key !== 'right' && i === 0,
+              end: concat?.key !== 'left' && i >= node.expressions.length,
+            },
+          }),
+        })
+      }
+    },
   })
 
   attr.value = spliceChangesIntoString(attr.value, changes)

tests/tests.ts

@@ -238,6 +238,9 @@ export let tests: Record<string, TestEntry[]> = {
 
     // TODO: Enable this test — it causes console noise but not a failure
     // t`<div [ngClass]="{ '${no}': foo && definitely&a:syntax*error }" class="${yes}"></div>`,
+
+    // TODO: Enable test once we can run all tests against Prettier v3.6
+    // t`<div [ngClass]="\`${yes}\`"></div>`,
   ],
   css: [...css, t`@apply ${yes} !important;`],
   scss: [