fix: ensure styles are loaded in dev mode for routes containing special characters (#9894)

* Fix loading styles for routes containing special characters in dev mode.

SvelteKit doesn't decode special characters in pathnames when loading CSS modules in dev mode, resulting in an error:

Internal server error: Failed to load url /src/routes/(special)/hinnap%C3%A4ring/+page.svelte?svelte=&type=style&lang.css=&inline= (resolved id: /src/routes/(special)/hinnap%C3%A4ring/+page.svelte?svelte&type=style&lang.css). Does the file exist?

Actual path:

/src/routes/(special)/hinnapäring/

Fix by using decodeURI on the url.pathname when loading CSS modules.

* Create stale-houses-yell.md

* decodeURL inside if

* add test

---------

Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: 3 people

.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', () => {