Erroneous errors with tailwind-style @ rules

[lahickey]

Plugin version: 0.9.1

I'm trying to use Tailwindcss '@apply' directives in a svelte <style> tag. It seems to correctly work (in that the styles correctly end up in the generated css). Here's an example snippet:

<style>
  .space {
    @apply px-4 py-2;
  }
  .color {
    @apply text-white;
  }
</style>

but I get the following three errors/warnings - seemingly from the Svelte VSCode plugin but it may be from the language server.

Cannot read property 'push' of undefined svelte [1, 1]
semi-colon expected css(css-semicolonexpected) [9, 17]
at-rule or selector expected css(css-ruleorselectorexpected) [10, 3]

The two 'rules' on the line @apply px-4 py-2; seems to be the main culprit. If it's only @apply px-4;then only the first of the three errors/warning appears.

This repo (https://github.com/marcograhl/tailwindcss-svelte-starter) demonstrates the issue perfectly. Check out the file src/Button.svelte for the errors.

[lahickey]

Quick follow-up. I was able to get rid of the second and third of these issues by disabling cc diagnostics
"svelte.plugin.css.diagnostics.enable": false

However, no clue how to get rid of the first one
Cannot read property 'push' of undefined svelte [1, 1]

[sadykov]

To avoid the error create svelte.config.js with the following stub:

module.exports = {
  preprocess: {
    style: async ({ content, attributes }) => {
      if (attributes.type !== "text/postcss") return
      return new Promise((resolve, reject) => {
        resolve({ code: "", map: "" })
      })
    }
  }
}

Do not forget to add type="text/postcss" to a component:

<style type="text/postcss">
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
</style>

[lahickey]

Awesome, that's sorted it - thanks 👍

Have I failed to read the appropriate docs somehow or is this a bit under-documented?

[marcograhl]

Thank you for the fix, I added it to the template to get rid of the problems.
https://github.com/marcograhl/tailwindcss-svelte-starter/

[muhajirdev]

Looks like it doesn't work for me. Anyone else still facing the issue?

[muhajirdev]

I just cloned your repo @marcograhl . I got this

[lahickey]

Set svelte.plugin.css.diagnostics.enable": false

[vkrbt]

To avoid the error create svelte.config.js with the following stub:

where this file should be placed?

[hapcode]

To avoid the error create svelte.config.js with the following stub:

where this file should be placed?

In the root of your project:

bash-3.2$ ls -1a
.
..
.gitignore
.prettierrc
.vscode
README.md
dist
docs
jsconfig.json
node_modules
package.json
postcss.config.js
rollup.config.js
samples
src
svelte.config.js
tailwind.config.js
yarn.lock

[silvestrevivo]

Just putting svelte.plugin.css.diagnostics.enable": false is working. No svelte.config.js is required.

[teds31]

Just putting svelte.plugin.css.diagnostics.enable": false is working. No svelte.config.js is required.

i am sorry but where is this? i cannot seem to find it?

[Wikkedkain]

In VS Code, Click the Cog -> Settings -> Extensions -> Svelte