diff --git a/examples/border-radius.css b/examples/border-radius.css new file mode 100644 index 0000000..9f19991 --- /dev/null +++ b/examples/border-radius.css @@ -0,0 +1,24 @@ + +button { + border-radius: 5px +} + +button { + border-radius: top 5px +} + +button { + border-radius: 5px 10px +} + +button { + border-radius: top 5px bottom 10px +} + +button { + border-radius: left 5px +} + +button { + border-radius: left 5px right 2px +} diff --git a/examples/border-radius.js b/examples/border-radius.js new file mode 100644 index 0000000..04d2c9a --- /dev/null +++ b/examples/border-radius.js @@ -0,0 +1,51 @@ + +var rework = require('..') + , read = require('fs').readFileSync; + +var css = rework(read('examples/border-radius.css', 'utf8')) + .use(rework.mixin({ 'border-radius': borderRadius })) + .toString() + +function borderRadius(str) { + var vals = str.split(/\s+/); + var pos; + var ret; + + for (var i = 0; i < vals.length; ++i) { + var val = vals[i]; + if (isPosition(val)) { + ret = ret || {}; + pos = val; + val = vals[++i]; + switch (pos) { + case 'top': + case 'bottom': + ret['border-' + pos + '-left-radius'] = val; + ret['border-' + pos + '-right-radius'] = val; + break; + case 'left': + case 'right': + ret['border-top-' + pos + '-radius'] = val; + ret['border-bottom-' + pos + '-radius'] = val; + break; + } + } + } + + if (!ret) { + return { + 'border-radius': str + } + } + + return ret; +} + +function isPosition(str) { + return 'top' == str + || 'bottom' == str + || 'left' == str + || 'right' == str; +} + +console.log(css); \ No newline at end of file