docs: mention vitePreprocess (#2440)

Author: benmccann

docs/preprocessors/in-general.md

@@ -2,12 +2,22 @@
 
 ## Generic setup
 
-If a svelte file contains some language other than `html`, `css` or `javascript`, `svelte-vscode` needs to know how to [preprocess](https://svelte.dev/docs#svelte_preprocess) it. This can be achieved by creating a `svelte.config.js` file at the root of your project which exports a svelte options object (similar to `svelte-loader` and `rollup-plugin-svelte`). It's recommended to use the official [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) package which can handle many languages.
+If a svelte file contains some language other than `html`, `css` or `javascript`, `svelte-vscode` needs to know how to [preprocess](https://svelte.dev/docs#svelte_preprocess) it. This can be achieved by creating a `svelte.config.js` file at the root of your project which exports a svelte options object (similar to `svelte-loader` and `rollup-plugin-svelte`). It's recommended to use the official [vitePreprocess](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) or [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) packages which can handle many languages. Visit the SvelteKit docs, to see [a comparison between these two preprocessors](https://kit.svelte.dev/docs/integrations).
 
 > NOTE: Prior to `svelte-check 1.4.0` / `svelte-language-server 0.13.0` / `Svelte for VS Code 104.9.0` you **cannot** use the new `import x from y` and `export const` / `export default` syntax in `svelte.config.js`.
 
 ESM-style (for everything with `"type": "module"` in its `package.json`, like SvelteKit):
 
+```js
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+    preprocess: [vitePreprocess()]
+};
+```
+
+Or:
+
 ```js
 import sveltePreprocess from 'svelte-preprocess';
 

docs/preprocessors/other-css-preprocessors.md

@@ -4,14 +4,21 @@ The svelte-language-server and therefore the VSCode extension can only handle CS
 
 ## PostCSS
 
-1. Setup you build and `svelte.config.js` ([general info](./in-general.md)) correctly and add a `postcss.config.cjs` (note the `cjs` ending; you need to write the config in CommonJS style currently, more on that below). We recommend using [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess/blob/master/docs/preprocessing.md#postcss). For the `svelte.config.js`, this should be enough:
+1. Setup your build and `svelte.config.js` ([general info](./in-general.md)) correctly and add a `postcss.config.js`. We recommend using [vitePreprocess](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) or [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess/blob/master/docs/preprocessing.md#postcss). For the `svelte.config.js`, this should be enough:
+
+```js
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+export default { preprocess: [vitePreprocess()] };
+```
+
+Or:
 
 ```js
 import sveltePreprocess from 'svelte-preprocess';
 export default { preprocess: sveltePreprocess({ postcss: true }) };
 ```
 
-Note that this assumes that you have a ESM-style project, which means there's `"type": "module"` in your project's `package.json`. If not, you need to use CommonJS in your `svelte.config.js`, things like `import ...` or `export const ...` are not allowed. You then also switch the `postcss.config` `cjs` file ending to `js`.
+Note that this assumes that you have a ESM-style project, which means there's `"type": "module"` in your project's `package.json`. If not, you need to use CommonJS in your `svelte.config.js` and `postcss.config.js` as things like `import ...` or `export const ...` are not allowed.
 
 If your `svelte.config.js` is not in the workspace root (for example your `svelte.config.js` is within `/frontend`), you'll have to pass in the `configFilePath` config. This is because the relative path is resolved relative to the working directory of the node process.
 
@@ -35,7 +42,7 @@ export default {
 
 ## TailwindCSS
 
-We assume you already have setup TailwindCSS within your Svelte project. If not, [this article](https://dev.to/inalbant/a-simpler-way-to-add-tailwindcss-to-your-svelte-project-11ja) and [this article](https://dev.to/sarioglu/using-svelte-with-tailwindcss-a-better-approach-47ph) explain two approaches on how to do it.
+We assume you already have setup TailwindCSS within your Svelte project. If not, you can run `npx svelte-add tailwindcss` to set it up automatically or visit [the Tailwind docs](https://tailwindcss.com/docs/guides/sveltekit) which explain how to manually set it up.
 
 To use TailwindCSS with the VSCode extension: