group-css-media-queries - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #typescript #golang #android #rust #docker #macos #nodejs #windows #awesome-list #mcp #openai

group-css-media-queries

(★ 101)

CSS postprocessing: group media queries. Useful for postprocessing preprocessed CSS files.

File Explorer

Download Latest Version (.zip)

- group-css-media-queries
- - mixed-px-em.css
  - mixed-px-em.sorted.css
  - mixed.css
  - mixed.sorted.css
  - only-max.css
  - only-max.sorted.css
  - only-min.css
  - only-min.sorted.css
  - readme-example.css
  - readme-example.sorted.css
  - zero.css
  - zero.sorted.css
- groupCssMediaQueries.test.coffee
.gitignore
index.coffee
index.js
LICENSE
package.json
README.md

# Installation Guide

1. Get the code

git clone https://github.com/SE7ENSKY/group-css-media-queries

Downloads the entire project code from GitHub to your computer.

cd group-css-media-queries

Moves into the project folder you just downloaded.

2. Official Install Script

Easy Recommended

Prerequisites

Node.js Node.js must be installed to use npm.

npm install -g group-css-media-queries

Installs the package published on the npm registry globally — no need to clone the source.

✅ After installing, open a new terminal and run the program's version command (e.g. --version) to confirm it worked.

Pulled directly from this repo's README.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install -g group-css-media-queries

Installs the package published on the npm registry globally — no need to clone the source.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

group-css-media-queries
=======================

CSS postprocessing: group media queries. Useful for postprocessing preprocessed CSS files.

# What is it?

You have input.css (take note on similar media query):
```css
.header-main {
  background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
  .header-main {
    background-image: url("/images/branding/logo.main@2x.png");
    -webkit-background-size: auto auto;
    -moz-background-size: auto auto;
    background-size: auto auto;
  }
}
.footer-main {
  background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
  .footer-main {
    background-image: url("/images/branding/logo.main@2x.png");
    -webkit-background-size: auto auto;
    -moz-background-size: auto auto;
    background-size: auto auto;
  }
}
```

Run this utility:
```
group-css-media-queries input.css output.css
```

The result is output.css:
```css
.header-main {
  background-image: url("/images/branding/logo.main.png");
}

.footer-main {
  background-image: url("/images/branding/logo.main.png");
}

@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
  .header-main {
    background-image: url("/images/branding/logo.main@2x.png");
    -webkit-background-size: auto auto;
    -moz-background-size: auto auto;
    background-size: auto auto;
  }

.footer-main {
    background-image: url("/images/branding/logo.main@2x.png");
    -webkit-background-size: auto auto;
    -moz-background-size: auto auto;
    background-size: auto auto;
  }
}
```

Voila!

# Installing

```
npm install -g group-css-media-queries
```

# Media Queries order
Output CSS is ordered by these rules:
* non-media-query code goes first unmodified,
* then all only min-width rules, sorted ascending by px
* then all only max-width rules, sorted descending by px
* then all interval rules, without reordering
* then all other rules

# Changelog
* 1.1.0 - adopted unit tests, refactored media queries ordering
* 1.0.1 – added basic media queries sorting (thanks to @berbaquero)
* 1.0.0 – initial working release