@media rules support

[NV]

@media handheld, only screen and (max-device-width: 480px) {
    body {overflow: auto}
}

Spec. WebKit implementation: CSSMediaRule.cpp.

[NV]

3 of 4 @media tests are passed. Fails on crazy case: @mediaall {}.

[frank06]

@media only works when it's the first character of the input string. If you put something else before it, it breaks. In my app, I get an exception: unexpected }.

I tried testing the following with qunit:

input: "span {display: inline-block !important; vertical-align: middle !important}\n@media/**/print {*{background:#fff}}",

Test doesn't fail, but is not even executed? Strange.

---

An anecdote aside: The following snippet (nothing really fancy) causes all CSSOM, JSCSSP and Sheet.js to break or not behave properly.

.app {}

.test { color: blue }

/****************************************************************
*  Style for small screens
****************************************************************/

@media handheld, only screen and (max-device-width: 480px) {
    body {overflow: auto}
}

table td, table th { border: 0 }

[NV]

Fixed in e7ede8f7371b764e9eadbebc9205c2e0a6bc0bc0. Thanks for bug report!

Test doesn't fail, but is not even executed? Strange.

Seems like a QUnit bug.

The following snippet (nothing really fancy) causes all CSSOM, JSCSSP and Sheet.js to break or not behave properly.

Looks good now.

[frank06]

Nice, thanks!

[alejandroiglesias]

Also, it should allow nested @media rules. Not sure if it's part of the spec, but it's used for Sass source maps for debug info in this way:

@media screen and (min-width: 35.62em) { @media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/alejandro\/Development\/myproject\/scss\/app-blocks\/header\.scss}line{font-family:\000032}}
  .header { height: auto; } }

Currently CSSOM.js fails at it throwing and error, but works fine when removing the inner @media.

/Users/alejandro/Development/myproject/node_modules/ucss/node_modules/cssom/lib/parse.js:57
        throw error;
              ^
Error: Unexpected } (line 170, char 29)

I'm using CSSOM.js indirectly using operasoftware/uCSS.

This would be greatly appreciated by the Sass community.

[vectart]

Yep, these @media rules break CSS parsing while using juice .

[Rowno]

I'm getting errors parsing CSS with nested @media rules as well.

@media rules can be nested in CSS3, but it wasn't valid in CSS2.1. http://stackoverflow.com/a/11747166/247989

[dyatko]

Hello @vectart, me from 2014. Surprising that I've faced the same issue 5 years later. Well, the issue is 9 years old though.