Problem with @media

[matt]

Hi,

I've been using Juicer to modularize my CSS, and it's been great.
However, I've run into a case where it doesn't seem to work. I'm
using Juicer 1.0.2 without the YUI Compressor. (I usually use YUI
Compressor, but not while testing this case.)

When I tried modularizing the print media CSS, Juicer did not process
any @import statements inside the @media block. Here's an example

@import "file1.css";
@import "file2.css";
@media print{
@import "print1.css";
@import "print2.css";
}

The output contains an empty @media block:

@media print {

}

I could put my print CSS in a separate file built with Juicer, but
that would require another HTTP request, and I'd like to avoid that.
(Yes, it matters.)

I also tried the W3C media dependency version of @import:

@import "print1.css" print;

It seems Juicer is unaware of the media type -- the output didn't
reflect it.

Another possibility I haven't validated is to have the a complete
media block in each included file, but this is sub-optimal due to the
extra bytes for the repeated "@media ..." strings. (I want to
generate the minimum file size possible.)

The best option I can think of is for Juicer to handle the nested
@import statements. Is there a way to do it? If not, what is the
best option?

Thanks!

[Christian Johansen]

Hi Matt,

On Wed, Mar 24, 2010 at 19:42, matt <matthew....@gmail.com> wrote:

I've been using Juicer to modularize my CSS, and it's been great.

Glad you like it!
 

However, I've run into a case where it doesn't seem to work.  I'm
using Juicer 1.0.2 without the YUI Compressor.  (I usually use YUI
Compressor, but not while testing this case.)

When I tried modularizing the print media CSS, Juicer did not process
any @import statements inside the @media block.  Here's an example

@import "file1.css";
@import "file2.css";
@media print{
@import "print1.css";
@import "print2.css";
}

The output contains an empty @media block:

@media print {

}

This is definitely a bug in Juicer. As of now Juicer does not support @media at all. Juicer takes care only to process @import's found before the first line of code, in order to speed things up. Additionally it removes all @import statements when done, which obviously does not make sense when it is removing statements that wasn't processed. This needs to be fixed, but I'm afraid I don't have time to fix it very soon. If someone wants to chip in, please do!
 

I could put my print CSS in a separate file built with Juicer, but
that would require another HTTP request, and I'd like to avoid that.
(Yes, it matters.)

Yeah, Juicer shouldn't force you to do anything you don't want to.
 

I also tried the W3C media dependency version of @import:

 @import "print1.css" print;

It seems Juicer is unaware of the media type -- the output didn't
reflect it.

Yet another case Juicer does not support. What's the best way for Juicer to process this? To inline the file inside a @media block? Are those equivalent, and more importantly, is browser support the same for @import file mediatype; and  @media mediatype { css }?

--
MVH
Christian