JavaScript CSS parser

Question

I'm searching a css parser for javascript that works like jquery, example:

var style = {

    '.test': {
        paddingTop: 20,
        height: 100,
        width: 100,
        borderRadius: 5
    },

    '.test2': {
        color: '#888'
    }

}

this json must be convert in:

.test{
    padding-top: 20px;
    height: 100px;
    width: 100px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}   
.test2 {
    color: #888;
}

thanks!

You seem to be looking for the inverse of a css parser, right ? Do you want the result to be a string ? — Denys Séguret
– Denys Séguret, Commented Sep 19, 2012 at 11:07
mmh, maybe I'm confusing...however yes, I want a string as result. — keepyourweb
– keepyourweb, Commented Sep 19, 2012 at 11:09
@thirtydot: Unserializing a JSON-based format to be injected as a <style> tag, for instance? — AKX
– AKX, Commented Sep 19, 2012 at 11:11
This doesn't seem useful to me because this is not the format in which your CSS should be. If you want to do "calculations" inside your CSS, use LESS or similar. Or, just return a raw string of CSS. How do you plan to handle units other than pixels? You'll need something more like paddingTop: '20em', at which point you just have CSS in an awkward format. — thirtydot
– thirtydot, Commented Sep 19, 2012 at 11:23

David Hedlund · Accepted Answer · 2012-09-19 11:26:51Z

2

Something simple.

Replaces all camelCase to css-hyphenation (props to @AKX for better regex).

String.prototype.toCssProperty = function () {
    return this.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
};

Appends px to all numeric values.

if(typeof value === 'number')
    value += 'px';

Demo

function addRule(selector, styles) {
    var builder = [];
    for(var key in styles) {
        if(styles.hasOwnProperty(key)) {

            var value = styles[key];
            if(typeof value === 'number')
                value += 'px';

            builder.push(key.toCssProperty() + ':' + value);
        }
    }       

    var rule = builder.join('; ');
    document.styleSheets[0].addRule(selector,rule);
}

function applyStyles(s) {
    for(var key in s) {
        if(s.hasOwnProperty(key)) {
            addRule(key, s[key]);            
        }
    }
};

If you just want the string, you should return that, instead of adding the css rule, as I'm doing in the demo.

I'm sure there are heaps of corner-cases that this doesn't cover. Implement with care.

edited Sep 19, 2012 at 11:26

answered Sep 19, 2012 at 11:16

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AKX Over a year ago

return this.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();?

keepyourweb Over a year ago

This not work with "opacity" case, infact IE wants an own declaration. The same for borderRadius...for this reason I was searching a plugin that behaves like jQuery.

AKX Over a year ago

@keepyourweb: Then add something like leaverou.github.com/prefixfree into the mix?

Collectives™ on Stack Overflow

JavaScript CSS parser

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related