CSSOM

CSSOM.js is a CSS parser written in pure JavaScript. It also a partial implementation of CSS Object Model.

CSSOM.parse("body {color: black}")
-> {
  cssRules: [
    {
      selectorText: "body",
      style: {
        0: "color",
        color: "black",
        length: 1
      }
    }
  ]
}

Parser demo

Works well in Google Chrome 6+, Safari 5+, Firefox 3.6+, Opera 10.63+. Doesn't work in IE < 9 because of unsupported getters/setters.

To use CSSOM.js in the browser you might want to build a one-file version that exposes CSSOM global variable:

➤ git clone https://github.com/superlc/CSSOM.git
➤ cd CSSOM
➤ npm install -d
➤ ./node_modules/.bin/jake
build/CSSOM.js is done

To use it with Node.js or any other CommonJS loader:

➤ npm install cssom-maxim

Fix the situation : one property has multiple values

You parse CSS to mungle, minify or reformat the following code:

div {
  display : -webkit-box;
  display : -webkit-flex;
  display : flex;
}

This pattern is often used to give browsers that don’t understand flex grid a fallback solution. In old CSSOM, the last same-name property always overwrites all the previous ones.But in css-maxim,store the value in an array like

CSSOM.parse("div {display : -webkit-box;display : -webkit-flex;display : flex;}")
    -> {
      cssRules: [
        {
          selectorText: "div",
          style: {
            0: "display",
            display: ['-webkit-box','-webkit-flex','flex'],
            length: 1
          }
        }
      ]
    }