Comments (8)
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.
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.
Related Issues (20)
- Why @charset rules doesn't appear HOT 1
- Why it can not parse (div span a{color: #789}) into tree nodes? HOT 1
- Can't parse @font-face nested in @media. HOT 3
- Nested media queries HOT 3
- CSSMediaRule should derive from CSSConditionRule HOT 1
- material-ui - JSS issues
- Error: Could not parse CSS stylesheet HOT 4
- parseError on @media print {
- "font-size" not accessible
- Security Policy
- ")" not found when trying to import font with multiple weights HOT 3
- should not remove spaces in calc() function HOT 4
- restore master branch HOT 1
- missing CSS.escape HOT 1
- CSSTransformValue HOT 1
- parse: Unexpected } (line 1, char 43385) HOT 2
- @supports bug HOT 2
- Wrong type for CSSKeyframesRule and CSSKeyframeRule HOT 1
- CSSFontFaceRule is missing from npm package exports HOT 4
- npm package is missing several exports HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cssom.