fix: Improve css sourcemap accuracy

[bfanger]

When using Vite's (experimental) css.devSourcemap feature
The filenames where correct, but the line numbers didn't match.

Changing:
source: filename
into
source: filename?.split(/[/\\]/).pop()

By changing source to only contain the filename instead of the full path fixed the line number issue.

Fixes #300

[dominikg]

This is a great finding, thanks!

The PR needs to be rebased due to conflicts

[dominikg]

some questions

1. do we want to handle configuration automatically
   a) set for svelte when enabled in vite config
   b) set for vite when enabled in svelte config
   c) warn for conflicts?

2. do we need to patch the output sourcemap either using https://github.com/vitejs/vite/blob/ace6e93239c85667eaea656cfda770e3269b336f/packages/vite/src/node/plugins/css.ts#L869 directly or some similar approaches.

[bfanger]

Rebased and changed from split().pop() to using path.basename.

1. Automatic Configuration
   This change does not impact any configuration for this plugin.
   I should mention that to activate the sourcemap feature you do need to
   add to your vite.config:

css: { devSourcemap: true }

or when using sveltekit to your svelte.config:

  kit: { 
    vite: {
      css: { devSourcemap: true }
    },
    ...

As you can see this a configuration option for vite, not the plugin.

2. patching sourcemap?
   i think that step is already handled by svelte.preprocess & svelte.compile
   There might be some additional work needed for the svelte-preprocess package, but that's another repo.

I've also tested some sass using the experimental:{ useVitePreprocess: true }, and the generated sourcemap looked fine.

To debug i've used https://evanw.github.io/source-map-visualization/ and pasted the results i logged in packages/vite-plugin-svelte/src/utils/compile.ts using:

compiled.css.map && console.log(`\n${filename}\n\n${compiled.css.code}\n/*# sourceMappingURL=${compiled.css.map.toUrl()} */\n\n`) 

[dominikg]

Sorry my comment above wasn't very clear.

I should mention that to activate the sourcemap feature you do need to
add to your vite.config:

css: { devSourcemap: true }

vite-plugin-svelte can set devSourcemap: true automatically in the config hook so the user doesn't have to do it. This would work for both vite+svelte and sveltekit ootb.

It could be added here:

vite-plugin-svelte/packages/vite-plugin-svelte/src/utils/options.ts

Line 202 in bdebf4e

if (options.isServe) {

unfortunately there are 2 options svelte.compilerOptions.enableSourcemap.css and vite.css.devSourcemap so if either of them is false in user config, the other should be too.

[bfanger]

I would not auto enable it just yet, i've seen this experimental feature throw javascript exceptions during build/dev.
(with an older complex sass setup)

I'd assume vite will enable the feature by default at some point.

[dominikg]

I would not auto enable it just yet, i've seen this experimental feature throw javascript exceptions during build/dev. (with an older complex sass setup)

I'd assume vite will enable the feature by default at some point.

we can handle the config later in a separate PR, true. although i do lean on early adpoting things that improve the dev experience. and missing css sourcemaps has been a sore spot.

[dominikg]

final step missing before merge would be a changeset pnpm changeset create a patch for vite-plugin-svelte with a small note

[bfanger]

👍 done!

[dominikg]

Released. Thanks!

https://github.com/sveltejs/vite-plugin-svelte/releases/tag/%40sveltejs/vite-plugin-svelte%401.0.0-next.41