warn on implicitly closed tags

Author: 7nik

documentation/docs/98-reference/.generated/compile-warnings.md

@@ -632,6 +632,12 @@ In some situations a selector may target an element that is not 'visible' to the
 </style>
 ```
 
+### element_implicitly_closed
+
+```
+The tag `<%name%>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.
+```
+
 ### element_invalid_self_closing_tag
 
 ```

packages/svelte/messages/compile-warnings/template.md

@@ -30,6 +30,10 @@
 
 > `<%name%>` will be treated as an HTML element unless it begins with a capital letter
 
+## element_implicitly_closed
+
+> The tag `<%name%>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.
+
 ## element_invalid_self_closing_tag
 
 > Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -93,7 +93,12 @@ export default function element(parser) {
 				}
 			}
 
-			if (parent.type !== 'RegularElement' && !parser.loose) {
+			if (parent.type === 'RegularElement') {
+				if (!parser.last_auto_closed_tag || parser.last_auto_closed_tag.tag !== name) {
+					const opening_tag_end = parent.fragment.nodes[0]?.start ?? parent.start + parent.name.length + 2;
+					w.element_implicitly_closed({ start: parent.start, end: opening_tag_end }, parent.name);
+				}
+			} else if (!parser.loose) {
 				if (parser.last_auto_closed_tag && parser.last_auto_closed_tag.tag === name) {
 					e.element_invalid_closing_tag_autoclosed(start, name, parser.last_auto_closed_tag.reason);
 				} else {
@@ -186,6 +191,8 @@ export default function element(parser) {
 	parser.allow_whitespace();
 
 	if (parent.type === 'RegularElement' && closing_tag_omitted(parent.name, name)) {
+		const opening_tag_end = parent.fragment.nodes[0]?.start ?? parent.start + parent.name.length + 2;
+		w.element_implicitly_closed({ start: parent.start, end: opening_tag_end }, parent.name);
 		parent.end = start;
 		parser.pop();
 		parser.last_auto_closed_tag = {

packages/svelte/src/compiler/warnings.js

@@ -114,6 +114,7 @@ export const codes = [
 	'bind_invalid_each_rest',
 	'block_empty',
 	'component_name_lowercase',
+	'element_implicitly_closed',
 	'element_invalid_self_closing_tag',
 	'event_directive_deprecated',
 	'node_invalid_placement_ssr',
@@ -746,6 +747,15 @@ export function component_name_lowercase(node, name) {
 	w(node, 'component_name_lowercase', `\`<${name}>\` will be treated as an HTML element unless it begins with a capital letter\nhttps://svelte.dev/e/component_name_lowercase`);
 }
 
+/**
+ * The tag `<%name%>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.
+ * @param {null | NodeLike} node
+ * @param {string} name
+ */
+export function element_implicitly_closed(node, name) {
+	w(node, 'element_implicitly_closed', `The tag \`<${name}>\` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.\nhttps://svelte.dev/e/element_implicitly_closed`);
+}
+
 /**
  * Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
  * @param {null | NodeLike} node

packages/svelte/tests/validator/samples/implicitly-closed-tag/input.svelte

@@ -0,0 +1,6 @@
+<main>
+    <input>
+    <div>
+    <p>
+    <p></p>
+</main>

packages/svelte/tests/validator/samples/implicitly-closed-tag/warnings.json

@@ -0,0 +1,26 @@
+[
+	{
+		"code": "element_implicitly_closed",
+		"message": "The tag `<p>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.",
+		"start": {
+			"line": 4,
+			"column": 4
+		},
+		"end": {
+			"line": 4,
+			"column": 7
+		}
+	},
+	{
+		"code": "element_implicitly_closed",
+		"message": "The tag `<div>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.",
+		"start": {
+			"line": 3,
+			"column": 4
+		},
+		"end": {
+			"line": 3,
+			"column": 9
+		}
+	}
+]