If you want to avoid having to create a file to use a different @media, simply don't specify 'media' in the module definition and use them both inside the css file:

• module

{

styles: [ foo.css ]

}

• css

@media ... {
}
@media .. {
}

That works fine.

Supporting it inside a module that has 'styles: { "foo.css" => "screen" }' is not possible because:

We doesn't use the media attribute on the <link> or <style> element because we concatenate stylesheets (in load.php requests that are only=styles[1]).

As a result, the @media in your css file is a second level @media. Though we don't strip that out, it would fail in any browser that doesn't support css3-mediaqueries. However, as said, it isn't not-supported so if css3-only is acceptable, you can do so already.

The only way around it is to strip those sections out and wrap the individual subsections outside the user @media, and then modify the rules of the user @media. That'd get quite hacky, but its possible. Is it worth that?

[1] we also concatenate them in <style> for IE, but that's another story which could be avoided if we hack something in js.

(In reply to comment #1)

...

The only way around it is to strip those sections out and wrap the individual
subsections outside the user @media, and then modify the rules of the user
@media. That'd get quite hacky, but its possible. Is it worth that?

...

https://gist.github.com/dantman/5323001.

CSS has well defined and simple rules we can use to pick out the @media entries in the files. And the queries inside @media itself are also defined well enough with similar rules for us to combine rules together.

It's not much more hacky than the @embed, @noflip, flipping, and concatenation we already do.