https://github.com/valeriogc/postcss-media-query-pruner
A PostCSS plugin that merges, removes duplicates, and sorts media queries for optimized, lightweight CSS
https://github.com/valeriogc/postcss-media-query-pruner
css css-optimization media-queries postcss postcss-plugin sorting
Last synced: about 2 months ago
JSON representation
A PostCSS plugin that merges, removes duplicates, and sorts media queries for optimized, lightweight CSS
- Host: GitHub
- URL: https://github.com/valeriogc/postcss-media-query-pruner
- Owner: ValerioGc
- License: 0bsd
- Created: 2025-04-28T22:08:22.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-28T22:23:04.000Z (about 2 months ago)
- Last Synced: 2025-05-05T06:08:59.139Z (about 2 months ago)
- Topics: css, css-optimization, media-queries, postcss, postcss-plugin, sorting
- Language: TypeScript
- Homepage:
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.txt
- License: LICENSE
Awesome Lists containing this project
README
# postcss-media-query-pruner
**postcss-media-query-pruner** is a PostCSS plugin that **consolidates** and **cleans up** media queries in your CSS. It merges identical media queries into single blocks, removes duplicate rules, and optionally sorts them in “mobile-first” or “desktop-first” order if enabled through options. It helps reduce CSS file size and improves maintainability by ensuring that media queries are organized and efficient.
## 📦 Installation
Install with npm:
```bash
npm install postcss-media-query-pruner --save-dev
```
## 🔧 Usage
Configure in your PostCSS setup (e.g., `postcss.config.js` or your build tool):
```js
import mediaQueryPruner from 'postcss-media-query-pruner';
module.exports = {
plugins: [
mediaQueryPruner({
include: ['*'],
exclude: [],
sortingEnabled: true,
sort: 'mobileFirst', // or 'desktopFirst'
logger: {
info: msg => console.log('[Pruner]', msg),
error: msg => console.error('[Pruner]', msg),
},
}),
],
};
```
## ⚙️ Options
| Option | Type | Default | Description |
|-------------------|----------------------|----------------|--------------------------------------------------------------------------------|
| `include` | `string[]` | `['*']` | Glob patterns or substrings to include files. |
| `exclude` | `string[]` | `[]` | Glob patterns or substrings to exclude files. |
| `sortingEnabled` | `boolean` | `false` | Enable sorting of media queries by width. |
| `sort` | `'mobileFirst'` \| `'desktopFirst'` | `'mobileFirst'` | Sorting strategy: ascending or descending by `min-width`. |
| `logger` | `{info, error}` | `console` | Custom logger for info and error messages. |
## 📋 Examples
### 1. Merge & Deduplicate
**Input:**
```css
@media (min-width: 600px) {
.btn { color: blue; }
}
@media (min-width: 600px) {
.btn { color: blue; }
.card { padding: 1rem; }
}
```
**Output:**
```css
@media (min-width: 600px) {
.btn { color: blue; }
.card { padding: 1rem; }
}
```
### 2. Sorting Enabled (Desktop-first)
**Input:**
```css
@media (min-width: 300px) { .a { font-size: 14px; } }
@media (min-width: 800px) { .b { font-size: 16px; } }
```
**Config:**
```js
mediaQueryPruner({ sortingEnabled: true, sort: 'desktopFirst' });
```
**Output:**
```css
@media (min-width: 800px) { .b { font-size: 16px; } }
@media (min-width: 300px) { .a { font-size: 14px; } }
```
### 3. Include/Exclude Patterns
```js
mediaQueryPruner({
include: ['src/components'],
exclude: ['legacy.css'],
});
```
Only files in `src/components` will be pruned, skipping any path containing `legacy.css`.
## 🤝 Contributing
Contributions welcome! Please open issues or pull requests for bug fixes and features.
## 📄 License
This project is licensed under the **0BSD** License. See [LICENSE](LICENSE) for details.