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.

`Semicolon or block is expected` CSS error when using `@apply` with any directive functions, when missing `svelte-windicss-preprocess`

See original GitHub issue

Describe the bug

EDIT : Please read this if you come by this issue for the first time

If you also have the error Semicolon or block is expected, please try the steps in this comment below, which adds a potential temporary fix for svelte to stop spewing out errors, both in vscode and when trying to open your site.

The remaining issue with this is the fact that css seems to be outputted in a weird way, especially when using third party packages (Routify in my case), so some ways of working with WindiCSS aren’t fully functional.

If you want to take part of the journey where I pull my hair out, you can keep reading below, otherwise try the linked comment above and keep an eye out for an official statement on the resolution of this issue!

I’ve been pulling my hair out in these past few hours while trying to fix this issue.

While I know that it comes from svelte, I have successfully removed it by using svelte-windicss-preprocess, which prevents errors and actually compiles to something in the end. However, when using svelte-windicss-preprocess at the same time as vite-plugin-windicss, it seems like the css generation isn’t ideal, as the directives aren’t working :

(Tailwind UI’s default Navbar, which shouldn’t show the mobile hamburger menu in desktop mode. this doesn’t happen when the @apply css is commented out and svelte-windicss-preprocess is deactivated, as shown below)

Minimal Reproductions

Versions

vite-plugin-windicss: 0.9.4
vite: 2.1.2
framework(vue/react/svelte/etc): svelte
svelte-windicss-preprocess: 3.0.2

Additonal Context

I’m probably simply missing a configuration option, but I searched through a lot of windicss’s repos and different packages, and most issues that tackle this doesn’t seem to be containing a fix that worked for me.

I could provide a repo if desired.

Issue Analytics

State:
Created 3 years ago
Reactions:11
Comments:24 (6 by maintainers)

Top GitHub Comments

7reactions

antfucommented, Mar 24, 2021

Did a quick investigation, it looks like the Svelte plugin does not emit the raw CSS content for other processors to transform before goes to Svelte’s own css compiler. And that’s possibly why it does not understand the @apply syntax. I will keep work with @dominikg to see if we can find a solution for this.

3reactions

antfucommented, Mar 25, 2021

Should be fixed after https://github.com/sveltejs/vite-plugin-svelte/pull/13 got released.

Top Results From Across the Web

Semicolon or block expected error svelte with postcss

I have set up a project with snowpack for svelte in which I'm trying to use tailwind for styling, but using states like...

"Semicolon or block is expected ParseError" lint error using ...

While using @apply directive of tailwind css in sveltekit, linting command gives the mentioned error. How do I fix it or get rid...

SyntaxError: missing ; before statement - JavaScript | MDN

The JavaScript exception "missing ; before statement" occurs when there is a semicolon (;) missing somewhere and can't be added by automatic semicolon...

missing semicolon!!! keeps saying expected assignment or ...

keeps saying "expected assignment or function call and instead saw an expression. missing semi colon!" and ive put a semi colon in the...

Unnecessary semicolon - JSLint Error Explanations

The "Unnecessary semicolon" error is thrown when JSHint or ESLint ... a semicolon following a block statement or function declaration. ... "use strict";....