tessl/npm-css-minimizer-webpack-plugin

CSS minimizer (minifier) plugin for Webpack that leverages cssnano to reduce CSS bundle sizes while maintaining compatibility with source maps and query string assets.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-css-minimizer-webpack-plugin
Author: tessl

Comprehensive configuration options for the CSS Minimizer Webpack Plugin, including file filtering, parallel processing, and warning management.

Capabilities

Main Plugin Class

The core plugin class that integrates with Webpack's optimization pipeline.

/**
 * CSS Minimizer Webpack Plugin class
 * @template T - Type parameter for minifier options (defaults to CssNanoOptionsExtended)
 */
class CssMinimizerPlugin<T = CssNanoOptionsExtended> {
  /**
   * Creates a new CssMinimizerPlugin instance
   * @param options - Plugin configuration options
   */
  constructor(options?: BasePluginOptions & DefinedDefaultMinimizerAndOptions<T>);
  
  /**
   * Webpack plugin interface method
   * @param compiler - Webpack compiler instance
   */
  apply(compiler: Compiler): void;
}

Base Plugin Options

Core configuration options available for all plugin instances.

interface BasePluginOptions {
  /** Test to match files against (default: /\.css(\?.*)?$/i) */
  test?: Rule | undefined;
  /** Files to include */
  include?: Rule | undefined;
  /** Files to exclude */
  exclude?: Rule | undefined;
  /** Function to filter CSS minimizer warnings */
  warningsFilter?: WarningsFilter | undefined;
  /** Enable/disable multi-process parallel running (default: true) */
  parallel?: Parallel;
}

/** Filtering rule as regex or string */
type Rule = RegExp | string;

/** Parallel processing configuration */
type Parallel = undefined | boolean | number;

/** Function to filter warnings */
type WarningsFilter = (
  warning: Warning | WarningObject | string,
  file: string,
  source?: string
) => boolean;

File Filtering Configuration

Configure which CSS files should be processed by the plugin.

Usage Examples:

// Test for specific file patterns
new CssMinimizerPlugin({
  test: /\.foo\.css$/i,
});

// Include only files in specific directories
new CssMinimizerPlugin({
  include: /\/includes/,
});

// Exclude files matching patterns
new CssMinimizerPlugin({
  exclude: /\.ignore\.css$/i,
});

// Multiple patterns using arrays
new CssMinimizerPlugin({
  test: [/\.css$/i, /\.scss$/i],
  exclude: [/node_modules/, /\.min\.css$/i],
});

Parallel Processing Configuration

Control the number of worker processes used for CSS minification.

Usage Examples:

// Enable parallel processing (default)
new CssMinimizerPlugin({
  parallel: true,
});

// Disable parallel processing
new CssMinimizerPlugin({
  parallel: false,
});

// Specify exact number of workers
new CssMinimizerPlugin({
  parallel: 4,
});

// Let plugin determine optimal number of workers
new CssMinimizerPlugin({
  parallel: true, // Uses os.cpus().length - 1
});

Warning Filtering

Customize which warnings from CSS minification are reported.

type WarningsFilter = (
  warning: Warning | WarningObject | string,
  file: string,
  source?: string
) => boolean;

type Warning = (Error & {
  plugin?: string;
  text?: string;
  source?: string;
}) | string;

interface WarningObject {
  message: string;
  plugin?: string | undefined;
  text?: string | undefined;
  line?: number | undefined;
  column?: number | undefined;
}

Usage Examples:

// Filter out specific warnings
new CssMinimizerPlugin({
  warningsFilter: (warning, file, source) => {
    // Skip warnings from specific plugins
    if (warning.plugin === 'postcss-discard-duplicates') {
      return false;
    }
    // Only show warnings from main source files
    return !source || !source.includes('node_modules');
  },
});

// Filter warnings by message content
new CssMinimizerPlugin({
  warningsFilter: (warning, file) => {
    const message = typeof warning === 'string' ? warning : warning.message;
    return !message.includes('vendor prefix');
  },
});

// Allow all warnings (default behavior)
new CssMinimizerPlugin({
  warningsFilter: () => true,
});

Combined Configuration Examples

Real-world configuration examples combining multiple options.

// Production configuration with custom filtering
new CssMinimizerPlugin({
  test: /\.css$/i,
  exclude: [/\.min\.css$/i, /node_modules/],
  parallel: true,
  warningsFilter: (warning, file) => {
    // Only show warnings for source files, not dependencies
    return !file.includes('node_modules');
  },
  minimizerOptions: {
    preset: [
      'default',
      {
        discardComments: { removeAll: true },
        normalizeWhitespace: false,
      },
    ],
  },
});

// Development configuration with verbose warnings
new CssMinimizerPlugin({
  parallel: false, // Easier debugging
  warningsFilter: () => true, // Show all warnings
  minimizerOptions: {
    preset: ['default', { discardComments: false }],
  },
});

Install with Tessl CLI

npx tessl i tessl/npm-css-minimizer-webpack-plugin

docs

custom-minifiers.md

index.md

minification-functions.md

plugin-configuration.md

tile.json

tessl/npm-css-minimizer-webpack-plugin