warn if React attributes are used (#5836)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Warn when using `className` or `htmlFor` attributes ([#5777](https://github.com/sveltejs/svelte/issues/5777))
 * Fix checkbox `bind:group` in nested `{#each}` contexts ([#5811](https://github.com/sveltejs/svelte/issues/5811))
 * Add graphics roles as known ARIA roles ([#5822](https://github.com/sveltejs/svelte/pull/5822))
 

src/compiler/compile/nodes/Element.ts

@@ -93,6 +93,11 @@ const passive_events = new Set([
 	'touchcancel'
 ]);
 
+const react_attributes = new Map([
+	['className', 'class'],
+	['htmlFor', 'for']
+]);
+
 function get_namespace(parent: Element, element: Element, explicit_namespace: string) {
 	const parent_element = parent.find_nearest(/^Element/);
 
@@ -444,6 +449,13 @@ export default class Element extends Node {
 				});
 			}
 
+			if (react_attributes.has(attribute.name)) {
+				component.warn(attribute, {
+					code: 'invalid-html-attribute',
+					message: `'${attribute.name}' is not a valid HTML attribute. Did you mean '${react_attributes.get(attribute.name)}'?`
+				});
+			}
+
 			attribute_map.set(attribute.name, attribute);
 		});
 	}

test/validator/samples/use-the-platform/input.svelte

@@ -0,0 +1,2 @@
+<div className="abc"></div>
+<label htmlFor="i"><input /></label>

test/validator/samples/use-the-platform/warnings.json

@@ -0,0 +1,32 @@
+[
+	{
+		"code": "invalid-html-attribute",
+		"message": "'className' is not a valid HTML attribute. Did you mean 'class'?",
+		"pos": 5,
+		"start": {
+			"character": 5,
+			"column": 5,
+			"line": 1
+		},
+		"end": {
+			"character": 20,
+			"column": 20,
+			"line": 1
+		}
+	},
+	{
+		"code": "invalid-html-attribute",
+		"message": "'htmlFor' is not a valid HTML attribute. Did you mean 'for'?",
+		"pos": 35,
+		"start": {
+			"character": 35,
+			"column": 7,
+			"line": 2
+		},
+		"end": {
+			"character": 46,
+			"column": 18,
+			"line": 2
+		}
+	}
+]