fix(dev): avoid css hash mismatch by applying custom css hash even fo…

…r prebundling
sveltejs · Jul 27, 2024 · 7c0a7ba · 7c0a7ba
1 parent c1e2a80
commit 7c0a7ba
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/.changeset/twenty-walls-watch.md b/.changeset/twenty-walls-watch.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix(dev): make sure custom cssHash is applied consistently even for prebundled components to avoid hash mismatches during hydration
diff --git a/packages/vite-plugin-svelte/src/utils/esbuild.js b/packages/vite-plugin-svelte/src/utils/esbuild.js
@@ -2,6 +2,8 @@ import { readFileSync } from 'node:fs';
 import * as svelte from 'svelte/compiler';
 import { log } from './log.js';
 import { toESBuildError } from './error.js';
+import { safeBase64Hash } from './hash.js';
+import { buildFilenameNormalizer } from './id.js';
 
 /**
  * @typedef {NonNullable<import('vite').DepOptimizationOptions['esbuildOptions']>} EsbuildOptions
@@ -26,6 +28,7 @@ export function esbuildSveltePlugin(options) {
 			const filter = /\.svelte(?:\?.*)?$/;
 			/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
 			let statsCollection;
+			const normalizeFilename = buildFilenameNormalizer(options.root);
 			build.onStart(() => {
 				statsCollection = options.stats?.startCollection('prebundle library components', {
 					logResult: (c) => c.stats.length > 1
@@ -34,7 +37,12 @@ export function esbuildSveltePlugin(options) {
 			build.onLoad({ filter }, async ({ path: filename }) => {
 				const code = readFileSync(filename, 'utf8');
 				try {
-					const contents = await compileSvelte(options, { filename, code }, statsCollection);
+					const contents = await compileSvelte(
+						options,
+						{ filename, code },
+						normalizeFilename,
+						statsCollection
+					);
 					return { contents };
 				} catch (e) {
 					return { errors: [toESBuildError(e, options)] };
@@ -49,11 +57,12 @@ export function esbuildSveltePlugin(options) {
 
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
- * @param {{ filename: string; code: string }} input
+ * @param {{ filename: string, code: string }} input
+ * @param {(filename: string) => string} normalizeFilename
  * @param {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection} [statsCollection]
  * @returns {Promise<string>}
  */
-async function compileSvelte(options, { filename, code }, statsCollection) {
+async function compileSvelte(options, { filename, code }, normalizeFilename, statsCollection) {
 	let css = options.compilerOptions.css;
 	if (css !== 'injected') {
 		// TODO ideally we'd be able to externalize prebundled styles too, but for now always put them in the js
@@ -68,6 +77,11 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 		generate: 'client'
 	};
 
+	if (compileOptions.hmr && options.emitCss) {
+		const hash = `s-${safeBase64Hash(normalizeFilename(filename))}`;
+		compileOptions.cssHash = () => hash;
+	}
+
 	let preprocessed;
 
 	if (options.preprocess) {

diff --git a/packages/vite-plugin-svelte/src/utils/id.js b/packages/vite-plugin-svelte/src/utils/id.js
@@ -137,6 +137,17 @@ function normalize(filename, normalizedRoot) {
 	return stripRoot(normalizePath(filename), normalizedRoot);
 }
 
+/**
+ * create a normalizer function for root
+ *
+ * @param {string} root
+ * @returns {function(filename: string): string}
+ */
+export function buildFilenameNormalizer(root) {
+	const normalizedRoot = normalizePath(root);
+	return (filename) => normalize(filename, normalizedRoot);
+}
+
 /**
  * @param {string} filename
  * @param {string} root