css-mqpacker media query birleştirmede sıralama sorunu

[hsnaydd]

Grid breakpointlerine xxs breakpointi eklendiğinde ve grid container değişkeninde değişiklik yapılmadığında sıralamada sıkıntı çıkıyor çünkü css-mqpacker eklentisi the-first-win-algorithm mantığı üzerine çalışmakta;

.container {
  @media (min-width: 34rem) {...}
  @media (min-width: 48rem) {...}
  @media (min-width: 62rem) {...}
  @media (min-width: 75rem) {...}
}

@media (min-width: 22.5rem) {
  // Bu yukarı taşınmıyor, çünkü daha önce (min-width: 22.5rem) media querysi ile karşılaşılmadı
  .col--xs {
    // ...
  }
}
@media (min-width: 34rem) {
  // Bu ve alttakiler yukarı taşınıyor, çünkü yukarıda (min-width: 34rem) gibi media queryler
  //  tanımlandı buradaki kodlar onların içine taşındı
  .col--sm {
    // ...
  }
}
@media (min-width: 48rem) {...}
@media (min-width: 62rem) {...}
@media (min-width: 75rem) {...}

Output: Merge işleminden sonra bu hale geliyor;

@media (min-width: 34rem) {
  .container {...};
  .col--sm {...}
}

@media (min-width: 48rem) {...}
@media (min-width: 62rem) {...}
@media (min-width: 75rem) {...}

@media (min-width: 22.5rem) {
  .col--xs {...}
}

.col--xs en altta kaldığı için .col--md, .col--sm gibi class ları eziyor. Tutarlılık için aşağıdaki eklentiyi kullanıp order yapmamız gerekli.

https://github.com/dutchenkoOleg/sort-css-media-queries