prevent illegal attribute names at compile time (#4650)

src/compiler/compile/nodes/Element.ts

@@ -378,6 +378,14 @@ export default class Element extends Node {
 				}
 			}
 
+
+			if (/(^[0-9-.])|[\^$@%&#?!|()[\]{}^*+~;]/.test(name)) {
+				component.error(attribute, {
+					code: `illegal-attribute`,
+					message: `'${name}' is not a valid attribute name`,
+				});
+			}
+
 			if (name === 'slot') {
 				if (!attribute.is_static) {
 					component.error(attribute, {
@@ -768,4 +776,4 @@ function within_custom_element(parent: INode) {
 		parent = parent.parent;
 	}
 	return false;
-}
+}

test/validator/samples/attribute-invalid-name-2/errors.json

@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "'3aa' is not a valid attribute name",
+	"start": {
+		"line": 1,
+		"column": 3,
+		"character": 3
+	},
+	"end": {
+		"line": 1,
+		"column": 12,
+		"character": 12
+	},
+	"pos": 3
+}]

test/validator/samples/attribute-invalid-name-2/input.svelte

@@ -0,0 +1 @@
+<p 3aa="abc">Test</p>

test/validator/samples/attribute-invalid-name-3/errors.json

@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "'a*a' is not a valid attribute name",
+	"start": {
+		"line": 1,
+		"column": 3,
+		"character": 3
+	},
+	"end": {
+		"line": 1,
+		"column": 6,
+		"character": 6
+	},
+	"pos": 3
+}]

test/validator/samples/attribute-invalid-name-3/input.svelte

@@ -0,0 +1 @@
+<p a*a>Test</p>

test/validator/samples/attribute-invalid-name-4/errors.json

@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "'-a' is not a valid attribute name",
+	"start": {
+		"line": 1,
+		"column": 3,
+		"character": 3
+	},
+	"end": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"pos": 3
+}]

test/validator/samples/attribute-invalid-name-4/input.svelte

@@ -0,0 +1 @@
+<p -a>Test</p>

test/validator/samples/attribute-invalid-name-5/errors.json

@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "'a;' is not a valid attribute name",
+	"start": {
+		"line": 1,
+		"column": 3,
+		"character": 3
+	},
+	"end": {
+		"line": 1,
+		"column": 11,
+		"character": 11
+	},
+	"pos": 3
+}]

test/validator/samples/attribute-invalid-name-5/input.svelte

@@ -0,0 +1 @@
+<p a;="abc">Test</p>

test/validator/samples/attribute-invalid-name/errors.json

@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "'}' is not a valid attribute name",
+	"start": {
+		"line": 1,
+		"column": 3,
+		"character": 3
+	},
+	"end": {
+		"line": 1,
+		"column": 4,
+		"character": 4
+	},
+	"pos": 3
+}]

test/validator/samples/attribute-invalid-name/input.svelte

@@ -0,0 +1 @@
+<p }>Test</p>