diff --git a/.changeset/healthy-years-battle.md b/.changeset/healthy-years-battle.md new file mode 100644 index 000000000..dcfaaeb2f --- /dev/null +++ b/.changeset/healthy-years-battle.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': patch +--- + +fix(dev): compile with hmr: false for prebundled deps as hmr does not work with that diff --git a/.changeset/twenty-walls-watch.md b/.changeset/twenty-walls-watch.md new file mode 100644 index 000000000..d583c1f11 --- /dev/null +++ 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 index cec88e545..8779408c9 100644 --- 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 { normalize } from './id.js'; /** * @typedef {NonNullable} EsbuildOptions @@ -49,7 +51,7 @@ 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 {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection} [statsCollection] * @returns {Promise} */ @@ -68,6 +70,14 @@ async function compileSvelte(options, { filename, code }, statsCollection) { generate: 'client' }; + if (compileOptions.hmr) { + if (options.emitCss) { + const hash = `s-${safeBase64Hash(normalize(filename, options.root))}`; + compileOptions.cssHash = () => hash; + } + compileOptions.hmr = false; + } + 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 index a5fe602a1..812a6c79b 100644 --- a/packages/vite-plugin-svelte/src/utils/id.js +++ b/packages/vite-plugin-svelte/src/utils/id.js @@ -133,7 +133,7 @@ function parseRequestQuery(rawQuery) { * @param {string} normalizedRoot * @returns {string} */ -function normalize(filename, normalizedRoot) { +export function normalize(filename, normalizedRoot) { return stripRoot(normalizePath(filename), normalizedRoot); }