Search code examples
csscompressionyuimedia-queriesyui-compressor

Prevent YUI Compressor from stripping space preceding !important


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.


Solution

  • 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