tessl/npm-svelte-preprocess

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

—

Pending

Overview

Eval results

Files

PostCSS Processing

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

PostCSS integration with plugin support, automatic configuration loading, and seamless integration with other CSS preprocessors.

Capabilities

PostCSS Preprocessor

PostCSS processor that can be used standalone or automatically applied after other CSS preprocessors.

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

namespace Options {
  interface Postcss {
    /** PostCSS plugins array */
    plugins?: any[]; // postcss.AcceptedPlugin[]
    
    /** Path to PostCSS config file */
    configFilePath?: string;
    
    /** Content to prepend to every file */
    prependData?: string;
    
    /** Remove common leading whitespace */
    stripIndent?: boolean;
    
    // Additional PostCSS process options
    // Inherits from postcss.ProcessOptions
  }
}

Usage Examples:

import { postcss } from "svelte-preprocess";

// Basic PostCSS with Autoprefixer
const preprocess = {
  style: postcss({
    plugins: [
      require('autoprefixer')
    ]
  })
};

// PostCSS with multiple plugins
const preprocess = {
  style: postcss({
    plugins: [
      require('autoprefixer'),
      require('cssnano')({
        preset: ['default', {
          discardComments: { removeAll: true }
        }]
      }),
      require('postcss-custom-properties'),
      require('postcss-nesting')
    ]
  })
};

// Using PostCSS config file
const preprocess = {
  style: postcss({
    configFilePath: './postcss.config.js'
  })
};

Configuration File Loading

PostCSS can automatically load configuration from standard config files:

// Automatically loads postcss.config.js, .postcssrc, etc.
const preprocess = {
  style: postcss() // No options needed
};

// Specify custom config file path
const preprocess = {
  style: postcss({
    configFilePath: './config/postcss.config.js'
  })
};

// Override config file plugins
const preprocess = {
  style: postcss({
    configFilePath: './postcss.config.js',
    plugins: [
      // Additional plugins or overrides
      require('postcss-custom-media')
    ]
  })
};

Integration with Auto Preprocessor

PostCSS is automatically applied after other CSS preprocessors when using the auto preprocessor:

import { sveltePreprocess } from "svelte-preprocess";

const preprocess = sveltePreprocess({
  // SCSS processed first, then PostCSS
  scss: {
    prependData: `@import 'variables.scss';`
  },
  
  // PostCSS applied to all styles (including SCSS output)
  postcss: {
    plugins: [
      require('autoprefixer'),
      require('postcss-preset-env')
    ]
  }
});

Processing order in auto preprocessor:

CSS preprocessor (SCSS, Less, Stylus)
PostCSS processing
Global style handling

Common Plugin Configurations

// Production optimization
const preprocess = {
  style: postcss({
    plugins: [
      require('autoprefixer'),
      require('postcss-preset-env')({
        stage: 2,
        features: {
          'nesting-rules': true,
          'custom-properties': true
        }
      }),
      process.env.NODE_ENV === 'production' && require('cssnano')({
        preset: ['default', {
          discardComments: { removeAll: true },
          normalizeWhitespace: true
        }]
      })
    ].filter(Boolean)
  })
};

// Design system utilities
const preprocess = {
  style: postcss({
    plugins: [
      require('postcss-import'),
      require('tailwindcss'),
      require('postcss-nested'),
      require('autoprefixer')
    ]
  })
};

// CSS-in-JS style features
const preprocess = {
  style: postcss({
    plugins: [
      require('postcss-custom-properties'),
      require('postcss-color-function'),
      require('postcss-calc'),
      require('postcss-custom-media')
    ]
  })
};

Global Style Processing

PostCSS integrates with the global style processor for handling global attributes:

<!-- This style will be processed by PostCSS then made global -->
<style lang="scss" global>
  @import 'global-styles.scss';
  
  body {
    font-family: system-ui;
  }
</style>

const preprocess = sveltePreprocess({
  scss: true,
  
  postcss: {
    plugins: [require('autoprefixer')]
  },
  
  // Global style processing happens after PostCSS
  globalStyle: true
});

Development vs Production

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

const preprocess = sveltePreprocess({
  postcss: {
    plugins: [
      require('postcss-import'),
      require('autoprefixer'),
      
      // Development plugins
      isDev && require('postcss-reporter')({
        clearReportedMessages: true
      }),
      
      // Production plugins
      !isDev && require('postcss-preset-env')({
        stage: 1
      }),
      
      !isDev && require('cssnano')({
        preset: 'default'
      })
    ].filter(Boolean)
  }
});

Tailwind CSS Integration

// Tailwind CSS with PostCSS
const preprocess = sveltePreprocess({
  postcss: {
    plugins: [
      require('postcss-import'),
      require('tailwindcss'),
      require('autoprefixer'),
      
      // Production optimization
      process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
        content: ['./src/**/*.{html,js,svelte,ts}'],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
      })
    ].filter(Boolean)
  }
});

Custom Properties and Modern CSS

const preprocess = {
  style: postcss({
    plugins: [
      // CSS imports
      require('postcss-import'),
      
      // Modern CSS features
      require('postcss-preset-env')({
        stage: 2,
        features: {
          'custom-properties': {
            preserve: false // Convert to static values
          },
          'color-mod-function': true,
          'nesting-rules': true
        }
      }),
      
      // Fallbacks
      require('autoprefixer'),
      
      // Optimization
      require('postcss-combine-duplicated-selectors'),
      require('postcss-merge-rules')
    ]
  })
};

Advanced Configuration

Plugin Order and Dependencies

const preprocess = {
  style: postcss({
    plugins: [
      // 1. Import resolution (must be first)
      require('postcss-import'),
      
      // 2. Syntax transformations
      require('postcss-nested'),
      require('postcss-custom-properties'),
      
      // 3. Vendor prefixes
      require('autoprefixer'),
      
      // 4. Optimization (must be last)
      require('cssnano')
    ]
  })
};

Source Maps

const preprocess = sveltePreprocess({
  sourceMap: true, // Enables source maps for PostCSS
  
  postcss: {
    plugins: [require('autoprefixer')]
    // Source maps handled automatically
  }
});

Error Handling

const preprocess = {
  style: postcss({
    plugins: [
      require('postcss-reporter')({
        clearReportedMessages: true,
        throwError: process.env.NODE_ENV === 'production'
      })
    ]
  })
};

Types

interface PostcssOptions {
  /** Array of PostCSS plugins */
  plugins?: Array<any>; // postcss.AcceptedPlugin[]
  
  /** Path to PostCSS configuration file */
  configFilePath?: string;
  
  /** Content to prepend to source */
  prependData?: string;
  
  /** Remove leading whitespace */
  stripIndent?: boolean;
  
  // Additional options from postcss.ProcessOptions:
  /** Override the source file path for error reporting */
  from?: string;
  
  /** Set the destination file path for source maps */
  to?: string;
  
  /** Enable or configure parser */
  parser?: any;
  
  /** Enable or configure stringifier */
  stringifier?: any;
  
  /** Enable or configure syntax */
  syntax?: any;
}

Install with Tessl CLI