fix: ensure styles are loaded in dev mode for routes containing special characters

.changeset/stale-houses-yell.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: ensure styles are loaded in dev mode for routes containing special characters

packages/kit/src/exports/vite/dev/index.js

@@ -186,7 +186,9 @@ export async function dev(vite, vite_config, svelte_config) {
 								) {
 									try {
 										query.set('inline', '');
-										const mod = await vite.ssrLoadModule(`${url.pathname}${url.search}${url.hash}`);
+										const mod = await vite.ssrLoadModule(
+											`${decodeURI(url.pathname)}${url.search}${url.hash}`
+										);
 										styles[dep.url] = mod.default;
 									} catch {
 										// this can happen with dynamically imported modules, I think

packages/kit/test/apps/basics/src/routes/css/encöded/+page.svelte

@@ -0,0 +1,7 @@
+<h1>this should be purple</h1>
+
+<style>
+	h1 {
+		color: purple;
+	}
+</style>

packages/kit/test/apps/basics/test/cross-platform/test.js

@@ -29,6 +29,11 @@ test.describe('CSS', () => {
 			expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)');
 		});
 	});
+
+	test('loads styles on routes with encoded characters', async ({ page, get_computed_style }) => {
+		await page.goto('/css/encöded');
+		expect(await get_computed_style('h1', 'color')).toBe('rgb(128, 0, 128)');
+	});
 });
 
 test.describe('Shadowed pages', () => {