svelte-preprocess

• Purpose: svelte-preprocess is a Svelte preprocessor designed to facilitate the use of other languages (like TypeScript, SCSS, Pug, etc.) within Svelte components. It provides sensible defaults and a streamlined development experience.

• Target Audience: Svelte developers who want to use languages beyond JavaScript, CSS, and HTML in their components, especially those not covered by native Svelte 5 features or Vite's built-in preprocessors.

• Key Features:

  • Template Tag: Supports Vue-like template tags for markup definition.
  • External Files: Allows importing external files for templates, scripts, and styles.
  • Global Styles: Offers global attribute and :global rule for unscoped CSS.
  • Modern JavaScript: Supports Babel for transpiling modern JS syntax.
  • Replace Values: Enables string pattern replacement in markup.
  • Built-in Language Support: Works with Sass, Stylus, Less, CoffeeScript, TypeScript, Pug, PostCSS, and Babel.

• When to Use:

  • Not needed for Svelte 5 + TypeScript type features (handled natively).
  • Not needed for Vite + common CSS preprocessors (use vite-plugin-svelte instead).
  • Use svelte-preprocess for other cases, such as non-TypeScript languages or non-Vite setups.

• Framework Support: Primarily for Svelte, with extensive preprocessing capabilities for other languages.

For more details, refer to the documentation .