question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

image

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

image

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

image

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

image

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

image

System

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
madupuis90commented, May 29, 2021

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

1reaction
danieldiekmeiercommented, May 28, 2021

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!

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS, SCSS, and Less support in Visual Studio Code
Find out how Visual Studio Code can support your CSS, SCSS and Less development.
Read more >
SvelteKit Unused CSS selector warning in vscode
my svelte. config. js: const config = { onwarn: (warning, handler) => { const { code, frame } = warning; if (code ===...
Read more >
VSCode Extension - Live Sass Compiler - GitHub Pages
Changed. Update the returned message from Autoprefixer warnings. They now better reflect that it's a warning not an error and include file information;...
Read more >
Migrating from v2 to v3 - Gatsby
If you don't see any warnings, you are safe to upgrade to v3. If this warning is displayed for a type defined by...
Read more >
Debugging Tailwind CSS and Next.js - LogRocket Blog
Not having the Tailwind directives in the main CSS file · Not assigning the CSS classes correctly to the elements · Using the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found