Incorrect indentation for elements whose names are case-insensitive matches to HTML self-closing tags

[asazernik]

Example output:

          <Row>
            <Col xs={ 2 }> Categories:
            </Col>
            <Col xs={ 10 }>
            <TagSelector valueLink={ this.linkImmutableState(["deets", "tags"]) } tagType="ingredients" />
            </Col>
          </Row>

In HTML, <col> is a singleton tag: it can't contain any content, and if it doesn't have the closing '/' it's still a complete tag on its own. Because of this, js-beautify's HTML beautifier doesn't indent the line after any tag that shares a name with one of these singleton tags. Even if the "self-closing" tag is closedlater

However, this is not a feature of JSX, even when representing native DOM tags; JSX follows the rules of strict XML in this regard. The solution is probably to use a beautifier library built for XML rather than HTML to deal with the JSX bits.

This tends to pop up a lot in practice, since many HTML singleton tag names are pretty common to use as React component names e.g. col, input, link, command, etc.

[royriojas]

Thanks @asazernik for reporting. Will investigate other xml formatters that might do a better job.

Regards

[jamesvillarrubia]

Bump on this. Is extra annoying.