chore: warn about : in attributes and props (#8633)

closes #6823

---------

Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -27,6 +27,7 @@
 * Treat slots as if they don't exist when using CSS adjacent and general sibling combinators ([#8284](https://github.com/sveltejs/svelte/issues/8284))
 * Fix transitions so that they don't require a `style-src 'unsafe-inline'` Content Security Policy (CSP) ([#6662](https://github.com/sveltejs/svelte/issues/6662)).
 * Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800))
+* Warn about `:` in attributes and props to prevent ambiguity with Svelte directives ([#6823](https://github.com/sveltejs/svelte/issues/6823))
 
 ## 3.59.1
 

src/compiler/compile/compiler_warnings.js

@@ -301,5 +301,10 @@ export default {
 		code: 'avoid-mouse-events-on-document',
 		message:
 			'Mouse enter/leave events on the document are not supported in all browsers and should be avoided'
+	},
+	illegal_attribute_character: {
+		code: 'illegal-attribute-character',
+		message:
+			"Attributes should not contain ':' characters to prevent ambiguity with Svelte directives"
 	}
 };

src/compiler/compile/nodes/Attribute.js

@@ -3,6 +3,7 @@ import add_to_set from '../utils/add_to_set.js';
 import Node from './shared/Node.js';
 import Expression from './shared/Expression.js';
 import { x } from 'code-red';
+import compiler_warnings from '../compiler_warnings.js';
 
 /** @extends Node<'Attribute' | 'Spread', import('./Element.js').default> */
 export default class Attribute extends Node {
@@ -39,6 +40,7 @@ export default class Attribute extends Node {
 	constructor(component, parent, scope, info) {
 		super(component, parent, scope, info);
 		this.scope = scope;
+
 		if (info.type === 'Spread') {
 			this.name = null;
 			this.is_spread = true;
@@ -64,10 +66,22 @@ export default class Attribute extends Node {
 						}
 				  );
 		}
+
 		if (this.dependencies.size > 0) {
 			parent.cannot_use_innerhtml();
 			parent.not_static_content();
 		}
+
+		// TODO Svelte 5: Think about moving this into the parser and make it an error
+		if (
+			this.name &&
+			this.name.includes(':') &&
+			!this.name.startsWith('xmlns:') &&
+			!this.name.startsWith('xlink:') &&
+			!this.name.startsWith('xml:')
+		) {
+			component.warn(this, compiler_warnings.illegal_attribute_character);
+		}
 	}
 	get_dependencies() {
 		if (this.is_spread) return this.expression.dynamic_dependencies();

src/compiler/parse/state/tag.js

@@ -433,7 +433,6 @@ function get_directive_type(name) {
 	if (name === 'style') return 'StyleDirective';
 	if (name === 'on') return 'EventHandler';
 	if (name === 'let') return 'Let';
-	if (name === 'ref') return 'Ref';
 	if (name === 'in' || name === 'out' || name === 'transition') return 'Transition';
 }
 

test/validator/samples/illegal-attribute-character/input.svelte

@@ -0,0 +1,15 @@
+<script>
+    import C from './irrelevant';
+</script>
+
+<button on:click />
+<button xml:click />
+<button xmlns:click />
+<button xlink:click />
+<C on:click />
+<C xml:click />
+<C xmlns:click />
+<C xlink:click />
+
+<button foo:bar />
+<C foo:bar />

test/validator/samples/illegal-attribute-character/warnings.json

@@ -0,0 +1,26 @@
+[
+	{
+		"code": "illegal-attribute-character",
+		"end": {
+			"column": 15,
+			"line": 14
+		},
+		"message": "Attributes should not contain ':' characters to prevent ambiguity with Svelte directives",
+		"start": {
+			"column": 8,
+			"line": 14
+		}
+	},
+	{
+		"code": "illegal-attribute-character",
+		"end": {
+			"column": 10,
+			"line": 15
+		},
+		"message": "Attributes should not contain ':' characters to prevent ambiguity with Svelte directives",
+		"start": {
+			"column": 3,
+			"line": 15
+		}
+	}
+]