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

[Evertt]

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.

[dummdidumm]

Looking at the template, the problem is that inside svelte.config.js there is no mention of the postcss.config.js, so svelte-preprocess will not preprocess this.
If you integrate the postcss.config.js into svelte.config.js, you need to make sure it's written in node syntax (require instead of import, module.exports = { plugin: .. } instead of export const plugin = ...).

We also have some short docs on TailwindCSS, yeah are welcome to enhance them if my suggestions work out for you.

[Evertt]

Looking at the template, the problem is that inside svelte.config.js there is no mention of the postcss.config.js, so svelte-preprocess will not preprocess this.
If you integrate the postcss.config.js into svelte.config.js, you need to make sure it's written in node syntax (require instead of import, module.exports = { plugin: .. } instead of export const plugin = ...).

It what you're saying is correct, then wouldn't you expect that any Svelte component that contains an @apply rule wouldn't compile at all? Because that is not the case. As long as I use simple class-names, like @apply bg-red-200; then everything compiles just fine.

I'm still gonna try what you're proposing, I'm just a bit skeptical about your reasoning. :-)

edit

@dummdidumm Okay so indeed, after I converted all those files from ES6 format to Node format I was able to include postcss.config.js in svelte.config.js and now svelte-check works as expected. Thank you! 🙏

[jacob-8]

With SvelteKit moving us all towards using the ESM format for svelte.config.js (i.e. export default config) this solution does not work. Does anyone have an updated solution for this svelte-check + @apply hover:bg-red-200 problem?

As a workaround I tried svelte-check --compiler-warnings 'css-semi-colon-expected:ignore,css-rule-or-selector-expected:ignore' but it's not working - I'm thinking due to my spelling of those errors. Does anyone know of a master list of warnings we can ignore so I can get my spelling/syntax correct?

[dummdidumm]

You can create a postcss.config.cjs and tell svelte-preprocess to load from there (I think it will pick it up automatically even). In postcss.config.cjs you can use the require syntax. This blot post might help you

[jacob-8]

@dummdidumm I already have https://github.com/HVSBible/hvsb/blob/main/postcss.config.cjs and am setting postcss: true already as mentioned in that blog post and seen in https://github.com/HVSBible/hvsb/blob/main/svelte.config.js#L19 - what am I missing?

[Gobi-one]

@jwrunner I have the same issue, have you found a solution or workaround ?

[jacob-8]

@jwrunner I have the same issue, have you found a solution or workaround ?

@Gobi-one I solved my problem by telling svelte-check to validate just js and svelte (not css) by setting --diagnostic-sources in my package script like this: "validate": "svelte-check --threshold warning --diagnostic-sources js,svelte",

[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".

[lorenzosignoretti]

+1 @Gobi-one I am having the same issue. I am only getting the "Semicolon or block is expected" error when using @apply inside svelte's style tag. Any solution for the issue?

[Gobi-one]

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

[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.

[Bishwas-py]

I have got the same issue

src/(----pageName)/+page.svelte:25:9
Warn: Unknown at rule @apply (css)
    .checkout-cancel-wrap {
        @apply flex;
    }