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

Input and Output Formats

Clean-CSS supports multiple input formats and provides comprehensive output metadata for detailed analysis of the minification process.

Input Formats

Clean-CSS accepts various input types through the minify() method to accommodate different use cases and workflows.

type CleanCSSInput = 
  | string                           // Raw CSS content
  | string[]                         // Array of file paths
  | Record<string, FileObject>       // Hash mapping file paths to content
  | Buffer;                          // CSS content as Buffer

interface FileObject {
  styles: string;        // CSS content
  sourceMap?: object;    // Optional input source map
}

String Input

The most basic input format - raw CSS content as a string:

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

const css = `
  a {
    color: #ffffff;
    font-weight: bold;
  }
`;

const result = minifier.minify(css);
console.log(result.styles); // 'a{color:#fff;font-weight:700}'

Array Input (File Paths)

Process multiple CSS files by providing an array of file paths:

const filePaths = [
  'styles/main.css',
  'styles/components.css',
  'styles/themes.css'
];

const result = minifier.minify(filePaths);
// All files are concatenated and minified into a single output

Object/Hash Input

For more control over individual files, provide a hash mapping file paths to content objects:

const fileHash = {
  'main.css': {
    styles: 'body { margin: 0; padding: 0; }'
  },
  'components.css': {
    styles: '.button { padding: 10px; }',
    sourceMap: inputSourceMap  // Optional input source map
  }
};

const result = minifier.minify(fileHash);

Buffer Input

CSS content can also be provided as a Node.js Buffer:

const fs = require('fs');
const cssBuffer = fs.readFileSync('styles.css');

const result = minifier.minify(cssBuffer);

Minify Method

minify(input: CleanCSSInput, sourceMap?: object, callback?: function): MinifyResult | Promise<MinifyResult>

Parameters:

input - CSS content in any supported format
sourceMap (optional) - Input source map object
callback (optional) - Callback function for async operation

Returns:

MinifyResult object (synchronous mode)
Promise<MinifyResult> (when returnPromise: true)

Output Format

The minify() method returns a comprehensive result object with minified CSS and detailed metadata:

interface MinifyResult {
  styles: string;                    // Minified CSS output
  errors: string[];                  // Array of error messages
  warnings: string[];                // Array of warning messages
  stats: MinifyStats;               // Minification statistics
  inlinedStylesheets: string[];     // Paths of inlined stylesheets
  sourceMap?: object;               // Generated source map (if enabled)
}

interface MinifyStats {
  efficiency: number;                // Compression efficiency (0-1)
  minifiedSize: number;             // Size of minified output in bytes
  originalSize: number;             // Size of original input in bytes
  timeSpent: number;                // Processing time in milliseconds
}

Output Properties

styles (string)

The minified CSS output
Main result of the minification process

errors (string[])

Array of error messages encountered during processing
Includes import resolution errors, parsing errors, etc.
Non-empty errors array indicates processing issues

warnings (string[])

Array of warning messages
Non-critical issues that don't prevent successful minification
Includes compatibility warnings, potential issues, etc.

stats (object)

Detailed statistics about the minification process
efficiency: Compression ratio from 0 (no compression) to 1 (maximum compression)
minifiedSize: Final output size in bytes
originalSize: Original input size in bytes
timeSpent: Processing time in milliseconds

inlinedStylesheets (string[])

Array of file paths that were inlined during processing
Populated when @import rules are processed and inlined

sourceMap (object, optional)

Generated source map object (when sourceMap: true)
Compatible with Source Map v3 specification
Links minified output back to original source locations

Usage Examples

Basic Output Handling

const CleanCSS = require('clean-css');
const minifier = new CleanCSS({ level: 2 });

const css = `
  .header {
    background-color: #ffffff;
    padding: 20px 0px;
    margin: 0px;
  }
`;

const result = minifier.minify(css);

console.log('Minified CSS:', result.styles);
console.log('Original size:', result.stats.originalSize);
console.log('Minified size:', result.stats.minifiedSize);
console.log('Efficiency:', (result.stats.efficiency * 100).toFixed(1) + '%');
console.log('Time spent:', result.stats.timeSpent + 'ms');

if (result.errors.length > 0) {
  console.error('Errors:', result.errors);
}

if (result.warnings.length > 0) {
  console.warn('Warnings:', result.warnings);
}

Handling Multiple Files

const files = [
  'assets/css/normalize.css',
  'assets/css/main.css',
  'assets/css/responsive.css'
];

const result = minifier.minify(files);

console.log('Combined minified CSS:', result.styles);
console.log('Inlined stylesheets:', result.inlinedStylesheets);

// Check for import-related errors
const importErrors = result.errors.filter(error => 
  error.includes('@import') || error.includes('import')
);
if (importErrors.length > 0) {
  console.error('Import errors:', importErrors);
}

Working with Source Maps

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

const result = sourceMapMinifier.minify(css, inputSourceMap);

if (result.sourceMap) {
  // Write source map to file
  fs.writeFileSync('output.css.map', JSON.stringify(result.sourceMap));
  
  // Add source map reference to CSS
  const cssWithSourceMap = result.styles + '\n/*# sourceMappingURL=output.css.map */';
  fs.writeFileSync('output.css', cssWithSourceMap);
}

Error and Warning Analysis

const result = minifier.minify(problematicCSS);

// Categorize errors
const parseErrors = result.errors.filter(error => error.includes('parse'));
const importErrors = result.errors.filter(error => error.includes('import'));
const otherErrors = result.errors.filter(error => 
  !error.includes('parse') && !error.includes('import')
);

console.log('Parse errors:', parseErrors.length);
console.log('Import errors:', importErrors.length);
console.log('Other errors:', otherErrors.length);

// Check efficiency
if (result.stats.efficiency < 0.1) {
  console.warn('Low compression efficiency, consider reviewing CSS structure');
}

Callback-based Processing

const callbackMinifier = new CleanCSS();

callbackMinifier.minify(css, (errors, result) => {
  if (errors) {
    console.error('Minification failed:', errors);
    return;
  }
  
  console.log('Success! Minified CSS:', result.styles);
  console.log('Statistics:', result.stats);
});

Promise-based Processing

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

promiseMinifier.minify(css)
  .then(result => {
    console.log('Minified CSS:', result.styles);
    return processResult(result);
  })
  .catch(errors => {
    console.error('Minification errors:', errors);
  });

// Or with async/await
async function minifyCSS(input) {
  try {
    const result = await promiseMinifier.minify(input);
    return result;
  } catch (errors) {
    throw new Error(`Minification failed: ${errors.join(', ')}`);
  }
}