Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

unused css highlighting is always messed up #540

Closed
UltraCakeBakery opened this issue Sep 14, 2020 · 14 comments
Closed

unused css highlighting is always messed up #540

UltraCakeBakery opened this issue Sep 14, 2020 · 14 comments
Labels

Comments

@UltraCakeBakery
Copy link

@UltraCakeBakery UltraCakeBakery commented Sep 14, 2020

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

image

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
Copy link
Member

@dummdidumm dummdidumm commented Sep 14, 2020

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

@UltraCakeBakery
Copy link
Author

@UltraCakeBakery UltraCakeBakery commented Sep 14, 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
image

without the attribute:
image

@dummdidumm
Copy link
Member

@dummdidumm dummdidumm commented Sep 14, 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.

@UltraCakeBakery
Copy link
Author

@UltraCakeBakery UltraCakeBakery commented Sep 14, 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?

@benmccann
Copy link
Member

@benmccann benmccann commented Sep 14, 2020

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

@dummdidumm
Copy link
Member

@dummdidumm dummdidumm commented Sep 14, 2020

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
Copy link
Member

@dummdidumm dummdidumm commented Sep 14, 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).

@UltraCakeBakery
Copy link
Author

@UltraCakeBakery UltraCakeBakery commented Sep 14, 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?

@benmccann
Copy link
Member

@benmccann benmccann commented Sep 14, 2020

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

@dummdidumm
Copy link
Member

@dummdidumm dummdidumm commented Sep 16, 2020

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
Copy link
Author

@UltraCakeBakery UltraCakeBakery commented Sep 17, 2020

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

@dummdidumm
Copy link
Member

@dummdidumm dummdidumm commented Sep 17, 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.

@UltraCakeBakery
Copy link
Author

@UltraCakeBakery UltraCakeBakery commented Sep 17, 2020

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
Copy link
Member

@dummdidumm dummdidumm commented Nov 21, 2020

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

@dummdidumm dummdidumm closed this Nov 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants