[feat] Better error message for inline component style directive (sveltejs#7187)

Closes sveltejs#7177

Author: efeskucuk

src/compiler/compile/compiler_errors.ts

@@ -265,5 +265,9 @@ export default {
 	cyclical_const_tags: (cycle: string[]) => ({
 		code: 'cyclical-const-tags',
 		message: `Cyclical dependency detected: ${cycle.join(' → ')}`
-	})
+	}),
+	invalid_component_style_directive: {
+		code: 'invalid-component-style-directive',
+		message: 'Style directives cannot be used on components'
+	}
 };

src/compiler/compile/nodes/InlineComponent.ts

@@ -71,7 +71,10 @@ export default class InlineComponent extends Node {
 
 				case 'Transition':
 					return component.error(node, compiler_errors.invalid_transition);
-
+				
+				case 'StyleDirective':
+					return component.error(node, compiler_errors.invalid_component_style_directive);
+	
 				default:
 					throw new Error(`Not implemented: ${node.type}`);
 			}

test/validator/samples/component-invalid-style-directive/errors.json

@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-component-style-directive",
+		"message": "Style directives cannot be used on components",
+		"start": { "line": 7, "column": 19, "character": 97 },
+		"end": { "line": 7, "column": 36, "character": 114 },
+		"pos": 97
+	}
+]

test/validator/samples/component-invalid-style-directive/input.svelte

@@ -0,0 +1,7 @@
+<script>
+	let name = 'world';
+	
+	import Child from 'Child.svelte';
+</script>
+
+<Child name={name} style:color="red" />