Support range notation

[Razunter]

Range notation: @media screen and (width <= 1250px) {

Currently, sorting works, but in incorrect order:

Example:

import postcss from 'postcss'
import sortMediaQueries from 'postcss-sort-media-queries'

const style = `
@media screen and (width <= 1250px) {
  .a {
    color: #00FF00;
  }
}

@media screen and (width <= 250px) {
  .b {
    color: #FF0000;
  }
}

@media screen and (width >= 1250px) {
  .a {
    color: #00FF00;
  }
}

@media screen and (width >= 250px) {
  .b {
    color: #FF0000;
  }
}
`

postcss([
  sortMediaQueries({
    sort: 'mobile-first',
  }),
])
  .process(style)
  .then((result) => {
    console.log(result.css)
  })

Output:

@media screen and (width <= 250px) {
  .b {
    color: #FF0000;
  }
}
@media screen and (width >= 250px) {
  .b {
    color: #FF0000;
  }
}
@media screen and (width <= 1250px) {
  .a {
    color: #00FF00;
  }
}
@media screen and (width >= 1250px) {
  .a {
    color: #00FF00;
  }
}

Expected output:

@media screen and (width >= 250px) {
  .b {
    color: #FF0000;
  }
}
@media screen and (width >= 1250px) {
  .a {
    color: #00FF00;
  }
}
@media screen and (width <= 1250px) {
  .a {
    color: #00FF00;
  }
}
@media screen and (width <= 250px) {
  .b {
    color: #FF0000;
  }
}

[yunusga]

@Razunter added in v5.0.0 release