# sort-css-media-queries

> The custom `sort` method (mobile-first / desktop-first) of CSS media queries for `postcss-sort-media-queries`, `css-mqpacker` or `pleeease` (which uses css-mqpacker) or, perhaps, something else ))

Latest version **3.0.5** (published 2026-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install sort-css-media-queries
pnpm add sort-css-media-queries
yarn add sort-css-media-queries
bun add sort-css-media-queries
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.5 |
| Published | 2026-04-07 |
| First published | 2017-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16 |
| Dependencies | 0 |
| Unpacked size | 18.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 54 |
| Author | Oleg Dutchenko |
| Maintainers | dutchenkooleg |
| Keywords | postcss, css-mqpacker, node-css-mqpacker, pleeease, mobile-first, combine, mq, media, queries, mobile-first, desktop-first, sort |

## Links

- npm: https://www.npmjs.com/package/sort-css-media-queries
- Repository: https://github.com/OlehDutchenko/sort-css-media-queries
- Homepage: https://github.com/OlehDutchenko/sort-css-media-queries#readme
- Issues: https://github.com/OlehDutchenko/sort-css-media-queries/issues
- npm.io page: https://npm.io/package/sort-css-media-queries

## Recent versions

- 3.0.5 (latest) — 2026-04-07
- 3.0.3 — 2026-03-17
- 3.0.1 — 2025-03-21
- 3.0.0 — 2025-03-15
- 2.4.1 — 2025-03-04
- 2.4.0 — 2024-09-07
- 2.3.0 — 2024-06-20
- 2.2.0 — 2023-04-22
- 2.1.1 — 2023-02-23
- 2.1.0 — 2022-09-01
- 2.0.4 — 2021-07-26
- 2.0.3 — 2021-06-15
- 1.5.4 — 2021-02-26
- 1.5.3 — 2021-02-14
- 1.5.2 — 2020-10-03
- … 17 more at https://npm.io/package/sort-css-media-queries/versions

## README

# sort-css-media-queries

![types](https://img.shields.io/badge/types-TypeScript-blue)
![npm](https://img.shields.io/badge/node-6.3.0-yellow.svg)
![license](https://img.shields.io/badge/License-MIT-orange.svg)
![Test](https://github.com/OlehDutchenko/sort-css-media-queries/workflows/Test/badge.svg)
[![Build Status](https://travis-ci.org/dutchenkoOleg/sort-css-media-queries.svg?branch=master)](https://travis-ci.org/dutchenkoOleg/sort-css-media-queries)

> The custom `sort` method (mobile-first / desktop-first) for [`css-mqpacker`](https://www.npmjs.com/package/css-mqpacker) or [`pleeease`](https://www.npmjs.com/package/pleeease) (which uses css-mqpacker) or, perhaps, something else ))

[![image](https://raw.githubusercontent.com/WezomCompany/code-style/main/assets/code-style-badge-white.svg)](https://github.com/WezomCompany/code-style)


| Statements                                                            | Branches                                                                    | Functions                                                            | Lines                                                            |
| --------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------- |
| ![Statements](https://img.shields.io/badge/statements-95.68%25-brightgreen.svg) | ![Branches](https://img.shields.io/badge/branches-96.48%25-brightgreen.svg) | ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg) | ![Lines](https://img.shields.io/badge/lines-95.68%25-brightgreen.svg) |

---

##  Table of Contents

🇬🇧 English
|
[🇺🇦 Українська](https://github.com/OlehDutchenko/sort-css-media-queries/blob/master/README-UK.md)

- [sort-css-media-queries](#sort-css-media-queries)
	- [Table of Contents](#table-of-contents)
	- [Alternative to `mqpacker`](#alternative-to-mqpacker)
	- [Available in CSS-in-JS 🚀](#available-in-css-in-js-)
	- [Installing](#installing)
	- [Usage](#usage)
		- [mobile-first](#mobile-first)
		- [desktop-first](#desktop-first)
	- [Sort configuration](#sort-configuration)
		- [Configuration options](#configuration-options)
			- [`unitlessMqAlwaysFirst`](#unitlessmqalwaysfirst)
	- [Project Info](#project-info)

## Alternative to `mqpacker`

https://github.com/hail2u/node-css-mqpacker is deprecated.  
One of the alternative plugins may be - [postcss-sort-media-queries](https://github.com/solversgroup/postcss-sort-media-queries)

## Available in CSS-in-JS 🚀

This package now is a part of the [jss-plugin-sort-css-media-queries](https://www.npmjs.com/package/jss-plugin-sort-css-media-queries)

## Installing

```shell
npm install --save sort-css-media-queries
# or using yarn cli
yarn add sort-css-media-queries
```

## Usage

See the original docs at first https://www.npmjs.com/package/css-mqpacker#sort;

```js

import sortCSSmq from 'sort-css-media-queries';

// your cool code
// ...

postcss([
  mqpacker({
    sort: sortCSSmq
  })
]).process(css);

```

### mobile-first

The plugin will sort your media-queries according to the mobile-first methodology. The sequence of media requests:

1. `min-width` and `min-height`  from smallest to largest,
1. `max-width` and `max-height` from largest to smallest,
1. `min-device-width` and `min-device-height`  from smallest to largest,
1. `max-device-width` and `max-device-height` from largest to smallest
1. media queries without dimension values, for example `print, tv, ...`,
1. at the end:
	- `print`
	- `print and (orientation: landscape)`
	- `print and (orientation: portrait)`

Example

Media-queries list:

```js
// min-width/-height -> from smallest to largest
'screen and (min-width: 320px) and (max-width: 767px)',
'screen and (min-height: 480px)',
'screen and (min-height: 480px) and (min-width: 320px)',
'screen and (min-width: 640px)',
'screen and (min-width: 1024px)',
'screen and (min-width: 1280px)',

// device
'screen and (min-device-width: 320px) and (max-device-width: 767px)',

// max-width/-height <- from largest to smallest
'screen and (max-width: 1023px)',
'screen and (max-height: 767px) and (min-height: 320px)',
'screen and (max-width: 767px) and (min-width: 320px)',
'screen and (max-width: 639px)',

// no units
'screen and (orientation: landscape)',
'screen and (orientation: portrait)',
'print',
'tv'
```

Sort result:

```js
'screen and (min-width: 320px) and (max-width: 767px)',
'screen and (min-height: 480px)',
'screen and (min-height: 480px) and (min-width: 320px)',
'screen and (min-width: 640px)',
'screen and (min-width: 1024px)',
'screen and (min-width: 1280px)',
'screen and (min-device-width: 320px) and (max-device-width: 767px)',
'screen and (max-width: 1023px)',
'screen and (max-height: 767px) and (min-height: 320px)',
'screen and (max-width: 767px) and (min-width: 320px)',
'screen and (max-width: 639px)',
'print',
'screen and (orientation: landscape)',
'screen and (orientation: portrait)',
'tv'
```

### desktop-first

```js
import sortCSSmq from 'sort-css-media-queries';

// your cool code
// ...

postcss([
  mqpacker({
    sort: sortCSSmq.desktopFirst
  })
]).process(css);

```

The plugin will sort your media-queries according to the desktop-first methodology. The sequence of media requests:

1. `max-width` and `max-height` from largest to smallest,
1. `max-device-width` and `max-device-height` from largest to smallest
1. `min-width` and `min-height`  from smallest to largest,
1. `min-device-width` and `min-device-height`  from smallest to largest,
1. media queries without dimension values, `tv, ...`,
1. at the end:
	- `print`
	- `print and (orientation: landscape)`
	- `print and (orientation: portrait)`

---

## Sort configuration

You can import a separate sorting helper from a package
and create your own sorting method with config as needed:

```js
import createSort from 'sort-css-media-queries/create-sort';
const sortCSSmq = createSort({ ...configuration });
```

Or alternatively create a `sort-css-mq.config.json` file in the root of your project.
Or add property `sortCssMQ: {}` in your `package.json`.

By this configuration you can control sorting behaviour.

### Configuration options

#### `unitlessMqAlwaysFirst`

- type: `boolean | undefined`
- default value: `undefined`

---

## Project Info

* [Release notes](https://github.com/OlehDutchenko/sort-css-media-queries/releases)
* [Contributor Covenant Code of Conduct](https://github.com/OlehDutchenko/sort-css-media-queries/blob/master/CODE_OF_CONDUCT.md)
* [License MIT](https://github.com/OlehDutchenko/sort-css-media-queries/blob/master/LICENSE)

---
_Source: https://npm.io/package/sort-css-media-queries · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._