cssFileCompress issue with nested media query

[max-dreamsoft]

Source css file contained

@media screen and (min-width: 992px) {
    .header-navigation li {
        display: inline-block;
        padding-top: 3px;
        padding-right: 3px;
        padding-left: 3px;
        text-align: center
    }
    .header-navigation li a {
        text-transform: none
    }
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        /* Safari and Chrome */
        .header-navigation li a {
            letter-spacing: 1px
        }
    }
    /* Only Chrome */
    @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
        .header-navigation li a {
            letter-spacing: 2px
        }
    }
}
@media screen and (min-width: 1024px) {
...

which became (beautified)

@media screen and (min-width: 992px) {
    .header-navigation li {
        display: inline-block;
        padding-top: 3px;
        padding-right: 3px;
        padding-left: 3px;
        text-align: center
    }
    .header-navigation li a {
        text-transform: none
    }
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .header-navigation li a {
            letter-spacing: 1px
        }
    }
    @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
        .header-navigation li a {
            letter-spacing: 2px
        }
    }
    @media screen and (min-width: 1024px) {
    ...

Note that final closing curly bracket on "min-width: 992px" section is missing

[nsanden]

Same here. The work around is to disable cssFileCompress with

'cssFileCompress' => false

and then use cloudflare to compress css file