warn on self-closing non-void special elements

Author: jrmajor

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -676,11 +676,21 @@ const validation = {
 			error(node, 'invalid-style-directive-modifier');
 		}
 	},
-	SvelteHead(node) {
+	SvelteHead(node, context) {
 		const attribute = node.attributes[0];
 		if (attribute) {
 			error(attribute, 'illegal-svelte-head-attribute');
 		}
+
+		if (context.state.analysis.source[node.end - 2] === '/') {
+			warn(
+				context.state.analysis.warnings,
+				node,
+				context.path,
+				'invalid-self-closing-tag',
+				node.name
+			);
+		}
 	},
 	SvelteElement(node, context) {
 		validate_element(node, context);
@@ -704,6 +714,16 @@ const validation = {
 				error(attribute, 'invalid-svelte-fragment-attribute');
 			}
 		}
+
+		if (context.state.analysis.source[node.end - 2] === '/') {
+			warn(
+				context.state.analysis.warnings,
+				node,
+				context.path,
+				'invalid-self-closing-tag',
+				node.name
+			);
+		}
 	},
 	SlotElement(node) {
 		for (const attribute of node.attributes) {

packages/svelte/src/compiler/warnings.js

@@ -253,7 +253,7 @@ const options = {
 const misc = {
 	/** @param {string} name */
 	'invalid-self-closing-tag': (name) =>
-		`Self-closing HTML tags for non-void elements are ambiguous — use <${name} ...></${name}> rather than <${name} ... />`
+		`Self-closing tags for non-void elements are ambiguous — use <${name} ...></${name}> rather than <${name} ... />`
 };
 
 /** @satisfies {Warnings} */

packages/svelte/tests/validator/samples/invalid-self-closing-tag/input.svelte

@@ -1,7 +1,31 @@
-<!-- valid -->
-<link />
+<!-- valid - foreign namespace -->
 <svg><g /></svg>
 
-<!-- invalid -->
+<!-- not reported - void tags -->
+<link />
+<br/>
+<svelte:options />
+<svelte:window on:event={() => null} />
+<svelte:document on:event={() => null} />
+<svelte:body on:event={() => null} />
+
+<!-- not reported - deprecated -->
+<slot />
+
+<!-- not reported - components -->
+{#if true}
+	<svelte:self />
+{/if}
+<Foo />
+<svelte:component this={"foo"} />
+
+<!-- not reported - `this` can be bound to both void and non-void tags -->
+<svelte:element this="dif" />
+
+<!-- invalid and reported -->
 <div />
 <my-thing />
+<svelte:head />
+<Foo>
+	<svelte:fragment slot="footer" />
+</Foo>

packages/svelte/tests/validator/samples/invalid-self-closing-tag/warnings.json

@@ -1,26 +1,50 @@
 [
 	{
 		"code": "invalid-self-closing-tag",
-		"message": "Self-closing HTML tags for non-void elements are ambiguous — use <div ...></div> rather than <div ... />",
+		"message": "Self-closing tags for non-void elements are ambiguous — use <div ...></div> rather than <div ... />",
 		"start": {
-			"line": 6,
+			"line": 26,
 			"column": 0
 		},
 		"end": {
-			"line": 6,
+			"line": 26,
 			"column": 7
 		}
 	},
 	{
 		"code": "invalid-self-closing-tag",
-		"message": "Self-closing HTML tags for non-void elements are ambiguous — use <my-thing ...></my-thing> rather than <my-thing ... />",
+		"message": "Self-closing tags for non-void elements are ambiguous — use <my-thing ...></my-thing> rather than <my-thing ... />",
 		"start": {
-			"line": 7,
+			"line": 27,
 			"column": 0
 		},
 		"end": {
-			"line": 7,
+			"line": 27,
 			"column": 12
 		}
+	},
+	{
+		"code": "invalid-self-closing-tag",
+		"message": "Self-closing tags for non-void elements are ambiguous — use <svelte:head ...></svelte:head> rather than <svelte:head ... />",
+		"start": {
+			"line": 28,
+			"column": 0
+		},
+		"end": {
+			"line": 28,
+			"column": 15
+		}
+	},
+	{
+		"code": "invalid-self-closing-tag",
+		"message": "Self-closing tags for non-void elements are ambiguous — use <svelte:fragment ...></svelte:fragment> rather than <svelte:fragment ... />",
+		"start": {
+			"line": 30,
+			"column": 1
+		},
+		"end": {
+			"line": 30,
+			"column": 34
+		}
 	}
 ]