From d9c48ab269f74868f086061e802183fcba0c6984 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Tue, 30 Jul 2024 03:34:51 -0700 Subject: [PATCH] docs: mention `vitePreprocess` (#2440) --- docs/preprocessors/in-general.md | 12 +++++++++++- docs/preprocessors/other-css-preprocessors.md | 13 ++++++++++--- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/docs/preprocessors/in-general.md b/docs/preprocessors/in-general.md index de7750f7c..38d4cd3d3 100644 --- a/docs/preprocessors/in-general.md +++ b/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'; diff --git a/docs/preprocessors/other-css-preprocessors.md b/docs/preprocessors/other-css-preprocessors.md index bab9f59b6..3ed75a69f 100644 --- a/docs/preprocessors/other-css-preprocessors.md +++ b/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: