Awesome

csso-loader

CSSO loader module for webpack.

Usage

Installation

npm install csso-loader --save-dev

Examples

Using csso-loader with css-loader.

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader!csso-loader',
      }
    ]
  }
};

Advanced options

restructure

Default: true

csso performs structural optimization for better compression by default. Use -restructure in case you want to disable it.

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader!csso-loader?-restructure',
      }
    ]
  }
};

Also it can be disabled by restructure boolean option in csso object of webpack config.

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader!csso-loader',
      }
    ]
  },
  csso: {
    restructure: false
  }
};

debug

Default: false

debug is using to get details about the minification process.

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader!csso-loader?debug',
      }
    ]
  }
};

Also you can set debug option in csso object of webpack config. It can be boolean or a positive number from 1 to 3 (greater number for more details).

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader!csso-loader',
      }
    ]
  },
  csso: {
    debug: 3
  }
};

comments

Default: exclamation or true

csso leave all exclamation comments by default (i.e. /*! .. */). Use '-comments' to remove all comments.

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader!csso-loader?-comments',
      }
    ]
  }
};

Also you can set comments option in csso object of webpack config. It can be boolean or string (use first-exclamation to remove all comments except first one with exclamation).

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader!csso-loader',
      }
    ]
  },
  csso: {
    comments: 'first-exclamation'
  }
};

usage

With usage option you can set data about CSS usage. For example, white lists (tags, ids and classes) can be set to filter unused selectors and related CSS rules as well. See Usage data in csso documentation for more details.

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader!csso-loader',
      }
    ]
  },
  csso: {
    usage: {
      tags: ['span', 'div'],
      ids: ['id1'],
      classes: ['class1', 'class2', 'class3', 'class4']
      scopes: [
        ['class1', 'class2'],
        ['class3', 'class4']
      ]
    }
  }
};

logger

To log how CSS is transforming through compression stages use logger option. First argument is a stage name, and second one is AST of current state CSS or null.

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader!csso-loader',
      }
    ]
  },
  csso: {
    logger: function(stage, ast) {
      console.log(stage, ast);
    }
  }
};