@Media CSS entries dropped

[deriknel]

When Minifying using the latest package, all @media entries in my CSS are lost when the minification completes. When i inspect the minified version of my CSS the @media rules are gone.

[ceesvanegmond]

@deriknel Does it only not work on the latest release?

[amalfra]

I too get that. I think its issue with the cssmin library... How about using this : https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port

[ceesvanegmond]

@amalfra that isn't unfortunately an composer package. I don't have that problem with the @media entries. Could you give me som examples in code?

[amalfra]

@ceesvanegmond Oops, you are right.. I am not getting any issue now. But, i got some problem with @media some time before. I also, remember some problem with @font-face.. Did you get any with @font-face?

Oh, the YUI port isn't composer compatible. I didn't notice that.... How about packaging that class within?

[ceesvanegmond]

@amalfra @deriknel I don't have any problem with @font-face or @media. @deriknel Could you give an code example what goes wrong?

[deriknel]

In my CSS I'll have something like this:

@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
min-height: 1300px;
border-left: 1px solid #e7e7e7;
}
}

Once it goes through the minify process, and I inspect my source, those entries would not be available anymore and the styling for the page would be all messed up. I am also getting this with @font-face entries. If I remove those files from the CSS minify process, and just add them to the page normally, they would render just fine and the layouts etc. would display as expected.

{{ HTML::style('/path/to/style.css') }}

I am currently using the latest version: "ceesvanegmond/minify": "2.0.*"

To add them to the page, I use: {{ Minify::stylesheeet(['/path/to/style.css']) }} with the list of files I would like to be minified. Should I be using a different method maybe?

[ceesvanegmond]

Hi, @deriknel,

@media(min-width:768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 250px;
        padding: 0 30px;
        min-height: 1300px;
        border-left: 1px solid #e7e7e7;
    }
}

I don't know if that is valid CSS code. When i minify this piece of code, I get the same result as you do.
The way I know how it works is the following:

@media screen and (min-width: 768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 250px;
        padding: 0 30px;
        min-height: 1300px;
        border-left: 1px solid #e7e7e7;
    }
}

When minifying this piece of code, the result is as expected. See http://webdesignerwall.com/tutorials/css3-media-queries for explanation.