Browsers mostly store longhand properties rather than shortcuts. When you write background: rgb(40, 40, 40) WebKit stores it as

style:
  0: "background-image"
  1: "background-repeat-x"
  2: "background-repeat-y"
  3: "background-attachment"
  4: "background-position-x"
  5: "background-position-y"
  6: "background-origin"
  7: "background-clip"
  8: "background-color"

And that's how Firefox stores it:

style: 
  0: "background-color"
  1: "background-image"
  2: "background-repeat"
  3: "background-attachment"
  4: "background-position"
  5: "background-clip"
  6: "background-origin"
  7: "background-size"

The differences are just about in every property. I'll probably stick to WebKit implementation.

To replicate, create an element and do the following with it:

const domElement = document.createElement('div');

domElement.style.transform = 'translate3d(0px, 0px, 0px)';

assert(domElement.style.transform === 'translate3d(0px, 0px, 0px)'); // undefined

I can only get it to work if I use this specific pattern:

const domElement = document.createElement('div');

domElement.style['webkit-transform'] = 'translate3d(0px, 0px, 0px)';

assert(domElement.style.WebkitTransform === 'translate3d(0px, 0px, 0px)');

X-issue from jsdom/jsdom#1321

I have a use case to serialize the "state" of the CSSOM.Stylesheet, not sure if this would be something useful, but I have working a gist here that exports CSSOM2JSON and JSON2CSSOM:

https://gist.github.com/pyramation/3bafcff80a4fc41b04af8834a2a0d794

Is this something that I am unaware of that already exists? I wanted to be able to write out to a JSON, and then read it back in and have a legitimate CSSOM object to work with

@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";

http://www.w3.org/TR/css3-namespace/
http://dev.w3.org/csswg/cssom/#css-namespace-rule

@import url("partial.css");
@import url("http://usercss.ru/styles/night/night.css");

Spec. WebKit implementation: CSSImportRule.cpp.

crash at parsing

var CSSOM = require('cssom');
var css;
try {
    css = CSSOM.parse(`
        @-moz-document url-prefix() {
            @media only screen{
                #main {
                    color:red;
                }
            }
        }   
    `);
    console.log(css);
}catch(e) {
/* Error
{ [Error: Unexpected } (line 8, char 3)]
  line: 8,
  char: 3,
  styleSheet: CSSStyleSheet { parentStyleSheet: null, cssRules: [ [Object] ] } }

*/
    console.log(e);
}

css = CSSOM.parse(`
    @-moz-document url-prefix() {
        #main {
            color:red;
        }
    }
    @media only screen{
        #main {
            color:red;
        }
    }
`);
console.log(css);// works

Hi, just wondering if it would be possible to remove MIT-LICENSE.txt from .npmignore. As a Linux distribution packager, we encourage upstream vendors to always include a copy of the license with their software.

Thanks!

@keyframes myfirst {
    from {background: red;}
    to {background: yellow;}
}

bug: http://nv.github.io/CSSOM/docs/parse.html#css=%40keyframes%20test%20%7B%0A%20%20%20%20from%20%7Bbackground%3A%20red%3B%7D%0A%20%20%20%20to%20%7Bbackground%3A%20yellow%3B%7D%0A%7D

everything im doing was going smooth until I tried to insert keyframes, now it's producing really weird output, can we just use ./parse.js?

Ability to serialize CSSStyleSheet object into CSS string.

CSSOM.parse("body {color: black}").toString()
-> "body {color: black}"

It might need a few options, such as indent or propertiesSeparator. Not sure about it yet.

When attempting to parse the jQuery Mobile css (http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css) a parse error is encountered at line 2457 char 77.
@-moz-document url-prefix() { .ui-select .ui-btn select { opacity: 0.0001; }}

I realize some of these rules are not standard yet (url-prefix()) or engine specific (@-moz-document). Is there a way to relax the parse? A project I'm utilizing depends upon CSSOM and consequently is not working for me due to my dependency on jQuery Mobile's CSS.

Any help or guidance would be appreciated.

Thanks!

@-moz-document url-prefix() {
  /* Only Mozilla see it */
}

https://developer.mozilla.org/en/CSS/@-moz-document

I don't know if it's a valid syntax according to W3C specifications but I sometimes see assignments like visibility:.

It seems these kind of assignments make the CSS elements disappear, so they are kind of shortcut for reassigning to default value.

This is not a big problem if you write the code yourself but this causes problems when you run javascript code in an arbitrary website. Current implementation gives a TypeError(you get undefined from array) in CSSStyleDeclaration.js file in cssText set method.

Is it possible to change the implementation for supporting assigments without a value in the way I described?

Thanks.

This used to work fine before b2507c6:

cssom.parse('body{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}');
cssom.parse('body{font-family: "times new roman";}');

This CSS:

.block-title .block-title-inner a:visited { color: #48484d; } // MAIN MENU - (used to keep mobile menu options hidden and keep weather/search and menu on one line) // #tncms-region-nav-main-nav-right-nav { float:left; } #tncms-region-main-nav-right-region { float:right; }

causes cssom to parse the selectorText

//MAIN MENU - (used to keep mobile menu options hidden and keep weather/search and menu on one line) // #tncms-region-nav-main-nav-right-nav

where it should probably just throw out that entire rule. That is what Chrome does, at least.

/* button.css */
.button {
    display: inline-block;
    
    text-align: right; /* fixes Opera */
    
    /* background-image defined in button-theme.css */
    background: no-repeat 100% -55px;
}

var css = CSSOM.parse(buttonCSS, {preserveFormatting: true})
css.cssRules[0].style.setProperty('display', 'inline');

css.toString()
-> ".button {display: inline; text-align: right; background: no-repeat 100% -55px}"

css.serialize()
-> "/* button.css */
.button {
    display: inline;
    
    text-align: right; /* fixes Opera */

    /* background-image defined in button-theme.css */
    background: no-repeat 100% -55px;
}"

I'm working on it.

@charset rule currently ends up being part of a selector:
@charset "UTF-8"; html,section { margin:0; padding:0; border:0 }

E.g. one of the GitHub CSS files:
https://a248.e.akamai.net/assets.github.com/assets/github-0c9d87dff5611078dcc29621367346a73a74b001.css

I couldn't see how to add multiple say "background" properties without clobbering previous ones, does the CSSOM even define that sort of API or am I screwed?

This is used in shadow dom: http://www.w3.org/TR/shadow-dom/#host-at-rule

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

Spec. WebKit implementation: CSSMediaRule.cpp.

hey NV,

unless I'm doing something stupid, it looks like the comma at line 29 is preventing installation:

https://gist.github.com/782028

When I take it out the JSON parses correctly.

None of CSSValue interfaces are implemented yet. #8 depends on it.

It seems feasible to use some parser generator and reuse WebKit's stuff
http://svn.webkit.org/repository/webkit/trunk/WebCore/css/tokenizer.flex
http://svn.webkit.org/repository/webkit/trunk/WebCore/css/CSSGrammar.y

Never did it before. Any pointers?

I am going to use your parser for CSS sprites generator.

It would be convenient to parse comments as properties annotations like in the following example:

.icon {
background-image: url(./arrow.png); /*sprite: spr1.png*/
width: 24px;
height: 24px;
}

{
    parentStyleSheet: null,
    cssRules: [
        {
            parentRule: null,
            parentStyleSheet: "../..",
            selectorText: ".icon",
            style: {
                0: "background-image",
                1: "width",
                2: "height",
                length: 3,
                parentRule: "..",
                _importants: {
                    "background-image": "",
                    width: "",
                    height: ""
                },
                _comments: {
                    "background-image": "sprite: spr1.png",
                },
                __starts: 6,
                "background-image": "url(./arraw.png)",
                width: "24px",
                height: "24px"
            },
            __starts: 0,
            __ends: 93
        }
    ]
}

The css comments miss

img {
border: none
}
/* test */
div{

}

run tostring ---->

img {
border: none
}

div{}

This is useful in sheets that use CSS3, say for example this:

div {
  background: -moz-linear-gradient(x);
  background: -webkit-linear-gradient(x);
  background: linear-gradient(x);
}

Gets you this styles structure:

{ '0': 'background',
  length: 1,
  parentRule: 
   { parentRule: null,
     parentStyleSheet: { parentStyleSheet: null, cssRules: [Object] },
     selectorText: 'div',
     style: [Circular],
     __starts: 0,
     __ends: 122 },
  _importants: { background: '' },
  __starts: 4,
  background: 'linear-gradient(x)' }

...which is less than ideal. Notice that the length is 1 and that the only background it knows about is the last one.

i code just like below, it seems that after i use CSSOM.parse, there is only "background: -webkit-gradient(linear, left top, left bottom, from(#feffff), to(#f4f7f9));" left.

in fact, i want to get these styles all. ：）

background: -webkit-linear-gradient(top, #feffff, #f4f7f9);
background: -moz-linear-gradient(top, #feffff, #f4f7f9);
background: -o-linear-gradient(top, #feffff, #f4f7f9);
background: -webkit-gradient(linear, left top, left bottom, from(#feffff), to(#f4f7f9));

jsdom could use d943119 in particular.

If someone needs a crossbrowser version of CSSOM.js please describe what are you intend to do with that. It is possible to remove all these __proto__ and Object.defineProperty, but I don't feel the need right now.

Loading CSSOM under PhantomJS 1.8.1 either via

$ phantomjs cssom.js

or

$ phantomjs
> phantom.injectJs("CSSOM.js");

returns a SyntaxError: Parse error

Removing the initial 'use strict'; solves that problem.

I tried going through jshint to find a possibly offending issue, but it shows me too many warnings and stops before completing.

This seems to be the canonical repo now

https://github.com/mde/jake

Here’s an illustration of the problem (see it demonstrated in this Tonic notebook):

var cssRule = require('cssom').parse('body {opacity: 0}').cssRules[0];
console.log(cssRule.cssText); // "body {opacity: 0;}"
cssRule.style.setProperty('opacity', 0.1); 
console.log(cssRule.cssText); // "body {opacity: 0.1;}"
cssRule.style.setProperty('opacity', 0);
console.log(cssRule.cssText); // "body {opacity: ;}"
cssRule.style.setProperty('opacity', '0');
console.log(cssRule.cssText); // "body {opacity: 0; opacity: 0;}"

When the cssText getter calls this.getPropertyValue(name) and the value is the Number 0, return this[name] || ""; returns the second part of the condition.

I quickly checked the spec and saw that setProperty takes value of type DOMString, and that a DOMString, by MDN’s description, is effectively just a JS string. This is already how the CSSOM.parse part of the API works, of course, so I propose having setProperty coerce it’s value argument to a string, i.e. change CSSStyleDeclaration.js:54 to:

        this[name] = value + "";

I know that font-face rule declarations have calmed down a bit in the last year or two, but I just ran into an issue parsing some generated font-face styles that I thought might crop up for other people as well:

@font-face {
    font-family: 'MyFont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#MyFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

Here are the results of using the online parser. You'll notice that the first src gets overridden by the second. I recognize that this is logical and likely even desirable behavior, but it's giving me some trouble in IE when I use the rule.toString and/or rule.cssText without that first src included.

It's simple enough for me to work around this by declaring my font-face rule differently, but when thrown into the wild, I'd like to be able to accomodate all kinds of wonky font-face declarations.

UPDATE: I apologize for not making the connection earlier, but this seems no different than #16. I'll check out #53

It's not uncommon for CSS authors to take advantage of the fact that a browser must ignore a CSS property in its entirety if a parse error or unsupported token is encountered in the value. For example:

body {
    background-image: -moz-radial-gradient(center, #a8e936, #76a326);
    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#a8e936), to(#76a326));
    background-image: -webkit-radial-gradient(center, #a8e936, #76a326);
}

If parsed and reserialized using CSSOM only the last of the three background-image properties will survive. In the project I'm working on it would be very desirable to be able to reconstruct the whole thing. I'm not sure if this falls within the scope of CSSOM -- but would it be possible to achieve that behavior somehow?

Best regards,
Papandreou

something funky in your json

    npm ERR! Error parsing json /usr/local/lib/node/.npm/cssom/0.2.0/package/package.json
    npm ERR! parse error  SyntaxError: Unexpected token }
    npm ERR! parse error      at Object.parse (native)
    npm ERR! parse error      at /usr/local/lib/node/.npm/npm/0.3.11/package/lib/utils/read-json.js:71:17
    npm ERR! parse error      at P (/usr/local/lib/node/.npm/npm/0.3.11/package/lib/utils/read-json.js:62:40)
    npm ERR! parse error      at cb (/usr/local/lib/node/.npm/npm/0.3.11/package/lib/utils/graceful-fs.js:31:9)
    npm ERR! parse error      at [object Object].<anonymous> (fs.js:86:5)
    npm ERR! parse error      at [object Object].emit (events.js:39:17)
    npm ERR! parse error      at afterRead (fs.js:843:12)

Hey, maintainer(s) of NV/CSSOM!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library NV/CSSOM is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "NV/CSSOM",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Backslash escape sequences currently aren't handled.

cross posted from jsdom issue: jsdom/jsdom#356

Using the following, I am receiving an error using jQuery 1.7:

test.html

<!doctype html>
<html>
<head>
  <script src='http://code.jquery.com/jquery-1.7.js'></script>
</head>
<body>
</body>
</html>

test.js

#!/usr/bin/env node

var fs = require('fs');
var jsdom = require('jsdom').jsdom;

var window = jsdom(fs.readFileSync('test.html')).createWindow();

window.onload = function(){
  console.log('loaded');
};

The error I receive is:

TypeError: Cannot set property cssText of [object Object] which has only a getter
    at Object.<anonymous> (http://code.jquery.com/jquery-1.7.js:1621:27)
    at Object.<anonymous> (http://code.jquery.com/jquery-1.7.js:1064:30)
    at Object.fireWith (http://code.jquery.com/jquery-1.7.js:1182:7)
    at Function.ready (http://code.jquery.com/jquery-1.7.js:437:14)
    at Object.<anonymous> (http://code.jquery.com/jquery-1.7.js:927:10)
    at Function.dispatch (/Users/brad/dev/test/node_modules/jsdom/lib/jsdom/level2/events.js:195:42)
    at Object.dispatchEvent (/Users/brad/dev/test/node_modules/jsdom/lib/jsdom/level2/events.js:285:33)
    at Object.<anonymous> (/Users/brad/dev/test/node_modules/jsdom/lib/jsdom/level2/html.js:391:12)
    at /Users/brad/dev/test/node_modules/jsdom/lib/jsdom/level2/html.js:48:20
    at Object.check (/Users/brad/dev/test/node_modules/jsdom/lib/jsdom/level2/html.js:277:11)

I think this is because CSSOM doesn't define a setter for cssText.

@-webkit-keyframes bounce {
  from {left: 0}
  to   {left: 200px}
}
div {
  -webkit-animation-name: bounce;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 10;
  -webkit-animation-direction: alternate;
}

WebKit's implementation: WebKitCSSKeyframeRule.cpp, WebKitCSSKeyframesRule.idl.

I'm looking to use cssom alongside jsdom to validate (and expunge unused) css rules.

Cssom has saved me quite a bit of time but It seems like selectors separated by commas aren't treated as individual rules by cssom.

In my app the logic looks like:

1. Set user-agent and request webpage
2. Foreach CSS file
3. Foreach selector
4. Use jquery to count references to the current selector and store the count in a "registry"

The following is a log excerpt showing selectors read from the css file:

• Setting UA: Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3
• Window Dimensions: 1024x768
• Has document.getElementsByTagName: true
• Processing css/ui.css:
• Regsitry File Key: ui_css
• Number of rules: 3296
  
• Counting references to .ui-slider-vertical .ui-slider-range-max [cls_ui-slider-vertical_-_cls_ui-slider-range-max]
• Counting references to .ruler [cls_ruler]
• Counting references to .ruler_time [cls_ruler_time]
• Counting references to .ui-state-default1, .ui-widget-content .ui-state-default1 [cls_ui-state-default1,_-cls_ui-widget-content-_cls_ui-state-default1]
• Skipping pseudo selector ".ui-state-default1 a, .ui-state-default1 a:link, .ui-state-default1 a:visited"
  

The rules above (with the last two showing commas) are from the jQuery UI CSS Framework:

.ui-state-default1, .ui-widget-content .ui-state-default1 { background: url(/js/sliders/aerow_normal.gif) 50% 50% no-repeat; font-weight: normal; color: #555555; outline: none; }
.ui-state-default1 a, .ui-state-default1 a:link, .ui-state-default1 a:visited { color: #555555; text-decoration: none; outline: none; }

node v0.11.2

pi@raspberrypi ~ $ npm -g install jquery
npm http GET https://registry.npmjs.org/jquery
npm http 304 https://registry.npmjs.org/jquery
npm http GET https://registry.npmjs.org/htmlparser/1.7.6
npm http GET https://registry.npmjs.org/xmlhttprequest
npm http GET https://registry.npmjs.org/location/0.0.1
npm http GET https://registry.npmjs.org/navigator
npm http GET https://registry.npmjs.org/contextify
npm http GET https://registry.npmjs.org/jsdom
npm http 304 https://registry.npmjs.org/location/0.0.1
npm http 304 https://registry.npmjs.org/htmlparser/1.7.6
npm http 304 https://registry.npmjs.org/xmlhttprequest
npm http 304 https://registry.npmjs.org/jsdom
npm http 304 https://registry.npmjs.org/navigator
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] 'repositories' (plural) Not supported.
npm WARN package.json Please pick one as the 'repository' field
npm http 304 https://registry.npmjs.org/contextify
npm http GET https://registry.npmjs.org/bindings
npm http 304 https://registry.npmjs.org/bindings

[email protected] install /opt/node/lib/node_modules/jquery/node_modules/contextify
node-gyp rebuild

npm http GET https://registry.npmjs.org/cssom
npm http GET https://registry.npmjs.org/cssstyle
npm http GET https://registry.npmjs.org/request
npm http 304 https://registry.npmjs.org/request
npm http 304 https://registry.npmjs.org/cssstyle
npm http 304 https://registry.npmjs.org/cssom
npm ERR! Failed to parse json
npm ERR! Unexpected end of input
npm ERR! File: /home/pi/.npm/cssstyle/0.2.3/package/package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! This is not a bug in npm.
npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm ERR! System Linux 3.6.11+
npm ERR! command "/opt/node/bin/node" "/opt/node/bin/npm" "-g" "install" "jquery"
npm ERR! cwd /home/pi
npm ERR! node -v v0.11.2
npm ERR! npm -v 1.2.21
npm ERR! file /home/pi/.npm/cssstyle/0.2.3/package/package.json
npm ERR! code EJSONPARSE
npm ERR! Error: ENOENT, lstat '/opt/node/lib/node_modules/jquery/node_modules/htmlparser/testdata/.tmp_trackerchecker.html.65425~'
npm ERR! If you need help, you may report this log at:
npm ERR! http://github.com/isaacs/npm/issues
npm ERR! or email it to:
npm ERR! [email protected]

npm ERR! System Linux 3.6.11+
npm ERR! command "/opt/node/bin/node" "/opt/node/bin/npm" "-g" "install" "jquery"
npm ERR! cwd /home/pi
npm ERR! node -v v0.11.2
npm ERR! npm -v 1.2.21
npm ERR! path /opt/node/lib/node_modules/jquery/node_modules/htmlparser/testdata/.tmp_trackerchecker.html.65425~
npm ERR! fstream_path /opt/node/lib/node_modules/jquery/node_modules/htmlparser/testdata/.tmp_trackerchecker.html.65425~
npm ERR! fstream_type File
npm ERR! fstream_class FileWriter
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR! fstream_stack /opt/node/lib/node_modules/npm/node_modules/fstream/lib/writer.js:284:26
npm ERR! fstream_stack Object.oncomplete (fs.js:94:15)
gyp ERR! UNCAUGHT EXCEPTION
gyp ERR! stack Error: ENOENT, no such file or directory
gyp ERR! stack at Object.exports.resolve (path.js:323:52)
gyp ERR! stack at findConfigs (/opt/node/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:324:25)
gyp ERR! stack at Object.oncomplete (fs.js:94:15)
gyp ERR! System Linux 3.6.11+
gyp ERR! command "node" "/opt/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"

/opt/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js:119
log.error('cwd', process.cwd())
^
Error: ENOENT, no such file or directory
at errorMessage (/opt/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js:119:28)
at issueMessage (/opt/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js:125:3)
at process. (/opt/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js:109:3)
at process.EventEmitter.emit (events.js:97:17)
at process._fatalException (node.js:272:26)
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/pi/npm-debug.log
npm ERR! not ok code 0

Can somebody comment on this? Thanks!

var CSSOM = require("cssom")
var rule = "p { background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20fill%3D%22url(%23a)%22/%3E%3C/svg%3E'); }";
var ast = CSSOM.parse(rule);

throws error: Unmatched ' (line 1, char 141)

This is, arguably, OK to not parse; the data URL contains unescaped bracket characters. However, throwing a final error and terminating the parse is a bit unfriendly. This is likely caused by the parser jumping ahead from the ( to the next ) without checking for more opening brackets in the intervening space.

Hi, wanted to try CSSOM but unfortunately i got:

TypeError: Object# has no method 'existsSync'

when I ran: ./node_modules/.bin/jake

What I am doing wrong?
System is: Ubuntu 12.04
npm -v: 1.1.4
node -v: v0.6.12

Thanks

@font-face {
  font-family: Chunkfive;
  src: url('Chunkfive.otf');
}
h1 {
  font-family: Chunkfive, Georgia, serif;
}

Spec. WebKit implementation: CSSFontFaceRule.cpp.

require('cssom').parse("body{background-image: url(')');}")

Output:

Error: Unmatched ' (line 1, char 30)
    at CSSOM.parse.parseError (/home/andreas/work/CSSOM/lib/parse.js:54:15)
    at Object.parse (/home/andreas/work/CSSOM/lib/parse.js:101:6)
    at repl:1:25
    at REPLServer.self.eval (repl.js:109:21)
    at Interface.<anonymous> (repl.js:248:12)
    at Interface.EventEmitter.emit (events.js:96:17)
    at Interface._onLine (readline.js:200:10)
    at Interface._line (readline.js:518:8)
    at Interface._ttyWrite (readline.js:736:14)
    at ReadStream.onkeypress (readline.js:97:10)

It's caused by parse.js handling ( in a CSS value in a rather naive way: index is advanced to the first occurrence of ) regardless of whether that's inside a quoted string, eg. url('...)') or url("...)").

The error occurs "in real life" with this file: https://github.com/ajaxorg/ace/blob/master/lib/ace/css/editor.css#L305

Is there a way to extend functionality for things like nested rules in Less etc?

@page {
  margin-left: 3cm;
}
@page :left {
  margin-left: 4cm;
}

http://www.w3.org/TR/CSS2/page.html
http://dev.w3.org/csswg/cssom/#css-page-rule

WebKit implementation: CSSPageRule.cpp.

Travis CI: Node.js.
Testling for browsers.