sort-css-media-queries

sort-css-media-queries

:us: English | :ru: Русский язык

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

Installing

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;

const sortCSSmq = require('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,
2. max-width and max-height from largest to smallest,
3. min-device-width and min-device-height from smallest to largest,
4. max-device-width and max-device-height from largest to smallest
5. media queries without dimension values, for example print, tv, ...,
6. at the end:
   • print
   • print and (orientation: landscape)
   • print and (orientation: portrait)

Example

Media-queries list:

// 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:

'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

const sortCSSmq = require('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,
2. max-device-width and max-device-height from largest to smallest
3. min-width and min-height from smallest to largest,
4. min-device-width and min-device-height from smallest to largest,
5. media queries without dimension values, tv, ...,
6. at the end:
   • print
   • print and (orientation: landscape)
   • print and (orientation: portrait)

---

Project Info

• Change log
• Contributing Guidelines
• Contributor Covenant Code of Conduct
• License MIT