Vite Preprocessing

/**
 * Creates a Svelte preprocessor that uses Vite's pipeline for script and style processing
 * @param opts - Preprocessing options
 * @returns Svelte PreprocessorGroup for use in svelte.config.js
 */
function vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroup;

interface VitePreprocessOptions {
  /** 
   * Preprocess script blocks with vite pipeline
   * Since Svelte 5 this is not needed for TypeScript anymore
   * @default false
   */
  script?: boolean;
  /** Preprocess style blocks with vite pipeline */
  style?: boolean | InlineConfig | ResolvedConfig;
}

// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: vitePreprocess({
    style: true,
    script: false // Not needed for TypeScript in Svelte 5+
  })
};

// Enable both script and style preprocessing
export default {
  preprocess: vitePreprocess({
    style: true,
    script: true // Only needed for Svelte 4 or specific use cases
  })
};

// Pass Vite config for style preprocessing
export default {
  preprocess: vitePreprocess({
    style: {
      css: {
        devSourcemap: true,
        preprocessorOptions: {
          scss: {
            additionalData: '@import "src/styles/variables.scss";'
          }
        }
      }
    }
  })
};

interface ScriptProcessingOptions {
  /** 
   * Enable script block preprocessing
   * Note: Since Svelte 5, TypeScript is handled natively and this is usually not needed
   * @default false
   */
  script?: boolean;
}

// For Svelte 5+ (TypeScript works natively)
export default {
  preprocess: vitePreprocess({
    script: false // Default, TypeScript works without this
  })
};

// For Svelte 4 or when you need Vite transformations in script blocks
export default {
  preprocess: vitePreprocess({
    script: true // Enables Vite's esbuild/oxc transformation
  })
};

<!-- Works in Svelte 5+ without script preprocessing -->
<script lang="ts">
  interface User {
    name: string;
    age: number;
  }
  
  export let user: User;
  
  // TypeScript features work natively
  const displayName: string = user.name.toUpperCase();
</script>

<div>
  <h1>{displayName}</h1>
  <p>Age: {user.age}</p>
</div>

interface StyleProcessingOptions {
  /** 
   * Enable and configure style block preprocessing
   * - boolean: enable/disable with default Vite config
   * - InlineConfig: provide specific Vite configuration
   * - ResolvedConfig: use existing resolved Vite config
   */
  style?: boolean | InlineConfig | ResolvedConfig;
}

// Basic style preprocessing (uses default Vite config)
export default {
  preprocess: vitePreprocess({
    style: true
  })
};

// Custom Vite configuration for style processing
export default {
  preprocess: vitePreprocess({
    style: {
      css: {
        devSourcemap: true,
        preprocessorOptions: {
          scss: {
            additionalData: `@import "src/styles/variables.scss";`
          },
          less: {
            modifyVars: {
              'primary-color': '#1890ff'
            }
          }
        }
      }
    }
  })
};

// Advanced PostCSS configuration
export default {
  preprocess: vitePreprocess({
    style: {
      css: {
        postcss: {
          plugins: [
            require('autoprefixer'),
            require('tailwindcss'),
            require('postcss-nesting')
          ]
        }
      }
    }
  })
};

<!-- PostCSS with nesting -->
<style lang="postcss">
  .card {
    padding: 1rem;
    border-radius: 0.5rem;
    
    &:hover {
      transform: scale(1.02);
    }
    
    .title {
      font-size: 1.25rem;
      font-weight: bold;
    }
  }
</style>

<!-- Sass/SCSS -->
<style lang="scss">
  $primary-color: #3498db;
  
  .button {
    background-color: $primary-color;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    
    &:hover {
      background-color: darken($primary-color, 10%);
    }
  }
</style>

<!-- CSS with imports -->
<style>
  @import 'modern-normalize';
  @import './component-styles.css';
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
</style>

<!-- CSS Modules -->
<style module>
  .button {
    background: blue;
    color: white;
  }
</style>

<script>
  // Access CSS module classes
  export let styles;
</script>

<button class={styles.button}>Click me</button>

<!-- Import external stylesheets -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
  @import '../styles/global.css';
  
  /* Local asset imports work through Vite */
  .background {
    background-image: url('../assets/pattern.svg');
  }
</style>

// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  css: {
    devSourcemap: true,
    preprocessorOptions: {
      scss: {
        additionalData: '@import "src/styles/variables.scss";'
      }
    }
  },
  plugins: [
    svelte({
      preprocess: vitePreprocess({
        style: true // Will use the CSS config above
      })
    })
  ]
});

// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsvex } from 'mdsvex';

export default {
  extensions: ['.svelte', '.md'],
  preprocess: [
    mdsvex({
      extensions: ['.md']
    }),
    vitePreprocess({
      style: true
    })
  ]
};

// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

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

export default {
  preprocess: vitePreprocess({
    style: {
      css: {
        devSourcemap: dev,
        minify: !dev
      }
    }
  })
};