From c3d3643b28aefc205864b3222150e04174fe005e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20Selim=20K=C3=BC=C3=A7=C3=BCk?= <qintarp@gmail.com>
Date: Wed, 2 Feb 2022 10:56:23 +0300
Subject: [PATCH] [feat] Better error message for inline component style
 directive (#7187)

Closes #7177
---
 src/compiler/compile/compiler_errors.ts                  | 6 +++++-
 src/compiler/compile/nodes/InlineComponent.ts            | 5 ++++-
 .../component-invalid-style-directive/errors.json        | 9 +++++++++
 .../component-invalid-style-directive/input.svelte       | 7 +++++++
 4 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 test/validator/samples/component-invalid-style-directive/errors.json
 create mode 100644 test/validator/samples/component-invalid-style-directive/input.svelte

diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index c9282189f14..df832373fcd 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/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'
+	}
 };
diff --git a/src/compiler/compile/nodes/InlineComponent.ts b/src/compiler/compile/nodes/InlineComponent.ts
index e65bf445da7..13fb13c2785 100644
--- a/src/compiler/compile/nodes/InlineComponent.ts
+++ b/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}`);
 			}
diff --git a/test/validator/samples/component-invalid-style-directive/errors.json b/test/validator/samples/component-invalid-style-directive/errors.json
new file mode 100644
index 00000000000..087f0db651b
--- /dev/null
+++ b/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
+	}
+]
diff --git a/test/validator/samples/component-invalid-style-directive/input.svelte b/test/validator/samples/component-invalid-style-directive/input.svelte
new file mode 100644
index 00000000000..975621088fa
--- /dev/null
+++ b/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" />
\ No newline at end of file