refactor: bump svelte and remove custom cssHash handling (#1271)

* refactor: bump svelte and remove custom cssHash handling

* chore: add warning message and update cssHash faq

* chore: update FAQ link

* fix: formatting and simplify message

* update changeset

* chore: bump minimum svelte version to 5.46.4 to get a security fix

Author: dominikg

.changeset/six-trees-scream.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+breaking(dev): no longer overrides compilerOptions.cssHash because Svelte now produces a stable css hash by itself

.changeset/wild-hairs-fetch.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+breaking(deps): require svelte 5.46.4 or later

.github/workflows/ci.yml

@@ -126,7 +126,7 @@ jobs:
       - name: downgrade svelte to baseline
         if: matrix.svelte == 'baseline'
         run: |
-          pnpm update -r --no-save svelte@5.0.0
+          pnpm update -r --no-save svelte@5.46.4
           pnpm ls svelte
       - name: install playwright chromium
         run: pnpm playwright install chromium --only-shell

docs/faq.md

@@ -54,11 +54,24 @@ Bad:
 <script type="text/typescript"></script>
 ```
 
-### Why can't `cssHash` be set in development mode?
+### Why should `cssHash` be calculated from filename during dev
 
-`cssHash` is fixed in development for CSS HMR in Svelte components, ensuring that the hash value is stable based on the file name so that styles are only updated when changed.
+The output of this function is part of the js module for the component. If the hash changes when css changes, every css update also triggers a js update.
+These js updates can lead to application state resetting in your browser, which is a worse developer experience than only css updating.
+It must also be different between different components to ensure that styles are scoped and updates applied correctly.
 
-However, `cssHash` is respected in production builds as HMR is a dev-only feature.
+So it is recommended to keep the pattern defined by Svelte itself. If you want to customize the prefix, use this:
+
+```js
+// svelte.config.js
+export default {
+  compilerOptions: {
+    cssHash: ({ hash, filename, css }) => `my-custom-prefix-${hash(filename ?? css)}`
+  }
+};
+```
+
+If you don't want the hash to depend on filename, either accept the worse dx or customize cssHash only during build.
 
 ### How do I add a Svelte preprocessor from a Vite plugin?
 

packages/vite-plugin-svelte/package.json

@@ -45,7 +45,7 @@
     "vitefu": "^1.1.1"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0",
+    "svelte": "^5.46.4",
     "vite": "^8.0.0-beta.7 || ^8.0.0"
   },
   "devDependencies": {

packages/vite-plugin-svelte/src/plugins/setup-optimizer.js

@@ -3,8 +3,6 @@ import path from 'node:path';
 import * as svelte from 'svelte/compiler';
 import { log } from '../utils/log.js';
 import { toRollupError } from '../utils/error.js';
-import { safeBase64Hash } from '../utils/hash.js';
-import { normalize } from '../utils/id.js';
 
 /**
  * @typedef {NonNullable<import('vite').Rollup.Plugin>} RollupPlugin
@@ -136,11 +134,6 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 		generate: 'client'
 	};
 
-	if (compileOptions.hmr && options.emitCss) {
-		const hash = `s-${safeBase64Hash(normalize(filename, options.root))}`;
-		compileOptions.cssHash = () => hash;
-	}
-
 	let preprocessed;
 
 	if (options.preprocess) {

packages/vite-plugin-svelte/src/utils/compile.js

@@ -1,5 +1,4 @@
 import * as svelte from 'svelte/compiler';
-import { safeBase64Hash } from './hash.js';
 import { log } from './log.js';
 
 import { mapToRelative } from './sourcemaps.js';
@@ -58,8 +57,6 @@ export function createCompileSvelte() {
 
 		let finalCode = code;
 		if (compileOptions.hmr && options.emitCss) {
-			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
-			compileOptions.cssHash = () => hash;
 			const closeStylePos = code.lastIndexOf('</style>');
 			if (closeStylePos > -1) {
 				// inject rule that forces compile to attach scope class to every node in the template

packages/vite-plugin-svelte/src/utils/constants.js

@@ -23,8 +23,9 @@ export const SVELTE_IMPORTS = Object.entries(sveltePkg.exports)
 
 export const SVELTE_EXPORT_CONDITIONS = ['svelte'];
 
-export const FAQ_LINK_MISSING_EXPORTS_CONDITION =
-	'https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition';
+const FAQ_URL = 'https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md';
+export const FAQ_LINK_MISSING_EXPORTS_CONDITION = `${FAQ_URL}#missing-exports-condition`;
+export const FAQ_LINK_CSSHASH = `${FAQ_URL}#why-should-csshash-be-calculated-from-filename-during-dev`;
 
 export const LINK_TRANSFORM_WITH_PLUGIN =
 	'https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/advanced-usage.md#transform-svelte-files-with-vite-plugins';

packages/vite-plugin-svelte/src/utils/hash.js

@@ -12,6 +12,7 @@ import { log } from './log.js';
 import { loadSvelteConfig } from './load-svelte-config.js';
 import {
 	DEFAULT_SVELTE_EXT,
+	FAQ_LINK_CSSHASH,
 	FAQ_LINK_MISSING_EXPORTS_CONDITION,
 	SVELTE_EXPORT_CONDITIONS,
 	SVELTE_IMPORTS,
@@ -243,6 +244,33 @@ function enforceOptionsForHmr(options, viteConfig) {
 		);
 		options.compilerOptions.hmr = false;
 	}
+
+	if (
+		options.isServe &&
+		options.compilerOptions.hmr &&
+		options.emitCss &&
+		options.compilerOptions.cssHash
+	) {
+		let usesFilename = false;
+		let usesCss = false;
+		options.compilerOptions.cssHash({
+			get filename() {
+				usesFilename = true;
+				return 'Foo.svelte';
+			},
+			get css() {
+				usesCss = true;
+				return '.foo{}';
+			},
+			name: 'Foo',
+			hash: /** @type{(x: string) => string} */ (x) => x
+		});
+		if (!usesFilename || usesCss) {
+			log.warn(
+				`The custom compilerOptions.cssHash in your svelte config can degrade your DX. See ${FAQ_LINK_CSSHASH} for more information.`
+			);
+		}
+	}
 }
 
 /**
@@ -270,9 +298,6 @@ function enforceOptionsForProduction(options) {
  */
 function removeIgnoredOptions(options) {
 	const ignoredCompilerOptions = ['generate', 'format', 'filename'];
-	if (options.compilerOptions.hmr && options.emitCss) {
-		ignoredCompilerOptions.push('cssHash');
-	}
 	const passedCompilerOptions = Object.keys(options.compilerOptions || {});
 	const passedIgnored = passedCompilerOptions.filter((o) => ignoredCompilerOptions.includes(o));
 	if (passedIgnored.length) {