prefix first draft ✍

src/compiler/compile/Component.ts

@@ -29,6 +29,7 @@ import add_to_set from './utils/add_to_set';
 import check_graph_for_cycles from './utils/check_graph_for_cycles';
 import { print, x, b } from 'code-red';
 import { is_reserved_keyword } from './utils/reserved_keywords';
+import get_prefix from './utils/get_prefix';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -133,7 +134,8 @@ export default class Component {
 			source,
 			ast,
 			compile_options.filename,
-			compile_options.dev
+			compile_options.dev,
+			get_prefix(compile_options.prefix),
 		);
 		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, prefix: 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 = `${prefix}${hash(ast.css.content.styles)}`;
 
 			this.has_styles = true;
 

src/compiler/compile/nodes/Head.ts

@@ -1,6 +1,7 @@
 import Node from './shared/Node';
 import map_children from './shared/map_children';
 import hash from '../utils/hash';
+import get_prefix from '../utils/get_prefix';
 
 export default class Head extends Node {
 	type: 'Head';
@@ -22,7 +23,7 @@ export default class Head extends Node {
 		}));
 
 		if (this.children.length > 0) {
-			this.id = `svelte-${hash(this.component.source.slice(this.start, this.end))}`;
+			this.id = `${get_prefix(this.component.compile_options.prefix)}${hash(this.component.source.slice(this.start, this.end))}`;
 		}
 	}
 }

src/compiler/compile/utils/get_prefix.ts

@@ -0,0 +1,9 @@
+export default function get_prefix(str?: string): string {
+    const standard_prefix = 'svelte-';
+    if (!str
+        || typeof str !== 'string') return standard_prefix;
+    str = str.replace(/^[^_-a-z]+|[^_-a-z0-9]/gi, '');
+    return str.length
+        ? str
+        : standard_prefix;
+}

src/compiler/interfaces.ts

@@ -123,6 +123,7 @@ export interface CompileOptions {
 	tag?: string;
 	css?: boolean;
 	loopGuardTimeout?: number;
+	prefix?: string;
 
 	preserveComments?: boolean;
 	preserveWhitespace?: boolean;

test/css/samples/custom-prefix-has-only-disallowed-characters/_config.js

@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		prefix: ' $!*'
+	}
+};

test/css/samples/custom-prefix-has-only-disallowed-characters/expected.css

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

test/css/samples/custom-prefix-has-only-disallowed-characters/input.svelte

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

test/css/samples/custom-prefix-has-special-character/_config.js

@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		prefix: 'me$-'
+	}
+};

test/css/samples/custom-prefix-has-special-character/expected.css

@@ -0,0 +1 @@
+div.me-xyz{color:blue}

test/css/samples/custom-prefix-has-special-character/input.svelte

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

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

@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		prefix: 'me -'
+	}
+};

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

@@ -0,0 +1 @@
+div.me-xyz{color:blue}

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

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

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

@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		prefix: true
+	}
+};

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

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

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

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

test/css/samples/custom-prefix-starts-with-number/_config.js

@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		prefix: '0me-'
+	}
+};

test/css/samples/custom-prefix-starts-with-number/expected.css

@@ -0,0 +1 @@
+div.me-xyz{color:blue}

test/css/samples/custom-prefix-starts-with-number/input.svelte

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

test/css/samples/custom-prefix-starts-with-whitespace/_config.js

@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		prefix: ' me-'
+	}
+};

test/css/samples/custom-prefix-starts-with-whitespace/expected.css

@@ -0,0 +1 @@
+div.me-xyz{color:blue}

test/css/samples/custom-prefix-starts-with-whitespace/input.svelte

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

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

@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		prefix: 'me-'
+	}
+};

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

@@ -0,0 +1 @@
+div.me-xyz{color:blue}

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

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