Merging @media Queries

[nathanziarek]

(I'm not sure how to submit a non-issue feature request. My apologies if this is incorrect.)

When using the Bootstrap mixins of LESSCSS, you end up with a number of media queries referencing the same break point with very small bits of CSS within them. Merging these together would save significant space. For example, LESSCSS outputs...

@media (max-width: 100) { 
    .product { width: 10px }
}
@media (max-width: 150) { 
    .image { width: 10px }
}
@media (max-width: 100) { 
   .tree { width: 10px } 
}

...and with @media query merging, would become...

@media (max-width: 100) {
    .product { width: 10px }
    .tree { width: 10px }
}
@media (max-width: 150) {
    .image { width: 10px }
}

[kizu]

That is unsafe minification. Imagine you have an element with both classes: <div class="tree image"></div>, then if the value of width was different, like

@media (max-width: 100) { 
    .product { width: 10px }
}
@media (max-width: 150) { 
    .image { width: 20px }
}
@media (max-width: 100) { 
   .tree { width: 10px } 
}

then after the merge:

@media (max-width: 100) {
    .product { width: 10px }
    .tree { width: 10px }
}
@media (max-width: 150) {
    .image { width: 20px }
}

The values would swap places. And on viewport that would trigger both media queries the width on that element after the minification won't be equal to the one before.

[nathanziarek]

Makes perfect sense. Sorry again for using the "issues" area incorrectly, but thank you for the response...

[wheresrhys]

But the reason it's an invalid minification is due to changing order of the style declarations, not specifically because of media queries e.g. the following would be invalid for the same reason

.product { width: 10px;height: 10px; }
.image { width: 20px, height: 20px; }
.tree { width: 30px; height: 10px; } 

then after the merge:

.product, .tree { height: 10px; }
.product { width: 10px;}
.image { width: 20px; height: 20px; }
.tree { width: 30px; } 

... and I presume csso protects against this kind of error. Similar logic could apply the same sort of protections when merging media queries.