or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

auto-preprocessing.mdcss-preprocessing.mdindex.mdjavascript.mdpostcss.mdtemplate-processing.mdtypescript.mdutility-processing.md
tile.json

tessl/npm-svelte-preprocess

A Svelte preprocessor wrapper with baked-in support for commonly used preprocessors

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/svelte-preprocess@6.0.x

To install, run

npx @tessl/cli install tessl/npm-svelte-preprocess@6.0.0

index.mddocs/

Svelte Preprocess

Svelte Preprocess is a comprehensive Svelte preprocessor wrapper that enables developers to use multiple languages and preprocessors within Svelte components. It provides baked-in support for TypeScript, SCSS, Less, Stylus, CoffeeScript, Pug, PostCSS, and Babel with sensible defaults and minimal configuration.

Package Information

  • Package Name: svelte-preprocess
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install svelte-preprocess

Core Imports

import { sveltePreprocess } from "svelte-preprocess";

For CommonJS:

const { sveltePreprocess } = require("svelte-preprocess");

Individual processors:

import { 
  typescript, 
  scss, 
  sass,
  less,
  stylus,
  postcss, 
  babel,
  coffeescript,
  pug,
  globalStyle,
  replace
} from "svelte-preprocess";

Basic Usage

import { sveltePreprocess } from "svelte-preprocess";

// Basic configuration with default settings
const preprocess = sveltePreprocess({
  // TypeScript support
  typescript: true,
  
  // SCSS support  
  scss: {
    prependData: `@import 'src/styles/variables.scss';`
  },
  
  // PostCSS with Autoprefixer
  postcss: {
    plugins: [require('autoprefixer')]
  }
});

export default {
  preprocess
};

Architecture

Svelte Preprocess is built around several key components:

  • Auto Preprocessor: The main sveltePreprocess function that auto-detects languages and applies appropriate processors
  • Individual Processors: Standalone processors for each supported language that can be used independently
  • Transform System: Core transformation engine that handles content processing with source maps and dependency tracking
  • Language Detection: Automatic language detection based on lang attributes and file extensions
  • Configuration System: Flexible options system supporting both global and processor-specific configurations

Capabilities

Auto Preprocessing

Main preprocessor function that automatically detects and processes different languages within Svelte components. Supports TypeScript, SCSS, Less, Stylus, CoffeeScript, Pug, PostCSS, and Babel.

function sveltePreprocess(options?: AutoPreprocessOptions): AutoPreprocessGroup;

interface AutoPreprocessOptions {
  markupTagName?: string;
  aliases?: Array<[string, string]>;
  sourceMap?: boolean;
  
  // Individual processor options
  typescript?: TransformerOptions<Options.Typescript>;
  babel?: TransformerOptions<Options.Babel>;
  scss?: TransformerOptions<Options.Sass>;
  sass?: TransformerOptions<Options.Sass>;
  less?: TransformerOptions<Options.Less>;
  stylus?: TransformerOptions<Options.Stylus>;
  postcss?: TransformerOptions<Options.Postcss>;
  coffeescript?: TransformerOptions<Options.Coffeescript>;
  pug?: TransformerOptions<Options.Pug>;
  globalStyle?: Options.GlobalStyle | boolean;
  replace?: Options.Replace;
  
  [languageName: string]: TransformerOptions;
}

type AutoPreprocessGroup = PreprocessorGroup;

type TransformerOptions<T = any> = boolean | T | Transformer<T>;

type Transformer<T> = (args: TransformerArgs<T>) => Processed | Promise<Processed>;

Auto Preprocessing

TypeScript Processing

TypeScript compiler integration with configurable options including tsconfig support and diagnostics reporting.

function typescript(options?: Options.Typescript): PreprocessorGroup;

namespace Options {
  interface Typescript {
    compilerOptions?: any;
    tsconfigFile?: string | boolean;
    tsconfigDirectory?: string | boolean;
    reportDiagnostics?: boolean;
    prependData?: string;
    stripIndent?: boolean;
  }
}

TypeScript Processing

CSS Preprocessing

Support for SCSS, Sass, Less, and Stylus CSS preprocessors with configurable options and automatic dependency tracking.

function scss(options?: Options.Sass): PreprocessorGroup;
function sass(options?: Options.Sass): PreprocessorGroup;
function less(options?: Options.Less): PreprocessorGroup;
function stylus(options?: Options.Stylus): PreprocessorGroup;

namespace Options {
  interface Sass {
    // Sass configuration options
    prependData?: string;
    stripIndent?: boolean;
    // Additional Sass options omitted for brevity
  }
  
  interface Less {
    paths?: string[];
    plugins?: any[];
    globalVars?: Record<string, string>;
    modifyVars?: Record<string, string>;
    prependData?: string;
    stripIndent?: boolean;
  }
  
  interface Stylus {
    globals?: Record<string, any>;
    functions?: Record<string, any>;
    imports?: string[];
    paths?: string[];
    sourcemap?: boolean;
    prependData?: string;
    stripIndent?: boolean;
  }
}

CSS Preprocessing

PostCSS Processing

PostCSS integration with plugin support and automatic configuration loading.

function postcss(options?: Options.Postcss): PreprocessorGroup;

namespace Options {
  interface Postcss {
    plugins?: any[]; // postcss.AcceptedPlugin[]
    configFilePath?: string;
    prependData?: string;
    stripIndent?: boolean;
    // Additional PostCSS options from postcss.ProcessOptions
  }
}

PostCSS Processing

JavaScript Processing

Babel integration for modern JavaScript transformation and CoffeeScript compilation support.

function babel(options?: Options.Babel): PreprocessorGroup;
function coffeescript(options?: Options.Coffeescript): PreprocessorGroup;

namespace Options {
  interface Babel {
    sourceType?: 'module';
    minified?: false;
    ast?: false;
    code?: true;
    sourceMaps?: boolean;
    prependData?: string;
    stripIndent?: boolean;
    // Additional Babel options from @babel/core TransformOptions
  }
  
  interface Coffeescript {
    sourceMap?: boolean;
    filename?: never;
    bare?: never;
    prependData?: string;
    stripIndent?: boolean;
  }
}

JavaScript Processing

Template Processing

Pug template engine integration for markup preprocessing and global style handling.

function pug(options?: Options.Pug): PreprocessorGroup;
function globalStyle(): PreprocessorGroup;

namespace Options {
  interface Pug {
    markupTagName?: string;
    prependData?: string;
    stripIndent?: boolean;
    // Additional Pug options from pug.Options (excluding filename, doctype, compileDebug)
  }
  
  interface GlobalStyle {
    sourceMap: boolean;
  }
}

Template Processing

Utility Processing

String replacement and content manipulation utilities.

function replace(options: Options.Replace): PreprocessorGroup;

namespace Options {
  type Replace = Array<
    | [string | RegExp, string]
    | [RegExp, (substring: string, ...args: any[]) => string]
  >;
}

Utility Processing

Core Types

interface TransformerArgs<T> {
  content: string;
  filename?: string;
  attributes?: Record<string, any>;
  map?: string | object;
  markup?: string;
  diagnostics?: unknown[];
  options?: T;
}

interface Processed {
  code: string;
  map?: string | object;
  dependencies?: string[];
  diagnostics?: any[];
}

// Re-exported from svelte/compiler
interface PreprocessorGroup {
  markup?: (options: { content: string; filename?: string }) => Processed | Promise<Processed>;
  script?: (options: { content: string; attributes: Record<string, any>; markup: string; filename?: string }) => Processed | Promise<Processed>;
  style?: (options: { content: string; attributes: Record<string, any>; markup: string; filename?: string }) => Processed | Promise<Processed>;
}