Update dependencies, maybe mark typescript as just a regular dependency, as this library can't work with TS 5.0

[dtzxporter]

Title, it won't resolve in npm when using typescript 5.0.

It also seems to have some css parsing issues with the latest svelte.

[patricknelson]

Noticing the same issue here. Just starting with Svelte + Vite. So, since I was using the latest of everything, so even after finding this issue, it was a hot mess until I just downgraded everything based on my starter template (just backed it up until I got to a version of TypeScript < 5).

The fix was effectively rolling back to svelte@^3.22.3 and svelte@^3.22.3 (and @tsconfig/svelte@^3.0.0 in my case with the Vite starter template).

[micantoine]

@dtzxporter what css parsing issues are you encountering?
@patricknelson what did you use? latest sveltekit?

May have a repo to work with?

[patricknelson]

In my case @micantoine, I was working from Vite’s getting started guide, went the yarn create vite route and picked svelte with TypeScript without SvelteKit (explicitly, since I do not what that in the particular project I’m working on).

Not at my computer right now to reproduce for you from scratch, but in the interest of time, I know looking at my repo these exact packages were setup when I then attempted to install the latest svelte-preprocess-cssmodules:

    "svelte": "^3.57.0",
    "svelte-check": "^2.10.3",
    "svelte-preprocess": "^5.0.3",
    "svelte-tag": "^1.0.1",
    "tslib": "^2.5.0",
    "typescript": "^5.0.2",
    "vite": "^4.3.0"

For what it’s worth, I’m using WSL2 (Debian) on Windows. Let me know if you still can’t reproduce the issue and I’ll see if I can help a bit more tomorrow!

[patricknelson]

p.s. I don’t know the exact version of node.js, but if it helps I’m pretty sure it’s v16 and yarn >=1.22.x (would have to be at computer to make sure)

Edit: It's node v16.14.2 and yarn 1.22.19.

[dtzxporter]

@micantoine I believe almost any class with a nested > selector causes the parser to break when it's enabled for the style block.

The latest svelte + typescript config uses a new module setting which causes issues with this library due to the older dependency.

[aslak01]

Just to add to this:

[micantoine]

Thank you all for the info. Just to let you know that I have not been able to look at this issue yet. Probably from next month.

[patricknelson]

Edit: Turns out, this was a red herring, but leaving this here for the record. See next comment.

---

I decided to give this another go and started encountering more issues and just putting this on the internet in case anyone else encounters this problem before this gets fixed. I found that only after adding svelte-preprocess-cssmodules back to the project (still Svelte 3.x and TypeScript 5.x) I would get errors that start like this which would eventually crash the Vite server with several other subsequent "undefined" related errors:

changed tsconfig file detected: /home/patnelson/websites/my-website/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.

Other errors would occur relating to "undefined", but it would be totally random (likely a race condition, but read below for why I think that is). Anyway, this would not affect production build (vite build), only HMR (i.e. running vite in development mode, it would trigger that message above once a .svelte file was loaded). I did find a workaround that would at least allow HMR to work, but it still has the side-effect of a very slow bootup of the development server and would trigger the changed tsconfig file detected but only once.

Basically, the quick fix is to add useFsEvents: false to vite.config.ts, from: https://stackoverflow.com/a/75238360/899075

server: {
  watch: {
    useFsEvents: false
  },
}

I think this was caused by some kind of weird compatibility issue or race condition in my IDE (PhpStorm) with TS 5.x and the TS 4.x, because if I didn't use the fix above but ALSO didn't use my IDE at all (or if I completely disabled the TypeScript service in PhpStorm) then the issue went away. So essentially, I think it boiled down to:

1. Inconsistency between the TypeScript versions in this package and the main one that's installed (used by Svelte I guess)
2. My IDE which is also hooking into TypeScript

I don't really understand it beyond that, since it's still magic to me. I assume (hope, really) that once this is updated to work with TypeScript 5.x these issues may go away since they weren't present before adding this package. 🤷‍♂️

[patricknelson]

Never mind, my last comment was a total red herring. My issue was due to having a very large codebase with >110k files and had a very inefficient server.watch.ignored array. It was probably a race condition that didn't show until adding another plugin to my Vite/Svelte setup. 😅

However, that wild goose chase resulted in me attempting to upgrade TypeScript and Svelte in this plugin (how I realized my theory was wrong), so I created a PR here in case you find that useful in this issue. See #97

[micantoine]

v2.2.5 has been released.

• Typescript is no more part of the peer dependencies (only in dev dependencies).
• The ast walk() deprecated method has been replaced
• Svelte 4 is supported

Just to add to this:

@aslak01 svelte-as-markup-preprocessor should not be needed anymore. svelte-preprocess-cssmodules includes a small utility linearPreprocess() that will help you deal with preprocessors order.

import { typescript, scss } from 'svelte-preprocess';
import { cssModules, linearPreprocess } from 'svelte-preprocess-cssmodules';

...
// svelte config: processing one after another!
  preprocess: linearPreprocess([
    typescript(), // 1
    scss(), // 2
    cssModules(), // 3
  ]),
...

[aslak01]

Great news @micantoine ! Thank you.