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

Minification Functions

Built-in minification functions supporting different CSS processing engines. Each function provides specialized CSS optimization capabilities with varying performance characteristics and feature sets.

Capabilities

cssnano Minification (Default)

Default CSS minification using cssnano with PostCSS integration and comprehensive optimization features.

/**
 * cssnano-based CSS minification function
 * @param input - Object mapping filenames to CSS content
 * @param sourceMap - Optional source map from previous processing
 * @param minimizerOptions - cssnano configuration options
 * @returns Promise resolving to minification result
 */
async function cssnanoMinify(
  input: Input,
  sourceMap: RawSourceMap | undefined,
  minimizerOptions?: CssNanoOptionsExtended
): Promise<MinimizedResult>;

interface CssNanoOptionsExtended extends CssNanoOptions {
  processorOptions?: ProcessOptionsExtender;
}

interface CssNanoOptions {
  /** Path to cssnano config file */
  configFile?: string | undefined;
  /** cssnano preset configuration */
  preset?: [string, object] | string | undefined;
}

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

Worker Thread Support: ✅ Supported (supportsWorkerThreads: () => true)

Usage Examples:

// Using as static method
new CssMinimizerPlugin({
  minify: CssMinimizerPlugin.cssnanoMinify,
  minimizerOptions: {
    preset: ['default', {
      discardComments: { removeAll: true },
      normalizeWhitespace: false,
    }],
  },
});

// Advanced PostCSS configuration
new CssMinimizerPlugin({
  minify: CssMinimizerPlugin.cssnanoMinify,
  minimizerOptions: {
    preset: 'advanced',
    processorOptions: {
      parser: 'sugarss',
      from: undefined,
    },
  },
});

CSSO Minification

High-performance CSS minification using the CSSO (CSS Optimizer) library.

/**
 * CSSO-based CSS minification function
 * @param input - Object mapping filenames to CSS content
 * @param sourceMap - Optional source map from previous processing
 * @param minimizerOptions - CSSO configuration options
 * @returns Promise resolving to minification result
 */
async function cssoMinify(
  input: Input,
  sourceMap: RawSourceMap | undefined,
  minimizerOptions?: CustomOptions
): Promise<MinimizedResult>;

Worker Thread Support: ✅ Supported (supportsWorkerThreads: () => true)

Usage Examples:

new CssMinimizerPlugin({
  minify: CssMinimizerPlugin.cssoMinify,
  minimizerOptions: {
    restructure: true,
    forceMediaMerge: true,
    comments: false,
  },
});

clean-css Minification

CSS minification using the clean-css library with advanced optimization algorithms.

/**
 * clean-css-based CSS minification function
 * @param input - Object mapping filenames to CSS content
 * @param sourceMap - Optional source map from previous processing
 * @param minimizerOptions - clean-css configuration options
 * @returns Promise resolving to minification result
 */
async function cleanCssMinify(
  input: Input,
  sourceMap: RawSourceMap | undefined,
  minimizerOptions?: CustomOptions
): Promise<MinimizedResult>;

Worker Thread Support: ✅ Supported (supportsWorkerThreads: () => true)

Usage Examples:

new CssMinimizerPlugin({
  minify: CssMinimizerPlugin.cleanCssMinify,
  minimizerOptions: {
    level: 2,
    inline: ['all'],
    specialComments: 0,
  },
});

esbuild Minification

Ultra-fast CSS minification using esbuild's built-in CSS processing capabilities.

/**
 * esbuild-based CSS minification function
 * @param input - Object mapping filenames to CSS content
 * @param sourceMap - Optional source map from previous processing
 * @param minimizerOptions - esbuild configuration options
 * @returns Promise resolving to minification result
 */
async function esbuildMinify(
  input: Input,
  sourceMap: RawSourceMap | undefined,
  minimizerOptions?: CustomOptions
): Promise<MinimizedResult>;

Worker Thread Support: ❌ Not supported (supportsWorkerThreads: () => false)

Usage Examples:

new CssMinimizerPlugin({
  minify: CssMinimizerPlugin.esbuildMinify,
  minimizerOptions: {
    loader: 'css',
    minify: true,
    legalComments: 'none',
  },
});

@parcel/css Minification (Deprecated)

CSS minification using Parcel's CSS transformer (deprecated, will be removed in next major version).

/**
 * @parcel/css-based CSS minification function
 * @param input - Object mapping filenames to CSS content
 * @param sourceMap - Optional source map from previous processing
 * @param minimizerOptions - @parcel/css configuration options
 * @returns Promise resolving to minification result
 * @deprecated Will be removed in next major release
 */
async function parcelCssMinify(
  input: Input,
  sourceMap: RawSourceMap | undefined,
  minimizerOptions?: CustomOptions
): Promise<MinimizedResult>;

Worker Thread Support: ❌ Not supported (supportsWorkerThreads: () => false)

lightningcss Minification

High-performance CSS minification using lightningcss (successor to @parcel/css).

/**
 * lightningcss-based CSS minification function
 * @param input - Object mapping filenames to CSS content
 * @param sourceMap - Optional source map from previous processing
 * @param minimizerOptions - lightningcss configuration options
 * @returns Promise resolving to minification result
 */
async function lightningCssMinify(
  input: Input,
  sourceMap: RawSourceMap | undefined,
  minimizerOptions?: CustomOptions
): Promise<MinimizedResult>;

Worker Thread Support: ❌ Not supported (supportsWorkerThreads: () => false)

Usage Examples:

new CssMinimizerPlugin({
  minify: CssMinimizerPlugin.lightningCssMinify,
  minimizerOptions: {
    minify: true,
    targets: {
      chrome: 80,
      firefox: 75,
      safari: 13,
    },
  },
});

@swc/css Minification

CSS minification using SWC's CSS processing capabilities.

/**
 * @swc/css-based CSS minification function
 * @param input - Object mapping filenames to CSS content
 * @param sourceMap - Optional source map from previous processing
 * @param minimizerOptions - @swc/css configuration options
 * @returns Promise resolving to minification result
 */
async function swcMinify(
  input: Input,
  sourceMap: RawSourceMap | undefined,
  minimizerOptions?: CustomOptions
): Promise<MinimizedResult>;

Worker Thread Support: ❌ Not supported (supportsWorkerThreads: () => false)

Usage Examples:

new CssMinimizerPlugin({
  minify: CssMinimizerPlugin.swcMinify,
  minimizerOptions: {
    // SWC-specific options
  },
});

Multiple Minifiers

Chain multiple minification functions for advanced optimization pipelines.

Usage Examples:

// Sequential processing with multiple minifiers
new CssMinimizerPlugin({
  minify: [
    CssMinimizerPlugin.cssnanoMinify,
    CssMinimizerPlugin.cssoMinify,
  ],
  minimizerOptions: [
    {
      preset: ['default', { discardComments: { removeAll: true } }],
    },
    {
      restructure: true,
      forceMediaMerge: true,
    },
  ],
});

// Mixing different minifiers for different optimization strategies
new CssMinimizerPlugin({
  minify: [
    CssMinimizerPlugin.esbuildMinify, // Fast initial pass
    CssMinimizerPlugin.cssnanoMinify, // Comprehensive optimization
  ],
  minimizerOptions: [
    { minify: true },
    { preset: 'advanced' },
  ],
});

Types

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

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

type CustomOptions = { [key: string]: any };

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

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

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 InferDefaultType<T> = T extends infer U ? U : CustomOptions;

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

Version

Tile

Files