How to convert a JSON object (created by jquery-css-parser) back to valid CSS code? [closed]


Tags: javascript,jquery,css,json,parsing

Problem :

We are currently using the following jQuery plugin on our project to parse CSS to a JSON object.

http://bililite.com/blog/2009/01/16/jquery-css-parser/#parserdetails

We now require to parse back the JSON object to CSS ("as a string") as well.

I couldn't find a way to parse back from a JSON object to CSS using this plugin. It parses the CSS to JSON great, and the structure it uses is just what we need, but we also need a way to parse back the JSON object to CSS.

Is there any possible solution that can parse back the JSON object that this plugin generates back to CSS ?

Example JSON object to deserialize:

{
  'div div:first' : {
    'font-weight' : 'bold',
    'color': 'rgba(255,255,255,0.5)'
  },
  'div > span' : {
    'color': 'red'
  }
}

Further info: I may be missing a feature of this plugin that does just that, but I did look quite closely at the docs.

I also came across this plugin that parses to JSON and back, but the JSON format is wayyy too off from the one we are currently using. https://github.com/aramk/CSSJSON



Solution :

Try this:

var cssString = "";

// cssJSON would be the JavaScript object representing your CSS.
for (var objKey in cssJSON) {

    // objKey is the name of the key in the JavaScript object.
    // In this case, it's also the CSS selector.
    cssString += objKey + " {";

    var cssProperties = cssJSON[objKey];
    for (var cssPropertyName in cssProperties) {
        cssString += cssPropertyName + ": " + cssProperties[cssPropertyName] + ";";
    }

    cssString += "}";
}

Be advised: I have not tested this code, so please use at your own risk. There may be some edge cases that this doesn't account for.


    CSS Howto..

    How to use custom css with bootstrap css

    LESS CSS - Adding a percentage to a hex color - How does this work?

    How to dynamically import javascript and css files

    How to have a horizontal line at the middle of a html heading with CSS?

    CSS Border Color: How to set bottom border color?

    HTML/CSS: How to make the sidebar and content follow each other

    how to display labels inline with inputs, using w3.css

    How to recursively remove CSS classes

    How do I turn CSS into example HTML? Is there a shortcut to understanding affects of CSS on nested HTML tags?

    My dropdown menu isn't showing below parent

    How to change pseudo class property?

    CSS-how to text-indent a nested unordered list

    how to remove css property using javascript?

    CSS: How to clear line-through for an element in a table row?

    How to animate through stacked images Javascript

    With Watin, how do I wait until an element gets a certain CSS class?

    How to make text box scroll vertical in overflow css html?

    How do you create tabstops in XHTML?

    How to manage css left property for fixed div

    How can I get a left-navigation column to fill the entire left side of the middle of a webpage using CSS?

    How to make div fill the rest of viewport with keeping of aspect ratio (CSS or jQuery)?

    CSS: How to set up gradient background cross browser (only missing IE8 and IE9)

    How to append bind-attr class to initial one in Ember?

    Buttons on bootstrap timepicker is not showing

    How to arrange two butons side by side in Struts2

    How to add css files using PHP inside the tag?

    How to fix button position next to input when screen resizes

    CSS: how to put one image and one block with two

    in one line not using float

    How to define the css :hover state in a jQuery selector?

    How to align images and unordered list