New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merging @media Queries #162

Closed
nathanziarek opened this Issue Dec 5, 2013 · 3 comments

Comments

Projects
None yet
3 participants
@nathanziarek
Copy link

nathanziarek commented Dec 5, 2013

(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

This comment has been minimized.

Copy link

kizu commented Dec 5, 2013

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

This comment has been minimized.

Copy link

nathanziarek commented Dec 5, 2013

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

@wheresrhys

This comment has been minimized.

Copy link

wheresrhys commented Dec 9, 2013

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.

@peterbe peterbe referenced this issue Sep 6, 2018

Merged

parse style tags #260

5 of 6 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment