or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-cssnano-preset-default

Safe defaults for cssnano which require minimal configuration

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/cssnano-preset-default@7.0.x

To install, run

npx @tessl/cli install tessl/npm-cssnano-preset-default@7.0.0

index.mddocs/

cssnano-preset-default

cssnano-preset-default provides safe defaults for cssnano which require minimal configuration. This preset includes only transforms that make no assumptions about your CSS other than what is passed in, ensuring predictable output across different use cases. It orchestrates 25+ PostCSS plugins to perform various optimizations including color minification, gradient compression, selector normalization, whitespace trimming, duplicate removal, and SVG optimization.

Package Information

  • Package Name: cssnano-preset-default
  • Package Type: npm
  • Language: JavaScript (with TypeScript definitions)
  • Installation: npm install cssnano-preset-default (bundled with cssnano by default)

Core Imports

const defaultPreset = require('cssnano-preset-default');

TypeScript/ES modules (using default import):

import defaultPreset from 'cssnano-preset-default';

Basic Usage

const defaultPreset = require('cssnano-preset-default');

// Basic usage with default configuration
const preset = defaultPreset();
// Returns: { plugins: [[plugin, options], ...] }

// Usage with custom options
const customPreset = defaultPreset({
  discardComments: { removeAll: true },
  colormin: false, // Disable color minification
  overrideBrowserslist: ['> 1%', 'last 2 versions']
});

// Usage with cssnano
const postcss = require('postcss');
const cssnano = require('cssnano');

const result = await postcss([
  cssnano({
    preset: defaultPreset({
      discardComments: { removeAll: true }
    })
  })
]).process(css, { from: undefined });

Architecture

The preset is built around several key components:

  • Plugin Configuration: Orchestrates 29 PostCSS plugins in optimal execution order
  • Options System: Each plugin can be individually configured or disabled via options object
  • Browserslist Integration: Supports browser-specific optimizations via browserslist configuration
  • Safety First: Only includes transforms that make no assumptions about CSS structure
  • Preset Pattern: Returns a standard cssnano preset object with plugin array
  • Internal Configuration System: Uses configurePlugins function to merge default options with user options
  • Shared Properties: Automatically distributes browserslist options to plugins that support them
  • Plugin Disabling: Supports disabling plugins by setting option to false or using exclude: true

Capabilities

Preset Configuration

The main function that creates and configures the preset with optional customization.

/**
 * Safe defaults for cssnano which require minimal configuration
 * @param opts - Configuration options for the preset
 * @returns Preset object with configured plugins array
 */
function defaultPreset(
  opts?: Options & AutoprefixerOptions & BrowserslistOptions
): {
  plugins: [import('postcss').PluginCreator<any>, Options[keyof Options]][];
};

Usage Examples:

// Default configuration
const preset = defaultPreset();

// Disable specific plugins
const minimalPreset = defaultPreset({
  discardComments: false,
  colormin: false
});

// Configure specific plugins
const customPreset = defaultPreset({
  discardComments: { removeAll: true },
  normalizeCharset: { add: true },
  cssDeclarationSorter: { order: 'alphabetical' }
});

// Browserslist integration
const modernPreset = defaultPreset({
  overrideBrowserslist: ['last 1 chrome version', 'last 1 firefox version'],
  env: 'production'
});

Plugin Options

Configuration interface for all included plugins.

interface Options {
  /** CSS declaration sorting configuration */
  cssDeclarationSorter?: SimpleOptions<{
    order?: ("alphabetical" | "concentric-css" | "smacss") | ((propertyNameA: string, propertyNameB: string) => -1 | 0 | 1) | undefined;
    keepOverrides?: boolean;
  }>;
  
  /** Comment removal configuration */
  discardComments?: SimpleOptions<{
    remove?: (comment: string) => boolean;
    removeAll?: boolean;
    removeAllButFirst?: boolean;
  }>;
  
  /** Initial value reduction configuration */
  reduceInitial?: SimpleOptions<{
    ignore?: string[];
  }>;
  
  /** Gradient minification (no options) */
  minifyGradients?: SimpleOptions<void>;
  
  /** SVG optimization configuration */
  svgo?: SimpleOptions<{
    plugins?: any[];
    js2svg?: any;
  }>;
  
  /** Transform reduction (no options) */
  reduceTransforms?: SimpleOptions<void>;
  
  /** Value conversion configuration */
  convertValues?: SimpleOptions<{
    length?: boolean;
    time?: boolean;
    angle?: boolean;
    precision?: number;
  }>;
  
  /** Calc() reduction configuration */
  calc?: SimpleOptions<{
    precision?: number;
    preserve?: string[];
    warnWhenCannotResolve?: boolean;
  }>;
  
  /** Color minification configuration */
  colormin?: SimpleOptions<{
    legacy?: boolean;
  }>;
  
  /** Ordered values (no options) */
  orderedValues?: SimpleOptions<void>;
  
  /** Selector minification configuration */
  minifySelectors?: SimpleOptions<{
    sort?: boolean;
  }>;
  
  /** Parameter minification configuration */
  minifyParams?: SimpleOptions<{
    removeQuotes?: boolean;
  }>;
  
  /** Charset normalization configuration */
  normalizeCharset?: SimpleOptions<{
    add?: boolean;
  }>;
  
  /** Font value minification configuration */
  minifyFontValues?: SimpleOptions<{
    removeAfterKeyword?: boolean;
    removeDuplicates?: boolean;
    removeQuotes?: boolean;
  }>;
  
  /** URL normalization (no options) */
  normalizeUrl?: SimpleOptions<void>;
  
  /** Longhand merging (no options) */
  mergeLonghand?: SimpleOptions<void>;
  
  /** Duplicate removal (no options) */
  discardDuplicates?: SimpleOptions<void>;
  
  /** Overridden rule removal (no options) */
  discardOverridden?: SimpleOptions<void>;
  
  /** Repeat style normalization (no options) */
  normalizeRepeatStyle?: SimpleOptions<void>;
  
  /** Rule merging configuration */
  mergeRules?: SimpleOptions<{
    exclude?: RegExp[];
  }>;
  
  /** Empty rule removal (no options) */
  discardEmpty?: SimpleOptions<void>;
  
  /** Unique selectors (no options) */
  uniqueSelectors?: SimpleOptions<void>;
  
  /** String normalization configuration */
  normalizeString?: SimpleOptions<{
    preferredQuote?: "single" | "double";
  }>;
  
  /** Position normalization (no options) */
  normalizePositions?: SimpleOptions<void>;
  
  /** Whitespace normalization (no options) */
  normalizeWhitespace?: SimpleOptions<void>;
  
  /** Unicode normalization configuration */
  normalizeUnicode?: SimpleOptions<{
    unicode?: boolean;
  }>;
  
  /** Display value normalization (no options) */
  normalizeDisplayValues?: SimpleOptions<void>;
  
  /** Timing function normalization (no options) */
  normalizeTimingFunctions?: SimpleOptions<void>;
  
  /** Raw cache (no options) */
  rawCache?: SimpleOptions<void>;
}

Browserslist Integration

Options for browser-specific optimizations.

/** Browserslist override options */
interface AutoprefixerOptions {
  /** Override browserslist configuration */
  overrideBrowserslist?: string | string[];
}

/** Browserslist configuration options */
interface BrowserslistOptions {
  /** Custom usage statistics */
  stats?: any;
  /** Path for browserslist config lookup */
  path?: string;
  /** Environment for browserslist */
  env?: string;
}

Types

/** Base type for plugin options that can be disabled or excluded */
type SimpleOptions<OptionsExtends extends object | void = void> = 
  | false 
  | (OptionsExtends & { exclude?: true });

/** PostCSS plugin creator type from postcss package */
type PluginCreator<T> = import('postcss').PluginCreator<T>;

/** Plugin configuration tuple */
type PluginConfig = [PluginCreator<any>, Options[keyof Options]];

/** Preset return type */
interface PresetResult {
  plugins: PluginConfig[];
}

/** Autoprefixer integration options */
interface AutoprefixerOptions {
  overrideBrowserslist?: string | string[];
}

/** Browserslist configuration options */
interface BrowserslistOptions {
  stats?: any;
  path?: string;
  env?: string;
}

Plugin Execution Order

The preset executes plugins in the following optimized order:

  1. postcss-discard-comments - Remove comments first
  2. postcss-minify-gradients - Optimize gradients early
  3. postcss-reduce-initial - Reduce initial values
  4. postcss-svgo - Optimize SVG content
  5. postcss-normalize-display-values - Normalize display values
  6. postcss-reduce-transforms - Reduce transform functions
  7. postcss-colormin - Minify colors
  8. postcss-normalize-timing-functions - Normalize timing functions
  9. postcss-calc - Resolve calc() expressions
  10. postcss-convert-values - Convert between units
  11. postcss-ordered-values - Order multi-value properties
  12. postcss-minify-selectors - Minify selectors
  13. postcss-minify-params - Minify at-rule parameters
  14. postcss-normalize-charset - Handle charset declarations
  15. postcss-discard-overridden - Remove overridden at-rules
  16. postcss-normalize-string - Normalize string literals
  17. postcss-normalize-unicode - Normalize unicode ranges
  18. postcss-minify-font-values - Minify font declarations
  19. postcss-normalize-url - Normalize URLs
  20. postcss-normalize-repeat-style - Normalize repeat styles
  21. postcss-normalize-positions - Normalize position keywords
  22. postcss-normalize-whitespace - Trim whitespace
  23. postcss-merge-longhand - Merge longhand properties
  24. postcss-discard-duplicates - Remove duplicate rules
  25. postcss-merge-rules - Merge CSS rules
  26. postcss-discard-empty - Remove empty rules
  27. postcss-unique-selectors - Ensure unique selectors
  28. css-declaration-sorter - Sort declarations
  29. cssnano-utils.rawCache - Apply caching utilities

Configuration Patterns

JSON Configuration (package.json)

{
  "cssnano": {
    "preset": [
      "default",
      {
        "discardComments": {"removeAll": true},
        "colormin": false
      }
    ]
  }
}

JavaScript Configuration (cssnano.config.js)

const defaultPreset = require('cssnano-preset-default');

module.exports = defaultPreset({
  discardComments: {
    remove: (comment) => comment[0] === '@'
  },
  normalizeCharset: { add: false },
  overrideBrowserslist: ['> 1%', 'last 2 versions']
});

Programmatic Usage

const postcss = require('postcss');
const cssnano = require('cssnano');
const defaultPreset = require('cssnano-preset-default');

// With PostCSS directly
const result = await postcss([
  cssnano({
    preset: defaultPreset({
      discardComments: { removeAll: true }
    })
  })
]).process(css, { from: undefined });

// With cssnano directly
const result = await cssnano.process(css, {
  preset: defaultPreset({
    colormin: { legacy: true }
  })
});

Default Plugin Configurations

The preset applies the following default configurations to specific plugins:

Color Minification Defaults

  • Integrates with browserslist configuration for browser-specific optimizations
  • Passes through overrideBrowserslist, stats, env, and path options

Convert Values Defaults

  • length: false - Preserves length units by default for safety
  • Integrates with browserslist configuration

CSS Declaration Sorter Defaults

  • keepOverrides: true - Preserves declaration order for CSS cascade correctness

Minify Selectors Defaults

  • sort: true - Enables selector sorting for better compression

Normalize Charset Defaults

  • add: false - Does not automatically add charset declarations

SVGO Defaults

  • plugins: Uses preset-default configuration for SVG optimization

All plugins that support browserslist integration automatically receive shared properties (overrideBrowserslist, stats, env, path) when provided to the preset.