Parse Text CSS into JSON with Javascript

Question

I just simply want something that will take a textarea full of CSS and turn it into JSON using the CSS JSON method.

{
    "selector-1":{
        "property-1":"value-1",
        "property-n":"value-n"
    }
}

http://www.featureblend.com/css-json.html

Does anyone know of something that will decode CSS into JSON? It would also be helpful if it could encode it as well.

Answer 1

This js parser has both methods you are looking for.

CSS JSON parser

// To JSON
var json = CSSJSON.toJSON(cssString);

// To CSS
var css = CSSJSON.toCSS(jsonObject);

Or jQuery plugin parser.

jQuery parser

Example css:

div div:first {
  font-weight: bold;
  -jquery: each(function() {alert(this.tagName);})
}

div > span {
  color: red;
}

JSON output sent to the callback:

{
  'div div:first' : {
    'font-weight' : 'bold',
    '-jquery': 'each(function() {alert(this.tagName);})'
  },
  'div > span' : {
    'color': 'red'
  }
}

You can apply css string to an element like this:

var cssJSON = '{ "display": "none" }';
var obj = JSON.parse(json);

$("#element").css(obj);