Question

My site uses YUI Compressor to minify CSS and it’s removing the space preceding !important which makes the css declaration not work. Is there a way to prevent it from doing this?

Pre-Compression

@media screen and (max-width: 1146px) {
    #controls_zoom {display:none !important}
}
@media screen and (max-width: 1060px) {
    #controls_views {display:none !important}
}
@media screen and (max-width: 925px) {
    #controls_pagination {display:none !important}
}
@media screen and (max-width: 587px) {
    #ybNewSearchContainer {display:none !important}
}

Post-Compression

@media screen and(max-width:1146px){#controls_zoom{display:none!important;}}@media screen and(max-width:1060px){#controls_views{display:none!important;}}@media screen and(max-width:925px){#controls_pagination{display:none!important;}
}@media screen and(max-width:587px){#ybNewSearchContainer{display:none!important;}}

UPDATE

After reviewing some posts online, I see it’s actually an issue with the removed space following and in the @media screen and( part of my media query.

Answer 1

This bug was fixed in a newer version of YUI Compressor as noted here:

http://www.456bereastreet.com/archive/201012/yui_compressor_and_css_media_queries/

The bug for this is logged here:

http://yuilibrary.com/projects/yuicompressor/ticket/2528087