csso-loader


CSSO loader module for webpack.

Usage

Documentation: Using loaders

Installation

``
npm install csso-loader --save-dev
`

Examples

Using csso-loader with css-loader.

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

Advanced options

$3

Default: true

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

` javascript
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.

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

$3

Default: false

debug is using to get details about the minification process.

` javascript
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).

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

$3

Default: exclamation or true

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

` javascript
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).

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

$3

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.

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

$3

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.

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

License

MIT © Andrew Smirnov