sort-css-media-queries

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

---

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

1npm install --save sort-css-media-queries
2# or using yarn cli
3yarn add sort-css-media-queries

Usage

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

1
2import sortCSSmq from 'sort-css-media-queries';
3
4// your cool code
5// ...
6
7postcss([
8  mqpacker({
9    sort: sortCSSmq
10  })
11]).process(css);
12

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:

1// min-width/-height -> from smallest to largest
2'screen and (min-width: 320px) and (max-width: 767px)',
3'screen and (min-height: 480px)',
4'screen and (min-height: 480px) and (min-width: 320px)',
5'screen and (min-width: 640px)',
6'screen and (min-width: 1024px)',
7'screen and (min-width: 1280px)',
8
9// device
10'screen and (min-device-width: 320px) and (max-device-width: 767px)',
11
12// max-width/-height <- from largest to smallest
13'screen and (max-width: 1023px)',
14'screen and (max-height: 767px) and (min-height: 320px)',
15'screen and (max-width: 767px) and (min-width: 320px)',
16'screen and (max-width: 639px)',
17
18// no units
19'screen and (orientation: landscape)',
20'screen and (orientation: portrait)',
21'print',
22'tv'

Sort result:

1'screen and (min-width: 320px) and (max-width: 767px)',
2'screen and (min-height: 480px)',
3'screen and (min-height: 480px) and (min-width: 320px)',
4'screen and (min-width: 640px)',
5'screen and (min-width: 1024px)',
6'screen and (min-width: 1280px)',
7'screen and (min-device-width: 320px) and (max-device-width: 767px)',
8'screen and (max-width: 1023px)',
9'screen and (max-height: 767px) and (min-height: 320px)',
10'screen and (max-width: 767px) and (min-width: 320px)',
11'screen and (max-width: 639px)',
12'print',
13'screen and (orientation: landscape)',
14'screen and (orientation: portrait)',
15'tv'

desktop-first

1import sortCSSmq from 'sort-css-media-queries';
2
3// your cool code
4// ...
5
6postcss([
7  mqpacker({
8    sort: sortCSSmq.desktopFirst
9  })
10]).process(css);
11

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)

---

Sort configuration

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

1import createSort from 'sort-css-media-queries/lib/create-sort';
2const 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
• Contributor Covenant Code of Conduct
• License MIT