chore: generate CSS hash using the filename (#16740)

* chore: generate CSS hash using the filename

* fix all tests but one

* slightly kludgy fix

* try this

* fix

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>

.changeset/fast-boxes-sort.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: generate CSS hash using the filename

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,
@@ -520,7 +529,7 @@ export function analyze_component(root, source, options) {
 			hash: root.css
 				? options.cssHash({
 						css: root.css.content.styles,
-						filename: options.filename,
+						filename: state.filename,
 						name: component_name,
 						hash
 					})
@@ -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/src/compiler/types/index.d.ts

@@ -105,7 +105,7 @@ export interface CompileOptions extends ModuleCompileOptions {
 	css?: 'injected' | 'external';
 	/**
 	 * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.
-	 * It defaults to returning `svelte-${hash(css)}`.
+	 * It defaults to returning `svelte-${hash(filename ?? css)}`.
 	 *
 	 * @default undefined
 	 */

packages/svelte/src/compiler/validate-options.js

@@ -70,8 +70,8 @@ const component_options = {
 		return input;
 	}),
 
-	cssHash: fun(({ css, hash }) => {
+	cssHash: fun(({ css, filename, hash }) => {
-		return `svelte-${hash(css)}`;
+		return `svelte-${hash(filename === '(unknown)' ? css : filename ?? css)}`;
 	}),
 
 	// TODO this is a sourcemap option, would be good to put under a sourcemap namespace

packages/svelte/tests/html_equal.js

@@ -32,7 +32,13 @@ function clean_children(node, opts) {
 			return;
 		}
 
-		node.setAttribute(attr.name, attr.value);
+		let value = attr.value;
+
+		if (attr.name === 'class') {
+			value = value.replace(/svelte-\w+/, 'svelte-xyz123');
+		}
+
+		node.setAttribute(attr.name, value);
 	});
 
 	for (let child of [...node.childNodes]) {

packages/svelte/tests/runtime-browser/assert.js

@@ -74,6 +74,7 @@ function normalize_html(window, html) {
 		node.innerHTML = html
 			.replace(/<!--.*?-->/g, '')
 			.replace(/>[\s\r\n]+</g, '><')
+			.replace(/svelte-\w+/g, 'svelte-xyz123')
 			.trim();
 
 		normalize_children(node);

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-x1o6ra"></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-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined;
-		assert.equal(div.className, 'svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined + '';
-		assert.equal(div.className, 'undefined svelte-x1o6ra');
+		assert.equal(div.className, 'undefined svelte-70s021');
 
 		component.testName = null + '';
-		assert.equal(div.className, 'null svelte-x1o6ra');
+		assert.equal(div.className, 'null svelte-70s021');
 
 		component.testName = 1;
-		assert.equal(div.className, '1 svelte-x1o6ra');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName = 0;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName = false;
-		assert.equal(div.className, 'false svelte-x1o6ra');
+		assert.equal(div.className, 'false svelte-70s021');
 
 		component.testName = true;
-		assert.equal(div.className, 'true svelte-x1o6ra');
+		assert.equal(div.className, 'true svelte-70s021');
 
 		component.testName = {};
-		assert.equal(div.className, 'svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = '';
-		assert.equal(div.className, 'svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = 'testClassName';
-		assert.equal(div.className, 'testClassName svelte-x1o6ra');
+		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-x1o6ra"></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-x1o6ra');
+		assert.equal(div.className, 'test1test2 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = null;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'nulltest svelte-x1o6ra');
+		assert.equal(div.className, 'nulltest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'undefinedtest svelte-x1o6ra');
+		assert.equal(div.className, 'undefinedtest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = undefined;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 1;
-		assert.equal(div.className, '1 svelte-x1o6ra');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 1;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 0;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 0;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		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-x1o6ra"></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-x1o6ra');
+		assert.equal(div.className, 'testClassName svelte-70s021');
 
 		component.testName = null;
-		assert.equal(div.className, 'svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined;
-		assert.equal(div.className, 'svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined + '';
-		assert.equal(div.className, 'undefined svelte-x1o6ra');
+		assert.equal(div.className, 'undefined svelte-70s021');
 
 		component.testName = null + '';
-		assert.equal(div.className, 'null svelte-x1o6ra');
+		assert.equal(div.className, 'null svelte-70s021');
 
 		component.testName = 1;
-		assert.equal(div.className, '1 svelte-x1o6ra');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName = 0;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName = false;
-		assert.equal(div.className, 'false svelte-x1o6ra');
+		assert.equal(div.className, 'false svelte-70s021');
 
 		component.testName = true;
-		assert.equal(div.className, 'true svelte-x1o6ra');
+		assert.equal(div.className, 'true svelte-70s021');
 
 		component.testName = {};
-		assert.equal(div.className, 'svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = '';
-		assert.equal(div.className, 'svelte-x1o6ra');
+		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-x1o6ra"></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-x1o6ra');
+		assert.equal(div.className, 'test1test2 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = null;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'nulltest svelte-x1o6ra');
+		assert.equal(div.className, 'nulltest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'undefinedtest svelte-x1o6ra');
+		assert.equal(div.className, 'undefinedtest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = undefined;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 1;
-		assert.equal(div.className, '1 svelte-x1o6ra');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 1;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 0;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 0;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		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-1koh33s'), true);
+		assert.equal(my_element.classList.contains('svelte-70s021'), true);
-		assert.equal(my_element_1.classList.contains('svelte-1koh33s'), 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-p153w3"></custom-element><custom-element class="red svelte-p153w3"></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-p153w3');
+		assert.deepEqual(el.className, 'red svelte-70s021');
-		assert.deepEqual(el2.className, 'red svelte-p153w3');
+		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-gfnjhw">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-gfnjhw">.foo.svelte-gfnjhw {color:green;}.foo.svelte-gfnjhw {color:green;} .foo.svelte-gfnjhw {color:green;}.foo.svelte-gfnjhw, .foo.svelte-gfnjhw {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-sg04hs {
+.foo.svelte-1nvcr6w {
 	color: red;
 }

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

@@ -1 +1 @@
-<!--[--><div class="bar svelte-ievf05">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-ievf05">.bar.svelte-ievf05 {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-sg04hs {
+	.foo.svelte-okauro {
 		color: red;
 	}

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

@@ -1 +1 @@
-<div class="foo svelte-sg04hs">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-sg04hs">.foo.svelte-sg04hs {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-sg04hs {
+	.foo.svelte-e9omc {
 		color: red;
 	}

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

@@ -1 +1 @@
-<div class="foo svelte-sg04hs">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-sg04hs">.foo.svelte-sg04hs {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-o6vre' }],
+	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-sg04hs' }]
+	css: [{ str: '.foo', strGenerated: '.foo.svelte-1eyw86p' }]
 });

packages/svelte/types/index.d.ts

@@ -998,7 +998,7 @@ declare module 'svelte/compiler' {
 		css?: 'injected' | 'external';
 		/**
 		 * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.
-		 * It defaults to returning `svelte-${hash(css)}`.
+		 * It defaults to returning `svelte-${hash(filename ?? css)}`.
 		 *
 		 * @default undefined
 		 */
@@ -2933,7 +2933,7 @@ declare module 'svelte/types/compiler/interfaces' {
 		css?: 'injected' | 'external';
 		/**
 		 * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.
-		 * It defaults to returning `svelte-${hash(css)}`.
+		 * It defaults to returning `svelte-${hash(filename ?? css)}`.
 		 *
 		 * @default undefined
 		 */