CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-svelte-preprocess

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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>;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/svelte-preprocess@6.0.x
Publish Source
CLI
Badge
tessl/npm-svelte-preprocess badge