Introduction to Clean-CSS

Clean-CSS is a powerful and highly efficient CSS optimizer for Node.js and the web. It enables developers to minimize the size of CSS files by removing redundant code, making the files more compact and easier to maintain. This process not only improves load times but also enhances overall site performance and user experience, which are crucial for SEO.

Getting Started

To get started with Clean-CSS, you need to install the package via npm:

npm install clean-css

Basic Usage

Here is a basic example of how to use Clean-CSS to minimize a CSS string:

const CleanCSS = require('clean-css');
const input = 'a{font-weight:bold;}';
const output = new CleanCSS({}).minify(input).styles;
console.log(output); // Output: 'a{font-weight:700;}'

Advanced Options

Clean-CSS provides various advanced options to customize the optimization process as per your needs:

1. Level Options

const output = new CleanCSS({
  level: {
     1: {
       transform: (propertyName, propertyValue) => {
         if (propertyName === 'color' && propertyValue === 'white') {
           return propertyValue.replace('white', '#fff');
         }
         return propertyValue;
       }
    }
  }
}).minify('a{color:white;}').styles;
console.log(output); // Output: 'a{color:#fff;}'

2. Inlining Options

const output = new CleanCSS({
  inline: ['local', 'remote']
}).minify(['a{color:red;}', 'b{color:black;}']).styles;
console.log(output); // Output: 'a{color:red;}b{color:black;}'

3. Compatibility Options

const output = new CleanCSS({
  compatibility: {
    colors: {
      opacity: true // Use 'rgba' instead of 'opacity:1' when possible
    }
  }
}).minify('a{opacity:1}').styles;
console.log(output); // Output: 'a{opacity:1;}'

API Examples

1. Minify Multiple Files

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

const files = ['styles1.css', 'styles2.css'];
const output = files.map(file => new CleanCSS({}).minify(fs.readFileSync(path.resolve(file), 'utf8')).styles).join(' ');
fs.writeFileSync('output.min.css', output);

2. Minify CSS from a URL

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

http.get('http://example.com/styles.css', (res) => {
  let data = '';

  res.on('data', (chunk) => {
    data += chunk;
  });

  res.on('end', () => {
    const output = new CleanCSS({}).minify(data).styles;
    console.log(output);
  });
});

App Example Using Clean-CSS

Let’s build a simple Node.js application that watches a CSS file for changes and automatically minifies it using Clean-CSS:

const fs = require('fs');
const path = require('path');
const CleanCSS = require('clean-css');
const chokidar = require('chokidar');

const inputFilePath = path.resolve('input.css');
const outputFilePath = path.resolve('output.min.css');

const minifyCSS = () => {
  const css = fs.readFileSync(inputFilePath, 'utf8');
  const output = new CleanCSS({}).minify(css).styles;
  fs.writeFileSync(outputFilePath, output);
};

chokidar.watch(inputFilePath).on('change', () => {
  console.log('CSS file changed, minifying...');
  minifyCSS();
});

console.log('Watching for changes...');
minifyCSS(); // Initial minification

With this setup, any changes made to input.css will automatically be minified and saved to output.min.css.

Hash: fddb40b7803b72e44ec7b71e56e49a2842f0d530a9082f6b6f21786f8482f99d