diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index c9282189f1..df832373fc 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 e65bf445da..13fb13c278 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 0000000000..087f0db651
--- /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 0000000000..975621088f
--- /dev/null
+++ b/test/validator/samples/component-invalid-style-directive/input.svelte
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file