svelte vscode extension throw an error on valid postcss syntax when working with monorepo

[raythurnvoid]

Describe the bug

I'm using postcss with postcss-nesting plugin.

I see this error in vscode when opening a .svelte file in a nested workspace:

Identifier is expected

If you expect this syntax to work, here are some suggestions: 
If you use less/SCSS with `svelte-preprocess`, did you add `lang="scss"`/`lang="less"` to your `style` tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`. 
Did you setup a `svelte.config.js`? 
See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.

Reproduction

https://github.com/raythurnevoid/svelte-ls-monorepo-postcss-error/tree/main
npm --workspace test-workspace i

The error is shown only when opening the root folder with vscode.
It disappears when opening the actual nested workspace folder: ./test-workspace

Expected behavior

The error should not be raised when opening a file placed in a nested workspace.

System Info

  System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 9 4900H with Radeon Graphics
    Memory: 17.99 GB / 31.42 GB
  Binaries:
    Node: 18.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1265.0), Chromium (110.0.1587.49)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/kit: ^1.7.2 => 1.7.2
    @sveltejs/package: ^2.0.1 => 2.0.1
    svelte: ^3.55.1 => 3.55.1
    vite: ^4.1.2 => 4.1.2

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

No response

[jasonlyu123]

You need to update your preprocess config to point to the postcss config file path. As pointed out in the docs linked in the error message. Either you use svelte-preprocess like the example in the docs, or you use the new vitePreprocess like this:

-import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath(import.meta.url));

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: [
-               vitePreprocess(),
-       	preprocess({
-       		postcss: true
-               })
+		vitePreprocess({
+			style: {
+				css: {
+					postcss: join(__dirname, 'postcss.config.js')
+				} 
+			}
+		})
	],

	kit: {
		adapter: adapter()
	}
};

export default config;

[raythurnvoid]

@jasonlyu123 it worked.
What about the same issue with scss files?
Vite doesn't throw any error and everything works fine but svelte plugin complains:

[jasonlyu123]

The original issue is resolved. Let's track the $lib alias problem in #1986