Allow to customize the css scope class

Author: kaisermann

src/compiler/compile/Component.ts

@@ -128,12 +128,15 @@ export default class Component {
 		this.locate = getLocator(this.source, { offsetLine: 1 });
 
 		// styles
-		this.stylesheet = new Stylesheet(
+		this.stylesheet = new Stylesheet({
 			source,
 			ast,
-			compile_options.filename,
-			compile_options.dev
-		);
+			filename: compile_options.filename,
+			options: {
+				dev: compile_options.dev,
+				scope_class_getter: compile_options.scopeClass
+			}
+		});
 		this.stylesheet.validate(this);
 
 		this.component_options = process_component_options(
@@ -1450,4 +1453,4 @@ function get_relative_path(from: string, to: string) {
 	}
 
 	return from_parts.concat(to_parts).join('/');
-}
+}

src/compiler/compile/css/Stylesheet.ts

@@ -2,7 +2,7 @@ import MagicString from 'magic-string';
 import { walk } from 'estree-walker';
 import Selector from './Selector';
 import Element from '../nodes/Element';
-import { Ast, TemplateNode } from '../../interfaces';
+import { Ast, TemplateNode, CssScopeClassGetter } from '../../interfaces';
 import Component from '../Component';
 import { CssNode } from './interfaces';
 import hash from "../utils/hash";
@@ -277,6 +277,10 @@ class Atrule {
 	}
 }
 
+const getDefaultScopeClass: CssScopeClassGetter = ({ hash }) => {
+	return `svelte-${hash}`;
+};
+
 export default class Stylesheet {
 	source: string;
 	ast: Ast;
@@ -291,14 +295,27 @@ export default class Stylesheet {
 
 	nodes_with_css_class: Set<CssNode> = new Set();
 
-	constructor(source: string, ast: Ast, filename: string, dev: boolean) {
+	constructor({
+		source,
+		ast,
+		filename,
+		options: { dev, scope_class_getter = getDefaultScopeClass },
+	}: {
+		source: string;
+		ast: Ast;
+		filename: string;
+		options: {
+			dev: boolean;
+			scope_class_getter: CssScopeClassGetter;
+		};
+	}) {
 		this.source = source;
 		this.ast = ast;
 		this.filename = filename;
 		this.dev = dev;
 
 		if (ast.css && ast.css.children.length) {
-			this.id = `svelte-${hash(ast.css.content.styles)}`;
+			this.id = scope_class_getter({ filename, hash: hash(ast.css.content.styles) });
 
 			this.has_styles = true;
 

src/compiler/compile/index.ts

@@ -26,7 +26,8 @@ const valid_options = [
 	'css',
 	'loopGuardTimeout',
 	'preserveComments',
-	'preserveWhitespace'
+	'preserveWhitespace',
+	'scopeClass',
 ];
 
 function validate_options(options: CompileOptions, warnings: Warning[]) {

src/compiler/interfaces.ts

@@ -104,6 +104,12 @@ export interface Warning {
 
 export type ModuleFormat = 'esm' | 'cjs';
 
+
+export type CssScopeClassGetter = (args: {
+	filename: string;
+	hash: string;
+}) => string;
+
 export interface CompileOptions {
 	format?: ModuleFormat;
 	name?: string;
@@ -123,6 +129,7 @@ export interface CompileOptions {
 	tag?: string;
 	css?: boolean;
 	loopGuardTimeout?: number;
+	scopeClass?: CssScopeClassGetter;
 
 	preserveComments?: boolean;
 	preserveWhitespace?: boolean;
@@ -163,7 +170,7 @@ export interface Var {
 	is_reactive_dependency?: boolean;
 }
 
-export interface CssResult { 
+export interface CssResult {
 	code: string;
 	map: SourceMap;
-}
+}

test/css/samples/custom-scope-class/_config.js

@@ -0,0 +1,7 @@
+export default {
+	compileOptions: {
+		scopeClass({ hash }) {
+			return `sv-${hash}`;
+		}
+	},
+};

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

@@ -0,0 +1 @@
+div.sv-bzh57p{color:red}

test/css/samples/custom-scope-class/input.svelte

@@ -0,0 +1,7 @@
+<div>red</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>