PostCSS Sort Media Queries

🌏 English ▫ O'zbek

PostCSS plugin for sorting and combining CSS media queries with mobile first / desktop first methodologies.

From 5.0.0 plugin support Media Feature Types: “range”

Table of Contents

• Online demo
• Examples
  • Mobile first sorting
  • Desktop first sorting
• Install
• Usage
• Options
  • sort
  • Custom sort function
  • Sort configuration
  • Only Top Level
• Changelog
• License
• Other PostCSS plugins
• Thanks 💪

Online demo

And here is the online demo

Examples

Mobile first sorting

before

1@media screen and (max-width: 640px) {
2  .head { color: #cfcfcf }
3}
4@media screen and (max-width: 768px) {
5  .footer { color: #cfcfcf }
6}
7@media screen and (max-width: 640px) {
8  .main { color: #cfcfcf }
9}
10@media screen and (min-width: 1280px) {
11  .mobile-first { color: #cfcfcf }
12}
13@media screen and (width > 640px) {
14  .mobile-first { color: #cfcfcf }
15}
16@media screen and (max-width: 640px) {
17  .footer { color: #cfcfcf }
18}

after

1@media screen and (width > 640px) {
2  .mobile-first { color: #cfcfcf }
3}
4@media screen and (min-width: 1280px) {
5  .mobile-first { color: #cfcfcf }
6}
7@media screen and (max-width: 768px) {
8  .footer { color: #cfcfcf }
9}
10@media screen and (max-width: 640px) {
11  /* combined */
12  .head { color: #cfcfcf }
13  .main { color: #cfcfcf }
14  .footer { color: #cfcfcf }
15}

Desktop first sorting

before

1@media screen and (width < 640px) {
2  .header { color: #cdcdcd }
3}
4@media screen and (min-width: 760px) {
5  .desktop-first { color: #cdcdcd }
6}
7@media screen and (width < 640px) {
8  .main { color: #cdcdcd }
9}
10@media screen and (min-width: 1280px) {
11  .desktop-first { color: #cdcdcd }
12}
13@media screen and (max-width: 760px) {
14  .footer { color: #cdcdcd }
15}
16@media screen and (max-width: 640px) {
17  .footer { color: #cdcdcd }
18}

after

1@media screen and (max-width: 760px) {
2  .footer { color: #cdcdcd }
3}
4@media screen and (width < 640px) {
5  /* combined */
6  .header { color: #cdcdcd }
7  .main { color: #cdcdcd }
8  .footer { color: #cdcdcd }
9}
10@media screen and (min-width: 760px) {
11  .desktop-first { color: #cdcdcd }
12}
13@media screen and (min-width: 1280px) {
14  .desktop-first { color: #cdcdcd }
15}

Install

First thing's, install the module:

npm install postcss postcss-sort-media-queries --save-dev

Usage

Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you already use PostCSS, add the plugin to plugins list:

1module.exports = {
2  plugins: [
3+   require('postcss-sort-media-queries')({
4+     sort: 'mobile-first', // default value
5+   }),
6    require('autoprefixer')
7  ]
8}

or with custom sort function

1module.exports = {
2  plugins: [
3+   require('postcss-sort-media-queries')({
4+     sort: function(a, b) {
5+        // custom sorting function
6+     }
7+   }),
8    require('autoprefixer')
9  ]
10}

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Options

Sorting works based on dutchenkoOleg/sort-css-media-queries function.

sort

This option support string or function values.

• {string} 'mobile-first' - (default) mobile first sorting
• {string} 'desktop-first' - desktop first sorting
• {function} your own sorting function

'mobile-first'

1postcss([
2  sortMediaQueries({
3    sort: 'mobile-first' // default
4  })
5]).process(css);

'desktop-first'

1postcss([
2  sortMediaQueries({
3    sort: 'desktop-first'
4  })
5]).process(css);

Custom sort function

1postcss([
2  sortMediaQueries({
3    function(a, b) {
4      return a.localeCompare(b);
5    }
6  })
7]).process(css);

In this example, all your media queries will sort by A-Z order.

This sorting function is directly passed to Array#sort() method of an array of all your media queries.

Sort configuration

By this configuration you can control sorting behaviour.

1postcss([
2  sortMediaQueries({
3    configuration: {
4      unitlessMqAlwaysFirst: true, // or false
5    }
6  })
7]).process(css);

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

Only Top Level

Sort only top level media queries to prevent eject nested media queries from parent node

1postcss([
2  sortMediaQueries({
3    onlyTopLevel: true,
4  })
5]).process(css);

---

Changelog

See Releases history

License

MIT

Other PostCSS plugins

• postcss-momentum-scrolling - plugin for adding momentum style scrolling behavior (-webkit-overflow-scrolling:touch) for elements with overflow (scroll, auto) on iOS

Thanks

• Andrey Sitnik @ai
• Oleh Dutchenko @dutchenkoOleg
• Jakub Caban @Lustmored
• Dmytro Symonov @Kassaila
• Kai Falkowski @SassNinja
• Khayot Razzakov @Khayotbek1