fmarcia / uglifycss

Port of YUI CSS Compressor from Java to NodeJS
MIT License
284 stars 37 forks source link

When minifying, it changes the order! #42

Closed SathishGovindaraju closed 8 years ago

SathishGovindaraju commented 8 years ago

I have a css file which has lots of @media queries. When setting minify: true it combines all the same @media query together which screws the order of my css rules!

Consider the following rules in a css file,

@media (min-width:46.25em) {
    .c-tooltip--hover:hover .c-tooltip__content, .is-active .c-tooltip__content {
        width: 20em
    }
}

@media (min-width:20em) {
    .c-class-name {
        height: 30em
    }
}

@media (min-width:46.25em) {
    .c-class-name {
        height: 40em
    }
}

when setting minify:true, the above code gets minified into the following,

@media (min-width:46.25em) {
    .c-tooltip--hover:hover .c-tooltip__content, .is-active .c-tooltip__content {
        width: 20em
    }
    .c-class-name {
        height: 40em
    }
}

@media (min-width:20em) {
    .c-class-name {
        height: 30em
    }
}

Now if you see the .c-class-name 's height: 40em has been grouped with the other rules for the same @media query rule. This has changed the order of css which breaks styling of my elements on the page.

SathishGovindaraju commented 8 years ago

Sorry, ignore the above issue! posted it in the wrong place!! Delete it :(