Question

I’m allowing user-input css.

What is a light and performant way to validate that css on the client side?

I’m looking for a javascript solution. I don’t want to send the css off to some remote server or anything.

Context:
Allowing user css

Thanks.

Edit: NVM on this question. I started using a server-side validator:
https://github.com/chriso/node-validator

Answer 1

function getDefinedCss(s){
    if(!document.styleSheets) return '';
    if(typeof s== 'string') s= RegExp('\\b'+s+'\\b','i'); // IE capitalizes html selectors 

    var A, S, DS= document.styleSheets, n= DS.length, SA= [];
    while(n){
        S= DS[--n];
        A= (S.rules)? S.rules: S.cssRules;
        for(var i= 0, L= A.length; i<L; i++){
                tem= A[i].selectorText? [A[i].selectorText, A[i].style.cssText]: [A[i]+''];
                if(s.test(tem[0])) SA[SA.length]= tem;
        }
    }
    return SA.join('\n\n');
}

// Then you check the class if exists by calling getDefinedCss('myclassname')