de análisis de CSS en JavaScript/jQuery

Question

Estoy tratando de poner en práctica el análisis de la CSS en JavaScript de forma que:

a { 
    color: red; 
} 

se analiza en el objeto:

{ 
    'a' { 
    'color': 'red' 
    } 
} 

En primer lugar, ¿existe un JavaScript/jQuery biblioteca Puedo usar?

Mi implementación es bastante básica, así que estoy seguro de que no es infalible de ninguna manera. Por ejemplo, funciona bien para CSS básico, pero para una propiedad del tipo:

background: url(data:image/png;base64, ....); 

Fracasa porque estoy utilizando split(';') para separar property:value pares. Aquí, ; aparece en el value, por lo que se divide en ese punto también.

¿Hay alguna otra manera de hacerlo?

Aquí está el código:

parseCSS: function(css) { 
    var rules = {}; 
    css = this.removeComments(css); 
    var blocks = css.split('}'); 
    blocks.pop(); 
    var len = blocks.length; 
    for (var i = 0; i < len; i++) 
    { 
     var pair = blocks[i].split('{'); 
     rules[$.trim(pair[0])] = this.parseCSSBlock(pair[1]); 
    } 
    return rules; 
}, 

parseCSSBlock: function(css) { 
    var rule = {}; 
    var declarations = css.split(';'); 
    declarations.pop(); 
    var len = declarations.length; 
    for (var i = 0; i < len; i++) 
    { 
     var loc = declarations[i].indexOf(':'); 
     var property = $.trim(declarations[i].substring(0, loc)); 
     var value = $.trim(declarations[i].substring(loc + 1)); 

     if (property != "" && value != "") 
      rule[property] = value; 
    } 
    return rule; 
}, 

removeComments: function(css) { 
    return css.replace(/\/\*(\r|\n|.)*\*\//g,""); 
} 

Gracias!

Answer 1

Hay un analizador CSS escrita en Javascript llama JSCSSP

Answer 2

Para escribir el analizador más infalible, siga las reglas exactas para tokenization y CSS grammar según lo definido en la especificación. Tenga en cuenta que no tiene que implementar la especificación por tinta. Puede comenzar con piezas pequeñas y CSS que probablemente encontrará, y luego expandir desde allí. Mejor aún, omita todo el proceso e implemente la solución de @ Matthew a menos que sea un ejercicio de aprendizaje.

Existen varios escáneres léxicos y generadores de analizadores disponibles para JavaScript. Toda la gramática está disponible en el sitio web de w3. ¿Por qué volver a trabajar cuando puede simplemente usar eso y los generadores del analizador para generar el analizador en JavaScript?

1. Jison
2. Peg.js
3. Cruiser.Parse
4. McLexer
5. JS/CC

Las reglas de producción para CSS se dan a continuación.

stylesheet 
    : [ CHARSET_SYM STRING ';' ]? 
    [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]* 
    [ [ ruleset | media | page ] [ CDO S* | CDC S* ]* ]* 
    ; 
import 
    : IMPORT_SYM S* 
    [STRING|URI] S* media_list? ';' S* 
    ; 
media 
    : MEDIA_SYM S* media_list LBRACE S* ruleset* '}' S* 
    ; 
media_list 
    : medium [ COMMA S* medium]* 
    ; 
medium 
    : IDENT S* 
    ; 
page 
    : PAGE_SYM S* pseudo_page? 
    '{' S* declaration? [ ';' S* declaration? ]* '}' S* 
    ; 
pseudo_page 
    : ':' IDENT S* 
    ; 
operator 
    : '/' S* | ',' S* 
    ; 
combinator 
    : '+' S* 
    | '>' S* 
    ; 
unary_operator 
    : '-' | '+' 
    ; 
property 
    : IDENT S* 
    ; 
ruleset 
    : selector [ ',' S* selector ]* 
    '{' S* declaration? [ ';' S* declaration? ]* '}' S* 
    ; 
selector 
    : simple_selector [ combinator selector | S+ [ combinator? selector ]? ]? 
    ; 
simple_selector 
    : element_name [ HASH | class | attrib | pseudo ]* 
    | [ HASH | class | attrib | pseudo ]+ 
    ; 
class 
    : '.' IDENT 
    ; 
element_name 
    : IDENT | '*' 
    ; 
attrib 
    : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S* 
    [ IDENT | STRING ] S* ]? ']' 
    ; 
pseudo 
    : ':' [ IDENT | FUNCTION S* [IDENT S*]? ')' ] 
    ; 
declaration 
    : property ':' S* expr prio? 
    ; 
prio 
    : IMPORTANT_SYM S* 
    ; 
expr 
    : term [ operator? term ]* 
    ; 
term 
    : unary_operator? 
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* | 
     TIME S* | FREQ S* ] 
    | STRING S* | IDENT S* | URI S* | hexcolor | function 
    ; 
function 
    : FUNCTION S* expr ')' S* 
    ; 
/* 
* There is a constraint on the color that it must 
* have either 3 or 6 hex-digits (i.e., [0-9a-fA-F]) 
* after the "#"; e.g., "#000" is OK, but "#abcd" is not. 
*/ 
hexcolor 
    : HASH S* 
    ; 

Answer 3

Usted puede utilizar fácilmente propia CSSOM del navegador para analizar CSS:

var rulesForCssText = function (styleContent) { 
    var doc = document.implementation.createHTMLDocument(""), 
     styleElement = document.createElement("style"); 

    styleElement.textContent = styleContent; 
    // the style will only be parsed once it is added to a document 
    doc.body.appendChild(styleElement); 

    return styleElement.sheet.cssRules; 
}; 

Para cada regla devuelto se puede ver en las propiedades en rule.style. Ver http://jsfiddle.net/v2JsZ/ para un ejemplo.