unused css highlighting is always messed up

[UltraCakeBakery]

Describe the bug
When using SCSS style blocks, the unused CSS wiggly yellow lines don't show up in the right place.

It should highlight the .introduction class, but it highlights the height property (or any last property of the first defined style) instead.

When switching back to a normal CSS block without the lang attribute, it works fine.

To Reproduce

1. Make a simple component with some elements
2. Add some used and unused vanilla CSS without SCSS functions or syntax sugar
3. Change the <style> to <style lang="scss">

Expected behavior
Work the same as when it is just a normal <style> block

Screenshots
See above

System (please complete the following information):

• OS: Windows
• IDE: VScode
• Plugin/Package: "Svelte for VSCode"

Additional context
No additional plugins or extensions were enabled when making the screenshot. I even restarted vscode just in case.

[dummdidumm]

Could you please post the code snippet that gave you the squiggles at this line?

[UltraCakeBakery]

Could you please post the code snippet that gave you the squiggles at this line?

It shouldn't matter what code you use. It quickly starts breaking on my end. The more code, the worse it gets.

Here is a quick REPL:
https://svelte.dev/repl/97a01882d3444d77ad2a62480e310921?version=3.25.0

In my IDE, with the SCSS attribute

without the attribute:

[dummdidumm]

Thanks. I need to check if the lines are off by some offset, but in general I fear that we cannot do much since we rely on source maps and if they are wrong/not that good, then there's nothing we can do.

Source maps which are generated during transpilation from SCSS to CSS. We need to do this before passing the code to the Svelte compiler (which gives the unused warnings) because it can only deal with CSS.

[UltraCakeBakery]

Are the sourcemaps something I can fix on my end? Or is that a problem with svelte preprocess? rollup?
Lucky for me I know what css i'm writing and html i'm removing, so I can deal with this for now. Is there a sain way to turn these off for in case I have to?

[benmccann]

sveltejs/svelte#5015 needs to be merged for preprocessor sourcemap support

[dummdidumm]

Are the sourcemaps something I can fix on my end? Or is that a problem with svelte preprocess? rollup?

The scss compiler (node-sass / sass, depends what you are using) produces the source maps.

Lucky for me I know what css i'm writing and html i'm removing, so I can deal with this for now. Is there a sain way to turn these off for in case I have to?

If you want to turn off some warnings globally, you can do so through this option.

[dummdidumm]

sveltejs/svelte#5015 needs to be merged for preprocessor sourcemap support

Not for the language-tools, at the moment we do mapping ourselves (but can hopefully throw out a whole bunch of code once this lands).

[UltraCakeBakery]

sveltejs/svelte#5015 needs to be merged for preprocessor sourcemap support

It looks like it is a relatively popular pull request. Any known reason on why it hasn't been merged yet?

[benmccann]

It's high on our radar. It's not in a mergable state yet though. I left some comments on it.

[dummdidumm]

I checked but was not able to reproduce the line offsets you experience when using only SCSS. Do you use PostCSS, too? I only can reproduce if I also use PostCSS. If so, the reason for that is missing source maps from PostCSS. I opened this issue over at svelte-preprocess for it.

[UltraCakeBakery]

Sorry for the late response. I have https://www.npmjs.com/package/postcss-load-config installed. That's about it.

[dummdidumm]

So this means you are using postcss, so postcss: true is part of your preprocessor config? If so, this will be fixed after the issue within svelte-preprocess is fixed.

[UltraCakeBakery]

So this means you are using postcss, so postcss: true is part of your preprocessor config?

If postcss is set to true by default, yes.

If so, this will be fixed after the issue within svelte-preprocess is fixed.

👀

[dummdidumm]

This should be fixed with version 4.6.1 of svelte-preprocess.