Hi @kof, I'm getting ready to move from stylus to jss on my homepage at trusktr.io. :D I have a CSS gradient like this, in stylus:
.fadeRight {
background: fadeStartColor; /*Stylus variable*/
background: -moz-linear-gradient(left, fadeStartColor 0%, fadeEndColor 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, fadeStartColor), color-stop(100%, fadeEndColor));
background: -webkit-linear-gradient(left, fadeStartColor 0%, fadeEndColor 100%);
background: -o-linear-gradient(left, fadeStartColor 0%, fadeEndColor 100%);
background: -ms-linear-gradient(left, fadeStartColor 0%, fadeEndColor 100%);
background: linear-gradient(to right, fadeStartColor 0%, fadeEndColor 100%);
filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1 )");
}
how would we do that in JSS considering that JavaScript object literals and JSON don't allow duplicate property names? Maybe using arrays? For example:
'.fadeRight': {
background: [
fadeStartColor, /*JavaScript variable*/
'-moz-linear-gradient(left, '+fadeStartColor+' 0%, '+fadeEndColor+' 100%)',
'-webkit-gradient(left top, right top, color-stop(0%, '+fadeStartColor+'), color-stop(100%, '+fadeEndColor+'))',
'-webkit-linear-gradient(left, '+fadeStartColor+' 0%, '+fadeEndColor+' 100%)',
'-o-linear-gradient(left, '+fadeStartColor+' 0%, '+fadeEndColor+' 100%)',
'-ms-linear-gradient(left, '+fadeStartColor+' 0%, '+fadeEndColor+' 100%)',
'linear-gradient(to right, '+fadeStartColor+' 0%, '+fadeEndColor+' 100%'
],
filter: 'unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#000000\', endColorstr=\'#ffffff\', GradientType=1 )")'
}