fix

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -456,10 +456,19 @@ export function analyze_component(root, source, options) {
 
 	const is_custom_element = !!options.customElementOptions || options.customElement;
 
+	const name = module.scope.generate(options.name ?? component_name);
+
+	state.adjust({
+		component_name: name,
+		dev: options.dev,
+		rootDir: options.rootDir,
+		runes
+	});
+
 	// TODO remove all the ?? stuff, we don't need it now that we're validating the config
 	/** @type {ComponentAnalysis} */
 	const analysis = {
-		name: module.scope.generate(options.name ?? component_name),
+		name,
 		root: scope_root,
 		module,
 		instance,
@@ -534,13 +543,6 @@ export function analyze_component(root, source, options) {
 		async_deriveds: new Set()
 	};
 
-	state.adjust({
-		component_name: analysis.name,
-		dev: options.dev,
-		rootDir: options.rootDir,
-		runes
-	});
-
 	if (!runes) {
 		// every exported `let` or `var` declaration becomes a prop, everything else becomes an export
 		for (const node of instance.ast.body) {

packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js

@@ -1,43 +1,43 @@
 import { ok, test } from '../../test';
 
 export default test({
-	html: '<div class="svelte-1bl4vl5"></div>',
+	html: '<div class="svelte-70s021"></div>',
 
 	test({ assert, component, target }) {
 		const div = target.querySelector('div');
 		ok(div);
 
 		component.testName = null;
-		assert.equal(div.className, 'svelte-1bl4vl5');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined;
-		assert.equal(div.className, 'svelte-1bl4vl5');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined + '';
-		assert.equal(div.className, 'undefined svelte-1bl4vl5');
+		assert.equal(div.className, 'undefined svelte-70s021');
 
 		component.testName = null + '';
-		assert.equal(div.className, 'null svelte-1bl4vl5');
+		assert.equal(div.className, 'null svelte-70s021');
 
 		component.testName = 1;
-		assert.equal(div.className, '1 svelte-1bl4vl5');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName = 0;
-		assert.equal(div.className, '0 svelte-1bl4vl5');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName = false;
-		assert.equal(div.className, 'false svelte-1bl4vl5');
+		assert.equal(div.className, 'false svelte-70s021');
 
 		component.testName = true;
-		assert.equal(div.className, 'true svelte-1bl4vl5');
+		assert.equal(div.className, 'true svelte-70s021');
 
 		component.testName = {};
-		assert.equal(div.className, 'svelte-1bl4vl5');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = '';
-		assert.equal(div.className, 'svelte-1bl4vl5');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = 'testClassName';
-		assert.equal(div.className, 'testClassName svelte-1bl4vl5');
+		assert.equal(div.className, 'testClassName svelte-70s021');
 	}
 });

packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js

@@ -10,43 +10,43 @@ export default test({
 		};
 	},
 
-	html: '<div class="test1test2 svelte-phrtam"></div>',
+	html: '<div class="test1test2 svelte-70s021"></div>',
 
 	test({ assert, component, target }) {
 		const div = target.querySelector('div');
 		ok(div);
-		assert.equal(div.className, 'test1test2 svelte-phrtam');
+		assert.equal(div.className, 'test1test2 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = null;
-		assert.equal(div.className, '0 svelte-phrtam');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'nulltest svelte-phrtam');
+		assert.equal(div.className, 'nulltest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'undefinedtest svelte-phrtam');
+		assert.equal(div.className, 'undefinedtest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = undefined;
-		assert.equal(div.className, 'NaN svelte-phrtam');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 1;
-		assert.equal(div.className, '1 svelte-phrtam');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 1;
-		assert.equal(div.className, 'NaN svelte-phrtam');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 0;
-		assert.equal(div.className, '0 svelte-phrtam');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 0;
-		assert.equal(div.className, 'NaN svelte-phrtam');
+		assert.equal(div.className, 'NaN svelte-70s021');
 	}
 });

packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js

@@ -8,41 +8,41 @@ export default test({
 		};
 	},
 
-	html: '<div class="testClassName svelte-zab9z2"></div>',
+	html: '<div class="testClassName svelte-70s021"></div>',
 
 	test({ assert, component, target }) {
 		const div = target.querySelector('div');
 		ok(div);
-		assert.equal(div.className, 'testClassName svelte-zab9z2');
+		assert.equal(div.className, 'testClassName svelte-70s021');
 
 		component.testName = null;
-		assert.equal(div.className, 'svelte-zab9z2');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined;
-		assert.equal(div.className, 'svelte-zab9z2');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined + '';
-		assert.equal(div.className, 'undefined svelte-zab9z2');
+		assert.equal(div.className, 'undefined svelte-70s021');
 
 		component.testName = null + '';
-		assert.equal(div.className, 'null svelte-zab9z2');
+		assert.equal(div.className, 'null svelte-70s021');
 
 		component.testName = 1;
-		assert.equal(div.className, '1 svelte-zab9z2');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName = 0;
-		assert.equal(div.className, '0 svelte-zab9z2');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName = false;
-		assert.equal(div.className, 'false svelte-zab9z2');
+		assert.equal(div.className, 'false svelte-70s021');
 
 		component.testName = true;
-		assert.equal(div.className, 'true svelte-zab9z2');
+		assert.equal(div.className, 'true svelte-70s021');
 
 		component.testName = {};
-		assert.equal(div.className, 'svelte-zab9z2');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = '';
-		assert.equal(div.className, 'svelte-zab9z2');
+		assert.equal(div.className, 'svelte-70s021');
 	}
 });

packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js

@@ -10,43 +10,43 @@ export default test({
 		};
 	},
 
-	html: '<div class="test1test2 svelte-1i4vvar"></div>',
+	html: '<div class="test1test2 svelte-70s021"></div>',
 
 	async test({ assert, component, target }) {
 		const div = target.querySelector('div');
 		ok(div);
-		assert.equal(div.className, 'test1test2 svelte-1i4vvar');
+		assert.equal(div.className, 'test1test2 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = null;
-		assert.equal(div.className, '0 svelte-1i4vvar');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'nulltest svelte-1i4vvar');
+		assert.equal(div.className, 'nulltest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'undefinedtest svelte-1i4vvar');
+		assert.equal(div.className, 'undefinedtest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = undefined;
-		assert.equal(div.className, 'NaN svelte-1i4vvar');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 1;
-		assert.equal(div.className, '1 svelte-1i4vvar');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 1;
-		assert.equal(div.className, 'NaN svelte-1i4vvar');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 0;
-		assert.equal(div.className, '0 svelte-1i4vvar');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 0;
-		assert.equal(div.className, 'NaN svelte-1i4vvar');
+		assert.equal(div.className, 'NaN svelte-70s021');
 	}
 });

packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js

@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	async test({ assert, target, logs }) {
 		const [my_element, my_element_1] = target.querySelectorAll('my-element');
-		assert.equal(my_element.classList.contains('svelte-1dwmud9'), true);
-		assert.equal(my_element_1.classList.contains('svelte-1dwmud9'), true);
+		assert.equal(my_element.classList.contains('svelte-70s021'), true);
+		assert.equal(my_element_1.classList.contains('svelte-70s021'), true);
 	}
 });

packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js

@@ -1,14 +1,14 @@
 import { ok, test } from '../../test';
 
 export default test({
-	html: `<custom-element class="red svelte-2z630"></custom-element><custom-element class="red svelte-2z630"></custom-element>`,
+	html: `<custom-element class="red svelte-70s021"></custom-element><custom-element class="red svelte-70s021"></custom-element>`,
 
 	async test({ assert, target }) {
 		const [el, el2] = target.querySelectorAll('custom-element');
 		ok(el);
 		ok(el2);
 
-		assert.deepEqual(el.className, 'red svelte-2z630');
-		assert.deepEqual(el2.className, 'red svelte-2z630');
+		assert.deepEqual(el.className, 'red svelte-70s021');
+		assert.deepEqual(el2.className, 'red svelte-70s021');
 	}
 });

packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html

@@ -1 +1 @@
-<!--[--><div class="foo svelte-lxrhue">foo</div><!--]-->
+<!--[--><div class="foo svelte-1h3glmj">foo</div><!--]-->

packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html

@@ -1 +1 @@
-<style id="svelte-lxrhue">.foo.svelte-lxrhue {color:green;}.foo.svelte-lxrhue {color:green;} .foo.svelte-lxrhue {color:green;}.foo.svelte-lxrhue, .foo.svelte-lxrhue {color:green;}</style>
+<style id="svelte-1h3glmj">.foo.svelte-1h3glmj {color:green;}.foo.svelte-1h3glmj {color:green;} .foo.svelte-1h3glmj {color:green;}.foo.svelte-1h3glmj, .foo.svelte-1h3glmj {color:green;}</style>

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css

@@ -1,4 +1,4 @@
 
-.foo.svelte-djbl57 {
+.foo.svelte-1nvcr6w {
 	color: red;
 }

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html

@@ -1 +1 @@
-<!--[--><div class="bar svelte-djbl57">bar</div><!----> <div class="foo svelte-sg04hs">foo</div><!--]-->
+<!--[--><div class="bar svelte-1nvcr6w">bar</div><!----> <div class="foo svelte-sg04hs">foo</div><!--]-->

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html

@@ -1 +1 @@
-<style id="svelte-djbl57">.bar.svelte-djbl57 {color:red;}</style>
+<style id="svelte-lr8eda">.bar.svelte-lr8eda {color:red;}</style>

packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css

@@ -1,4 +1,4 @@
 
-	.foo.svelte-y58i7t {
+	.foo.svelte-okauro {
 		color: red;
 	}

packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html

@@ -1 +1 @@
-<div class="foo svelte-y58i7t">foo</div>
+<div class="foo svelte-okauro">foo</div>

packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html

@@ -1 +1 @@
-<style id="svelte-y58i7t">.foo.svelte-y58i7t {color:red;}</style>
+<style id="svelte-okauro">.foo.svelte-okauro {color:red;}</style>

packages/svelte/tests/server-side-rendering/samples/css/_expected.css

@@ -1,4 +1,4 @@
 
-	.foo.svelte-k6fc61 {
+	.foo.svelte-e9omc {
 		color: red;
 	}

packages/svelte/tests/server-side-rendering/samples/css/_expected.html

@@ -1 +1 @@
-<div class="foo svelte-k6fc61">foo</div>
+<div class="foo svelte-e9omc">foo</div>

packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html

@@ -1 +1 @@
-<style id="svelte-k6fc61">.foo.svelte-k6fc61 {color:red;}</style>
+<style id="svelte-e9omc">.foo.svelte-e9omc {color:red;}</style>

packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js

@@ -57,7 +57,7 @@ export default test({
 		{ str: 'replace_me_script', strGenerated: 'done_replace_script_2' },
 		{ str: 'done_replace_script_2', idxGenerated: 1 }
 	],
-	css: [{ str: '.replace_me_style', strGenerated: '.done_replace_style_2.svelte-fk9pdp' }],
+	css: [{ str: '.replace_me_style', strGenerated: '.done_replace_style_2.svelte-1vsrjd4' }],
 	test({ assert, code_preprocessed, code_css }) {
 		assert.equal(
 			code_preprocessed.includes('\n/*# sourceMappingURL=data:application/json;base64,'),

packages/svelte/tests/sourcemaps/samples/css/_config.js

@@ -1,5 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	css: [{ str: '.foo', strGenerated: '.foo.svelte-rfm9n0' }]
+	css: [{ str: '.foo', strGenerated: '.foo.svelte-1eyw86p' }]
 });