or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

advanced-features.md batch-processing.md compatibility.md constructor-options.md index.md input-output.md optimization-levels.md

tile.json

Constructor Options and Configuration

Clean-CSS provides extensive configuration options through the constructor to control minification behavior, compatibility modes, and output formatting.

Constructor

const CleanCSS = require('clean-css');

constructor(options?: CleanCSSOptions): CleanCSS

Creates a new Clean-CSS instance with the specified configuration options.

Parameters:

options (object, optional) - Configuration object containing minification settings

Core Options

interface CleanCSSOptions {
  batch?: boolean;                    // Process multiple inputs without concatenating
  compatibility?: string | object;   // Browser compatibility mode
  format?: string | object;          // Output formatting options
  inline?: string | string[];        // @import inlining rules
  level?: number | object;           // Optimization level (0, 1, 2)
  rebase?: boolean;                  // URL rebasing
  rebaseTo?: string;                 // Directory for URL rebasing
  returnPromise?: boolean;           // Return Promise interface
  sourceMap?: boolean;               // Generate source maps
  sourceMapInlineSources?: boolean;  // Embed sources in source map
}

Basic Options

batch (boolean, default: false)

When true, processes multiple inputs independently without concatenating them
Returns a hash object with individual results per input file
Useful for processing multiple CSS files while maintaining separation

compatibility (string | object, default: 'ie10+')

Controls browser compatibility mode
String shortcuts: '*', 'ie11', 'ie10', 'ie9', 'ie8', 'ie7'
Object form allows fine-grained control over specific features

format (string | object, default: false)

Controls output CSS formatting
String shortcuts: 'beautify', 'keep-breaks'
Object form allows detailed formatting control

level (number | object, default: 1)

Optimization level: 0 (no optimization), 1 (property-level), 2 (rule-level)
Object form allows granular control over specific optimizations

rebase (boolean, default: false)

Enables URL rebasing in CSS url() functions
Automatically set to true when rebaseTo is specified

rebaseTo (string, default: current directory)

Target directory for rebased URLs
All relative URLs will be rebased relative to this directory

returnPromise (boolean, default: false)

When true, minify() method returns a Promise
Callback parameter is ignored in Promise mode

sourceMap (boolean, default: false)

Generates source map for minified output
Source map included in result object under sourceMap property

sourceMapInlineSources (boolean, default: false)

Embeds original source content in the source map's sourcesContent field
Only relevant when sourceMap is true

Advanced Options

interface AdvancedOptions {
  fetch?: object;                    // Remote resource fetching configuration
  inlineRequest?: object;           // HTTP request options for remote @imports
  inlineTimeout?: number;           // Timeout for remote resource fetching
  plugins?: PluginObject;           // Custom optimization plugins
}

fetch (object, optional)

Custom function for handling remote resource requests
Used for fetching remote @import stylesheets

inlineRequest (object, optional)

HTTP request options for fetching remote @import rules
Supports standard Node.js HTTP request options
Common properties include:
- headers: Custom HTTP headers object
- hostname: Proxy hostname for requests
- port: Proxy port number
- timeout: Request timeout (overridden by inlineTimeout)
- rejectUnauthorized: SSL certificate validation (boolean)

inlineTimeout (number, default: 5000)

Timeout in milliseconds for fetching remote resources
After timeout, remote @import rules are left as-is

plugins (object, optional)

Custom optimization plugins for extending Clean-CSS functionality
Allows property and value transformations at different optimization levels

Usage Examples

Basic Configuration

const CleanCSS = require('clean-css');

// Simple minification with level 1 optimizations
const minifier = new CleanCSS({ level: 1 });

// Advanced minification with level 2 optimizations
const advanced = new CleanCSS({ 
  level: 2,
  format: 'beautify',
  sourceMap: true 
});

Batch Processing

const batchMinifier = new CleanCSS({ 
  batch: true,
  level: 2 
});

const inputs = {
  'styles.css': { styles: 'a { color: red; }' },
  'theme.css': { styles: 'body { margin: 0; }' }
};

const results = batchMinifier.minify(inputs);
// Returns: { 'styles.css': MinifyResult, 'theme.css': MinifyResult }

Promise Interface

const promiseMinifier = new CleanCSS({ 
  returnPromise: true,
  level: 2 
});

promiseMinifier.minify('a { color: #ffffff; }')
  .then(result => {
    console.log(result.styles); // 'a{color:#fff}'
  })
  .catch(errors => {
    console.error(errors);
  });

URL Rebasing

const rebaseMinifier = new CleanCSS({
  rebase: true,
  rebaseTo: '/assets/css/'
});

const css = "body { background: url('../images/bg.jpg'); }";
const result = rebaseMinifier.minify(css);
// URLs rebased relative to /assets/css/

Source Maps

const sourceMapMinifier = new CleanCSS({
  sourceMap: true,
  sourceMapInlineSources: true
});

const result = sourceMapMinifier.minify(css, inputSourceMap);
console.log(result.sourceMap); // Generated source map object

Remote Resource Fetching

const remoteMinifier = new CleanCSS({
  inline: 'remote',
  inlineTimeout: 10000,  // 10 second timeout
  inlineRequest: {
    headers: {
      'User-Agent': 'CleanCSS/5.3.3',
      'Accept': 'text/css,*/*;q=0.1',
      'Cache-Control': 'no-cache'
    },
    rejectUnauthorized: false  // For self-signed certificates
  }
});

// Process CSS with remote @imports
const cssWithRemoteImports = `
  @import url("https://fonts.googleapis.com/css2?family=Roboto");
  @import "https://cdn.example.com/normalize.css";
  
  body { font-family: 'Roboto', sans-serif; }
`;

const result = remoteMinifier.minify(cssWithRemoteImports);

Proxy Configuration

const proxyMinifier = new CleanCSS({
  inline: 'remote',
  inlineRequest: {
    hostname: 'proxy.company.com',  // Proxy server
    port: 8080,                     // Proxy port
    headers: {
      'Proxy-Authorization': 'Basic ' + Buffer.from('user:pass').toString('base64'),
      'User-Agent': 'CleanCSS via Proxy'
    }
  },
  inlineTimeout: 15000
});