diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 22dec220b7..b3d133606f 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -136,8 +136,9 @@ export default class Component {
 		this.stylesheet = new Stylesheet({
 			source,
 			ast,
-			filename: compile_options.filename,
 			options: {
+				filename: compile_options.filename,
+				component_name: name,
 				dev: compile_options.dev,
 				scope_class_getter: compile_options.scopeClass
 			}
diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts
index 1332192b3a..ad063a526e 100644
--- a/src/compiler/compile/css/Stylesheet.ts
+++ b/src/compiler/compile/css/Stylesheet.ts
@@ -296,13 +296,18 @@ export default class Stylesheet {
 	constructor({
 		source,
 		ast,
-		filename,
-		options: { dev, scope_class_getter = getDefaultScopeClass },
+		options: {
+			component_name,
+			filename,
+			dev,
+			scope_class_getter = getDefaultScopeClass,
+		},
 	}: {
 		source: string;
 		ast: Ast;
-		filename: string;
 		options: {
+			filename: string | undefined;
+			component_name: string | undefined;
 			dev: boolean;
 			scope_class_getter: CssScopeClassGetter;
 		};
@@ -313,7 +318,11 @@ export default class Stylesheet {
 		this.dev = dev;
 
 		if (ast.css && ast.css.children.length) {
-			this.id = scope_class_getter({ filename, hash: hash(ast.css.content.styles) });
+			this.id = scope_class_getter({
+				filename,
+				name: component_name,
+				hash: hash(ast.css.content.styles),
+			});
 
 			this.has_styles = true;
 
diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts
index 86da4f32a0..c23c6ec8f0 100644
--- a/src/compiler/interfaces.ts
+++ b/src/compiler/interfaces.ts
@@ -104,9 +104,9 @@ export interface Warning {
 
 export type ModuleFormat = 'esm' | 'cjs';
 
-
 export type CssScopeClassGetter = (args: {
-	filename: string;
+	name: string | undefined;
+	filename: string | undefined;
 	hash: string;
 }) => string;
 
diff --git a/test/css/samples/custom-scope-class/_config.js b/test/css/samples/custom-scope-class/_config.js
index 6e4386ecda..404e22f561 100644
--- a/test/css/samples/custom-scope-class/_config.js
+++ b/test/css/samples/custom-scope-class/_config.js
@@ -1,7 +1,12 @@
 export default {
 	compileOptions: {
-		scopeClass({ hash }) {
-			return `sv-${hash}`;
-		}
+		filename: 'src/components/FooSwitcher.svelte',
+		scopeClass({ hash, name, filename }) {
+			const minFilename = filename
+				.split('/')
+				.map(i => i.charAt(0).toLowerCase())
+				.join('');
+			return `sv-${name}-${minFilename}-${hash}`;
+		},
 	},
 };
diff --git a/test/css/samples/custom-scope-class/expected.css b/test/css/samples/custom-scope-class/expected.css
index 5eecaebfca..fe710597ea 100644
--- a/test/css/samples/custom-scope-class/expected.css
+++ b/test/css/samples/custom-scope-class/expected.css
@@ -1 +1 @@
-div.sv-bzh57p{color:red}
\ No newline at end of file
+div.sv-FooSwitcher-scf-bzh57p{color:red}
\ No newline at end of file