or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-less-plugin-clean-css

Less.js plugin that integrates clean-css for CSS minification and optimization

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/less-plugin-clean-css@1.6.x

To install, run

npx @tessl/cli install tessl/npm-less-plugin-clean-css@1.6.0

index.mddocs/

Less Plugin Clean CSS

Less Plugin Clean CSS is a Less.js plugin that integrates the clean-css library for CSS minification and optimization. It enables developers to compress CSS output from Less compilation by applying advanced optimizations including whitespace removal, property merging, selector optimization, and dead code elimination.

Package Information

  • Package Name: less-plugin-clean-css
  • Package Type: npm
  • Language: JavaScript (Node.js)
  • Installation: npm install less-plugin-clean-css

Core Imports

const LessPluginCleanCSS = require('less-plugin-clean-css');

Basic Usage

Programmatic Usage

const less = require('less');
const LessPluginCleanCSS = require('less-plugin-clean-css');

// Create plugin instance with options
const cleanCSSPlugin = new LessPluginCleanCSS({
  advanced: true,
  keepSpecialComments: 1,
  compatibility: 'ie8'
});

// Use with Less.js
less.render(lessString, { plugins: [cleanCSSPlugin] })
  .then(result => {
    console.log(result.css); // Minified CSS output
  });

Command Line Usage

# Install Less.js globally
npm install -g less

# Install the plugin globally
npm install -g less-plugin-clean-css

# Use with lessc
lessc input.less --clean-css="--s1 --advanced --compatibility=ie8"

Architecture

The plugin follows the Less.js plugin architecture with these key components:

  • Main Plugin Class: LessPluginCleanCSS - Entry point and configuration management
  • Processor Integration: Registers a post-processor that runs after Less compilation
  • Options Parsing: Flexible configuration supporting both object and string formats
  • Clean-CSS Integration: Uses clean-css library for actual CSS minification

Capabilities

Plugin Constructor

Creates a new Less.js plugin instance for CSS minification.

/**
 * Creates a Less.js plugin instance for CSS minification
 * @param {Object|String} options - Configuration options for clean-css
 */
function LessPluginCleanCSS(options);

Plugin Installation

Registers the plugin with Less.js to enable CSS minification during compilation.

/**
 * Registers the plugin with Less.js plugin manager
 * @param {Object} less - Less.js instance
 * @param {Object} pluginManager - Less.js plugin manager
 */
LessPluginCleanCSS.prototype.install = function(less, pluginManager);

Usage Information

Prints detailed usage information and available options to the console.

/**
 * Prints usage information for the plugin to console
 */
LessPluginCleanCSS.prototype.printUsage = function();

Options Configuration

Updates plugin configuration after instantiation.

/**
 * Updates plugin options after instantiation
 * @param {Object|String} options - New configuration options
 */
LessPluginCleanCSS.prototype.setOptions = function(options);

Minimum Version Requirement

Specifies the minimum required Less.js version for compatibility.

/**
 * Minimum required Less.js version [2, 1, 0]
 * @type {Array<number>}
 */
LessPluginCleanCSS.prototype.minVersion = [2, 1, 0];

Configuration Options

The plugin supports all clean-css options with some defaults optimized for Less.js output:

String Format Options

When using string format (command-line), options are space-separated:

  • keep-line-breaks or b - Preserve line breaks in output
  • s0 - Remove all special comments
  • s1 - Keep first special comment only
  • keepSpecialComments=* - Keep all special comments (default)
  • advanced - Enable advanced optimizations (default: false)
  • rebase - Enable URL rebasing (default: false)
  • compatibility=ie8 - Set CSS compatibility mode
  • rounding-precision=2 - Set decimal precision for numbers
  • skip-aggressive-merging - Disable aggressive property merging
  • skip-restructuring - Disable CSS restructuring
  • skip-shorthand-compacting - Disable shorthand property compacting

Object Format Options

When using object format (programmatic), use clean-css option names:

interface CleanCSSOptions {
  /** Keep special comments: "*" (all), 1 (first), 0 (none) */
  keepSpecialComments?: string | number;
  /** Enable advanced optimizations */
  advanced?: boolean;
  /** Enable URL rebasing */
  rebase?: boolean;
  /** Preserve line breaks */
  keepBreaks?: boolean;
  /** CSS compatibility mode */
  compatibility?: string;
  /** Decimal precision */
  roundingPrecision?: number;
  /** Enable aggressive property merging */
  aggressiveMerging?: boolean;
  /** Enable CSS restructuring */
  restructuring?: boolean;
  /** Enable shorthand property compacting */
  shorthandCompacting?: boolean;
}

Usage Examples:

// Object format
const plugin = new LessPluginCleanCSS({
  advanced: true,
  keepSpecialComments: 1,
  compatibility: 'ie8',
  roundingPrecision: 2
});

// String format (parsed internally)  
const plugin2 = new LessPluginCleanCSS('s1 advanced compatibility=ie8 rounding-precision=2');

Default Behavior

The plugin applies these defaults different from clean-css:

  • keepSpecialComments: "*" - Keeps all special comments by default
  • processImport: false - Disabled to avoid conflicts with Less imports
  • rebase: false - Disabled by default for safety
  • advanced: false - Disabled by default for safety

Error Handling

The plugin throws errors for:

  • Invalid Options: Unknown option names in string format
  • Parse Errors: Malformed option strings
  • Clean-CSS Errors: Underlying CSS processing failures

Integration Examples

With Build Tools

// Webpack with less-loader
module.exports = {
  module: {
    rules: [{
      test: /\.less$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'less-loader',
        options: {
          lessOptions: {
            plugins: [
              new (require('less-plugin-clean-css'))({ advanced: true })
            ]
          }
        }
      }]
    }]
  }
};

With Express.js

const express = require('express');
const less = require('less');
const LessPluginCleanCSS = require('less-plugin-clean-css');

app.get('/styles.css', async (req, res) => {
  const lessContent = await fs.readFile('styles.less', 'utf8');
  const result = await less.render(lessContent, {
    plugins: [new LessPluginCleanCSS({ advanced: true })]
  });
  res.type('text/css').send(result.css);
});