feat: add scoping css prefix option in compiler

src/compiler/compile/Component.ts

@@ -132,7 +132,8 @@ export default class Component {
 			source,
 			ast,
 			compile_options.filename,
-			compile_options.dev
+			compile_options.dev,
+			compile_options.cssPrefix
 		);
 		this.stylesheet.validate(this);
 

src/compiler/compile/css/Stylesheet.ts

@@ -291,14 +291,14 @@ export default class Stylesheet {
 
 	nodes_with_css_class: Set<CssNode> = new Set();
 
-	constructor(source: string, ast: Ast, filename: string, dev: boolean) {
+	constructor(source: string, ast: Ast, filename: string, dev: boolean, cssPrefix: string) {
 		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 = `${cssPrefix}-${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',
+	'cssPrefix'
 ];
 
 function validate_options(options: CompileOptions, warnings: Warning[]) {
@@ -68,7 +69,7 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 }
 
 export default function compile(source: string, options: CompileOptions = {}) {
-	options = assign({ generate: 'dom', dev: false }, options);
+	options = assign({ generate: 'dom', dev: false, cssPrefix: 'svelte' }, options);
 
 	const stats = new Stats();
 	const warnings = [];

src/compiler/interfaces.ts

@@ -126,6 +126,7 @@ export interface CompileOptions {
 
 	preserveComments?: boolean;
 	preserveWhitespace?: boolean;
+	cssPrefix?: string;
 }
 
 export interface ParserOptions {

test/css/index.js

@@ -84,7 +84,9 @@ describe('css', () => {
 				css: read(`${__dirname}/samples/${dir}/expected.css`)
 			};
 
-			const actual_css = dom.css.code.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz');
+			const cssPrefix = config.compileOptions && config.compileOptions.cssPrefix || 'svelte';
+			const regexp = new RegExp(`${cssPrefix}(-ref)?-[a-z0-9]+`, 'g');
+			const actual_css = dom.css.code.replace(regexp, (m, $1) => $1 ? m : 'svelte-xyz');
 			try {
 				assert.equal(actual_css, expected.css);
 			} catch (error) {

test/css/samples/custom-css-prefix/_config.js

@@ -0,0 +1,5 @@
+export default {
+    compileOptions: {
+        cssPrefix: 'sv'
+    }
+};

test/css/samples/custom-css-prefix/expected.css

@@ -0,0 +1 @@
+div.svelte-xyz{color:red}

test/css/samples/custom-css-prefix/input.svelte

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