Skip to content

Angular 19 TW4: error when formatting html containing backticks #368

@alexciesielski

Description

@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)

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions