Repository: sveltejs/prettier-plugin-svelte (ts)

Issue:
`--svelte-bracket-new-line true` not working correctly (e.g. button and span)
`src/test.svelte`:
```svelte
<button class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </button>
<div class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </div>
<span class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </span>
<p class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </p>
```
<details>
<summary>
<code>yarn prettier --plugin-search-dir=. src/test.svelte --svelte-bracket-new-line false</code> (works fine):
</summary>

```svelte
<button
  class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
  Copy
</button>
<div
  class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
  Copy
</div>
<span
  class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
  Copy
</span>
<p
  class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
  Copy
</p>
```
</details>

`yarn prettier --plugin-search-dir=. src/test.svelte --svelte-bracket-new-line true` (some are on same line):
```svelte
<button
  class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
  Copy
</button>
<div
  class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"
>Copy</div>
<span
  class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
  Copy
</span>
<p
  class="bg-green-500  text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"
>Copy</p>
```

Version:
- prettier-plugin-svelte@2.1.0
- prettier@2.2.1

Config: official template without config


Pull request:
(fix) svelteBracketNewLine fixes
Fixes #194
- Don't group body so start and end both break at the same time if they must
- Fix "should hug start?" logic in opening tag attributes

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca18a73..4b97e4a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # prettier-plugin-svelte changelog
 
+## 2.1.1 (Unreleased)
+
+* Fix `svelteBracketNewLine: true` sometimes not having `>` on a separate line ([#194](https://github.com/sveltejs/prettier-plugin-svelte/issues/194))
+
 ## 2.1.0
 
 * Support Prettier's `htmlWhitespaceSensitivity` setting
diff --git a/src/print/index.ts b/src/print/index.ts
index 56aaef8..1460078 100644
--- a/src/print/index.ts
+++ b/src/print/index.ts
@@ -209,7 +209,6 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
             // which would wrongfully change the other checks about hugging etc done beforehand
             let body: () => Doc;
 
-            let hugContent = false;
             const hugStart = shouldHugStart(node, isSupportedLanguage, options);
             const hugEnd = shouldHugEnd(node, isSupportedLanguage, options);
 
@@ -225,10 +224,8 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                 body = () => printRaw(node, options.originalText);
             } else if (!isSupportedLanguage) {
                 body = () => printRaw(node, options.originalText, true);
-                hugContent = true;
             } else if (isInlineElement(path, options, node) && !isPreTagContent(path)) {
                 body = () => printChildren(path, print, options);
-                hugContent = true;
             } else {
                 body = () => printChildren(path, print, options);
             }
@@ -241,7 +238,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                     groupConcat([
                         possibleThisBinding,
                         ...attributes,
-                        hugContent
+                        hugStart
                             ? ''
                             : options.svelteBracketNewLine && !isPreTagContent(path)
                             ? dedent(softline)
@@ -263,13 +260,17 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
             }
 
             if (hugStart && hugEnd) {
+                const huggedContent = concat([
+                    softline,
+                    groupConcat(['>', body(), `</${node.name}`]),
+                ]);
+                const omitSoftlineBeforeClosingTag =
+                    (isEmpty && options.svelteBracketNewLine) ||
+                    canOmitSoftlineBeforeClosingTag(node, path, options);
                 return groupConcat([
                     ...openingTag,
-                    group(indent(concat([softline, groupConcat(['>', body(), `</${node.name}`])]))),
-                    (isEmpty && options.svelteBracketNewLine) ||
-                    canOmitSoftlineBeforeClosingTag(node, path, options)
-                        ? ''
-                        : softline,
+                    isEmpty ? group(huggedContent) : group(indent(huggedContent)),
+                    omitSoftlineBeforeClosingTag ? '' : softline,
                     '>',
                 ]);
             }
@@ -309,7 +310,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
             if (hugStart) {
                 return groupConcat([
                     ...openingTag,
-                    group(indent(concat([softline, groupConcat(['>', body()])]))),
+                    indent(concat([softline, groupConcat(['>', body()])])),
                     noHugSeparatorEnd,
                     `</${node.name}>`,
                 ]);
@@ -319,11 +320,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                 return groupConcat([
                     ...openingTag,
                     '>',
-                    group(
-                        indent(
-                            concat([noHugSeparatorStart, groupConcat([body(), `</${node.name}`])]),
-                        ),
-                    ),
+                    indent(concat([noHugSeparatorStart, groupConcat([body(), `</${node.name}`])])),
                     canOmitSoftlineBeforeClosingTag(node, path, options) ? '' : softline,
                     '>',
                 ]);
@@ -336,7 +333,8 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
             return groupConcat([
                 ...openingTag,
                 '>',
-                groupConcat([indent(concat([noHugSeparatorStart, body()])), noHugSeparatorEnd]),
+                indent(concat([noHugSeparatorStart, body()])),
+                noHugSeparatorEnd,
                 `</${node.name}>`,
             ]);
         }


Test patch:
diff --git a/test/formatting/samples/attributes-newline/input.html b/test/formatting/samples/attributes-newline/input.html
new file mode 100644
index 0000000..9939402
--- /dev/null
+++ b/test/formatting/samples/attributes-newline/input.html
@@ -0,0 +1,4 @@
+<button class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </button>
+<div class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </div>
+<span class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </span>
+<p class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </p>
\ No newline at end of file
diff --git a/test/formatting/samples/attributes-newline/output.html b/test/formatting/samples/attributes-newline/output.html
new file mode 100644
index 0000000..9b38b44
--- /dev/null
+++ b/test/formatting/samples/attributes-newline/output.html
@@ -0,0 +1,20 @@
+<button
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"
+>
+    Copy
+</button>
+<div
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"
+>
+    Copy
+</div>
+<span
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"
+>
+    Copy
+</span>
+<p
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"
+>
+    Copy
+</p>
diff --git a/test/formatting/samples/attributes-no-newline/input.html b/test/formatting/samples/attributes-no-newline/input.html
new file mode 100644
index 0000000..9939402
--- /dev/null
+++ b/test/formatting/samples/attributes-no-newline/input.html
@@ -0,0 +1,4 @@
+<button class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </button>
+<div class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </div>
+<span class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </span>
+<p class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </p>
\ No newline at end of file
diff --git a/test/formatting/samples/attributes-no-newline/options.json b/test/formatting/samples/attributes-no-newline/options.json
new file mode 100644
index 0000000..062715f
--- /dev/null
+++ b/test/formatting/samples/attributes-no-newline/options.json
@@ -0,0 +1,3 @@
+{
+    "svelteBracketNewLine": false
+}
diff --git a/test/formatting/samples/attributes-no-newline/output.html b/test/formatting/samples/attributes-no-newline/output.html
new file mode 100644
index 0000000..9262ddc
--- /dev/null
+++ b/test/formatting/samples/attributes-no-newline/output.html
@@ -0,0 +1,16 @@
+<button
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
+    Copy
+</button>
+<div
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
+    Copy
+</div>
+<span
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
+    Copy
+</span>
+<p
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
+    Copy
+</p>
diff --git a/test/printer/samples/empty-elements-no-newline.html b/test/printer/samples/empty-elements-no-newline.html
index bcfbae8..557eed1 100644
--- a/test/printer/samples/empty-elements-no-newline.html
+++ b/test/printer/samples/empty-elements-no-newline.html
@@ -4,7 +4,7 @@
 
 <span
     class="some classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome class"
-    ></span>
+></span>
 
 <span
     class="some classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome class">
diff --git a/test/printer/samples/hug-content-edge-cases.html b/test/printer/samples/hug-content-edge-cases.html
new file mode 100644
index 0000000..0873a63
--- /dev/null
+++ b/test/printer/samples/hug-content-edge-cases.html
@@ -0,0 +1,7 @@
+<span class="some classsome classsome classsome classsome classsomeddddddd"
+    >hi
+</span>
+
+<span class="some classsome classsome classsome classsome classs">
+    hithere</span
+>