diff --git a/.changeset/sour-bears-raise.md b/.changeset/sour-bears-raise.md new file mode 100644 index 000000000000..0bafc13b7c00 --- /dev/null +++ b/.changeset/sour-bears-raise.md @@ -0,0 +1,6 @@ +--- +'create-svelte': patch +'@sveltejs/kit': patch +--- + +[feat] vitePreprocess diff --git a/documentation/docs/60-appendix/05-integrations.md b/documentation/docs/60-appendix/05-integrations.md index 9b8e89ffad6d..205df56b3181 100644 --- a/documentation/docs/60-appendix/05-integrations.md +++ b/documentation/docs/60-appendix/05-integrations.md @@ -4,21 +4,25 @@ title: Integrations ## Preprocessors -Preprocessors transform your `.svelte` files before passing them to the compiler. For example, if your `.svelte` file uses TypeScript and PostCSS, it must first be transformed into JavaScript and CSS so that the Svelte compiler can handle it. There are many [available preprocessors](https://sveltesociety.dev/tools#preprocessors). +Preprocessors transform your `.svelte` files before passing them to the compiler. For example, if your `.svelte` file uses TypeScript and PostCSS, it must first be transformed into JavaScript and CSS so that the Svelte compiler can handle it. There are many [available preprocessors](https://sveltesociety.dev/tools#preprocessors). The Svelte team maintains two official ones discussed below. -[`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) automatically transforms the code in your Svelte templates to provide support for TypeScript, PostCSS, scss/sass, Less, and many other technologies (except CoffeeScript which is [not supported](https://github.com/sveltejs/kit/issues/2920#issuecomment-996469815) by SvelteKit). The first step of setting it up is to add `svelte-preprocess` to your [`svelte.config.js`](/docs/configuration). It is provided by the template if you're using TypeScript whereas JavaScript users will need to add it. After that, you will often only need to install the corresponding library such as `npm install -D sass` or `npm install -D less`. See the [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) docs for more details. +### `vitePreprocess` -`vite-plugin-svelte` also offers a [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) feature which will utilize Vite for preprocessing which may be faster and require less configuration. To use this option, first run `npm install --save-dev @sveltejs/vite-plugin-svelte` and then update your `svelte.config.js`: +`vite-plugin-svelte` offers a [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) feature which utilizes Vite for preprocessing. It is capable of handling the language flavors Vite handles: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. For convenience, it is re-exported from the `@sveltejs/kit/vite` package. If you set your project up with TypeScript it will be included by default: ```js // svelte.config.js -import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; +import { vitePreprocess } from '@sveltejs/kit/vite'; export default { preprocess: [vitePreprocess()] }; ``` +### `svelte-preprocess` + +[`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) automatically transforms the code in your Svelte templates to provide support for TypeScript, PostCSS, scss/sass, Less, and many other technologies (except CoffeeScript which is [not supported](https://github.com/sveltejs/kit/issues/2920#issuecomment-996469815) by SvelteKit). `vitePreprocess` may be faster and require less configuration, so it is used by default. However, `svelte-preprocess` has some additional functionality not found in `vitePreprocess`. The first step of setting it up is to add `svelte-preprocess` to your [`svelte.config.js`](/docs/configuration). After that, you will often only need to install the corresponding library such as `npm install -D sass` or `npm install -D less`. See the [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) docs for more details. + ## Adders [Svelte Adders](https://sveltesociety.dev/templates#adders) allow you to setup many different complex integrations like Tailwind, PostCSS, Storybook, Firebase, GraphQL, mdsvex, and more with a single command. Please see [sveltesociety.dev](https://sveltesociety.dev/) for a full listing of templates, components, and tools available for use with Svelte and SvelteKit. diff --git a/packages/create-svelte/package.json b/packages/create-svelte/package.json index a4ac89479936..136f3ca70c34 100644 --- a/packages/create-svelte/package.json +++ b/packages/create-svelte/package.json @@ -25,7 +25,6 @@ "prettier-plugin-svelte": "^2.8.1", "sucrase": "^3.29.0", "svelte": "^3.54.0", - "svelte-preprocess": "^4.10.7", "tiny-glob": "^0.2.9", "uvu": "^0.5.6" }, diff --git a/packages/create-svelte/shared/+default+checkjs/svelte.config.js b/packages/create-svelte/shared/+default+checkjs/svelte.config.js index 892f0c467672..87f198f55371 100644 --- a/packages/create-svelte/shared/+default+checkjs/svelte.config.js +++ b/packages/create-svelte/shared/+default+checkjs/svelte.config.js @@ -1,11 +1,11 @@ import adapter from '@sveltejs/adapter-auto'; -import preprocess from 'svelte-preprocess'; +import { vitePreprocess } from '@sveltejs/kit/vite'; /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://github.com/sveltejs/svelte-preprocess + // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors - preprocess: preprocess(), + preprocess: vitePreprocess(), kit: { adapter: adapter() diff --git a/packages/create-svelte/shared/+default+typescript/svelte.config.js b/packages/create-svelte/shared/+default+typescript/svelte.config.js index 892f0c467672..87f198f55371 100644 --- a/packages/create-svelte/shared/+default+typescript/svelte.config.js +++ b/packages/create-svelte/shared/+default+typescript/svelte.config.js @@ -1,11 +1,11 @@ import adapter from '@sveltejs/adapter-auto'; -import preprocess from 'svelte-preprocess'; +import { vitePreprocess } from '@sveltejs/kit/vite'; /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://github.com/sveltejs/svelte-preprocess + // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors - preprocess: preprocess(), + preprocess: vitePreprocess(), kit: { adapter: adapter() diff --git a/packages/create-svelte/shared/+typescript/package.json b/packages/create-svelte/shared/+typescript/package.json index 6457b1f0afbb..6e1cdee3542d 100644 --- a/packages/create-svelte/shared/+typescript/package.json +++ b/packages/create-svelte/shared/+typescript/package.json @@ -6,7 +6,6 @@ "devDependencies": { "typescript": "^4.9.3", "tslib": "^2.4.1", - "svelte-check": "^2.9.2", - "svelte-preprocess": "^4.10.7" + "svelte-check": "^2.9.2" } } diff --git a/packages/create-svelte/shared/+typescript/svelte.config.js b/packages/create-svelte/shared/+typescript/svelte.config.js index 892f0c467672..87f198f55371 100644 --- a/packages/create-svelte/shared/+typescript/svelte.config.js +++ b/packages/create-svelte/shared/+typescript/svelte.config.js @@ -1,11 +1,11 @@ import adapter from '@sveltejs/adapter-auto'; -import preprocess from 'svelte-preprocess'; +import { vitePreprocess } from '@sveltejs/kit/vite'; /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://github.com/sveltejs/svelte-preprocess + // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors - preprocess: preprocess(), + preprocess: vitePreprocess(), kit: { adapter: adapter() diff --git a/packages/create-svelte/templates/default/package.json b/packages/create-svelte/templates/default/package.json index 4be5db6d39ba..f9e6f7903109 100644 --- a/packages/create-svelte/templates/default/package.json +++ b/packages/create-svelte/templates/default/package.json @@ -12,7 +12,6 @@ "@sveltejs/adapter-auto": "workspace:*", "@sveltejs/kit": "workspace:*", "svelte": "^3.54.0", - "svelte-preprocess": "^4.10.7", "typescript": "^4.9.3", "vite": "^4.0.0" }, diff --git a/packages/create-svelte/templates/default/svelte.config.js b/packages/create-svelte/templates/default/svelte.config.js index d1295ff0a0f1..e4597b125653 100644 --- a/packages/create-svelte/templates/default/svelte.config.js +++ b/packages/create-svelte/templates/default/svelte.config.js @@ -1,13 +1,13 @@ import adapter from '@sveltejs/adapter-auto'; -import preprocess from 'svelte-preprocess'; +import { vitePreprocess } from '@sveltejs/kit/vite'; // This config is ignored and replaced with one of the configs in the shared folder when a project is created. /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://github.com/sveltejs/svelte-preprocess + // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors - preprocess: preprocess(), + preprocess: vitePreprocess(), kit: { adapter: adapter() diff --git a/packages/kit/src/exports/vite/index.js b/packages/kit/src/exports/vite/index.js index 78221d9d30e6..325f3d6a73bb 100644 --- a/packages/kit/src/exports/vite/index.js +++ b/packages/kit/src/exports/vite/index.js @@ -20,6 +20,8 @@ import { create_static_module, create_dynamic_module } from '../../core/env.js'; import { is_illegal, module_guard, normalize_id } from './graph_analysis/index.js'; import { create_assets } from '../../core/sync/create_manifest_data/index.js'; +export { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + const cwd = process.cwd(); /** @type {import('./types').EnforcedConfig} */ diff --git a/packages/package/test/fixtures/resolve-alias/svelte.config.js b/packages/package/test/fixtures/resolve-alias/svelte.config.js index 776bb17b41de..7fa9bd72a376 100644 --- a/packages/package/test/fixtures/resolve-alias/svelte.config.js +++ b/packages/package/test/fixtures/resolve-alias/svelte.config.js @@ -1,4 +1,4 @@ -import preprocess from 'svelte-preprocess'; +import { vitePreprocess } from '../../../../kit/src/exports/vite/index.js'; import { fileURLToPath } from 'url'; import path from 'path'; @@ -6,7 +6,7 @@ const __filename = fileURLToPath(import.meta.url); const __dirname = path.join(__filename, '..'); export default { - preprocess: preprocess(), + preprocess: vitePreprocess(), kit: { alias: { $utils: path.resolve(__dirname, './src/lib/utils') diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee84774810dd..00764bf77b5c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -213,7 +213,6 @@ importers: prompts: ^2.4.2 sucrase: ^3.29.0 svelte: ^3.54.0 - svelte-preprocess: ^4.10.7 tiny-glob: ^0.2.9 uvu: ^0.5.6 dependencies: @@ -230,7 +229,6 @@ importers: prettier-plugin-svelte: 2.8.1_kaioqtfwjumrsfopsgfoca65re sucrase: 3.29.0 svelte: 3.54.0 - svelte-preprocess: 4.10.7_svelte@3.54.0 tiny-glob: 0.2.9 uvu: 0.5.6 @@ -241,7 +239,6 @@ importers: '@sveltejs/adapter-auto': workspace:* '@sveltejs/kit': workspace:* svelte: ^3.54.0 - svelte-preprocess: ^4.10.7 typescript: ^4.9.3 vite: ^4.0.0 dependencies: @@ -251,7 +248,6 @@ importers: '@sveltejs/adapter-auto': link:../../../adapter-auto '@sveltejs/kit': link:../../../kit svelte: 3.54.0 - svelte-preprocess: 4.10.7_gf4dcx76vtk2o62ixxeqx7chra typescript: 4.9.3 vite: 4.0.0 @@ -4289,56 +4285,6 @@ packages: typescript: 4.9.3 dev: true - /svelte-preprocess/4.10.7_svelte@3.54.0: - resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==} - engines: {node: '>= 9.11.2'} - requiresBuild: true - peerDependencies: - '@babel/core': ^7.10.2 - coffeescript: ^2.5.1 - less: ^3.11.3 || ^4.0.0 - node-sass: '*' - postcss: ^7 || ^8 - postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0 - pug: ^3.0.0 - sass: ^1.26.8 - stylus: ^0.55.0 - sugarss: ^2.0.0 - svelte: ^3.23.0 - typescript: ^3.9.5 || ^4.0.0 - peerDependenciesMeta: - '@babel/core': - optional: true - coffeescript: - optional: true - less: - optional: true - node-sass: - optional: true - postcss: - optional: true - postcss-load-config: - optional: true - pug: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - typescript: - optional: true - dependencies: - '@types/pug': 2.0.6 - '@types/sass': 1.43.1 - detect-indent: 6.1.0 - magic-string: 0.25.9 - sorcery: 0.10.0 - strip-indent: 3.0.0 - svelte: 3.54.0 - dev: true - /svelte/3.54.0: resolution: {integrity: sha512-tdrgeJU0hob0ZWAMoKXkhcxXA7dpTg6lZGxUeko5YqvPdJBiyRspGsCwV27kIrbrqPP2WUoSV9ca0gnLlw8YzQ==} engines: {node: '>= 8'}