Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax errors in Svelte file after formatting, starting with v0.6.0 #303

Open
madisonbullard opened this issue Jul 3, 2024 · 1 comment

Comments

@madisonbullard
Copy link

madisonbullard commented Jul 3, 2024

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

v0.6.5

What version of Tailwind CSS are you using?

v3.4.4

What version of Node.js are you using?

v20.10.0

What package manager are you using?

npm

What operating system are you using?

macOS

Reproduction URL

https://github.com/madisonbullard/prettier-plugin-tailwind-bug

Describe your issue

Beginning with v0.6.0, formatting src/routes/+page.svelte (via npm format or format-on-save) results in syntax errors.

Before formatting

<div
	class={'relative flex items-center rounded-full border border-gray-200 bg-gray-100 text-gray-500 shadow-sm transition-colors ' +
	true
		? `border-yellow-300 bg-yellow-200 text-yellow-700
             hover:border-yellow-200 hover:bg-yellow-100 
             focus:border-yellow-200 focus:bg-yellow-100
             active:border-yellow-50 active:bg-yellow-50`
		: `hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700
			focus:border-gray-100 focus:bg-gray-50 focus:text-gray-700
			active:border-gray-50 active:bg-white active:text-gray-300`}
>
	<button class="flex min-h-5 min-w-5 items-center justify-center rounded-full" aria-label="Menu">
		hi
	</button>
</div>

After formatting

<div
	class={'relative flex items-center rounded-full border border-gray-200 bg-gray-100 text-gray-500 shadow-sm transition-colors ' +
	true
		? `border-yellow-300 bg-yellow-200 text-yellow-700 hover:border-yellow-200 hover:bg-yellow-100 focus:border-yellow-200 focus:bg-yellow-100 active:border-yellow-50 active:bg-yellow-50`
		: `hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700 focus:border-gray-100 focus:bg-gray-50 focus:text-gray-700 active:border-gray-50 active:bg-white active:text-gray-300`}
>
	<button class="flex min-h-5 min-w-5 items}
>
	<button class="flex min-h-5 min-w-5 items-center justify-center rounded-full" aria-label="Menu">
		hi
	</button>
</div>
@GeoGeorgeous
Copy link

Hey!

I'm experiencing a similar issue while using v0.6.5 with Svelte. The problem occurs when formatting whitespace. For some reason, an extra } is added, and the $ symbol for store access is removed, which makes the code incorrect.

Before formatting:

<span class="{`${isHighlighted ? 'text-green-600' : 'text-secondary '} font-semibold  `}}">
  {$store}
</span>

After formatting:

<span class="{`${isHighlighted ? 'text-green-600' : 'text-secondary '} font-semibold `}}}">
  {store}}
</span>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants