Skip to content

Split void into multiple separate rules

Currently the rule void does multiple validations:

  • void-elements must not have content (e.g. <input>, <hr>, etc)
  • void-elements must be closed using the configured style: omit <input> or self-closing <input/>.
  • non-void-elements must always have a close tag.

This is fine as long as the defaults are ok but is not very flexible to configure.

Suggesting to split this into three separate rules:

  • void-element ensures that an element with "void": true cannot have any content. Test this by ensuring that there are no children at al (no elements, text nodes, etc).
    Default: error
  • void-style ensures the correct style when "void": true
    Default: error, style: omit
  • no-self-closing ensures that elements "void": false isn't self-closed.
    Default: error

Use cases

  • Allow user to configure that empty tags (no content) may be self-closing tag but close tag if content is present, e.g both <my-foo/> and <my-foo>bar</my-foo> should be valid under this configuration:
    "no-self-closing": false

Acceptance tests

Default config void-element void-style omit void-style self-closing no-self-closing
<input> error
<input/> error error
<input></input> error error
<input>foo</input> error error
<div/> error error
Edited by David Sveningsson