Is it possible to somehow structure the order of media queries in gulp?

Question

JavaScript

I have a gulp builder.

var gulp          = require('gulp'),
    stylus        = require('gulp-stylus'),
    browserSync   = require('browser-sync').create(),
    uglify        = require('gulp-uglify'),
    pump          = require('pump'),
    cssnano       = require('gulp-cssnano'),
    autoprefixer  = require('autoprefixer'),
    postcss       = require('gulp-postcss'),
    lost          = require('lost'),
    mqpacker      = require('css-mqpacker'),
    sourcemaps    = require('gulp-sourcemaps'),

    useref        = require('gulp-useref'),
    cleanCSS      = require('gulp-clean-css'),
    rename        = require("gulp-rename"),
    concatCss     = require('gulp-concat-css');

// Browser Sync
gulp.task('browserSync', function() {
  browserSync.init({
    server: 'dist'
  })
});

// Stylus
gulp.task('css', function () {
  return gulp.src('src/css/*.styl')
    .pipe(sourcemaps.init())
    .pipe(stylus({
      'include css': true
    }))
    .pipe(postcss([
      lost(),
      mqpacker(),
      autoprefixer({
        browsers: [
         'last 2 versions',
         'Android >= 4',
         'IE >= 9'
        ]
      })
    ]))
    // .pipe(cssnano())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist/css'));
});

// Js
gulp.task('js', function (cb) {
  pump([
      gulp.src('src/js/**/*.js'),
      uglify(),
      gulp.dest('dist/js')
    ],
    cb
  );
});

// Tasks
gulp.task('default', ['browserSync', 'css', 'js'], function(){

  gulp.watch('src/css/**/*.styl', ['css', browserSync.reload]);
  gulp.watch('src/js/**/*.js', ['js', browserSync.reload]);
  gulp.watch('dist/*.html', browserSync.reload);
});

But for some reason, when building a project in css, media queries line up like this:

@media (max-width: 768px){}
@media (max-width: 1280px){}
@media (max-width: 992px){}
@media (max-width: 1366px){}
@media (max-width: 1500px){}

Why is this happening? How to fix it?

Answer 1

css-mqpacker is responsible for bundling media expressions . Try using it with the sort parameter .

mqpacker({
    sort: true
})