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.

Sign up for GitHub

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

Jump to bottom

Extra whitespace in class attributes should be removed. #339

Closed
ptrxyz opened this issue Jan 28, 2023 · 1 comment · Fixed by #356
Closed

Extra whitespace in class attributes should be removed. #339

ptrxyz opened this issue Jan 28, 2023 · 1 comment · Fixed by #356

Comments

@ptrxyz
Copy link

ptrxyz commented Jan 28, 2023

Consider the following piece of HTML:

<div class="something        else"></div>

If this code is inside an .svelte file, prettier does not remove the extra whitespace in the class attribute, however if it's inside a .html file, prettier will indeed remove them (in accordance to prettier's docs).

To reproduce, follow this minimal example:

  • Create Svelte Skeleton project:
pnpm create svelte@latest demo
cd demo
pnpm i
  • edit src/app.html to contain the following line somewhere inside the <body> tag:
<div class="something        else"></div>
  • edit src/routes/+page.svelte to contain the same line somewhere.
  • run: pnpm run format
  • check app.html and find the class attribute value formatted, no extra whitespaces.
  • check src/routes/+page.svelte and find the class attribute value NOT formatted. Extra whitespaces everywhere.

I think the formatting should be consistent, no matter if the class attribute is inside a .svelte file or inside a .html file.
@ptrxyz
Copy link
Author

ptrxyz commented Feb 19, 2023 •
edited
Loading

As far as I can tell, in

prettier-plugin-svelte/src/lib/elements.ts

Lines 61 to 65 in 3a353ab

export const formattableAttributes: string[] = [
// None at the moment
// Prettier HTML does not format attributes at all
// and to be consistent we leave this array empty for now
];
formatting of attributes is intentionally turned off to be consistent with prettier's default behavior. This is not the case (anymore) with latest prettier:

Without any configuration, prettier turns this:

<html>
    <body>
        <div class="some     thing"></div>
    </body>
</html>

into this:

<html>
    <body>
        <div class="some thing"></div>
    </body>
</html>

For that reason, I would advocate to stay consistent with prettier and turn on class formatting by simply adding "class" to formattableAttributes.

ptrxyz added a commit to ptrxyz/prettier-plugin-svelte that referenced this issue Mar 18, 2023
@ptrxyz
Fixes sveltejs#339
911ad10
@ptrxyz ptrxyz mentioned this issue Mar 18, 2023
Closed
dummdidumm added a commit to dummdidumm/prettier-plugin-svelte that referenced this issue Mar 22, 2023
@dummdidumm
(feat) trim whitespace in class attributes
f3963ef 
fixes sveltejs#339
@dummdidumm dummdidumm mentioned this issue Mar 22, 2023
Merged
dummdidumm added a commit that referenced this issue Mar 22, 2023
@dummdidumm
(feat) trim whitespace in class attributes (#356)
a94563c 
fixes #339
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

(feat) trim whitespace in class attributes dummdidumm/prettier-plugin-svelte
1 participant
@ptrxyz