fix: error on duplicate style and class directive (#13097)

Closes #13095

.changeset/dirty-jars-tap.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: error on duplicate style and class directive

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -189,12 +189,24 @@ export default function element(parser) {
 
 	let attribute;
 	while ((attribute = read(parser))) {
-		if (attribute.type === 'Attribute' || attribute.type === 'BindDirective') {
-			if (unique_names.includes(attribute.name)) {
+		// animate and transition can only be specified once per element so no need
+		// to check here, use can be used multiple times, same for the on directive
+		// finally let already has error handling in case of duplicate variable names
+		if (
+			attribute.type === 'Attribute' ||
+			attribute.type === 'BindDirective' ||
+			attribute.type === 'StyleDirective' ||
+			attribute.type === 'ClassDirective'
+		) {
+			// `bind:attribute` and `attribute` are just the same but `class:attribute`,
+			// `style:attribute` and `attribute` are different and should be allowed together
+			// so we concatenate the type while normalizing the type for BindDirective
+			const type = attribute.type === 'BindDirective' ? 'Attribute' : attribute.type;
+			if (unique_names.includes(type + attribute.name)) {
 				e.attribute_duplicate(attribute);
 				// <svelte:element bind:this this=..> is allowed
 			} else if (attribute.name !== 'this') {
-				unique_names.push(attribute.name);
+				unique_names.push(type + attribute.name);
 			}
 		}
 

packages/svelte/tests/compiler-errors/samples/attribute-unique-class/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'attribute_duplicate',
+		message: 'Attributes need to be unique',
+		position: [23, 40]
+	}
+});

packages/svelte/tests/compiler-errors/samples/attribute-unique-class/main.svelte

@@ -0,0 +1 @@
+<div class:cool={true} class:cool={true}></div>

packages/svelte/tests/compiler-errors/samples/attribute-unique-style/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'attribute_duplicate',
+		message: 'Attributes need to be unique',
+		position: [23, 42]
+	}
+});

packages/svelte/tests/compiler-errors/samples/attribute-unique-style/main.svelte

@@ -0,0 +1 @@
+<div style:color="red" style:color="green"></div>

packages/svelte/tests/validator/samples/attribute-unique-allowed/errors.json

@@ -0,0 +1 @@
+[]

packages/svelte/tests/validator/samples/attribute-unique-allowed/input.svelte

@@ -0,0 +1 @@
+<div color="red" style:color="red" class:color={true} ></div>