VSCode Extension: Errors/Warnings don't refresh (or are incorrect) if there is an unused CSS selector, when using PostCSS

[danieldiekmeier]

Describe the bug

I stumbled over a weird error, where the errors/warnings (aka the yellow and red squiggly lines in the editor) are not updated (or are incorrect), if I use svelte-preprocess with PostCSS and have an unused Selector in the CSS.

Screenshot so it's a bit clearer what I'm talking about:

My svelte.config.js:

const preprocess = require('svelte-preprocess')

module.exports = {
  preprocess: preprocess({
    postcss: true,
  }),
}

Example component:

<script>
  const a = 10
</script>

<div>{a}</div>

<style>
  .unused {
    background-color: red;
  }
</style>

The bug doesn't happen if I comment out postcss: true. I tried removing all my PostCSS plugins, but that didn't change the behavior. Additionally, I noticed that I don't actually get a warning for the unused CSS selector in VSCode at all. (I do get it when I run svelte-check, so the basic functionality should be there?)

I hope I provided any relevant information here, but I'm glad to clarify anything that's unclear.

To Reproduce
Steps to reproduce the behavior:

• Configure svelte-preprocess with postcss: true
• In a Svelte file, use a <style> tag that contains at least one unused CSS selector
• Edit the rest of the file in a way that should produce a warning
• Thy typical helpful warnings and errors will not refresh, or they'll show an Unexpected token error in unexpected places

Expected behavior

• Errors and warnings should work in exactly the same way as they do when no unused selector appears in the <style> tag

Screenshots

Toggle, because they are pretty large

I start from this working example: Svelte can correctly identify that I did in fact define a before using it. It can also tell that the div is a used selector in this context.

And if I change the variable name from a to b, it correctly warns me:

If I then change the CSS selector to something that's not used in the component, it still warns me:

But if I then change the variable name back from b to a, it still warns me:

In fact, it will not correctly refresh the warnings/errors and be pretty confused, no matter what I do:

System

• OS: macOS 11.3.1
• IDE: VSCode 1.56.2
• Plugin/Package: Svelte for VSCode v104.12.2

[madupuis90]

I'm having the same problems. Random typescript errors that were only fixed when I commented my scss styles.

<style lang="scss">
  @import "bulma/bulma.sass";
</style>

[jasonlyu123]

The cause of this seems to be because some svelte diagnostics, like unused-export-let or css-unused-selector, can't be source mapped back to the original position. But there might be multiple causes of the source mapping issue. I think we can at least place it at the start of the file to avoid diagnostics not getting updates.

[dummdidumm]

I can't reproduce this yet. What I see though is that because of postcss: true, the source maps are messed up (guess we can't do much there if no proper source map was provided). I don't get unmapped/negative lines through that though.

[jasonlyu123]

A preprocess without a source map might reproduce the problem I mentioned.

[dummdidumm]

Version 105 of the extension was released where I tried to be more robust about possibly invalid mappings. Please let me know if that fixed it or if the issue still persists.

[danieldiekmeier]

Looks good! The warning does show up now, and I can still edit the rest of the files as before. Thanks for looking into this!

[madupuis90]

Version 105 seeems to fix my issue too. Thanks for the quick fix