or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-cssnano-preset-advanced

Advanced CSS optimization preset for cssnano with aggressive optimizations that may break CSS in edge cases.

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/cssnano-preset-advanced@7.0.x

To install, run

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

cssnano-preset-advanced

Advanced CSS optimization preset for cssnano that extends the default preset with additional aggressive optimizations. These optimizations may potentially break CSS in edge cases but provide maximum minification for projects where CSS compatibility can be thoroughly tested.

Package Information

Package Name: cssnano-preset-advanced
Package Type: npm
Language: JavaScript (with TypeScript definitions)
Installation: npm install cssnano-preset-advanced --save-dev

Core Imports

const advancedPreset = require('cssnano-preset-advanced');

For ES modules or TypeScript:

import advancedPreset from 'cssnano-preset-advanced';

Basic Usage

const advancedPreset = require('cssnano-preset-advanced');

// Basic usage with default configuration
const config = advancedPreset();

// Use with PostCSS
const postcss = require('postcss');
postcss(config.plugins)
  .process(css, { from: undefined })
  .then(result => {
    console.log(result.css);
  });

Architecture

The advanced preset extends cssnano's default preset with five additional aggressive optimization plugins:

Base: Inherits 20+ plugins from cssnano-preset-default for standard CSS optimizations
Extensions: Adds autoprefixer, postcss-discard-unused, postcss-merge-idents, postcss-reduce-idents, and postcss-zindex
Option Pattern: Uses SimpleOptions pattern allowing plugins to be disabled (false), excluded ({ exclude: true }), or configured with custom options
Browserslist Integration: Supports browser targeting through Browserslist configuration

Capabilities

Advanced Preset Function

Creates a PostCSS plugin configuration with advanced CSS optimizations that extend the default preset.

/**
 * Advanced optimisations for cssnano; may or may not break your CSS!
 * @param opts - Configuration options combining default preset options with advanced-specific options
 * @returns Object containing array of PostCSS plugin configurations
 */
function advancedPreset(opts?: Options & AutoprefixerOptions & BrowserslistOptions): {
  plugins: [import('postcss').PluginCreator<any>, Options[keyof Options]][];
};

Usage Examples:

// Default configuration
const defaultConfig = advancedPreset();

// Custom configuration with specific plugin options
const customConfig = advancedPreset({
  autoprefixer: { add: false, remove: true },
  zindex: { startIndex: 1 },
  discardUnused: { fontFace: false },
  mergeIdents: false // Disable this plugin
});

// Browserslist configuration
const targetedConfig = advancedPreset({
  overrideBrowserslist: ['> 1%', 'last 2 versions'],
  autoprefixer: { grid: 'autoplace' }
});

// Exclude specific plugins
const excludeConfig = advancedPreset({
  reduceIdents: { exclude: true },
  zindex: false
});

Types

/**
 * Generic type for plugin option patterns
 */
type SimpleOptions<OptionsExtends extends object | void = void> = 
  false | (OptionsExtends & { exclude?: true });

/**
 * Configuration options specific to advanced preset plugins
 */
interface AdvancedOptions {
  /** Autoprefixer configuration for vendor prefix management */
  autoprefixer?: autoprefixer.Options;
  /** postcss-discard-unused plugin options for removing unused CSS constructs */
  discardUnused?: SimpleOptions<postcssDiscardUnused.Options>;
  /** postcss-merge-idents plugin options for merging identical identifiers */
  mergeIdents?: SimpleOptions<void>;
  /** postcss-reduce-idents plugin options for reducing identifier names */
  reduceIdents?: SimpleOptions<postcssReduceIdents.Options>;
  /** postcss-zindex plugin options for optimizing z-index values */
  zindex?: SimpleOptions<postcssZindex.Options>;
}

/**
 * Autoprefixer-specific options inherited from default preset
 */
type AutoprefixerOptions = defaultPreset.AutoprefixerOptions;

/**
 * Browserslist configuration options inherited from default preset
 */
type BrowserslistOptions = defaultPreset.BrowserslistOptions;

/**
 * Complete options interface combining default preset options with advanced options
 */
type Options = defaultPreset.Options & AdvancedOptions;

Plugin Configuration Patterns

All advanced preset plugins follow the SimpleOptions pattern:

// Disable plugin entirely
{ pluginName: false }

// Exclude plugin (equivalent to false)
{ pluginName: { exclude: true } }

// Use default configuration
{ pluginName: {} }
// or simply omit the property

// Custom plugin configuration
{ pluginName: { /* plugin-specific options */ } }

Browserslist Integration

The preset supports comprehensive browser targeting:

const config = advancedPreset({
  // Override browserslist configuration
  overrideBrowserslist: ['>= 1%', 'last 1 major version', 'not dead', 'Chrome >= 60'],
  
  // Custom usage statistics
  stats: './path/to/custom-stats.json',
  
  // Environment-specific configuration
  env: 'production',
  
  // Path to browserslist config file
  path: './path/to/browserslist/config'
});

Advanced Plugin Details

The preset adds these aggressive optimization plugins to the default set:

autoprefixer: Manages vendor prefixes (configured with add: false by default)
postcss-discard-unused: Removes unused @keyframes, @counter-style, and @font-face rules
postcss-merge-idents: Merges identical @keyframes and @counter-style identifiers
postcss-reduce-idents: Reduces custom identifier names to shorter equivalents
postcss-zindex: Optimizes and reduces z-index values throughout the stylesheet

Example with all advanced plugins configured:

const config = advancedPreset({
  // Autoprefixer: Remove existing prefixes but don't add new ones
  autoprefixer: {
    add: false,
    remove: true,
    flexbox: 'no-2009'
  },
  
  // Discard unused: Keep font faces but remove unused keyframes
  discardUnused: {
    fontFace: false,
    keyframes: true,
    counterStyle: true
  },
  
  // Merge idents: Use default behavior
  mergeIdents: {},
  
  // Reduce idents: Custom identifier reduction
  reduceIdents: {
    keyframes: true,
    counterStyle: false
  },
  
  // Z-index optimization: Start from index 1
  zindex: {
    startIndex: 1
  }
});

Integration Examples

With PostCSS CLI:

// postcss.config.js
const advancedPreset = require('cssnano-preset-advanced');

module.exports = {
  plugins: [
    // other plugins...
    ...advancedPreset({
      discardUnused: { fontFace: false }
    }).plugins
  ]
};

With webpack css-loader:

// webpack.config.js
const advancedPreset = require('cssnano-preset-advanced');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: advancedPreset().plugins
              }
            }
          }
        ]
      }
    ]
  }
};

With cssnano configuration:

{
  "cssnano": {
    "preset": ["advanced", {
      "autoprefixer": { "add": false },
      "zindex": false
    }]
  }
}