printWidth ignored for attributes with long text in it

[alexanderniebuhr]

why is the svg path not break down into multiple lines?

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  aria-hidden="true"
  focusable="false"
  role="img"
  class="animate-spin text-5xl dark:text-white"
  width="1em"
  height="1em"
  preserveAspectRatio="xMidYMid meet"
  viewBox="0 0 1024 1024"
  style="transform: rotate(360deg)"
>
  <path
    d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3c22.2 52.4 53.9 99.5 94.3 139.9c40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6c52.4-22.2 99.5-53.9 139.9-94.3c40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9a437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7c26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7c-63.1 26.8-130.2 40.3-199.3 40.3z"
    fill="currentColor"
  />
</svg>

# .prettierrc.yml
svelteSortOrder: options-scripts-markup-styles
svelteStrictMode: false
svelteAllowShorthand: true
svelteBracketNewLine: true
svelteIndentScriptAndStyle: true
printWidth: 80
endOfLine: "lf"
semi: false
useTabs: false
tabWidth: 2

//versions
    "prettier": "^2.2.1",
    "prettier-plugin-svelte": "^2.2.0",

//vscode setting
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },

[dummdidumm]

At the moment, attribute values are not formatted. The problem is that attribute values could be whitespace sensitive, but a definite list where this is defined for all attributes is unknown to me. So even if we would enable that we could only enable it for some attributes, not generally for all. There's a similar open issue in Prettier core for that prettier/prettier#5482

[alexanderniebuhr]

ok. would still be great to have some sort of it. I think (might be wrong) react does wraps attributes of svg

[alexanderniebuhr]

@dummdidumm actually it is actually a bigger bug than i thought,
if i manually wrap the class attribute and have a printWidth of 500, i expect it to get formated back into one line, but it does not do this.

<div
  class="flex flex-col bg-indigo-900
  bg-red-200 text-transparent min-w-100vw min-h-100vh items-center justify-center"  // needs to be formated to above line
  class:disabled={me}
>
  <Widget
    class="bg-harmon flex-col flex bg-green-300  !text-warmGray-100 hover:bg-gray-900"
  />
</div>

[alexanderniebuhr]

@dummdidumm any idea, or any update?. At least to make it not ignore very printWidth, so we can get tags on one line

[dummdidumm]

Attributes are completely ignored, and this will not change soon. This means they will never split into multiple lines if they are too long, nor will they compressed into one line if they are too short for multiple lines.

[felixakiragreen]

this is a bummer. having to reorganize my code for this. 😥

[dummdidumm]

Could you elaborate on why you need to reorganize code due to this? Since string attributes are not formatted in any way, you can just add a line break wherever you want yourself.

[felixakiragreen]

@dummdidumm Here is a short video showing what I mean:

Screen.Recording.2021-05-21.at.00.43.20.mov

You're right, string attributes are not formatted, but object attributes are reformatted onto a single line. Prettier handles this fine for React Prop Object attributes.

At the end of the clip I showed how I moved my css object from being "inline" to declared as a variable, so that I could read it better. This is what I meant by "reorganizing".

Tbh, it's kind of frustrating, I might start digging into the source soon to try and hack a workaround.

[dummdidumm]

This is unrelated to the OP's request and sounds like a bug. The OP's request is about a string-only attribute, you have an object with properties there. Please open another ticket with a reproducible and copy-pasteable code snippet.