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

closes #6823

---------

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Rich Harris <git@rich-harris.dev>

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
+		}
+	}
+]

test/validator/samples/ref-not-supported-in-css/errors.json

@@ -1,14 +0,0 @@
-[
-	{
-		"code": "invalid-ref-selector",
-		"message": "ref selectors are no longer supported",
-		"start": {
-			"line": 8,
-			"column": 1
-		},
-		"end": {
-			"line": 8,
-			"column": 1
-		}
-	}
-]

test/validator/samples/ref-not-supported-in-css/input.svelte

@@ -1,11 +0,0 @@
-<script>
-	let foo;
-</script>
-
-<div bind:this={foo}></div>
-
-<style>
-	ref:foo {
-		color: red;
-	}
-</style>

test/validator/samples/ref-not-supported/errors.json

@@ -1,14 +0,0 @@
-[
-	{
-		"code": "invalid-ref-directive",
-		"message": "The ref directive is no longer supported — use `bind:this={foo}` instead",
-		"start": {
-			"line": 1,
-			"column": 5
-		},
-		"end": {
-			"line": 1,
-			"column": 5
-		}
-	}
-]

test/validator/samples/ref-not-supported/input.svelte

@@ -1 +0,0 @@
-<div ref:foo></div>