Classes of typescript components don't get processed with svelte kit

[genericFJS]

Describe the bug

Classes in a component with <script lang="ts>… get ignored by the preprocessor, when they don't have their own <style windi:preflights:global windi:safelist:global>….

See simple repository with examples: https://github.com/toolongformore/svelte-windicss-preprocess-ts-bug/

Works:

<script>
	import { onMount } from 'svelte';

	let content;

	onMount(() => {
		content = 'Hello world from Javascript component';
	});
</script>

<div class="bg-red-500">
	{content}. This should be red. And it is.
</div>

Doesn't work:

<script lang="ts">
	import { onMount } from 'svelte';

	let content: string;

	onMount(() => {
		content = 'Hello world from Typescript component';
	});
</script>

<div class="bg-green-500">
	{content}. This should be green. But it's not.
</div>

Related (?): Empty windi-style-tags with closing tag on same line result in errors (in VSCode) but compile fine:
No error:

<style windi:preflights:global windi:safelist:global>
</style>

Error:

<style windi:preflights:global windi:safelist:global></style>

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 19.22 GB / 31.95 GB
  Binaries:
    Node: 16.4.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    VSCode: 1.63.2 - C:\Tools\Microsoft VS Code\bin\code.CMD
    Visual Studio: 16.11.31613.86 (Visual Studio Community 2019)
  Browsers:
    Chrome: 97.0.4692.71
    Edge: Spartan (44.22000.120.0), Chromium (97.0.1072.62)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    svelte: ^3.44.0 => 3.46.2
    svelte-windicss-preprocess: ^4.2.5 => 4.2.5
    @sveltejs/kit: next => 1.0.0-next.232

Used Package Manager

npm

[alexanderniebuhr]

Mhm that more sounds like an ordering issue with preprocessors. Since Typescript also needs a preprocessor. Do you have a repo for us to try out!?

[genericFJS]

@alexanderniebuhr thanks for looking into it.
See https://github.com/toolongformore/svelte-windicss-preprocess-ts-bug/

[jacob-8]

I also ran into this problem in using typescript and windi. Isn't it the same problem as #374? It's solved for me by setting the package to ~4.1.0 as mentioned.

[moisesbites]

try this: preprocess: [windi({}), preprocess()], in svelte.config.js.

import { windi } from 'svelte-windicss-preprocess';
import preprocess from 'svelte-preprocess';

[....]
/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [windi({}), preprocess()],
	kit: { 
[....]

[jacob-8]

try this: preprocess: [windi({}), preprocess()], in svelte.config.js.

Doesn't change anything. Bug still persists in latest version (4.2.8).

[andrei0x309]

I encountered the same issue on ^4.2.8 downgraded to 4.1.0 as @jacob-8 mentioned and it seems to fix the problem.