Question

Update 2018: This question was asked long before PostCSS existed, and I would have probably used that.

I’d like to parse a blob of CSS into an AST so I can add prefixes to certain CSS directives.

Is there a CSS parser for JavaScript or Node that will do this?

I’ve searched NPM. The only useful result I’ve found is parser-lib, but it’s stream-based and it looks like I’ll need to write my own emitter for every CSS node.

Update: I also found JSCSSP, but it has no documentation…

Answer 1

Update: I previously mentioned JSCSSP, which is buggy seems to be abandoned. Obviously enough, the css module on NPM is the best:

css = require 'css'

input = '''
  body {
    font-family: sans-serif;
  }
  #thing.foo p.bar {
    font-weight: bold;
  }
'''

obj = css.parse input
sheet = obj.stylesheet

for rule in sheet.rules
  rule.selectors = ('#XXX ' + s for s in rule.selectors)

console.log css.stringify(obj)

Output:

#XXX body {
  font-family: sans-serif;
}
#XXX #thing.foo p.bar {
  font-weight: bold;
}