Media Query support seems to be missing

[Dani]

I found and tried Juicer today. It works very nicely to merge
"standard" imports. Unfortunatly, I use imports together with media
queries in order to differ and redefine some styles for different
output medias such as print, small screen devices (smart phones), ...

My import statements for instance look like this:
@import url(style-sc.css) screen;
@import url(style-pr.css) print, handheld;
@import url(style-lg.css) screen and (min-width: 801px);
@import url(style-sm.css) screen and (max-width: 800px), only screen
and (max-device-width: 960px);

Unfortunatly the media queries are lost in the merged result file.

I would expect that an import statement such as:
@import url(style-sm.css) screen and (max-width: 800px), only screen
and (max-device-width: 960px);

would be translated to:

@media screen and (max-width: 800px), only screen and (max-device-
width: 960px) {
/* Content of style-sm.css */
}

For now I prefer to keep those styles in separate files as it
simplifies developement. For releasing I am using an Ant-Task which
makes the page production ready (i.e. compressing java scripts using
the YUI Compressor). I would have included Juicer as build step in
that script. Unfortunatly it seems that I have to continue searching
for a solution for my problem.

[MRoderick]

Nice discovery, thanks for sharing it.

I'll take a look at it soon, and will post my findings here (unless
Christian beats me to it and fixes it before I do).

/Morgan

[cjohansen]

Nice discovery indeed. Morgan has taken a shot at implementing it
today, and it appears to not be trivial to implement with the way
Juicer is currently built. I'll be giving this some thought, as it
would be nice to support.

There is one thing you can do now to work around this. If the file
separation is only for development purposes, consider moving the media
queries into the included files. That way Juicer will understand and
properly handle the imports, and the media queries will not be killed.
Sure, this will cause all the files to be loaded while in development,
but if that isn't a problem, I'd consider that a viable work-around.

What do you think?

Christian

[Dani]

Thanks a lot for the hints and the effort you put in improving Juicer.

For the meantime I created my own solution - a short 80-line
Javaprogram, which manages to merge my css files and can be included
in the ant-build I am using. It is far from perfect and bases on some
assumptions (i.e. each import instruction has to be on one dedicated
line.) If somebody wants, I can publish the source code.

One thing I figured during implementation, which might be important.
Eventhough import instructions have to appear as the very first
content in a css-file. The imported css instructions must go to the
end of that file. This is especially important, when some imported
instructions overwrite other instructions. Especially when usining
media queries, I heavily redfine elements which were already described
earlier int the base- or other files.

[MRoderick]

Great feedback!

Could you provide examples of the input and expected output as
described?
We can use that for ensuring the future versions of Juicer plays
nice :)

/Morgan