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>

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