/** * Parse `<style>` code to a JSON Object and log errors & warnings * * @param {string} code * @param {function} done */functionparse(code,done){}/** * Validate a JSON Object and log errors & warnings * * @param {object} json * @param {function} done */functionvalidate(json,done){}/** * Result callback * * data * - jsonStyle{}: `classname.propname.value`-like object * - log[{line, column, reason}] * * @param {Error} err * @param {object} data */functiondone(err,data){}/** * Validate a single name-value pair * * @param {string} name camel cased * @param {string} value * @return {object} * - value * - log{reason} */functionvalidateItem(name,value){}
Validation
rule check: only common rule type supported, othres will be ignored
selector check: only single-classname selector is supported, others will be ignored
prop name check: out-of-defined prop name will be warned but preserved
prop value check: common prop value mistakes will be autofixed or ignored
color type: keywords, #xxx -> warning: #xxxxxx
color type: transparent -> error: not supported
length type: 100px -> warning: 100
Demo
varstyler=require('weex-styler')varcode='html {color: #000000;} .foo {color: red; -webkit-transform: rotate(90deg); width: 200px;}'styler.parse(code,function(err,data){// syntax error// format: {line, column, reason, ...}err// result// {foo: {color: '#ff0000', webkitTransform: 'rotate(90deg)', width: 200}}data.jsonStyle// format: {line, column, reason}// - Error: Selector `html` is not supported. Weex only support single-classname selector// - Warning: prop value `red` is autofixed to `#ff0000`// - Warning: prop name `-webkit-transform` is not supported// - Warning: prop value `200px` is autofixed to `200`data.log[]})varjsonStyle={foo: {color: 'red',webkitTransform: 'rotate(90deg)',width: '200px'}}styler.validate(json,function(err,data){// syntax errorerr// result// {foo: {color: '#ff0000', webkitTransform: 'rotate(90deg)', width: 200}}data.jsonStyle// format: {reason}// - Warning: prop value `red` is autofixed to `#ff0000`// - Warning: prop name `-webkit-transform` is not supported// - Warning: prop value `200px` is autofixed to `200`data.log[]})