tessl/npm-svelte-preprocess

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

—

Pending

Overview

Eval results

Files

CSS Preprocessing

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

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

Capabilities

SCSS/Sass Processing

SCSS and Sass preprocessor support with full Sass language features and configuration options.

/**
 * Creates SCSS preprocessor for style blocks
 * @param options - SCSS/Sass configuration options
 * @returns PreprocessorGroup with style preprocessing
 */
function scss(options?: Options.Sass): PreprocessorGroup;

/**
 * Creates Sass preprocessor (indented syntax) for style blocks
 * @param options - Sass configuration options (automatically enables indented syntax)
 * @returns PreprocessorGroup with style preprocessing
 */
function sass(options?: Options.Sass): PreprocessorGroup;

namespace Options {
  interface Sass {
    /** Content to prepend to every file */
    prependData?: string;
    
    /** Remove common leading whitespace */
    stripIndent?: boolean;
    
    // Additional Sass/SCSS options (subset of Sass LegacyStringOptions)
    // Excludes 'file' and 'data' which are handled internally
  }
}

Usage Examples:

import { scss, sass } from "svelte-preprocess";

// Basic SCSS support
const preprocess = {
  style: scss()
};

// SCSS with global imports
const preprocess = {
  style: scss({
    prependData: `
      @import 'src/styles/variables.scss';
      @import 'src/styles/mixins.scss';
    `
  })
};

// Sass indented syntax
const preprocess = {
  style: sass({
    prependData: `
      @import 'src/styles/variables'
      @import 'src/styles/mixins'
    `
  })
};

Less Processing

Less CSS preprocessor integration with variable support and plugin configuration.

/**
 * Creates Less preprocessor for style blocks
 * @param options - Less configuration options
 * @returns PreprocessorGroup with style preprocessing
 */
function less(options?: Options.Less): PreprocessorGroup;

namespace Options {
  interface Less {
    /** Import paths for @import statements */
    paths?: string[];
    
    /** Less plugins */
    plugins?: any[];
    
    /** Enable strict import checking */
    strictImports?: boolean;
    
    /** Maximum line length for output */
    maxLineLen?: number;
    
    /** Line number output format */
    dumpLineNumbers?: 'comment' | string;
    
    /** Suppress output */
    silent?: boolean;
    
    /** Enforce strict unit checking */
    strictUnits?: boolean;
    
    /** Global variables */
    globalVars?: Record<string, string>;
    
    /** Variables to modify */
    modifyVars?: Record<string, string>;
    
    /** Content to prepend to every file */
    prependData?: string;
    
    /** Remove common leading whitespace */
    stripIndent?: boolean;
  }
}

Usage Examples:

import { less } from "svelte-preprocess";

// Basic Less support
const preprocess = {
  style: less()
};

// Less with custom configuration
const preprocess = {
  style: less({
    paths: ['src/styles', 'node_modules'],
    globalVars: {
      primaryColor: '#3498db',
      fontSize: '16px'
    },
    modifyVars: {
      'theme-color': '#e74c3c'
    }
  })
};

// Less with prepended variables
const preprocess = {
  style: less({
    prependData: `
      @import 'variables.less';
      @base-font-size: 16px;
    `
  })
};

Stylus Processing

Stylus CSS preprocessor with support for functions, mixins, and custom configuration.

/**
 * Creates Stylus preprocessor for style blocks
 * @param options - Stylus configuration options
 * @returns PreprocessorGroup with style preprocessing
 */
function stylus(options?: Options.Stylus): PreprocessorGroup;

namespace Options {
  interface Stylus {
    /** Global variables */
    globals?: Record<string, any>;
    
    /** Custom functions */
    functions?: Record<string, any>;
    
    /** Files to import automatically */
    imports?: string[];
    
    /** Import paths */
    paths?: string[];
    
    /** Enable source map generation */
    sourcemap?: boolean;
    
    /** Content to prepend to every file */
    prependData?: string;
    
    /** Remove common leading whitespace */
    stripIndent?: boolean;
  }
}

Usage Examples:

import { stylus } from "svelte-preprocess";

// Basic Stylus support
const preprocess = {
  style: stylus()
};

// Stylus with globals and functions
const preprocess = {
  style: stylus({
    globals: {
      'primary-color': '#3498db',
      'base-font': 'Arial, sans-serif'
    },
    
    functions: {
      // Custom Stylus functions
      'rem': (px) => (px / 16) + 'rem'
    },
    
    imports: [
      'src/styles/variables.styl',
      'src/styles/mixins.styl'
    ]
  })
};

// Stylus with paths and imports
const preprocess = {
  style: stylus({
    paths: ['src/styles', 'node_modules'],
    prependData: `
      @import 'variables'
      @import 'mixins'
    `
  })
};

Integration with Auto Preprocessor

All CSS preprocessors integrate seamlessly with the auto preprocessor:

import { sveltePreprocess } from "svelte-preprocess";

const preprocess = sveltePreprocess({
  // Enable multiple CSS preprocessors
  scss: {
    prependData: `@import 'src/styles/variables.scss';`
  },
  
  less: {
    paths: ['src/styles'],
    globalVars: { primaryColor: '#007acc' }
  },
  
  stylus: {
    imports: ['src/styles/mixins.styl']
  }
});

The auto preprocessor detects CSS preprocessors based on:

<style lang="scss">, <style lang="sass">
<style lang="less">
<style lang="stylus">, <style lang="styl">
External file extensions

Common Configuration Patterns

Global Variable Import

// SCSS
const preprocess = sveltePreprocess({
  scss: {
    prependData: `
      @import 'src/lib/styles/variables.scss';
      @import 'src/lib/styles/mixins.scss';
    `
  }
});

// Less
const preprocess = sveltePreprocess({
  less: {
    prependData: `@import 'src/lib/styles/variables.less';`,
    globalVars: {
      'theme-primary': '#007acc'
    }
  }
});

// Stylus
const preprocess = sveltePreprocess({
  stylus: {
    imports: ['src/lib/styles/variables.styl'],
    globals: {
      'primary-color': '#007acc'
    }
  }
});

Development vs Production

const isDev = process.env.NODE_ENV === 'development';

const preprocess = sveltePreprocess({
  scss: {
    // Include debug information in development
    outputStyle: isDev ? 'expanded' : 'compressed',
    sourceMap: isDev,
    
    prependData: `
      $env: ${isDev ? 'development' : 'production'};
      @import 'src/styles/variables.scss';
    `
  }
});

Monorepo Setup

const preprocess = sveltePreprocess({
  scss: {
    includePaths: [
      'packages/ui/src/styles',
      'packages/shared/styles',
      'node_modules'
    ],
    
    prependData: `
      @import 'packages/shared/styles/variables';
      @import 'packages/ui/src/styles/mixins';
    `
  }
});

Source Maps and Dependencies

All CSS preprocessors automatically handle:

Source Maps: Generated when sourceMap: true in auto preprocessor options
Dependencies: File imports are tracked for hot reload and watch mode
Error Reporting: Compilation errors include source location information

// Source maps enabled globally
const preprocess = sveltePreprocess({
  sourceMap: true, // Enables source maps for all preprocessors
  
  scss: {
    // SCSS-specific options
  }
});

Types

interface SassOptions {
  prependData?: string;
  stripIndent?: boolean;
  // Additional Sass compiler options (LegacyStringOptions<'sync'> excluding 'file' | 'data')
}

interface LessOptions {
  paths?: string[];
  plugins?: any[];
  strictImports?: boolean;
  maxLineLen?: number;
  dumpLineNumbers?: 'comment' | string;
  silent?: boolean;
  strictUnits?: boolean;
  globalVars?: Record<string, string>;
  modifyVars?: Record<string, string>;
  prependData?: string;
  stripIndent?: boolean;
}

interface StylusOptions {
  globals?: Record<string, any>;
  functions?: Record<string, any>;
  imports?: string[];
  paths?: string[];
  sourcemap?: boolean;
  prependData?: string;
  stripIndent?: boolean;
}

Install with Tessl CLI