# sort-css-media-queries     [](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 )) [](https://github.com/WezomCompany/code-style) | Statements | Branches | Functions | Lines | | --------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------- | |  |  |  |  | --- ## 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/lib/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)