diff --git a/CHANGELOG.md b/CHANGELOG.md index 15bbc1d..5369cb4 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/index.ts b/src/index.ts index bd7fc18..7c309b5 100644 --- a/src/index.ts +++ b/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) diff --git a/tests/tests.ts b/tests/tests.ts index c2813de..f324b9d 100644 --- a/tests/tests.ts +++ b/tests/tests.ts @@ -238,6 +238,9 @@ export let tests: Record = { // TODO: Enable this test — it causes console noise but not a failure // t`
`, + + // TODO: Enable test once we can run all tests against Prettier v3.6 + // t`
`, ], css: [...css, t`@apply ${yes} !important;`], scss: [