Q: How to edit Svelte for VS Code to refine CSS diagnostic messages for tailwind support?

[paul42]

I'm using tailwind with svelte, and I'd like to improve how it handles css error messages. How can I make a pull request to vs-code extension Svelte for VS Code to suppress this error, or allow for tailwind-style multiple class entries like below?
Is this eslint based?

Example CSS causing error is last line with @apply

h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
    @apply bg-black text-white;
  }

current workaround to avoid red squiggly lines is to go into the extension settings and set:

{
    "svelte.plugin.css.diagnostics.enable": true
}

Thanks in advance. I love the plugin so I'd love to be able to help out if possible :D

[paul42]

adding a stylelint.config.js like this workaround does not appear to help.

[mcmxcdev]

Not sure if this is what you are asking for but when you wrap your style block with the lang="postcss" attribute like so:

<style lang="postcss">
  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
    @apply bg-black text-white;
  }
</style>

it should stop throwing errors and then you can also remove the "svelte.plugin.css.diagnostics.enable": true line again!

[jasonlyu123]

@mhatvan is right just put a postcss lang attribute and we'll disable the validate of that particular style tag. Also, I found this stylelint extension already support svelte. so you can use it to lint your style instead.

[jasonlyu123]

@paul42 That workaround doesn't work because we don't read that CSS validate setting, we only use the setting you posted.
We'll add a faq about the recommended postcss/tailwind setup.

[paul42]

thanks @mhatvan and @jasonlyu123 the lang="postcss" worked perfectly! should I close this ticket or do you think I should put a note in the documentation somewhere?

[jasonlyu123]

You're welcome to add a documentation if you want to help 🙌. I think you put it in a new file in docs/preprocessors. Reference the general CSS preprocess setup from sess-less.md and reference this file in docs/README.md. Maybe also mention you can use the stylelint extension to validate postcss syntax.

[dummdidumm]

I added docs on how to integrate the other extensions to get it working. PRs to enhance the docs are welcome if you think they are too sparse.