The new svelte-check can't deal with Tailwindcss's new experimental applyComplexClasses feature

Describe the bug

Tailwindcss’s latest release contains an experimental feature under the flag applyComplexClasses. It, finally, makes @apply just as powerful as normal element classes. As in, in the past you couldn’t write @apply hover:bg-red-200; because @apply couldn’t handle the hover: part. Now it finally can. However, now svelte-check will throw an error saying that that is invalid css code.

/Users/evert/Sites/sapper-cms/src/routes/index.svelte:26:17
Error: Semicolon or block is expected (svelte)
    div {
        @apply hover:bg-red-200;
    }

To Reproduce

Sorry, I can’t provide a REPL to showcase the simplest example, because this requires setting up tailwindcss in a repo. I used this template and the only change I had to make was to enable the experimental feature in tailwind by adding the following line of code to tailwind.config.js:

export const experimental = "all"

And then editing src/routes/index.svelte by adding something like the following in the <style> element.

div {
    @apply hover:bg-red-200;
}

Expected behavior

What I would like to happen is for svelte-check to somehow understand that I’m using tailwindcss and that then this syntax is valid.

Information about my Svelte project

• My browser and the version: Brave 1.12.114 using Chromium 84
• My operating system: macOS 11
• Sapper version 0.28.0
• Svelte version 3.24.1
• Bundler: Rollup

Severity

It’s mostly annoying, because now I have to turn off svelte check in order to continue with my project.

[lorenzosignoretti]

@lorenzosignoretti So, I think you can find the solution here. Let me know if that didn’t help you.

@Gobi-one Thanks for the reply! I had actually already enabled the preprocess: true option for jest on .svelte files. I took a look at the other config files that you shared on your SO post and I mine look basically the same. I should note I am using SvelteKit, so the issue may be linked to that. For now, I am just sticking to adding some classes on the elements themselves.

[Gobi-one]

@jwrunner Thank you for this quick answer. In fact I misread the bug, I only have an issue while using jest and @apply with complex classes. It works well when I run it (yarn run dev), just the tests that fails with “ParseError: Semicolon or block is expected”.