wrong order @media

[shtorman]

I use this sass code:

@media (max-width: 640px)  {
  .login {
    &__block {
      max-width: 400px;
    }
    &__title {
      align-self: center;
      margin-right: 0;
      margin-bottom: 25px;
    }
    &__button {
      align-self: center;
      margin-right: 0;
    }
  }
}
@media (max-width: 480px)  {
  .login {
    &__block {
      max-width: 300px;
    }
  }
}

My Webpack config:

      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'group-css-media-queries-loader',
          'sass-loader',
        ],
      },

group-css-media-queries-loader groped queries, but order wrong - 480px go before 640px i.e:

@media (max-width: 1281px)
@media (max-width: 960px)
@media (max-width: 480px)
@media (max-width: 640px) 

what i do wrong?
itry last verision 4.3.0 and 3.0.2 in both - order wrong.

[retyui]

@shtorman can you show css output without group-css-media-queries-loader