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

Avoid layout-breaking whitespace by treating all custom elements as inline elements.

Author: bitwiseman

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;
 };

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"
   }]