hudochenkov / postcss-sorting

PostCSS plugin to keep rules and at-rules content in order.
MIT License
517 stars 31 forks source link

Feature request: sort simple media queries by query parameter values #105

Closed derSascha closed 1 year ago

derSascha commented 2 years ago

Thanks for the great postcss plugin! Having some trouble with Bootstrap that uses the fact that only the last matching rule is used in browser:

@media (min-width: 768px) { .col-md-2: { width: 16%; } }
@media (min-width: 992px) { .col-lg-3: { width: 25%: } }

Sorting them in the wrong order breaks them. Not sure if it might be possible to sort simple media queries that contain only a min-width or a max-width query by numbers. Something like this:

@media (min-width: 576px) { ... }
@media (max-width: 767.98px) { ... }
@media (min-width: 768px) { ... }
... more complex queries
hudochenkov commented 1 year ago

Look into at-rule's parameter https://github.com/hudochenkov/postcss-sorting/blob/master/lib/order/README.md#extended-at-rule-objects

Something like:

{
    type: 'at-rule',
    name: 'media',
    parameter: '(min-width: 576px)'
}

You would need to specify every parameter.