Parser generator?

[NV]

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?

[frank06]

Ah, interesting! Precisely yesterday I was looking for a CSS grammar/tokenizer... but also haven't done this before.

Definitely check this out: http://zaach.github.com/jison/

[tj]

isnt css lovely :) giant clusterfuck of inconsistencies. does cssom work with node? you should publish to npm

[NV]

CSS has a lot of crap that nobody uses anyway (@page, @top-left-corner, ...).

Yes, it does work with node. Although, I haven't bothered yet to run tests on Node (I run them in the browser).

I'll publish it to npm today.

[NV]

Published. npm install cssom.

[jacobstr]

Was exploring this same possibility with. I want to be able to parse css files and mutate them. I.E:

style = parse("background:url('test.jpg') red no-repeat; background-color:blue");
style.bgColor;

"blue" # correctly overrides the initial red shorthand

style.bgImage;

"test.jpg" # gives me the image url rather than url('sdfas.jpg')

style.bgImage = 'awesome.jpg';
style.cssText

"background:url('awesome.jpg') red no-repeat; background-color:blue" # Serialize new css. Maintaining a similar structure isn't necessary. I.E. Expanding all shorthand properties would be okay too.

Your project looks promising for this purpose. I'm reluctant to dive in because I've seen some massive implementations (jscssp) that would need to be tweaked to create a nice object model. Then potentially you have to keep up with the spec.

See also: http://stackoverflow.com/questions/5437835/parsing-css-2-1-with-the-correct-css-parsing-conventions-in-antlr

They state this might not be the best idea since (antlr at least) "does not express parsing conventions, only syntax."

[NV]

It's not here yet, but I'll do it some day (#8).

What task are you trying to accomplish? I might want to use a headless browser like phantomjs.

[jacobstr]

Basically a live CSS editor. You have various page elements (defined by selectors) and you can edit the CSS of each one. The interface needs to be able to read the CSS and load the values into a user interface (i.e. modify border thickness with a jQuery ui slider). The UI manipulates the values, then exports a new stylesheet. The styles you're manipulating don't necessarily appear on the page where the css editor is present.

One of the possibilities I've explored is simply using the DOM and jQuery's css function. The problem here is that if you don't have a document that matches your css selectors, the values will be undefined. This hack might work if you generate temporary doms for each CSS rule you encounter - which should be less tricky than parsing css.

I.E.

css: h1 span.awesome:last-child { border: 1px solid purple }
generated markup: <div id="unique"><h1><span class="awesome"></span></h1></div>
jQuery('<div ...>...markup above...</div>').css('border-color');

There's certain caveats. You'd have to isolate this DOM somehow so that other styles in your website don't interact, but that's what the unique id could be used for. You prefix the selectors accordingly and inject them into your document.

[NV]

One of the possibilities I've explored is simply using the DOM and jQuery's css function. The problem here is that if you don't have a document that matches your css selectors, the values will be undefined

You can access a stylesheet via document.styleSheets. Take a look at CSSOM spec (don't be confused with CSSOM.js library).

My old take on CSS editor.