Merge pull request #2101 from lgarron/dont-break-layout

Avoid layout-breaking whitespace by treating all custom elements as inline elements.
beautifier · Oct 1, 2022 · aa82eb9 · aa82eb9
2 parents b4fb269 + 1576f0a
commit aa82eb9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/js/src/html/beautifier.js b/js/src/html/beautifier.js
@@ -658,7 +658,7 @@ Beautifier.prototype._get_tag_open_token = function(raw_token) { //function to g
 
   parser_token.is_unformatted = !parser_token.tag_complete && in_array(parser_token.tag_check, this._options.unformatted);
   parser_token.is_content_unformatted = !parser_token.is_empty_element && in_array(parser_token.tag_check, this._options.content_unformatted);
-  parser_token.is_inline_element = in_array(parser_token.tag_name, this._options.inline) || parser_token.tag_start_char === '{';
+  parser_token.is_inline_element = in_array(parser_token.tag_name, this._options.inline) || parser_token.tag_name.includes("-") || parser_token.tag_start_char === '{';
 
   return parser_token;
 };

diff --git a/test/data/html/tests.js b/test/data/html/tests.js
@@ -3642,6 +3642,46 @@ exports.test_data = {
         '{{/row}}'
       ]
     }]
+  }, {
+    name: "Does not add whitespace around custom elements ",
+    description: "Regression test for https://github.com/beautify-web/js-beautify/issues/1989",
+    tests: [{
+      input: [
+        '<span>',
+        '    <span>',
+        '        <span>The time for this result is 1:02</span',
+        '        ><div>.</div',
+        '        ><section>27</section>',
+        '    </span>',
+        '</span>'
+      ],
+      output: [
+        '<span>',
+        '    <span>',
+        '        <span>The time for this result is 1:02</span>',
+        '        <div>.</div>',
+        '        <section>27</section>',
+        '    </span>',
+        '</span>'
+      ]
+    }, {
+      input: [
+        '<span>',
+        '    <span>',
+        '        <span>The time for this result is 1:02</span',
+        '        ><time-dot>.</time-dot',
+        '        ><time-decimals>27</time-decimals>',
+        '    </span>',
+        '</span>'
+      ],
+      output: [
+        '<span>',
+        '    <span>',
+        '        <span>The time for this result is 1:02</span><time-dot>.</time-dot><time-decimals>27</time-decimals>',
+        '    </span>',
+        '</span>'
+      ]
+    }]
   }, {
     name: "New Test Suite"
   }]