postcss-sort-media-queries icon indicating copy to clipboard operation
postcss-sort-media-queries copied to clipboard

Sorting errors with aspect-ratio media queries

Open mattblackstone opened this issue 1 year ago • 2 comments

{ sort: 'desktop-first' }

expected:

@media (max-aspect-ratio: 4/3) {...}
@media (max-aspect-ratio: 1/1) {...}
@media (max-aspect-ratio: 2/3) {...}
@media (max-aspect-ratio: 1/2) {...}

result:

@media (max-aspect-ratio: 1/1) {...}
@media (max-aspect-ratio: 1/2) {...}
@media (max-aspect-ratio: 2/3) {...}
@media (max-aspect-ratio: 4/3) {...}

same result using floats in place of fractions (1.333, 1, 0.667, 0.5)

mattblackstone avatar Jan 10 '24 23:01 mattblackstone

Environment:

  • node v20.9.0
  • npm 10.1.0
  • postcss 8.4.32
  • postcss-sort-media-queries 5.2.0

mattblackstone avatar Jan 10 '24 23:01 mattblackstone

Temporary workaround to maintain order:

@media (max-aspect-ratio: 4/3) {...}
@media (max-aspect-ratio: 5/5) {...}
@media (max-aspect-ratio: 6/9) {...}
@media (max-aspect-ratio: 7/14) {...}

mattblackstone avatar Jan 11 '24 00:01 mattblackstone