Language-tools: unused css highlighting is always messed up

Created on 14 Sep 2020 · 14Comments · Source: sveltejs/language-tools

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

Make a simple component with some elements
Add some used and unused vanilla CSS without SCSS functions or syntax sugar
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.

bug

Source

UltraCakeBakery

Most helpful comment

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

dummdidumm on 21 Nov 2020

🚀1 🎉1

All 14 comments

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

dummdidumm on 14 Sep 2020

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:

UltraCakeBakery on 14 Sep 2020

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.

dummdidumm on 14 Sep 2020

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?

UltraCakeBakery on 14 Sep 2020

https://github.com/sveltejs/svelte/pull/5015 needs to be merged for preprocessor sourcemap support

benmccann on 14 Sep 2020

👀1

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 on 14 Sep 2020

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).

dummdidumm on 14 Sep 2020

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?

UltraCakeBakery on 14 Sep 2020

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

benmccann on 14 Sep 2020

👀2

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.

dummdidumm on 16 Sep 2020

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

UltraCakeBakery on 17 Sep 2020

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.

dummdidumm on 17 Sep 2020