[solved] listing the classes of a stylesheet

[DarkPikachu]

anyone know a good way to list a stylesheet's classes in the order they were created/added??

[Tim Camara]

I don't know about the ordering bit, but internally we use proboards.css.parse() to generate the LESS parse tree representation of style sheets for use with the visual editor.

[DarkPikachu]

eh, I prbly shoulda been more specific... heh

it's for my Custom CSS plugin for displaying your created classes in your profile.
the stylesheet is created via jquery and is 100% local.

rather than cluttering up your profile with a garb-load of text,
I wanted to clean it up and display only the class names styled with their relative style in a scrolled resizable div.

see why I need the order... heh

[DarkPikachu]

well, I FINALLY found something on google.

I personally like this answer as it's a bit cleaner than the first with the higher votes (though still dirty) and easier to work with:
stackoverflow.com/a/4651999/2131849

something I know to clean up:

bad:
for(j = 0; j< currentSheet.cssRules.length; j++){ // SecurityError: The operation is insecure.

good:
var rules = currentSheet.cssRules // ensure a local array
for(j = 0; j< rules.length; j++){

[Quozzo]

better:
var rules = currentSheet.cssRules
for(var i = 0,k = rules.length; i<k;i++){

[DarkPikachu]

actually, cssRules is returning undefined for my stylesheet...

something along the lines of:

var styles = $('<style id="mystyle"></style>');
styles.text( usrText ); // from the custom profile field
styles = styles[0]; // document object (not JQ object)

var rules=styles.cssRules;
for(j = 0; j< rules.length; j++){
   console.log(rules[j]);
};


An error occurred during a document.ready call: TypeError: Cannot read property 'length' of undefined


tested on the latest chromium on Xubuntu 14.04

[Tim Camara]

Try this:

// Create style tag
var styles = $('<style id="mystyle"></style>');

// Add styles to style tag from custom field
styles.text(usrText);

// Add style tag to page
$('head').append(styles);

// Retrieve DOM representation of style object
var dom_rep = null;
for(i = 0; i < document.styleSheets.length; i++){
if(document.styleSheets[i].ownerNode.id === 'mystyle') {
dom_rep = document.styleSheets[i];
break;
}
}

// Get the list of CSS rules
var rules = dom_rep.cssRules;

// Print out the rules
for(i = 0; i < rules.length; i++){
   console.log(rules[i]);
};


[DarkPikachu]

OMFG, I'm a freakin retard! *facepalms*

I'm doing that already on the other part of this plugin.

*tears eyelids down*

do you know how many google searches I've done before I came here asking -_-*
I can't say because I never counted... but I know I spent hours before coming here. >_<


thank you!

EDIT:
AND they appear to be in order, big thank you

[Tim Camara]

You're welcome.