Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/sandark7/csso-loader below:

sandark7/csso-loader: CSSO loader module for webpack

CSSO loader module for webpack.

Documentation: Using loaders

npm install csso-loader --save-dev

Using csso-loader with css-loader.

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

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
  }
};

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
  }
};

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'
  }
};

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']
      ]
    }
  }
};

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);
    }
  }
};

MIT © Andrew Smirnov

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4