CSSO loader module for webpack.
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent