Unicode dev error

[datio]

Describe the bug

Routes that contain Greek characters and have styles applied in their .svelte files error with the following message:

[plugin:vite-plugin-svelte] Invalid character
/home/datio/projects/problematic-unicode-support/src/routes/τεστ.svelte
    at btoa (node:buffer:1220:13)
    at SourceMap.toUrl (file:///home/datio/projects/problematic-unicode-support/node_modules/svelte/compiler.mjs:24885:72)
    at dom (file:///home/datio/projects/problematic-unicode-support/node_modules/svelte/compiler.mjs:24943:56)
    at compile (file:///home/datio/projects/problematic-unicode-support/node_modules/svelte/compiler.mjs:31314:15)
    at compileSvelte (file:///home/datio/projects/problematic-unicode-support/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:320:20)
    at async TransformContext.transform (file:///home/datio/projects/problematic-unicode-support/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1357:27)
    at async Object.transform (/home/datio/projects/problematic-unicode-support/node_modules/vite/dist/node/chunks/dep-1be34a63.js:50399:30)
    at async transformRequest (/home/datio/projects/problematic-unicode-support/node_modules/vite/dist/node/chunks/dep-1be34a63.js:65167:29)
    at async viteTransformMiddleware (/home/datio/projects/problematic-unicode-support/node_modules/vite/dist/node/chunks/dep-1be34a63.js:65295:32
Click outside or fix the code to dismiss.
You can also disable this overlay with hmr: { overlay: false } in vite.config.js.

Replacing the b64enc function with the following seems to fix the problem:

const b64enc = typeof btoa == 'function' ? b => btoa(encodeURIComponent(b)) : b => Buffer.from(b).toString('base64');

Reproduction

Create a file named τεστ.svelte in your routes dir with the following contents:

<div class="test">
    test
</div>

<style>
    .test {
        color: darkred;
    }
</style>

then run npm run dev and visit that page

Logs

No response

System Info

System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 564.96 MB / 31.33 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Browsers:
    Firefox: 91.0.2
  npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.45 => 1.0.0-next.45 
    @sveltejs/kit: next => 1.0.0-next.163 
    svelte: ^3.34.0 => 3.42.4 

### Severity

serious, but I can work around it

### Additional Information

_No response_

[datio]

This test fix seems to do the job, but is it the proper solution?
We're still on 1.0.0-next.144 because of this error.

svelte/test/sourcemaps/samples/compile-option-dev/test.js

Line 16 in 3f11232

css.mapConsumer = await new SourceMapConsumer(cssMapJson);

to:

css.mapConsumer = await new SourceMapConsumer(decodeURIComponent(cssMapJson));

[EMH333]

This issue is (I believe, at least on the node side) limited to Node v16 which adds btoa and atob as globals.

(SEMVER-MAJOR) buffer: expose btoa and atob as globals (James M Snell) #37786

[EMH333]

I'm planning to make a PR changing b64enc and b64dec to use Buffer first if available, then fall back on btoa and the like. For example,

const b64enc = typeof Buffer == 'function' ? b => Buffer.from(b).toString('base64') : b => btoa(encodeURIComponent(b)) ;

This should make this more robust to future changes in this area, since from what I've read btoa shouldn't be used (especially on the node side of things)

[LexRiver]

The workarounds for svelte.kit

1. use /routes/τεστ/index.svelte instead
   or
2. create another component for route, ex:

<!-- /routes/τεστ.svelte -->
<script>
import PageTest from "$lib/pages/PageTest.svelte";
</script>
<PageTest />