Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shoonia/css-mqpacker-webpack-plugin
The Webpack plugin for pack same CSS media query rules into one using PostCSS
https://github.com/shoonia/css-mqpacker-webpack-plugin
postcss webpack webpack-plugin
Last synced: 3 months ago
JSON representation
The Webpack plugin for pack same CSS media query rules into one using PostCSS
- Host: GitHub
- URL: https://github.com/shoonia/css-mqpacker-webpack-plugin
- Owner: shoonia
- License: mit
- Created: 2020-08-12T11:32:13.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-31T11:51:53.000Z (10 months ago)
- Last Synced: 2024-10-08T09:31:33.838Z (4 months ago)
- Topics: postcss, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 128 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# css-mqpacker-webpack-plugin
[](https://www.npmjs.com/package/css-mqpacker-webpack-plugin)
The Webpack plugin for pack same CSS media query rules into one using [PostCSS](https://github.com/postcss/postcss).
> [node-css-mqpacker](https://github.com/hail2u/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
### `test`
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,
}),
],
},
};
```
### `include`
Type: `String|RegExp|Array` Default: `undefined`
Files to include.
**webpack.config.js**
```js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin({
include: /\/includes/,
}),
],
},
};
```
### `exclude`
Type: `String|RegExp|Array` Default: `undefined`
Files to exclude.
**webpack.config.js**
```js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMqpackerPlugin({
exclude: /\/excludes/,
}),
],
},
};
```
### `sort`
Type: `Boolean|Function` Default: `false`
By default, CSS MQPacker pack and order media queries as they are defined ([the “first win” algorithm](https://github.com/hail2u/node-css-mqpacker#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](./LICENSE)