Latest versions break multiline classes but works with `2.3.1`. Reproduction repo included.

[sebastiangug]

I have cloned the example rollup project in this repo to test if defining classes over multiple lines works.

Repo link: https://github.com/sebastiangug/svelte-windicss-preprocess-bug-reproduction

just run pnpm i and then pnpm dev to start the server

I have found it does not work with the latest versions, but works with 2.3.1 so something must've broken.

Component added in Widget.svelte

  <button class="
  bg-blue-500
   p-4 
   text-white">TEST BUTTON</button>

which when using 2.3.1 results in:

But when using 3.2.0 produces this:

[alexanderniebuhr]

Super strange I have another person having this issue.. but I cannot reproduce it :(

[sebastiangug]

Try to clone the repo above

[alexanderniebuhr]

@sebastiangug check this PR. merge it and run pnpm dev.. copy and paste full output of terminal!!
sebastiangug/svelte-windicss-preprocess-bug-reproduction#1

[IRediTOTO]

i have this error too. :\ Don't know why :)
This is result when use 2.3.1

And this is newest version. When i run dev everything fine, but on run build look like tailwind base wasnt loaded. I use svelte kit.

I turn on debug mode and get this

[DEBUG] mainfile: false
[DEBUG] filename: E:/Hoctap/Nodejs/Svelte - Sapper/svelte-kit/src/routes/about.svelte
[DEBUG] called preprocessor
[DEBUG] production, child file, no preflights
[DEBUG] mainfile: false
[DEBUG] filename: E:/Hoctap/Nodejs/Svelte - Sapper/svelte-kit/src/routes/index.svelte
[DEBUG] called preprocessor
[DEBUG] production, child file, no preflights
[DEBUG] mainfile: false

[alexanderniebuhr]

@IRediTOTO use kit: true and mode: dev

[IRediTOTO]

@IRediTOTO use kit: true and mode: dev

You mean this config? It not work

preprocess: [
		require('svelte-windicss-preprocess').preprocess({
			config: "tailwind.config.cjs",
			kit:true,
			mode:"dev",
			debug: true,
		})
	],

[alexanderniebuhr]

Strange. Since you are using svelte kit we do not support this directly. If you give your repo I can take a quick look.
Also you might try vite-windicss-plugin for svelte kit

[IRediTOTO]

Strange. Since you are using svelte kit we do not support this directly. If you give your repo I can take a quick look.
Also you might try vite-windicss-plugin for svelte kit

Here is it: https://github.com/IRediTOTO/learn-svelte-kit
I will work fine with version 2.3.1.
It will run well with npm run dev but error on npm run build

[alexanderniebuhr]

@IRediTOTO i know the issue, and will make a fix for you

[alexanderniebuhr]

you guys can update to v3.3.2 and set your options for kit as following (you can add other options if you need, like devTools or config)

		require('svelte-windicss-preprocess').preprocess({
			kit: true,
			mode: "dev",
			silent: false,
			debug: false
		})

[IRediTOTO]

you guys can update to v3.3.2 and set your options for kit as following (you can add other options if you need, like devTools or config)

		require('svelte-windicss-preprocess').preprocess({
			kit: true,
			mode: "dev",
			silent: false,
			debug: false
		})

thank you look like it work.

[alexanderniebuhr]

@IRediTOTO still if you want more mature implementation with svelte-kit, we do have https://github.com/windicss/vite-plugin-windicss

[IRediTOTO]

@IRediTOTO still if you want more mature implementation with svelte-kit, we do have https://github.com/windicss/vite-plugin-windicss

i knew it and waiting for full featured like this pack :D Thank you

[sebastiangug]

This can be closed as far as I'm concerned, I've started using vite as I wanted to use that already rather than rollup for various reasons, so now I'm mostly working with the vite-plugin that alexander has tagged above.

Good luck & thank you!