search

css / csso

CSS minifier with structural optimizations
https://css.github.io/csso/csso.html
MIT License
3.74k stars 187 forks source link

Media query order with forceMediaMerge:true #424

Open davidhirtz opened 3 years ago

davidhirtz commented 3 years ago

I would love to have an option to define the media query order when the forceMediaMerge is true. Currently I setup all media queries on the top of the CSS with an unused element in the order I need (for example mobile first):

@media (min-width: 375px) {
  ._ {
    width: 375px;
  }
}

@media (min-width: 415px) {
  ._ {
    width: 415px;
  }
}

This is an ok solution but it creates unnecessary declarations. I tried to create empty media queries with /*! ... */ comments, but those get stripped inside media queries even with comments set true and thus will not preserve the correct order.

Is there a better solution? Thank you very much!

lahmatiy commented 3 years ago

Is it a specific order or we may to sort it somehow? I don't know actually how to handle it except option to sort media or specify an order of queries.

davidhirtz commented 3 years ago

For most use cases I think a mobile first approach would be best (or the option to reverse it) for sorting. Lowest min-with, max-width, min-height, and max-height to highest, if this is even possible? Let me know if I should provide more examples and thank you for the consideration! :)

lahmatiy commented 3 years ago

Yeah, examples would be helpful! I thought that sorting by min/max-width/height might be a good option. We may implement it in the future, but currently no good "parser" for media queries, so it might be problematic.

davidhirtz commented 2 years ago

You might want to take a look at this plugin, it has a semi-optimal sort option: https://github.com/hail2u/node-css-mqpacker