@media rules support about cssom HOT 8 OPEN

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

from cssom.

@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 }

from cssom.

Fixed in e7ede8f. 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.

from cssom.

Nice, thanks!

from cssom.

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.

from cssom.

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

from cssom.

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

from cssom.

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

from cssom.