Svelte Preprocess

https://github.com/sveltejs/svelte-preprocess
Admin
Svelte Preprocess is a Svelte preprocessor that facilitates the use of other languages like PostCSS,...
Tokens:11,365
Snippets:45
Trust Score:9.8
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install svelte-preprocess

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md

Installs the svelte-preprocess package and its common dependencies for various preprocessors. This step ensures the necessary tools are available for Svelte component development.

```shell
npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install -D svelte-preprocess

npm install -D typescript sass postcss autoprefixer pug @rollup/plugin-typescript
```

--------------------------------

### Example Svelte Component with Pug, TS, Sass

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md

Demonstrates a Svelte component utilizing Pug for templating, TypeScript for scripting, and Sass for styling. This showcases the combined power of `svelte-preprocess` with multiple preprocessor languages.

```pug
template(lang="pug")
  h1 {name}
```

```typescript
script(lang="ts")
  export let name: string = 'world';
```

```scss
style(lang="scss")
  h1 {
    color: red;
  }
```

--------------------------------

### Configure Rollup with Pug, TS, Sass, PostCSS

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md

Configures `svelte-preprocess` in Rollup to support Pug for templates, TypeScript for scripts, and Sass with PostCSS/autoprefixer for styles. This setup allows for advanced component syntax within Svelte projects.

```javascript
import svelte from 'rollup-plugin-svelte'
import { sveltePreprocess } from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';

const production = !process.env.ROLLUP_WATCH

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js',
  },
  plugins: [
    // teach rollup how to handle typescript imports
    typescript({ sourceMap: !production }),
    svelte({
      preprocess: sveltePreprocess({
         sourceMap: !production,
         postcss: {
           plugins: [require('autoprefixer')()]
         }
      }),
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file — better for performance
      css: css => {
        css.write('public/bundle.css')
      },
    }),
  ],
}
```

--------------------------------

### Configure Svelte Preprocess to Prepend SCSS Data

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md

Demonstrates the configuration within a Rollup setup to use svelte-preprocess. It specifically shows how to set the `scss.prependData` option to include a SCSS file, making its variables available across all SCSS styles.

```javascript
import svelte from 'rollup-plugin-svelte';
import { sveltePreprocess } from 'svelte-preprocess';

const production = process.env.NODE_ENV === 'production';

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js',
  },
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
         sourceMap: !production,
         scss: {
          // We can use a path relative to the root because
          // svelte-preprocess automatically adds it to `includePaths`
          // if none is defined.
          prependData: `@import 'src/styles/variables.scss';`
        },
         postcss: {
           plugins: [require('autoprefixer')()]
         }
      }),
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file — better for performance
      css: css => {
        css.write('public/bundle.css');
      },
    }),
  ],
};
```

--------------------------------

### Configure Rollup for svelte-preprocess

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md

Integrates `svelte-preprocess` into a Rollup build process for Svelte applications. It enables auto-preprocessing of component languages without specific configuration, allowing for cleaner component syntax.

```javascript
import svelte from 'rollup-plugin-svelte'
import { sveltePreprocess } from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js',
  },
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file — better for performance
      css: css => {
        css.write('public/bundle.css')
      },
    }),
  ],
}
```

--------------------------------

### Svelte Component Using Prepend SCSS Variable

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md

An example of a Svelte component that utilizes the `$primary-color` variable, which was made available through the `svelte-preprocess` configuration. The variable is used within the SCSS style block.

```pug
template lang="pug">
  h1 {name}
</template>
```

```typescript
script lang="ts">
  export let name: string = 'world';
</script>
```

```scss
style lang="scss">
  h1 {
    color: $primary-color;
  }
</style>
```

--------------------------------

### SCSS Variables File

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md

Defines SCSS variables in a dedicated file. These variables can be prepended to all SCSS files processed by svelte-preprocess, making them globally accessible.

```scss
// src/styles/variables.scss
$primary-color: red;
```

--------------------------------

### Configure Sapper Build

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md

This example shows how to configure `svelte-preprocess` for both client and server builds in a Sapper project. The `sveltePreprocess` function is called once and the resulting object is passed to the `preprocess` option for both client and server configurations within `rollup.config.js`.

```javascript
// ...
import { sveltePreprocess } from 'svelte-preprocess';

const preprocess = sveltePreprocess({
  postcss: true,
  // ...
});

export default {
  client: {
    plugins: [
      svelte({
        preprocess,
        // ...
      }),
  },
  server: {
    plugins: [
      svelte({
        preprocess,
        // ...
      }),
    ],
  },
};
```

--------------------------------

### Integrate with rollup-plugin-svelte

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md

This example shows how to integrate `svelte-preprocess` with `rollup-plugin-svelte` in a `rollup.config.js` file. It demonstrates passing `sveltePreprocess()` directly to the `preprocess` option, and also how to manually enqueue multiple preprocessors like Pug and SCSS.

```javascript
// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import { sveltePreprocess } from 'svelte-preprocess'
import { scss, coffeescript, pug } from 'svelte-preprocess'

export default {
  ...,
  plugins: [
    svelte({
      /**
       * Auto preprocess supported languages with
       * '<template>'/'external src files' support
       **/
      preprocess: sveltePreprocess({ /* options */ })
      /**
       * It is also possible to manually enqueue
       * stand-alone processors
       * */
      preprocess: [
        pug({ /* pug options */ }),
        scss({ /* scss options */ }),
        coffeescript({ /* coffeescript options */ })
      ]
    })
  ]
}
```

--------------------------------

### Named Export for Svelte Preprocess

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/migration-guide.md

Illustrates the shift from default export to named export for the `svelte-preprocess` function, starting from version 6.

```javascript
- import sveltePreprocess from 'svelte-preprocess';
```

```javascript
+ import { sveltePreprocess } from 'svelte-preprocess';
```

--------------------------------

### Configure svelte.config.js for SvelteKit/Vite (ESM)

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md

This snippet shows how to configure `svelte.config.js` using the ECMAScript Module (ESM) syntax, which is standard for Vite starters and SvelteKit projects. It imports `sveltePreprocess` and passes it to the `preprocess` option within the Svelte configuration object.

```javascript
// svelte.config.js
import { sveltePreprocess } from 'svelte-preprocess';

/**
 * This will add autocompletion if you're working with SvelteKit
 *
 * @type {import('@sveltejs/kit').Config}
 */
const config = {
  preprocess: sveltePreprocess({
    // ...svelte-preprocess options
  }),
  // ...other svelte options
};

export default config;
```

--------------------------------

### Custom Preprocessor Execution in Svelte Preprocess

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/migration-guide.md

Explains how to integrate custom preprocessors. The `onBefore` hook from v3 has been removed, and users should now enqueue custom preprocessor objects directly into the `preprocess` array alongside `svelte-preprocess`.

```javascript
// v3 example
{
  preprocess: sveltePreprocess({
    onBefore({ content, filename }) {
      return content.replace('foo', 'bar');
    },
  });
}
```

```javascript
// v4 example
const myPreprocessor = {
  markup({ content }) {
    return { code: content.replace('foo', 'bar') };
  },
};

// later in your config
{
  preprocess: [myPreprocessor, sveltePreprocess()];
}
```

--------------------------------

### Basic Rollup Configuration for svelte-preprocess

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Demonstrates how to integrate svelte-preprocess into a Rollup configuration for Svelte projects. It shows the basic setup for enabling preprocessing within the svelte plugin.

```javascript
import svelte from 'rollup-plugin-svelte'
import { sveltePreprocess } from 'svelte-preprocess'

export default {
  plugins: [
    svelte({
      preprocess: sveltePreprocess({ ... })
    })
  ]
}
```

--------------------------------

### Configure svelte.config.js for Svelte Starter (CommonJS)

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md

This snippet demonstrates configuring `svelte.config.js` using the CommonJS syntax, typically used in projects without `"type": "module"` in `package.json`, such as the default Svelte starter template. It uses `require` to import `sveltePreprocess`.

```javascript
// svelte.config.js
const { sveltePreprocess } = require('svelte-preprocess');
module.exports = {
  preprocess: sveltePreprocess({
    // ...svelte-preprocess options
  }),
  // ...other svelte options
};
```

--------------------------------

### Configure Multiple Stand-alone Preprocessors

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Provides an example of the auto-preprocessing mode by configuring an array of multiple stand-alone preprocessors. This includes processors for Pug, CoffeeScript, TypeScript, Less, SCSS, Sass, Stylus, Babel, PostCSS, globalStyle, and replace.

```js
import svelte from 'rollup-plugin-svelte';
import {
  pug,
  coffeescript,
  typescript,
  less,
  scss,
  sass,
  stylus,
  postcss,
  globalStyle,
  babel,
  replace,
} from 'svelte-preprocess';

export default {
  plugins: [
    svelte({
      preprocess: [
        replace({ ... }),
        pug({ ... }),
        coffeescript({ ... }),
        typescript({ ... }),
        less({ ... }),
        scss({ ... }),
        sass({ ... }),
        stylus({ ... }),
        babel({ ... }),
        postcss({ ... }),
        globalStyle({ ... }),
      ],
    }),
  ],
};

```

--------------------------------

### TypeScript Configuration for Svelte Preprocess

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/migration-guide.md

Details changes in TypeScript handling for svelte-preprocess, specifically the removal of the `handleMixedImports` transpiler due to the requirement of `"verbatimModuleSyntax": true` in `tsconfig.json` from v6 onwards.

```typescript
// Before v6, with preserveValueImports and importsNotUsedAsValues
// import { value, Type } from 'somewhere'; // Mixed import

// In v6+, with "verbatimModuleSyntax": true
// import { value } from 'somewhere';
// import type { Type } from 'somewhere'; // Explicit type import
```

--------------------------------

### Integrate with svelte-loader (Webpack)

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md

This configuration snippet illustrates how to use `svelte-preprocess` with `svelte-loader` in a Webpack setup. The `preprocess` option within `svelte-loader`'s options is set to an instance of `sveltePreprocess()`.

```javascript
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(html|svelte)$/,
        exclude: [],
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess: require('svelte-preprocess')({
              /* options */
          })
          },
        },
      },
      ...
    ]
  }
  ...
```

--------------------------------

### Include External Files via src Attribute

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/README.md

Shows how to use the `src` attribute on `<template>`, `<script>`, and `<style>` tags to reference content from external files. It's crucial to use relative paths starting with `.` for `svelte-preprocess` to recognize the `src` attribute.

```html
<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.css"></style>
```

--------------------------------

### Update SCSS Prepending in Svelte Preprocess

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/migration-guide.md

Demonstrates the API change for prepending data to SCSS and other preprocessors. The `data` property has been replaced by `prependData` in version 4, offering a more consistent approach across different languages.

```javascript
import sveltePreprocess from 'svelte-preprocess';

// v3 example
sveltePreprocess({
  scss: {
    data: '// prepended content',
  },
});
```

```javascript
import sveltePreprocess from 'svelte-preprocess';

// v4 example
sveltePreprocess({
  scss: {
    prependData: '// prepended content for scss',
  },
  typescript: {
    prependData: '// prepended content for ts',
  },
});
```

--------------------------------

### Use Stand-alone SCSS and PostCSS Processors

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Illustrates the manual configuration of preprocessing steps using specific stand-alone processors like SCSS and PostCSS. It demonstrates how to pass options, such as PostCSS plugins like autoprefixer, to these individual processors.

```js
import { scss, postcss } from 'svelte-preprocess';

svelte.preprocess(input, [
  scss(),
  postcss({
    plugins: [
      require('autoprefixer')({
        browsers: 'last 2 versions',
      }),
    ],
  }),
]);

```

--------------------------------

### Global Style Usage Notes

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Provides usage notes for the `globalStyle` preprocessor. It suggests placement in the processors array, notes limitations with `@keyframes`, and explains the use of `:local` for scoping within global styles.

```APIDOC
Global Style Usage Notes:
  - Placement: Works best when added to the end of the processors array if used standalone.
  - Keyframes: Wrapping `@keyframes` inside `:global {}` blocks is not supported. Use the `-global-` name prefix for global keyframes.
  - Scoping: Use `:local` within a global style tag to apply scoped styles, similar to how `:global` is used.
```

--------------------------------

### Stylus Preprocessor Configuration

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Information on configuring the Stylus preprocessor. It allows using options from the Stylus API reference, with the `filename` property being overridden by the preprocessor. Inclusion paths are automatically configured for the root directory, `node_modules`, and the current file's directory.

```APIDOC
Stylus Preprocessor Options:
  - Accepts options from the [Stylus API reference](https://stylus-lang.com/docs/js.html).
  - Overridden property: `filename`.
  - Automatic inclusion paths: root directory, `node_modules`, current file's directory.
```

--------------------------------

### Publishing Workflow Commands

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/CONTRIBUTING.md

Commands used in the manual publishing process. These scripts update the changelog, bump the package version, create a release tag, and publish the package to npm.

```shell
npm run patch
npm run minor
npm run major
```

```shell
npm publish
```

--------------------------------

### Configure svelte-preprocess with replace plugin

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Demonstrates integrating the `replace` preprocessor into a Rollup configuration for Svelte projects. It showcases setting up custom replacements for environment variables and template directives using an array of RegExp-string tuples.

```javascript
import svelte from 'rollup-plugin-svelte';
import { replace } from 'svelte-preprocess';

export default {
  plugins: [
    svelte({
      preprocess: [
        replace([
          [
            /process\.env\.(\w+)/g,
            (_match, prop) => JSON.stringify(process.env[prop]),
          ],
          // Example of supporting a blade-like syntax:
          [/@if\s*\((.*?)\)$/gim, '{#if $1}'],
          [/@elseif\s*\((.*?)\)$/gim, '{:else if $1}'],
          [/@else$/gim, '{:else}'],
          [/@endif$/gim, '{/if}'],
          [/@each\s*\((.*?)\)$/gim, '{#each $1}'],
          [/@endeach$/gim, '{/each}'],
          [/@await\s*\((.*?)\)$/gim, '{#await $1}'],
          [/@then\s*(?:\((.*?)\))?$/gim, '{:then $1}'],
          [/@catch\s*(?:\((.*?)\))?$/gim, '{:catch $1}'],
          [/@endawait$/gim, '{/await}'],
          [/@debug\s*\((.*?)\)$/gim, '{@debug $1}'],
          [/@html\s*\((.*?)\)$/gim, '{@html $1}'],
        ])
      ]
    })
  ]
}
```

--------------------------------

### Configuring Specific Preprocessor Options

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Shows how to pass specific configuration options to individual preprocessors (e.g., typescript, scss, postcss) when using svelte-preprocess. This allows fine-grained control over each language's processing.

```javascript
import svelte from 'rollup-plugin-svelte';
import { sveltePreprocess } from 'svelte-preprocess';

export default {
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        globalStyle: { ... },
        replace: { ... },
        typescript: { ... },
        scss: { ... },
        sass: { ... },
        less: { ... },
        stylus: { ... },
        babel: { ... },
        postcss: { ... },
        coffeescript: { ... },
        pug: { ... },
      }),
    }),
  ],
};
```

--------------------------------

### Using svelte-preprocess with Multiple Preprocessors

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Illustrates how to use svelte-preprocess alongside other Svelte preprocessors, such as mdsvex, by passing an array of preprocessor functions to the Svelte plugin.

```javascript
import svelte from 'rollup-plugin-svelte'
import { sveltePreprocess } from 'svelte-preprocess'

export default {
  plugins: [
    svelte({
      preprocess: [
        sveltePreprocess({ ... }),
        mdsvex({ ... })
      ]
    })
  ]
}
```

--------------------------------

### Configure svelte-preprocess in svelte.config.js

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/README.md

Demonstrates how to import and use the `sveltePreprocess` function within your `svelte.config.js` file. This is the recommended way to integrate the preprocessor into your Svelte project for custom configurations.

```js
import { sveltePreprocess } from 'svelte-preprocess';

const config = {
  preprocess: sveltePreprocess({ ... })
}

export default config;
```

--------------------------------

### Less Preprocessor Configuration

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

The Less preprocessor handles Less code, transpiling it to JavaScript. It accepts no extra options beyond standard Less configurations. Automatic inclusion paths are configured for the root directory, node_modules, and the current file's directory. Refer to the Less API for specific options.

```APIDOC
Less Preprocessor:

Accepts no extra options beyond standard Less configurations.
Refer to the [Less API reference](http://lesscss.org/usage/#less-options) for specific options.

Automatic inclusion paths are configured for:
- Root directory
- node_modules
- Current file's directory
```

--------------------------------

### Use Built-in Language Support

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/README.md

Leverage svelte-preprocess's out-of-the-box support for various languages within Svelte components. This includes using Pug for templates, TypeScript for scripts, and SCSS for styles, simplifying development workflows.

```html
<template lang="pug">
  div Posts +each('posts as post') a(href="{post.url}") {post.title}
</template>

<script lang="ts">
  export const hello: string = 'world';
</script>

<style src="./style.scss"></style>
```

--------------------------------

### Transformed Svelte component output

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Shows the resulting Svelte code after the `replace` preprocessor has processed the custom directives and environment variable placeholders, converting them into valid Svelte template syntax.

```svelte
{#if 'production' !== 'development'}
  <h1>Production environment!</h1>
{/if}
```

--------------------------------

### Babel Preprocessor Configuration

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Configure the Babel preprocessor for Svelte projects. It accepts an options object passed to the Babel runtime, requiring ES6+ format for JavaScript. Specific options like `onlyRemoveTypeImports` are noted for TypeScript integration. For older browser support, Babel must be run from the bundler's context.

```APIDOC
Babel Preprocessor Options:

Accepts an options object passed directly to the babel runtime.
Refer to the [Babel API reference](https://babeljs.io/docs/en/options#primary-options) for available options.

Key considerations:
- Ensure Svelte's JavaScript is in at least ES6 format.
- If using TypeScript with `@babel/plugin-transform-typescript`, set `onlyRemoveTypeImports: true` to preserve value imports.
- For transpilation to older browsers, run Babel within your bundler's context.
```

--------------------------------

### PostCSS and SugarSS Preprocessor Options

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

The PostCSS preprocessor supports several options for customization, including plugins, parser, syntax, and configuration file path. In auto-preprocessing mode, setting `postcss: true` enables `postcss-load-config` to find a PostCSS config file. SugarSS is automatically loaded when `lang="sugarss"` is detected, removing extra indentation.

```APIDOC
PostCSS Preprocessor Options:

- `plugins` (undefined): A list of postcss plugins.
- `parser` (undefined): The name of the module to be used as the parser.
- `syntax` (undefined): The syntax to be used.
- `configFilePath` (undefined): The path of the directory containing the PostCSS configuration.

Auto-preprocessing:
- Set `postcss: true` if `postcss-load-config` is installed to automatically find a PostCSS config file.

SugarSS Handling:
- When `lang="sugarss"` is detected, `sugarss` is automatically loaded and extra indentation is removed.

Refer to the [PostCSS API reference](https://api.postcss.org/) for PostCSS specific options.
```

--------------------------------

### Pug Preprocessor Options and Syntax

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

The Pug preprocessor allows Pug syntax within Svelte templates. It accepts options like `markupTagName` and `configFilePath`, overriding the default `doctype` to HTML. Special handling is provided for Svelte template blocks using Pug mixins (e.g., `+if()`, `+each()`) and for attributes, including preventing HTML entity encoding with `!=` and spreading props with quoted `{...object}`.

```APIDOC
Pug Preprocessor Options:

- `markupTagName` (template): The tag name used to look for the optional markup wrapper. If none is found, pug is executed over the whole file.
- `configFilePath` (undefined): The path of the directory containing the Pug configuration.

Overridden property:
- `doctype`: set to HTML.

Refer to the [Pug API reference](https://pugjs.org/api/reference.html) for information about its options.

Template Blocks:
Use Pug mixins to represent Svelte's `{#...}{/...}` and `{@...}` blocks:
`+if()`, `+else()`, `+elseif()`, `+each()`, `+key()`, `+await()`, `+then()`, `+catch()`, `+html()`, `+const()`, `+debug()`, `+snippet()`, `+render()`.

Example:
```pug
ul
  +if('posts && posts.length > 1')
    +each('posts as post')
      li
        a(rel="prefetch" href="blog/{post.slug}") {post.title}
    +else()
      span No posts :c
```

Element Attributes:
- To prevent Pug from encoding attribute values to HTML entities, use `!=` instead of `=`.
  Example: `button(disabled!="{foo && bar}")`
- This is also necessary for passing callbacks.
  Example: `button(on:click!="{(e) => doTheThing(e)}")`
- Template literals are not supported for attribute values; use `{...}` syntax instead.
  Example: `attr="Hello {value ? 'Foo' : 'Bar'}"`

Spreading Props:
Wrap `{...object}` expressions with quotes (`"`) to spread props into a Pug element.
Example:
```pug
button.big(type="button" disabled "{...slide.props}") Send
```

Svelte Element Directives:
Use Svelte Element directives with Pug syntax.
Example:
```pug
input(bind:value="{foo}")
input(on:input="{bar}")
```
```

--------------------------------

### Override TypeScript Preprocessor with esbuild

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Shows how to override the default TypeScript preprocessor with a faster alternative like esbuild. This involves providing a custom function for the `typescript` option within `sveltePreprocess` to leverage esbuild's speed for TS transpilation.

```js
import svelte from 'rollup-plugin-svelte';
import { sveltePreprocess } from 'svelte-preprocess';
import { transformSync } from 'esbuild';

export default {
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        typescript({ content }) {
          const { code, map } = transformSync(content, {
            loader: 'ts',
          });
          return { code, map };
        },
      }),
    }),
  ],
};

```

--------------------------------

### Apply Global Styles with global Attribute

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/README.md

Demonstrates how to make all CSS content within a `<style>` tag global by adding the `global` attribute. This bypasses Svelte's default scoped CSS behavior for the entire style block.

```html
<style global>
  div {
    color: red;
  }
</style>
```

--------------------------------

### Apply Global Styles with :global Rule

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/README.md

Shows how to selectively expose parts of a stylesheet as global using the `:global` CSS rule. This works best with nesting-enabled preprocessors like SCSS, but also supports standard CSS selectors with `:global`.

```css
<style lang="scss">
  .scoped-style {
  }

  :global {
    @import 'global-stylesheet.scss';

    .global-style {
      .global-child-style {
      }
    }
  }
</style>
```

--------------------------------

### Use Template Tag for Markup

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/README.md

Illustrates the Vue-like support for defining component markup within a specific `<template>` tag. The default tag is `template`, but it can be customized via preprocessing options.

```html
<template>
  <div>Hey</div>
</template>

<style></style>

<script></script>
```

--------------------------------

### Svelte component with custom directives

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Illustrates how a Svelte component can be written using custom directives like `@if` and `process.env` placeholders, which are then transformed by the `replace` preprocessor into standard Svelte syntax.

```svelte
<script>
  // Assume NODE_ENV is set to 'production'
</script>

@if(process.env.NODE_ENV !== 'development')
  <h1>Production environment!</h1>
@endif
```

--------------------------------

### SCSS/Sass Preprocessor Configuration

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Details on configuring the SCSS/Sass preprocessor in svelte-preprocess. It accepts options from Sass's LegacyStringOptions API, excluding 'file' and 'data'. The 'prependData' property is used for prepending content. Inclusion paths are automatically configured. For `lang="sass"`, `indentedSyntax` is set to true.

```APIDOC
SCSS/Sass Preprocessor Options:
  - Accepts options from Sass's [LegacyStringOptions API](https://sass-lang.com/documentation/js-api/interfaces/LegacyStringOptions).
  - Unsupported properties: `file`, `data`.
  - Supported property: `prependData` (string) - Content to prepend to SCSS/Sass.
  - Automatic inclusion paths: root directory, `node_modules`, current file's directory.
  - `indentedSyntax`: Automatically set to `true` when `lang="sass"` is used.
  - Note: `sass` (indented syntax) and `scss` are not interchangeable.
```

--------------------------------

### TypeScript Preprocessor Options

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Configuration options for the TypeScript preprocessor in svelte-preprocess. This is useful for non-type-only TypeScript features like decorators. Options include specifying the tsconfig directory, tsconfig file, and merging compiler options.

```APIDOC
TypeScript Preprocessor Options:
  - `tsconfigDirectory`: (optional string) Specifies the directory to load `tsconfig.json` from (e.g., `'./configs'`).
  - `tsconfigFile`: (optional string) Points to a specific `tsconfig.json` file (e.g., `'./tsconfig.app.json'`).
  - `compilerOptions`: (optional object) Custom compiler options that merge with those from `tsconfig.json`.
  - Refer to the [TypeScript `compilerOptions` reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for available options.

Limitations:
  - `svelte-preprocess` (v4+) only transpiles, it does not type-check components. Use `svelte-check` for type-checking.
  - Non-type-only TypeScript features in component markup are not supported (see issue [#525](https://github.com/sveltejs/svelte-preprocess/issues/525)).
```

--------------------------------

### Global Style Attribute

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Demonstrates how to apply global styles within a Svelte component's style tag by using the `global` attribute. This makes all CSS content within the tag apply globally, bypassing component-specific scoping.

```html
<style global>
  div {
    color: red;
  }
</style>
```

--------------------------------

### Replace Values with RegExp and String

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/README.md

Replace string patterns within component markup by providing an array of `[RegExp, ReplaceFn | string]` to the `replace` option. This allows dynamic injection of values, such as environment variables, into your Svelte components.

```js
autoPreprocess({
  replace: [[/process\.env\.NODE_ENV/g, JSON.stringify(process.env.NODE_ENV)]],
});
```

```svelte
{#if process.env.NODE_ENV !== 'development'}
  <h1>Production environment!</h1>
{/if}
```

```svelte
{#if 'production' !== 'development'}
  <h1>Production environment!</h1>
{/if}
```

--------------------------------

### Configure Babel for Modern JavaScript Syntax

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/README.md

Integrate Babel with svelte-preprocess to transpile component code using modern JavaScript features like optional operators and nullish coalescing. This requires Babel presets like `@babel/preset-env` targeting ES6+ for compatibility with the Svelte compiler.

```js
import { sveltePreprocess } from 'svelte-preprocess'
  ...
  preprocess: sveltePreprocess({
    babel: {
      presets: [
        [
          '@babel/preset-env',
          {
            loose: true,
            // No need for babel to resolve modules
            modules: false,
            targets: {
              // ! Very important. Target es6+
              esmodules: true,
            },
          },
        ],
      ],
    },
  });
  ...
```

--------------------------------

### Add Custom Language Preprocessor

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Demonstrates how to integrate a custom preprocessor for a specific language alias (e.g., `lang="potato"`). It shows defining a custom function that receives content and filename, allowing for custom language processing within svelte components.

```js
import svelte from 'rollup-plugin-svelte';
import { sveltePreprocess } from 'svelte-preprocess';

export default {
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        aliases: [
          ['potato', 'potatoLanguage'],
          ['pot', 'potatoLanguage'],
        ],
        /** Add a custom language preprocessor */
        potatoLanguage({ content, filename, attributes }) {
          const { code, map } = require('potato-language').render(content);

          return { code, map };
        },
      }),
    }),
  ],
};

```

--------------------------------

### Global Style Rule

Source: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md

Shows how to use the `:global` CSS rule within a Svelte component's style tag to selectively expose parts of a stylesheet as global. This is particularly useful with nesting-enabled preprocessors like SCSS.

```scss
<style lang="scss">
  .scoped-style {
  }

  :global {
    @import 'global-stylesheet.scss';

    .global-style {
      .global-child-style {
      }
    }
  }
</style>
```
Tokens:
Raw