fix(html/codegen): Handle optional tags (#4986)

crates/swc_html_codegen/src/lib.rs

@@ -487,7 +487,19 @@ where
                             }) if is_html_tag_name(*namespace, &**tag_name)
                                 && !matches!(
                                     &**tag_name,
-                                    "a" | "audio" | "del" | "ins" | "map" | "noscript" | "video"
+                                    "a" | "audio"
+                                        | "acronym"
+                                        | "big"
+                                        | "del"
+                                        | "font"
+                                        | "ins"
+                                        | "tt"
+                                        | "strike"
+                                        | "map"
+                                        | "noscript"
+                                        | "video"
+                                        | "kbd"
+                                        | "rbc"
                                 ) =>
                             {
                                 true
@@ -502,7 +514,20 @@ where
                     // An li element's end tag can be omitted if the li element is immediately
                     // followed by another li element or if there is no more content in the parent
                     // element.
-                    "li" => match next {
+                    "li" if match parent {
+                        Some(Element {
+                            namespace,
+                            tag_name,
+                            ..
+                        }) if *namespace == Namespace::HTML
+                            && matches!(&**tag_name, "ul" | "ol" | "menu") =>
+                        {
+                            true
+                        }
+                        _ => false,
+                    } =>
+                    {
+                        match next {
                             Some(Child::Element(Element {
                                 namespace,
                                 tag_name,
@@ -510,7 +535,8 @@ where
                             })) if *namespace == Namespace::HTML && tag_name == "li" => true,
                             None => true,
                             _ => false,
-                    },
+                        }
+                    }
                     // A dt element's end tag can be omitted if the dt element is immediately
                     // followed by another dt element or a dd element.
                     "dt" => match next {
@@ -1079,6 +1105,7 @@ fn is_html_tag_name(namespace: Namespace, tag_name: &str) -> bool {
     matches!(
         tag_name,
         "a" | "abbr"
+            | "acronym"
             | "address"
             | "applet"
             | "area"
@@ -1087,8 +1114,10 @@ fn is_html_tag_name(namespace: Namespace, tag_name: &str) -> bool {
             | "audio"
             | "b"
             | "base"
+            | "basefont"
             | "bdi"
             | "bdo"
+            | "big"
             | "blockquote"
             | "body"
             | "br"
@@ -1116,8 +1145,11 @@ fn is_html_tag_name(namespace: Namespace, tag_name: &str) -> bool {
             | "fieldset"
             | "figcaption"
             | "figure"
+            | "font"
             | "footer"
             | "form"
+            | "frame"
+            | "frameset"
             | "h1"
             | "h2"
             | "h3"
@@ -1135,6 +1167,9 @@ fn is_html_tag_name(namespace: Namespace, tag_name: &str) -> bool {
             | "img"
             | "input"
             | "ins"
+            | "isindex"
+            | "kbd"
+            | "keygen"
             | "label"
             | "legend"
             | "li"
@@ -1145,12 +1180,14 @@ fn is_html_tag_name(namespace: Namespace, tag_name: &str) -> bool {
             | "mark"
             | "marquee"
             | "menu"
-            | "menuitem"
+            // Removed from spec, but we keep here to track it
+            // | "menuitem"
             | "meta"
             | "meter"
             | "nav"
             | "nobr"
             | "noembed"
+            | "noframes"
             | "noscript"
             | "object"
             | "ol"
@@ -1160,10 +1197,12 @@ fn is_html_tag_name(namespace: Namespace, tag_name: &str) -> bool {
             | "p"
             | "param"
             | "picture"
+            | "plaintext"
             | "pre"
             | "progress"
             | "q"
             | "rb"
+            | "rbc"
             | "rp"
             | "rt"
             | "rtc"
@@ -1176,6 +1215,7 @@ fn is_html_tag_name(namespace: Namespace, tag_name: &str) -> bool {
             | "small"
             | "source"
             | "span"
+            | "strike"
             | "strong"
             | "style"
             | "sub"
@@ -1193,6 +1233,7 @@ fn is_html_tag_name(namespace: Namespace, tag_name: &str) -> bool {
             | "title"
             | "tr"
             | "track"
+            | "tt"
             | "u"
             | "ul"
             | "var"

crates/swc_html_codegen/tests/fixture/menu/input.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Document</title>
+</head>
+<body>
+<menu>
+    <li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
+    <li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
+    <li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
+</menu>
+<menu><li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li><li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li><li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li></menu>
+
+<p>test</p><unknown><li>test</li></unknown>
+
+</body>
+</html>

crates/swc_html_codegen/tests/fixture/menu/output.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Document</title>
+</head>
+<body>
+<menu>
+    <li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
+    <li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
+    <li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
+</menu>
+<menu><li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li><li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li><li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li></menu>
+
+<p>test</p><unknown><li>test</li></unknown>
+
+
+</body></html>

crates/swc_html_codegen/tests/fixture/menu/output.min.html

@@ -0,0 +1,14 @@
+<!doctype html><html lang=en><head>
+    <title>Document</title>
+</head>
+<body>
+<menu>
+    <li><button onclick=copy()><img src=copy.svg alt=Copy></button></li>
+    <li><button onclick=cut()><img src=cut.svg alt=Cut></button></li>
+    <li><button onclick=paste()><img src=paste.svg alt=Paste></button></li>
+</menu>
+<menu><li><button onclick=copy()><img src=copy.svg alt=Copy></button><li><button onclick=cut()><img src=cut.svg alt=Cut></button><li><button onclick=paste()><img src=paste.svg alt=Paste></button></menu>
+
+<p>test</p><unknown><li>test</li></unknown>
+
+

crates/swc_html_codegen/tests/fixture/optional/input.html

@@ -8,6 +8,13 @@
 <ul><li>test</li><li>test</li><li>test</li></ul>
 <ul><li>test</li><li>test</li> <li>test</li> </ul>
 
+<menu><li>test</li></menu>
+<menu> <li>test</li> </menu>
+<menu> <li>test</li> <li>test</li> </menu>
+<menu> <li>test</li> <li>test</li></menu>
+<menu><li>test</li><li>test</li><li>test</li></menu>
+<menu><li>test</li><li>test</li> <li>test</li> </menu>
+
 <article>
     <h1>FAQ</h1>
     <dl><dt>What do we want?</dt><dd>Our data.</dd><dt>When do we want it?</dt><dd>Now.</dd><dt>Where is it?</dt><dd>We are not sure.</dd></dl>
@@ -408,6 +415,34 @@
 <table><thead><tr><td>test</td></tr></thead><tbody><tr><td>test</td></tr></tbody><tbody><tr><td>test</td></tr></tbody></table>
 <table><tfoot><tr><td>test</td></tr></tfoot><tbody><tr><td>test</td></tr></tbody><tbody><tr><td>test</td></tr></tbody></table>
 
+<p>test</p><rbc>test</rbc>
+<rbc><p>test</p></rbc>
+<p>test</p><keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">
+<p>test</p><kbd>test</kbd>
+<kbd><p>test</p></kbd>
+<p>test</p><isindex>
+<p>test</p><frameset></frameset>
+<p>test</p><frame>
+<p>test</p><font>test</font>
+<font><p>test</p></font>
+<p>test</p><big>test</big>
+<big><p>test</p></big>
+<p>test</p><basefont>
+<p>test</p><acronym title="test">test</acronym>
+<p>test</p><tt><p>test</p></tt>
+<tt><p>test</p></tt>
+<p>test</p><tt>test</tt>
+<p>test</p><strike>test</strike>
+<strike><p>test</p></strike>
+<p>test</p><noframes>test</noframes>
+<noframes><p>test</p></noframes>
+
+<p>test</p><ul><li>test</li></ul>
+<p>test</p><ol><li>test</li></ol>
+<p>test</p><menu><li>test</li></menu>
+
+<p>test</p><unknown>test</unknown>
+<unknown><p>test</p></unknown>
 </body>
 
 </html>

crates/swc_html_codegen/tests/fixture/optional/output.html

@@ -8,6 +8,13 @@
 <ul><li>test</li><li>test</li><li>test</li></ul>
 <ul><li>test</li><li>test</li> <li>test</li> </ul>
 
+<menu><li>test</li></menu>
+<menu> <li>test</li> </menu>
+<menu> <li>test</li> <li>test</li> </menu>
+<menu> <li>test</li> <li>test</li></menu>
+<menu><li>test</li><li>test</li><li>test</li></menu>
+<menu><li>test</li><li>test</li> <li>test</li> </menu>
+
 <article>
     <h1>FAQ</h1>
     <dl><dt>What do we want?</dt><dd>Our data.</dd><dt>When do we want it?</dt><dd>Now.</dd><dt>Where is it?</dt><dd>We are not sure.</dd></dl>
@@ -408,6 +415,34 @@
 <table><thead><tr><td>test</td></tr></thead><tbody><tr><td>test</td></tr></tbody><tbody><tr><td>test</td></tr></tbody></table>
 <table><tfoot><tr><td>test</td></tr></tfoot><tbody><tr><td>test</td></tr></tbody><tbody><tr><td>test</td></tr></tbody></table>
 
+<p>test</p><rbc>test</rbc>
+<rbc><p>test</p></rbc>
+<p>test</p><keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">
+<p>test</p><kbd>test</kbd>
+<kbd><p>test</p></kbd>
+<p>test</p><isindex>
+<p>test</p>
+<p>test</p>
+<p>test</p><font>test</font>
+<font><p>test</p></font>
+<p>test</p><big>test</big>
+<big><p>test</p></big>
+<p>test</p><basefont>
+<p>test</p><acronym title="test">test</acronym>
+<p>test</p><tt><p>test</p></tt>
+<tt><p>test</p></tt>
+<p>test</p><tt>test</tt>
+<p>test</p><strike>test</strike>
+<strike><p>test</p></strike>
+<p>test</p><noframes>test</noframes>
+<noframes><p>test</p></noframes>
+
+<p>test</p><ul><li>test</li></ul>
+<p>test</p><ol><li>test</li></ol>
+<p>test</p><menu><li>test</li></menu>
+
+<p>test</p><unknown>test</unknown>
+<unknown><p>test</p></unknown>
 
 
-</body></html>
+</isindex></body></html>

crates/swc_html_codegen/tests/fixture/optional/output.min.html

@@ -6,6 +6,13 @@
 <ul><li>test<li>test<li>test</ul>
 <ul><li>test<li>test</li> <li>test</li> </ul>
 
+<menu><li>test</menu>
+<menu> <li>test</li> </menu>
+<menu> <li>test</li> <li>test</li> </menu>
+<menu> <li>test</li> <li>test</menu>
+<menu><li>test<li>test<li>test</menu>
+<menu><li>test<li>test</li> <li>test</li> </menu>
+
 <article>
     <h1>FAQ</h1>
     <dl><dt>What do we want?<dd>Our data.<dt>When do we want it?<dd>Now.<dt>Where is it?<dd>We are not sure.</dl>
@@ -406,5 +413,34 @@
 <table><thead><tr><td>test<tbody><tr><td>test<tbody><tr><td>test</table>
 <table><tfoot><tr><td>test</tfoot><tbody><tr><td>test<tbody><tr><td>test</table>
 
+<p>test</p><rbc>test</rbc>
+<rbc><p>test</p></rbc>
+<p>test</p><keygen name=name challenge="challenge string" keytype=type keyparams=pqg-params>
+<p>test</p><kbd>test</kbd>
+<kbd><p>test</p></kbd>
+<p>test</p><isindex>
+<p>test</p>
+<p>test</p>
+<p>test</p><font>test</font>
+<font><p>test</p></font>
+<p>test</p><big>test</big>
+<big><p>test</p></big>
+<p>test</p><basefont>
+<p>test</p><acronym title=test>test</acronym>
+<p>test</p><tt><p>test</p></tt>
+<tt><p>test</p></tt>
+<p>test</p><tt>test</tt>
+<p>test</p><strike>test</strike>
+<strike><p>test</p></strike>
+<p>test</p><noframes>test</noframes>
+<noframes><p>test</p></noframes>
+
+<p>test<ul><li>test</ul>
+<p>test<ol><li>test</ol>
+<p>test<menu><li>test</menu>
+
+<p>test</p><unknown>test</unknown>
+<unknown><p>test</p></unknown>
 
 
+</isindex>