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