Angular 19 TW4: error when formatting html containing backticks

[alexciesielski]

When formatting an Angular template containing the recently introduced backticks/template string functionality running prettier breaks (see stack trace below).

What version of prettier-plugin-tailwindcss are you using?

0.6.11

What version of Tailwind CSS are you using?

4.1.4

What version of Node.js are you using?

22

What package manager are you using?

npm

What operating system are you using?

macOS

Reproduction URL

<div
    [class]="`${item().blocked ? 'bg-surface-200/40' : 'bg-primary-200/40'} flex flex-row items-center justify-between space-y-0 rounded-t-xl border-b px-5 py-4`"
  >
</div>

Describe your issue

prettier-plugin-tailwindcss: Unable to parse angular directive

SyntaxError: Unexpected token Lexer Error: Unexpected character [`]
    at file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier/plugins/angular.mjs:2:27899
    at Ps (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier/plugins/angular.mjs:2:39370)
    at Object.parse (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier/plugins/angular.mjs:2:39684)
    at mse (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:27438)
    at yse (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:27619)
    at md (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:29567)
    at md (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:29612)
    at md (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:29612)
    at Object.parse (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:27200)
    at async parse5 (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier/index.mjs:19983:11)

TypeError: c.parse is not a function
    at mse (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:27438)
    at yse (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:27619)
    at md (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:29567)
    at md (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:29612)
    at md (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:29612)
    at Object.parse (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:27200)
    at async parse5 (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier/index.mjs:19983:11)
    at async coreFormat (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier/index.mjs:20531:25)
    at async formatWithCursor (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier/index.mjs:20743:14)
    at async formatFiles (file:///Users/alexciesielski/Documents/b/test-app/node_modules/prettier/internal/cli.mjs:4213:18)

[thecrypticace]

This is definitely a bug but I'm not sure if it's an upstream one or not. It looks like backticks break expression parsing in the Angular expression parser and the JS expression parser both provided by Prettier.

[alexciesielski]

@thecrypticace should I file a bug with prettier directly?

[thecrypticace]

Sorry, I missed this. I'm doing a bit of testing with Prettier v3.6 today so will take a closer look at this too through some Prettier internals and file a bug if I need to.

[thecrypticace]

Prettier appears to have fixed the bug in v3.6! We still have to add support for template literals there though. I will get to that soon!

[thecrypticace]

I've added support for sorting these in #377. Support requires Prettier v3.6+ because of that parse error bug.

You can test this now if you update to our insiders build (and Prettier to the latest version):

npm install prettier@latest prettier-plugin-tailwindcss@insiders

Might try to get a proper release out with the fix sometime this week.