sort-css-media-queries

!types
!npm
!license
!Test

> The custom sort method (mobile-first / desktop-first) for css-mqpacker or pleeease (which uses css-mqpacker) or, perhaps, something else ))


| Statements | Branches | Functions | Lines |
| --------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------- |
| !Statements | !Branches | !Functions | !Lines |

---

Table of Contents

🇬🇧 English
|
🇺🇦 Українська

- sort-css-media-queries
- Table of Contents
- Alternative to mqpacker
- Available in CSS-in-JS 🚀
- Installing
- Usage
- mobile-first
- desktop-first
- Sort configuration
- Configuration options
- unitlessMqAlwaysFirst
- 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

Available in CSS-in-JS 🚀

This package now is a part of the 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);

`

$3

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'
`

$3

`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.

$3

#### unitlessMqAlwaysFirst

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

---

Project Info

* Release notes
* Contributor Covenant Code of Conduct
* License MIT