{"id":13485129,"url":"https://github.com/sveltejs/svelte-preprocess","last_synced_at":"2025-05-10T12:09:39.568Z","repository":{"id":37030824,"uuid":"132792753","full_name":"sveltejs/svelte-preprocess","owner":"sveltejs","description":"A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.","archived":false,"fork":false,"pushed_at":"2025-01-13T09:21:19.000Z","size":3414,"stargazers_count":1778,"open_issues_count":80,"forks_count":150,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-05-07T23:02:01.927Z","etag":null,"topics":["preprocess","svelte","sveltejs","sveltekit"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sveltejs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-05-09T17:43:29.000Z","updated_at":"2025-05-06T06:12:20.000Z","dependencies_parsed_at":"2023-02-12T01:16:01.116Z","dependency_job_id":"3315173b-c57c-44d1-a11b-2f199ffbaece","html_url":"https://github.com/sveltejs/svelte-preprocess","commit_stats":{"total_commits":657,"total_committers":79,"mean_commits":8.316455696202532,"dds":0.273972602739726,"last_synced_commit":"c522b8e1198fedaecd9f153584940f8f901dcc76"},"previous_names":[],"tags_count":163,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sveltejs%2Fsvelte-preprocess","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sveltejs%2Fsvelte-preprocess/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sveltejs%2Fsvelte-preprocess/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sveltejs%2Fsvelte-preprocess/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sveltejs","download_url":"https://codeload.github.com/sveltejs/svelte-preprocess/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252968070,"owners_count":21833251,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["preprocess","svelte","sveltejs","sveltekit"],"created_at":"2024-07-31T17:01:46.981Z","updated_at":"2025-05-07T23:02:06.223Z","avatar_url":"https://github.com/sveltejs.png","language":"TypeScript","readme":"# Svelte Preprocess\n\n\u003e A [Svelte](https://svelte.dev) preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug and much more.\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/svelte-preprocess\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/svelte-preprocess.svg\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/sveltejs/svelte-preprocess/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/svelte-preprocess.svg\" alt=\"license\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/sveltejs/svelte-preprocess/actions?query=workflow%3ACI\"\u003e\n    \u003cimg src=\"https://github.com/sveltejs/svelte-preprocess/workflows/CI/badge.svg\" alt=\"action-CI\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n- [What is it?](#what-is-it)\n- [Getting Started](docs/getting-started.md)\n- [Usage](docs/usage.md)\n- [Migration Guide](docs/migration-guide.md)\n- [Preprocessing](docs/preprocessing.md)\n  - [Preprocessors](docs/preprocessing.md#preprocessors)\n- [Features](#features)\n  - [Template tag](#template-tag)\n  - [External files](#external-files)\n  - [Global style](#global-style)\n  - [Modern JavaScript syntax](#modern-javascript-syntax)\n  - [Replace values](#replace-values)\n  - [Built-in support for commonly used languages](#built-in-support-for-commonly-used-languages)\n\n## What is it?\n\n`Svelte`'s own parser understands only JavaScript, CSS and its HTML-like syntax. To make it possible to write components in other languages, such as TypeScript or SCSS, `Svelte` provides the [preprocess API](https://svelte.dev/docs#compile-time-svelte-preprocess), which allows to easily transform the content of your `markup` and your `style`/`script` tags.\n\nWriting your own preprocessor for, i.e SCSS is easy enough, but it can be cumbersome to have to always configure multiple preprocessors for the languages you'll be using.\n\n`svelte-preprocess` is a custom svelte preprocessor that acts as a facilitator to use other languages with Svelte, providing multiple features, sensible defaults and a less noisy development experience.\n\nIt is recommended to use with `svelte.config.js` file, located at the project root. For other usage, please refer to [usage documentation](#usage-documentation).\n\n```js\nimport { sveltePreprocess } from 'svelte-preprocess';\n\nconst config = {\n  preprocess: sveltePreprocess({ ... })\n}\n\nexport default config;\n```\n\n## When to use it?\n\nHistorically, `svelte-preprocess` was the go-to option whenever you had a language other than JS/HTML/CSS used inside your Svelte files. Today, depending on your setup, you may no longer need it:\n\n- If you're using Svelte 5 and are only using type features of TypeScript (i.e. things that just \"go away\" after transpiling to JS), you don't need any preprocessor, Svelte handles this natively\n- If you're using Vite and are using TypeScript or common CSS preprocessors (PostCSS, SCSS, Less, ...), use the preprocessor that comes with vite-plugin-svelte instead\n\nIf these cases don't apply to you, use `svelte-preprocess`.\n\n## Features\n\n### Template tag\n\n_Vue-like_ support for defining your markup between a specific tag. The default tag is `template` but it can be [customized](/docs/preprocessing.md#auto-preprocessing-options).\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003eHey\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\u003c/style\u003e\n\n\u003cscript\u003e\u003c/script\u003e\n```\n\n### External files\n\n```html\n\u003ctemplate src=\"./template.html\"\u003e\u003c/template\u003e\n\u003cscript src=\"./script.js\"\u003e\u003c/script\u003e\n\u003cstyle src=\"./style.css\"\u003e\u003c/style\u003e\n```\n\n\u003e Note: using a relative path starting with `.` is important. Otherwise `svelte-preprocess` will ignore the `src` attribute.\n\n### Global style\n\n#### `global` attribute\n\nAdd a `global` attribute to your `style` tag and instead of scoping the CSS, all of its content will be interpreted as global style.\n\n```html\n\u003cstyle global\u003e\n  div {\n    color: red;\n  }\n\u003c/style\u003e\n```\n\n#### `:global` rule\n\nUse a `:global` rule to only expose parts of the stylesheet:\n\n```html\n\u003cstyle lang=\"scss\"\u003e\n  .scoped-style {\n  }\n\n  :global {\n    @import 'global-stylesheet.scss';\n\n    .global-style {\n      .global-child-style {\n      }\n    }\n  }\n\u003c/style\u003e\n```\n\nWorks best with nesting-enabled CSS preprocessors, but regular CSS selectors like `div :global .global1 .global2` are also supported.\n\n_**Note**: needs PostCSS to be installed._\n\n### Modern JavaScript syntax\n\n`svelte-preprocess` allows you to run your component code through Babel before sending it to the compiler, allowing you to use new language features such as optional operators and nullish coalescing. However, note that Babel should transpile your component code to the javascript version supported by the Svelte compiler, so ES6+.\n\nFor example, with `@babel/preset-env` your config could be:\n\n```js\nimport { sveltePreprocess } from 'svelte-preprocess'\n  ...\n  preprocess: sveltePreprocess({\n    babel: {\n      presets: [\n        [\n          '@babel/preset-env',\n          {\n            loose: true,\n            // No need for babel to resolve modules\n            modules: false,\n            targets: {\n              // ! Very important. Target es6+\n              esmodules: true,\n            },\n          },\n        ],\n      ],\n    },\n  });\n  ...\n```\n\n_**Note:** If you want to transpile your app to be supported in older browsers, you must run babel from the context of your bundler._\n\n### Replace values\n\nReplace a set of string patterns in your components markup by passing an array of `[RegExp, ReplaceFn | string]`, the same arguments received by the `String.prototype.replace` method.\n\nIn example, to replace inject the value of `process.env.NODE_ENV`:\n\n```js\nautoPreprocess({\n  replace: [[/process\\.env\\.NODE_ENV/g, JSON.stringify(process.env.NODE_ENV)]],\n});\n```\n\nWhich, in a production environment, would turn\n\n```svelte\n{#if process.env.NODE_ENV !== 'development'}\n  \u003ch1\u003eProduction environment!\u003c/h1\u003e\n{/if}\n```\n\ninto\n\n```svelte\n{#if 'production' !== 'development'}\n  \u003ch1\u003eProduction environment!\u003c/h1\u003e\n{/if}\n```\n\n### Built-in support for commonly used languages\n\nThe current supported languages out-of-the-box are Sass, Stylus, Less, CoffeeScript, TypeScript, Pug, PostCSS, Babel.\n\n```html\n\u003ctemplate lang=\"pug\"\u003e\n  div Posts +each('posts as post') a(href=\"{post.url}\") {post.title}\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n  export const hello: string = 'world';\n\u003c/script\u003e\n\n\u003cstyle src=\"./style.scss\"\u003e\u003c/style\u003e\n```\n\n---\n\n### [Getting started](/docs/getting-started.md)\n\n### [Preprocessing documentation](/docs/preprocessing.md)\n\n### [Usage documentation](/docs/usage.md)\n\n### [Migration Guide](/docs/migration-guide.md)\n\n---\n\n## License\n\n[MIT](LICENSE)\n","funding_links":[],"categories":["TypeScript","Uncategorized","Integrations"],"sub_categories":["Uncategorized","Preprocessing"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsveltejs%2Fsvelte-preprocess","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsveltejs%2Fsvelte-preprocess","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsveltejs%2Fsvelte-preprocess/lists"}