switch back to using svelte- instead of name-

src/css/Stylesheet.ts

@@ -274,7 +274,7 @@ export default class Stylesheet {
 	children: (Rule|Atrule)[];
 	keyframes: Map<string, string>;
 
-	constructor(source: string, parsed: Parsed, name: string, filename: string, cascade: boolean, dev: boolean) {
+	constructor(source: string, parsed: Parsed, filename: string, cascade: boolean, dev: boolean) {
 		this.source = source;
 		this.parsed = parsed;
 		this.cascade = cascade;
@@ -285,7 +285,7 @@ export default class Stylesheet {
 		this.keyframes = new Map();
 
 		if (parsed.css && parsed.css.children.length) {
-			this.id = `${name ? name.toLowerCase() : 'svelte'}-${hash(parsed.css.content.styles)}`;
+			this.id = `svelte-${hash(parsed.css.content.styles)}`;
 
 			this.hasStyles = true;
 

src/index.ts

@@ -116,7 +116,7 @@ export function compile(source: string, _options: CompileOptions) {
 		return;
 	}
 
-	const stylesheet = new Stylesheet(source, parsed, options.name, options.filename, options.cascade !== false, options.dev);
+	const stylesheet = new Stylesheet(source, parsed, options.filename, options.cascade !== false, options.dev);
 
 	validate(parsed, source, stylesheet, options);
 

test/css/index.js

@@ -95,7 +95,7 @@ describe('css', () => {
 				css: read(`test/css/samples/${dir}/expected.css`)
 			};
 
-			assert.equal(dom.css.replace(/sveltecomponent-[a-z0-9]+/g, 'sveltecomponent-xyz'), expected.css);
+			assert.equal(dom.css.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz'), expected.css);
 
 			// verify that the right elements have scoping selectors
 			if (expected.html !== null) {
@@ -114,7 +114,7 @@ describe('css', () => {
 					fs.writeFileSync(`test/css/samples/${dir}/_actual.html`, html);
 
 					assert.equal(
-						normalizeHtml(window, html.replace(/sveltecomponent-[a-z0-9]+/g, 'sveltecomponent-xyz')),
+						normalizeHtml(window, html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz')),
 						normalizeHtml(window, expected.html)
 					);
 
@@ -133,7 +133,7 @@ describe('css', () => {
 					assert.equal(
 						normalizeHtml(
 							window,
-							component.render(config.data).html.replace(/sveltecomponent-[a-z0-9]+/g, 'sveltecomponent-xyz')
+							component.render(config.data).html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz')
 						),
 						normalizeHtml(window, expected.html)
 					);

test/css/samples/attribute-selector-only-name/expected.css

@@ -1 +1 @@
-[foo].sveltecomponent-xyz{color:red}[baz].sveltecomponent-xyz{color:blue}
+[foo].svelte-xyz{color:red}[baz].svelte-xyz{color:blue}

test/css/samples/attribute-selector-unquoted/expected.css

@@ -1 +1 @@
-[foo=bar].sveltecomponent-xyz{color:red}
+[foo=bar].svelte-xyz{color:red}

test/css/samples/basic/expected.css

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

test/css/samples/cascade-false-empty-rule-dev/expected.css

@@ -1 +1 @@
-.foo.sveltecomponent-xyz{}
+.foo.svelte-xyz{}

test/css/samples/cascade-false-global-keyframes/expected.css

@@ -1 +1 @@
-@keyframes why{0%{color:red}100%{color:blue}}.animated.sveltecomponent-xyz{animation:why 2s}.also-animated.sveltecomponent-xyz{animation:not-defined-here 2s}
+@keyframes why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s}

test/css/samples/cascade-false-keyframes-from-to/expected.css

@@ -1 +1 @@
-@keyframes sveltecomponent-xyz-why{from{color:red}to{color:blue}}.animated.sveltecomponent-xyz{animation:sveltecomponent-xyz-why 2s}
+@keyframes svelte-xyz-why{from{color:red}to{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s}

test/css/samples/cascade-false-keyframes/expected.css

@@ -1 +1 @@
-@keyframes sveltecomponent-xyz-why{0%{color:red}100%{color:blue}}.animated.sveltecomponent-xyz{animation:sveltecomponent-xyz-why 2s}.also-animated.sveltecomponent-xyz{animation:not-defined-here 2s}
+@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s}

test/css/samples/cascade-false-pseudo-element/expected.css

@@ -1 +1 @@
-span.sveltecomponent-xyz::after{content:'i am a pseudo-element'}span.sveltecomponent-xyz:first-child{color:red}span.sveltecomponent-xyz:last-child::after{color:blue}
+span.svelte-xyz::after{content:'i am a pseudo-element'}span.svelte-xyz:first-child{color:red}span.svelte-xyz:last-child::after{color:blue}

test/css/samples/cascade-false-universal-selector/expected.css

@@ -1 +1 @@
-.sveltecomponent-xyz{color:red}
+.svelte-xyz{color:red}

test/css/samples/cascade-false-universal-selector/expected.html

@@ -1 +1 @@
-<div class="sveltecomponent-xyz"></div>
+<div class="svelte-xyz"></div>

test/css/samples/cascade-false/expected.css

@@ -1 +1 @@
-div.sveltecomponent-xyz{color:red}div.foo.sveltecomponent-xyz{color:blue}.foo.sveltecomponent-xyz{font-weight:bold}
+div.svelte-xyz{color:red}div.foo.svelte-xyz{color:blue}.foo.svelte-xyz{font-weight:bold}

test/css/samples/combinator-child/expected.css

@@ -1 +1 @@
-.test.sveltecomponent-xyz>div.sveltecomponent-xyz{color:#0af}
+.test.svelte-xyz>div.svelte-xyz{color:#0af}

test/css/samples/combinator-child/expected.html

@@ -1 +1 @@
-<div class="test sveltecomponent-xyz"><div class="sveltecomponent-xyz">Testing...</div></div>
+<div class="test svelte-xyz"><div class="svelte-xyz">Testing...</div></div>

test/css/samples/css-vars/expected.css

@@ -1 +1 @@
-div.sveltecomponent-xyz,.sveltecomponent-xyz div{--test:10}
+div.svelte-xyz,.svelte-xyz div{--test:10}

test/css/samples/descendant-selector-non-top-level-outer/expected.css

@@ -1 +1 @@
-p.sveltecomponent-xyz span.sveltecomponent-xyz{color:red}
+p.svelte-xyz span.svelte-xyz{color:red}

test/css/samples/descendant-selector-non-top-level-outer/expected.html

@@ -1 +1 @@
-<div><p class="sveltecomponent-xyz"><span class="sveltecomponent-xyz">styled</span></p></div>
+<div><p class="svelte-xyz"><span class="svelte-xyz">styled</span></p></div>

test/css/samples/keyframes/expected.css

@@ -1 +1 @@
-@keyframes sveltecomponent-xyz-why{0%{color:red}100%{color:blue}}.sveltecomponent-xyz.animated,.sveltecomponent-xyz .animated{animation:sveltecomponent-xyz-why 2s}
+@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.svelte-xyz.animated,.svelte-xyz .animated{animation:svelte-xyz-why 2s}

test/css/samples/media-query-word/expected.css

@@ -1 +1 @@
-@media only screen and (min-width: 400px){div.sveltecomponent-xyz,.sveltecomponent-xyz div{color:red}}
+@media only screen and (min-width: 400px){div.svelte-xyz,.svelte-xyz div{color:red}}

test/css/samples/media-query/expected.css

@@ -1 +1 @@
-@media(min-width: 400px){.sveltecomponent-xyz.large-screen,.sveltecomponent-xyz .large-screen{display:block}}
+@media(min-width: 400px){.svelte-xyz.large-screen,.svelte-xyz .large-screen{display:block}}

test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css

@@ -1 +1 @@
-[data-foo*='bar'].sveltecomponent-xyz{color:red}
+[data-foo*='bar'].svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html

@@ -1,2 +1,2 @@
-<div><p class="sveltecomponent-xyz" data-foo="foobarbaz">this is styled</p>
+<div><p class="svelte-xyz" data-foo="foobarbaz">this is styled</p>
 	<p data-foo="fooBARbaz">this is unstyled</p></div>

test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css

@@ -1 +1 @@
-[data-foo='bar' i].sveltecomponent-xyz{color:red}
+[data-foo='bar' i].svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.html

@@ -1,2 +1,2 @@
-<div><p class="sveltecomponent-xyz" data-foo="BAR">this is styled</p>
+<div><p class="svelte-xyz" data-foo="BAR">this is styled</p>
 	<p data-foo="BAZ">this is unstyled</p></div>

test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css

@@ -1 +1 @@
-[data-foo='bar'].sveltecomponent-xyz{color:red}
+[data-foo='bar'].svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.html

@@ -1,2 +1,2 @@
-<div><p class="sveltecomponent-xyz" data-foo="whatever">this is styled</p>
+<div><p class="svelte-xyz" data-foo="whatever">this is styled</p>
 	<p data-foo="baz">this is unstyled</p></div>

test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css

@@ -1 +1 @@
-[data-foo='bar'].sveltecomponent-xyz{color:red}
+[data-foo='bar'].svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.html

@@ -1,2 +1,2 @@
-<div><p class="sveltecomponent-xyz" data-foo="bar">this is styled</p>
+<div><p class="svelte-xyz" data-foo="bar">this is styled</p>
 	<p data-foo="baz">this is unstyled</p></div>

test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css

@@ -1 +1 @@
-[data-foo|='bar'].sveltecomponent-xyz{color:red}
+[data-foo|='bar'].svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.html

@@ -1,3 +1,3 @@
-<div><p class="sveltecomponent-xyz" data-foo="bar">this is styled</p>
+<div><p class="svelte-xyz" data-foo="bar">this is styled</p>
-	<p class="sveltecomponent-xyz" data-foo="bar-baz">this is styled</p>
+	<p class="svelte-xyz" data-foo="bar-baz">this is styled</p>
 	<p data-foo="baz-bar">this is unstyled</p></div>

test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css

@@ -1 +1 @@
-[data-foo^='bar'].sveltecomponent-xyz{color:red}
+[data-foo^='bar'].svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.html

@@ -1,2 +1,2 @@
-<div><p class="sveltecomponent-xyz" data-foo="barbaz">this is styled</p>
+<div><p class="svelte-xyz" data-foo="barbaz">this is styled</p>
 	<p data-foo="bazbar">this is unstyled</p></div>

test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css

@@ -1 +1 @@
-[data-foo$='bar'].sveltecomponent-xyz{color:red}
+[data-foo$='bar'].svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.html

@@ -1,2 +1,2 @@
 <div><p data-foo="barbaz">this is unstyled</p>
-	<p class="sveltecomponent-xyz" data-foo="bazbar">this is styled</p></div>
+	<p class="svelte-xyz" data-foo="bazbar">this is styled</p></div>

test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css

@@ -1 +1 @@
-[data-foo~='bar'].sveltecomponent-xyz{color:red}
+[data-foo~='bar'].svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.html

@@ -1,2 +1,2 @@
-<div><p class="sveltecomponent-xyz" data-foo="qux bar">this is styled</p>
+<div><p class="svelte-xyz" data-foo="qux bar">this is styled</p>
 	<p data-foo="qux baz">this is unstyled</p></div>

test/css/samples/omit-scoping-attribute-attribute-selector/expected.css

@@ -1 +1 @@
-[autoplay].sveltecomponent-xyz{color:red}
+[autoplay].svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-attribute-selector/expected.html

@@ -1,2 +1,2 @@
-<div><video class="sveltecomponent-xyz" autoplay></video>
+<div><video class="svelte-xyz" autoplay></video>
 	<video></video></div>

test/css/samples/omit-scoping-attribute-class-dynamic/expected.css

@@ -1 +1 @@
-.foo.sveltecomponent-xyz{color:red}
+.foo.svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-class-dynamic/expected.html

@@ -1,2 +1,2 @@
-<p class="whatever sveltecomponent-xyz">this is styled</p>
+<p class="whatever svelte-xyz">this is styled</p>
 <p class="bar">this is unstyled</p>

test/css/samples/omit-scoping-attribute-class-static/expected.css

@@ -1 +1 @@
-.foo.sveltecomponent-xyz{color:red}
+.foo.svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-class-static/expected.html

@@ -1,2 +1,2 @@
-<p class="foo sveltecomponent-xyz">this is styled</p>
+<p class="foo svelte-xyz">this is styled</p>
 <p class="bar">this is unstyled</p>

test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css

@@ -1 +1 @@
-.foo.sveltecomponent-xyz .bar{color:red}
+.foo.svelte-xyz .bar{color:red}

test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.html

@@ -1 +1 @@
-<div class="foo sveltecomponent-xyz"></div>
+<div class="foo svelte-xyz"></div>

test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css

@@ -1 +1 @@
-div.sveltecomponent-xyz>p>em{color:red}
+div.svelte-xyz>p>em{color:red}

test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.html

@@ -1 +1 @@
-<div class="sveltecomponent-xyz"></div>
+<div class="svelte-xyz"></div>

test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css

@@ -1 +1 @@
-div.sveltecomponent-xyz>p{color:red}
+div.svelte-xyz>p{color:red}

test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.html

@@ -1 +1 @@
-<div class="sveltecomponent-xyz"></div>
+<div class="svelte-xyz"></div>

test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css

@@ -1 +1 @@
-div>section>p.sveltecomponent-xyz{color:red}
+div>section>p.svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.html

@@ -1 +1 @@
-<p class="sveltecomponent-xyz">this may or may not be styled</p>
+<p class="svelte-xyz">this may or may not be styled</p>

test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css

@@ -1 +1 @@
-div>p.sveltecomponent-xyz{color:red}
+div>p.svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.html

@@ -1 +1 @@
-<p class="sveltecomponent-xyz">this may or may not be styled</p>
+<p class="svelte-xyz">this may or may not be styled</p>

test/css/samples/omit-scoping-attribute-id/expected.css

@@ -1 +1 @@
-#foo.sveltecomponent-xyz{color:red}
+#foo.svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-id/expected.html

@@ -1,2 +1,2 @@
-<div class="sveltecomponent-xyz" id="foo"></div>
+<div class="svelte-xyz" id="foo"></div>
 <div id="bar"></div>

test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css

@@ -1 +1 @@
-div.sveltecomponent-xyz section p.sveltecomponent-xyz{color:red}
+div.svelte-xyz section p.svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.html

@@ -1 +1 @@
-<div class="sveltecomponent-xyz"><section><p class="sveltecomponent-xyz">this is styled</p></section></div>
+<div class="svelte-xyz"><section><p class="svelte-xyz">this is styled</p></section></div>

test/css/samples/omit-scoping-attribute-whitespace/expected.css

@@ -1 +1 @@
-div.sveltecomponent-xyz p.sveltecomponent-xyz{color:red}
+div.svelte-xyz p.svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute-whitespace/expected.html

@@ -1 +1 @@
-<div class="sveltecomponent-xyz"><section><p class="sveltecomponent-xyz">this is styled</p></section></div>
+<div class="svelte-xyz"><section><p class="svelte-xyz">this is styled</p></section></div>

test/css/samples/omit-scoping-attribute/expected.css

@@ -1 +1 @@
-p.sveltecomponent-xyz{color:red}
+p.svelte-xyz{color:red}

test/css/samples/omit-scoping-attribute/expected.html

@@ -1 +1 @@
-<div><p class="sveltecomponent-xyz">this is styled</p></div>
+<div><p class="svelte-xyz">this is styled</p></div>

test/css/samples/refs-qualified/expected.css

@@ -1 +1 @@
-[svelte-ref-button].active.sveltecomponent-xyz{color:red}
+[svelte-ref-button].active.svelte-xyz{color:red}

test/css/samples/refs-qualified/expected.html

@@ -1 +1 @@
-<button svelte-ref-button="" class="active sveltecomponent-xyz">deactivate</button>
+<button svelte-ref-button="" class="active svelte-xyz">deactivate</button>

test/css/samples/refs/expected.css

@@ -1 +1 @@
-[svelte-ref-a].sveltecomponent-xyz{color:red}[svelte-ref-b].sveltecomponent-xyz{color:green}
+[svelte-ref-a].svelte-xyz{color:red}[svelte-ref-b].svelte-xyz{color:green}

test/css/samples/refs/expected.html

@@ -1,3 +1,3 @@
-<div class="sveltecomponent-xyz" svelte-ref-a=''></div>
+<div class="svelte-xyz" svelte-ref-a=''></div>
-<div class="sveltecomponent-xyz" svelte-ref-b=''></div>
+<div class="svelte-xyz" svelte-ref-b=''></div>
 <div></div>

test/css/samples/universal-selector/expected.css

@@ -1 +1 @@
-.sveltecomponent-xyz,.sveltecomponent-xyz *{color:red}
+.svelte-xyz,.svelte-xyz *{color:red}

test/css/samples/unknown-at-rule/expected.css

@@ -1 +1 @@
-div.sveltecomponent-xyz,.sveltecomponent-xyz div{@apply --funky-div;}
+div.svelte-xyz,.svelte-xyz div{@apply --funky-div;}

test/css/samples/unused-selector-leading/expected.css

@@ -1 +1 @@
-.bar.sveltecomponent-xyz{color:red}
+.bar.svelte-xyz{color:red}

test/css/samples/unused-selector-leading/expected.html

@@ -1 +1 @@
-<div class="bar sveltecomponent-xyz"></div>
+<div class="bar svelte-xyz"></div>

test/css/samples/unused-selector-ternary/expected.css

@@ -1 +1 @@
-.active.sveltecomponent-xyz{color:red}.inactive.sveltecomponent-xyz{color:blue}
+.active.svelte-xyz{color:red}.inactive.svelte-xyz{color:blue}

test/css/samples/unused-selector-ternary/expected.html

@@ -1 +1 @@
-<div class="active sveltecomponent-xyz"></div>
+<div class="active svelte-xyz"></div>

test/css/samples/unused-selector/expected.css

@@ -1 +1 @@
-.foo.sveltecomponent-xyz{color:red}
+.foo.svelte-xyz{color:red}

test/css/samples/unused-selector/expected.html

@@ -1 +1 @@
-<div class="foo sveltecomponent-xyz"></div>
+<div class="foo svelte-xyz"></div>

test/server-side-rendering/samples/styles-nested/_actual.css

@@ -1,2 +1,2 @@
-div.main-bzh57p,.main-bzh57p div{color:red}
+div.svelte-bzh57p,.svelte-bzh57p div{color:red}
-div.one-4yw8vx,.one-4yw8vx div{color:green}
+div.svelte-4yw8vx,.svelte-4yw8vx div{color:green}

test/server-side-rendering/samples/styles-nested/_actual.html

@@ -1,8 +1,8 @@
-<div class="main-bzh57p">red</div>
+<div class="svelte-bzh57p">red</div>
-<div class="one-4yw8vx">green: foo</div>
+<div class="svelte-4yw8vx">green: foo</div>
 
 
 
-<div class="one-4yw8vx">green: bar</div>
+<div class="svelte-4yw8vx">green: bar</div>
 
 

test/server-side-rendering/samples/styles-nested/_expected.css

@@ -1,2 +1,2 @@
-div.main-bzh57p,.main-bzh57p div{color:red}
+div.svelte-bzh57p,.svelte-bzh57p div{color:red}
-div.one-4yw8vx,.one-4yw8vx div{color:green}
+div.svelte-4yw8vx,.svelte-4yw8vx div{color:green}

test/server-side-rendering/samples/styles-nested/_expected.html

@@ -1,8 +1,8 @@
-<div class="main-bzh57p">red</div>
+<div class="svelte-bzh57p">red</div>
-<div class="one-4yw8vx">green: foo</div>
+<div class="svelte-4yw8vx">green: foo</div>
 
 
 
-<div class="one-4yw8vx">green: bar</div>
+<div class="svelte-4yw8vx">green: bar</div>
 
 

test/server-side-rendering/samples/styles/_actual.css

@@ -1 +1 @@
-div.main-bzh57p,.main-bzh57p div{color:red}
+div.svelte-bzh57p,.svelte-bzh57p div{color:red}

test/server-side-rendering/samples/styles/_actual.html

@@ -1 +1 @@
-<div class="main-bzh57p">red</div>
+<div class="svelte-bzh57p">red</div>

test/server-side-rendering/samples/styles/_expected.css

@@ -1 +1 @@
-div.main-bzh57p,.main-bzh57p div{color:red}
+div.svelte-bzh57p,.svelte-bzh57p div{color:red}

test/server-side-rendering/samples/styles/_expected.html

@@ -1 +1 @@
-<div class="main-bzh57p">red</div>
+<div class="svelte-bzh57p">red</div>