or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

custom-minifiers.md index.md minification-functions.md plugin-configuration.md

tile.json

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.

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/css-minimizer-webpack-plugin@7.0.x

To install, run

npx @tessl/cli install tessl/npm-css-minimizer-webpack-plugin@7.0.0

CSS Minimizer Webpack Plugin

CSS Minimizer Webpack Plugin is a comprehensive CSS minification and optimization plugin for Webpack that leverages cssnano to reduce CSS bundle sizes while maintaining compatibility with source maps and query string assets. It offers superior performance compared to optimize-css-assets-webpack-plugin through parallel processing capabilities, advanced caching mechanisms, and accurate source map handling.

Package Information

Package Name: css-minimizer-webpack-plugin
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install css-minimizer-webpack-plugin --save-dev

Core Imports

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

For ES modules:

import CssMinimizerPlugin from "css-minimizer-webpack-plugin";

Accessing static minifier functions:

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// Use built-in minifiers
const cssnanoMinify = CssMinimizerPlugin.cssnanoMinify;
const cssoMinify = CssMinimizerPlugin.cssoMinify;
const cleanCssMinify = CssMinimizerPlugin.cleanCssMinify;

Basic Usage

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        parallel: true,
        minimizerOptions: {
          preset: ['default', {
            discardComments: { removeAll: true },
          }],
        },
      }),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

Architecture

CSS Minimizer Webpack Plugin is built around several key components:

Core Plugin Class: CssMinimizerPlugin integrates with Webpack's optimization pipeline
Multiple Minifiers: Support for cssnano (default), clean-css, csso, esbuild, @parcel/css, lightningcss, and @swc/css
Worker Pool: Jest-worker based parallel processing for improved build performance
Source Map Handling: Accurate source map generation and merging
Caching System: Built-in Webpack cache integration for faster rebuilds
Error Processing: Advanced error and warning handling with location mapping

Capabilities

Core Plugin Configuration

Main plugin class and configuration options for integrating CSS minimization into Webpack builds.

class CssMinimizerPlugin<T = CssNanoOptionsExtended> {
  constructor(options?: BasePluginOptions & DefinedDefaultMinimizerAndOptions<T>);
  apply(compiler: Compiler): void;
}

interface BasePluginOptions {
  test?: Rule | undefined;
  include?: Rule | undefined;
  exclude?: Rule | undefined;
  warningsFilter?: WarningsFilter | undefined;
  parallel?: Parallel;
}

type Rule = RegExp | string;
type Parallel = undefined | boolean | number;
type WarningsFilter = (warning: Warning | WarningObject | string, file: string, source?: string) => boolean;

Plugin Configuration

Built-in Minification Functions

Collection of built-in minification functions supporting different CSS processing engines.

// Static methods on CssMinimizerPlugin class
static cssnanoMinify: BasicMinimizerImplementation<CssNanoOptionsExtended> & MinimizeFunctionHelpers;
static cssoMinify: BasicMinimizerImplementation<CustomOptions> & MinimizeFunctionHelpers;
static cleanCssMinify: BasicMinimizerImplementation<CustomOptions> & MinimizeFunctionHelpers;
static esbuildMinify: BasicMinimizerImplementation<CustomOptions> & MinimizeFunctionHelpers;
static parcelCssMinify: BasicMinimizerImplementation<CustomOptions> & MinimizeFunctionHelpers;
static lightningCssMinify: BasicMinimizerImplementation<CustomOptions> & MinimizeFunctionHelpers;
static swcMinify: BasicMinimizerImplementation<CustomOptions> & MinimizeFunctionHelpers;

type BasicMinimizerImplementation<T> = (
  input: Input,
  sourceMap: RawSourceMap | undefined,
  minifyOptions: InferDefaultType<T>
) => Promise<MinimizedResult> | MinimizedResult;

interface MinimizeFunctionHelpers {
  supportsWorkerThreads?: (() => boolean | undefined) | undefined;
}

Minification Functions

Custom Minifier Integration

Support for custom minification functions and multiple minifier pipelines.

interface DefinedDefaultMinimizerAndOptions<T> extends BasePluginOptions {
  minify?: MinimizerImplementation<T> | undefined;
  minimizerOptions?: MinimizerOptions<T> | undefined;
}

type MinimizerImplementation<T> = T extends any[]
  ? { [P in keyof T]: BasicMinimizerImplementation<T[P]> & MinimizeFunctionHelpers; }
  : BasicMinimizerImplementation<T> & MinimizeFunctionHelpers;

type MinimizerOptions<T> = T extends any[]
  ? { [P in keyof T]?: InferDefaultType<T[P]> }
  : InferDefaultType<T>;

Custom Minifiers

Types

interface Input {
  [file: string]: string;
}

interface MinimizedResult {
  code: string;
  map?: RawSourceMap | undefined;
  errors?: (string | Error | ErrorObject)[] | undefined;
  warnings?: (Warning | WarningObject)[] | undefined;
}

interface CssNanoOptions {
  configFile?: string | undefined;
  preset?: [string, object] | string | undefined;
}

interface CssNanoOptionsExtended extends CssNanoOptions {
  processorOptions?: ProcessOptionsExtender;
}

type ProcessOptionsExtender = ProcessOptions | {
  from?: string;
  to?: string;
  parser?: string | Syntax | Parser;
  stringifier?: string | Syntax | Stringifier;
  syntax?: string | Syntax;
};

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;
}

interface ErrorObject {
  message: string;
  line?: number | undefined;
  column?: number | undefined;
  stack?: string | undefined;
}

type CustomOptions = { [key: string]: any };
type InferDefaultType<T> = T extends infer U ? U : CustomOptions;
type RawSourceMap = import("@jridgewell/trace-mapping").EncodedSourceMap;
type ProcessOptions = import("postcss").ProcessOptions;
type Syntax = import("postcss").Syntax;
type Parser = import("postcss").Parser;
type Stringifier = import("postcss").Stringifier;
type Compiler = import("webpack").Compiler;