Pass component name to scope class generator

Author: kaisermann

src/compiler/compile/Component.ts

@@ -131,8 +131,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
 			}

src/compiler/compile/css/Stylesheet.ts

@@ -298,13 +298,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;
 		};
@@ -315,7 +320,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;
 

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;
 

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}`;
+		},
 	},
 };

test/css/samples/custom-scope-class/expected.css

@@ -1 +1 @@
-div.sv-bzh57p{color:red}
+div.sv-FooSwitcher-scf-bzh57p{color:red}