css-mqpacker-webpack-plugin


The Webpack plugin for pack same CSS media query rules into one using PostCSS.

> node-css-mqpacker

Before:

``css
.foo {
width: 240px;
}

@media (max-width: 768px) {
.foo {
width: 576px;
}
}

.bar {
width: 160px;
}

@media (max-width: 768px) {
.bar {
width: 384px;
}
}
`

After:

`css
.foo {
width: 240px;
}

.bar {
width: 160px;
}

@media (max-width: 768px) {
.foo {
width: 576px;
}

.bar {
width: 384px;
}
}
`

Install

`bash
npm i css-mqpacker-webpack-plugin --save-dev


or


yarn add css-mqpacker-webpack-plugin -D
`

Example

webpack.config.js

`js
const CssMqpackerPlugin = require('css-mqpacker-webpack-plugin');

module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin(),
],
},
};
`

Options

$3

Type: String|RegExp|Array Default: /\.css(\?.*)?$/i

Test to match files against.

webpack.config.js

`js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin({
test: /\.foo\.css$/i,
}),
],
},
};
`

$3

Type: String|RegExp|Array Default: undefined

Files to include.

webpack.config.js

`js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin({
include: /\/includes/,
}),
],
},
};
`

$3

Type: String|RegExp|Array Default: undefined

Files to exclude.

webpack.config.js

`js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin({
exclude: /\/excludes/,
}),
],
},
};
`

$3

Type: Boolean|Function Default: false

By default, CSS MQPacker pack and order media queries as they are defined (the “first win” algorithm). If you want to sort media queries automatically, pass sort: true.

webpack.config.js

`js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin({
sort: true,
}),
],
},
};
``

License

MIT