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

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.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 12
Comments: 24 (6 by maintainers)

Commits related to this issue

fix: preprocess for svelte — committed to windicss/vite-plugin-windicss by antfu 3 years ago
Fix blog layout issue with complex class. Might be a bug: https://github.com/windicss/vite-plugin-windicss/issues/98#issuecomment-804222608 This doesn't seem to solve the issue, but looks related. — committed to CoryParsnipson/indie-engineer by CoryParsnipson 2 years ago

Most upvoted comments

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.

antfu on Mar 24, 2021

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

antfu on Mar 25, 2021

It’s released https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md#100-next6

antfu on Apr 8, 2021

Having the same issue with svelte: The compile doesn’t let is pass.

One solution:

shiftgeist on Mar 21, 2021

I’m experiencing the same issue. Here’s a minimal repro using this svite template

It’s a simple svelte app with no extra packages. You can see the changes I’ve made in the 2 commits that are on master. Basically, I’ve only upgraded all packages and added a style to make an element change background color on hover using @apply.

You can see the error by running npm i then npm run dev.

12:05:07 AM [vite] Internal server error: Semicolon or block is expected
  Plugin: vite-plugin-svelte
  File: /home/zrean/projects/svelte-windi-repro/src/App.svelte
  10: <style>
  11:   h1 {
  12:     @apply text-svelte-500 p-2 bg-green-200 hover:bg-red-200;
                                                       ^
  13:   }
  14: 
      at error (/home/zrean/projects/svelte-windi-repro/node_modules/svelte/compiler.js:16752:20)
      at Parser$1.error (/home/zrean/projects/svelte-windi-repro/node_modules/svelte/compiler.js:16828:10)
      at Object.read_style [as read] (/home/zrean/projects/svelte-windi-repro/node_modules/svelte/compiler.js:13141:21)
      at tag (/home/zrean/projects/svelte-windi-repro/node_modules/svelte/compiler.js:15887:34)
      at new Parser$1 (/home/zrean/projects/svelte-windi-repro/node_modules/svelte/compiler.js:16787:22)
      at parse$3 (/home/zrean/projects/svelte-windi-repro/node_modules/svelte/compiler.js:16919:21)
      at compile (/home/zrean/projects/svelte-windi-repro/node_modules/svelte/compiler.js:29918:18)
      at compileSvelte (/home/zrean/projects/svelte-windi-repro/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:291:48)
      at TransformContext.transform (/home/zrean/projects/svelte-windi-repro/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:679:33)
      at Object.transform (/home/zrean/projects/svelte-windi-repro/node_modules/vite/dist/node/chunks/dep-efe32886.js:43649:53)

Adding the configs mentioned in https://github.com/windicss/vite-plugin-windicss/issues/98#issuecomment-804222608 seems to fix it though.

TheSimpleZ on Mar 23, 2021

Update : adding important: true to the tailwind / windicss configs helps with a lot of directives messing up the specificity…

I still have some issues with conditional classes but I’ll keep trying to find ways around that

… I don’t see exactly how adding !important to all classes (with the important option) fixes this issues, but css is a mystery yet to be unveiled. 😃

I’ll look some more if there’s a universal-ish fix so that everything works with routify, I’ll keep this thread updated.

edit : while conditional classes work, using classes that @applyies others doesn’t :

nav links do get `bg-gray-900` when active	nav links do not have access to applied styles of `.active` and `.inactive`
>

you can do what you want with this information (this probably goes a bit into the territory of #54) 😃

V-ed on Mar 24, 2021

Actually @antfu, you might want to keep the needs reproduction label, as I can’t repro it using a barebone svelte + vite + windicss project (with proper svelte.config) - it might be due to Routify or some other setup from my main repo.

I’m still in the process of recreating my previous work in the second repo, where windicss works. I’ll keep updating this thread once I have more info.

V-ed on Mar 22, 2021

My take on an minimal reproduction: App.svelte#L29.

It breaks on (eg) sm:p-2 and sm:(p-2 m-2) with the error message [plugin:vite-plugin-svelte] Semicolon or block is expected.

You should try on your side to add windicss preprocess to svelte :

Add a svelte.config.js, with this content :

const { preprocess: windicssPreprocess } = require('svelte-windicss-preprocess');

function createSveltePreprocessHandling() {
	return [
		windicssPreprocess({
			compile: false,
		}),
	];
}

module.exports = {
	preprocess: createSveltePreprocessHandling(),
	createSveltePreprocessHandling,
};

(add the missing packages if required)

Then, in your vite.config.ts` :

import { createSveltePreprocessHandling } from './svelte.config';
...
  plugins: [
    ...
    WindiCSS(),
    svelte({
      preprocess: createSveltePreprocessHandling()
    }),
	...
  ]

If you are using vscode with the svelte extension, don’t forget to reload the svelte language (Svelte: Restart Language Server) or your vscode window.

If everything looks the same, it might be fixed for you : I’m trying to figure out why does the output breaks so much, css-wise, in my first repro.

V-ed on Mar 22, 2021