How to parse CSSStyleSheet object into a valid css?

Question

I've been playing with document.styleSheets API and it mostly does what I want, but once I add a bunch of rules I want to be able to parse the shylesheet object into a valid css (so I can put it into a downloadable file), is possible with the API or just by manually looping trough it?

jigsaw.w3.org/css-validator/documentation.html Try this

Gibbs
– Gibbs

2014-07-21 12:26:49 +00:00
Commented Jul 21, 2014 at 12:26 — Gibbs
– Gibbs, Commented Jul 21, 2014 at 12:26

lante · Accepted Answer · 2014-07-21 12:37:59Z

2

Iterate over it:

var rules = [], i, j, css;

for (i = 0; i < document.styleSheets.length; i++) {
    for (j = 0; j < document.styleSheets[i].rules.length; j++) {
        rules.push(document.styleSheets[i].rules[j].cssText);
    }
}

css = rules.join('\n');
console.log(css);

answered Jul 21, 2014 at 12:37

lante

7,3924 gold badges39 silver badges59 bronze badges

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

1 Comment

user2579512 Over a year ago

Is there an efficient way to output all styles under same selector, for example if I have rule1: header { color:red }, rule2: header { padding: 0 }, in the parsed file it would output: header {color:red; padding: 0}

Collectives™ on Stack Overflow

How to parse CSSStyleSheet object into a valid css?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related