tessl/npm-svelte-preprocess

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

—

Pending

Overview

Eval results

Files

Auto Preprocessing

Name: tessl/npm-svelte-preprocess
Author: tessl

The main sveltePreprocess function provides automatic language detection and processing for Svelte components. It creates a complete preprocessor group that handles markup, script, and style preprocessing based on lang attributes.

Capabilities

sveltePreprocess Function

Creates an auto-detecting preprocessor that supports multiple languages with a single configuration.

/**
 * Creates a Svelte preprocessor group with automatic language detection
 * @param options - Configuration options for the preprocessor
 * @returns PreprocessorGroup for use with Svelte compiler
 */
function sveltePreprocess(options?: AutoPreprocessOptions): AutoPreprocessGroup;

interface AutoPreprocessOptions {
  /** Tag name for markup sections (default: 'template') */
  markupTagName?: string;
  
  /** Language aliases for custom language detection */
  aliases?: Array<[string, string]>;
  
  /** Enable source map generation (default: false, true in development) */
  sourceMap?: boolean;
  
  // Individual processor configurations
  /** TypeScript compiler options */
  typescript?: TransformerOptions<Options.Typescript>;
  
  /** Babel transformer options */
  babel?: TransformerOptions<Options.Babel>;
  
  /** SCSS preprocessor options */
  scss?: TransformerOptions<Options.Sass>;
  
  /** Sass preprocessor options (alias for scss with indented syntax) */
  sass?: TransformerOptions<Options.Sass>;
  
  /** Less preprocessor options */
  less?: TransformerOptions<Options.Less>;
  
  /** Stylus preprocessor options */
  stylus?: TransformerOptions<Options.Stylus>;
  
  /** PostCSS processor options */
  postcss?: TransformerOptions<Options.Postcss>;
  
  /** CoffeeScript compiler options */
  coffeescript?: TransformerOptions<Options.Coffeescript>;
  
  /** Pug template engine options */
  pug?: TransformerOptions<Options.Pug>;
  
  /** Global style processor options */
  globalStyle?: Options.GlobalStyle | boolean;
  
  /** String replacement patterns */
  replace?: Options.Replace;
  
  /** Additional language processors */
  [languageName: string]: TransformerOptions;
}

type AutoPreprocessGroup = PreprocessorGroup;

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

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

Usage Examples:

import { sveltePreprocess } from "svelte-preprocess";

// Basic configuration
const preprocess = sveltePreprocess({
  typescript: true,
  scss: true,
  postcss: true
});

// Advanced configuration
const preprocess = sveltePreprocess({
  sourceMap: true,
  markupTagName: 'template',
  
  typescript: {
    tsconfigFile: './tsconfig.json',
    reportDiagnostics: true
  },
  
  scss: {
    prependData: `
      @import 'src/styles/variables.scss';
      @import 'src/styles/mixins.scss';
    `
  },
  
  postcss: {
    plugins: [
      require('autoprefixer'),
      require('cssnano')({ preset: 'default' })
    ]
  },
  
  babel: {
    presets: [['@babel/preset-env', { targets: '> 0.25%' }]]
  }
});

// With language aliases
const preprocess = sveltePreprocess({
  aliases: [
    ['customcss', 'scss'],
    ['customjs', 'typescript']
  ],
  
  scss: { /* scss options */ },
  typescript: { /* typescript options */ }
});

Language Detection

The preprocessor automatically detects languages based on:

lang attribute: <script lang="ts">, <style lang="scss">
File extensions: For external file imports
Custom aliases: User-defined language mappings

Supported Languages:

Script: typescript, ts, coffeescript, coffee, babel, js
Style: scss, sass, less, stylus, postcss, pcss, sugarss, sss
Markup: pug, jade

Processing Pipeline

The auto preprocessor follows this processing order:

Replace Processing: String replacements applied to markup (if configured)
Markup Processing: Pug or other markup preprocessors
Script Processing: Language-specific script processing, followed by optional Babel transformation
Style Processing: CSS preprocessor processing, followed by PostCSS and global style handling

Configuration Patterns

// Minimal configuration - enable preprocessors with defaults
const preprocess = sveltePreprocess({
  typescript: true,
  scss: true
});

// Function-based custom processing
const preprocess = sveltePreprocess({
  typescript: ({ content, filename, attributes }) => {
    // Custom TypeScript processing logic
    return { code: processedContent };
  }
});

// Mixed configuration
const preprocess = sveltePreprocess({
  typescript: true, // Use default options
  
  scss: {
    // Custom SCSS options
    includePaths: ['src/styles', 'node_modules']
  },
  
  babel: ({ content, filename }) => {
    // Custom Babel processing
    return require('@babel/core').transform(content, {
      filename,
      presets: ['@babel/preset-env']
    });
  }
});

Source Maps

Source map generation can be controlled globally or per-processor:

const preprocess = sveltePreprocess({
  // Global source map setting
  sourceMap: process.env.NODE_ENV === 'development',
  
  typescript: {
    // TypeScript-specific source map options
    compilerOptions: {
      sourceMap: true,
      inlineSourceMap: false
    }
  },
  
  scss: {
    // SCSS source maps handled automatically based on global setting
  }
});

Core Transform Function

Internal transformation function used by the auto preprocessor.

/**
 * Core transformation function used internally by the auto preprocessor
 * @param name - Language/processor name
 * @param options - Transformer options
 * @param args - Transformation arguments
 * @returns Processed result with code, map, and dependencies
 */
function transform(
  name: string | null | undefined,
  options: TransformerOptions,
  args: TransformerArgs<any>
): Promise<Processed>;

Types

interface TransformerArgs<T> {
  /** Source content to transform */
  content: string;
  
  /** Source filename for error reporting and source maps */
  filename?: string;
  
  /** Element attributes from the Svelte component */
  attributes?: Record<string, any>;
  
  /** Source map from previous transformations */
  map?: string | object;
  
  /** Full markup content for context */
  markup?: string;
  
  /** Diagnostics from previous transformations */
  diagnostics?: unknown[];
  
  /** Processor-specific options */
  options?: T;
}

interface Processed {
  /** Transformed code */
  code: string;
  
  /** Source map */
  map?: string | object;
  
  /** File dependencies for watch mode */
  dependencies?: string[];
  
  /** TypeScript or other diagnostics */
  diagnostics?: any[];
}

Install with Tessl CLI