I am writing a jQuery plugin which, among other things, inserts a stylesheet in the head. Additionally, I also require vendor prefixes. A lot of values are derived from variables in the script, and I'm unsure how I can write this in a maintainable manner. Now I just list everything, but maybe there's a better way for vendor prefixing and overall structure of this script?
var bubble_in_ms = to_ms(args.bubble_in),
opacity_out_ms = to_ms(args.opacity_out),
text_in_ms = to_ms(args.text_in),
bubble_color_rgb = rgbGenerator(args.bubble_color),
bubble_css = "";
bubble_css += ".bubble {-webkit-animation: ";
bubble_css += "bubble-effect-in " + bubble_in_ms + "ms forwards,";
bubble_css += "bubble-effect-out " + opacity_out_ms + "ms ";
bubble_css += bubble_in_ms + "ms forwards;";
bubble_css += "animation: ";
bubble_css += "bubble-effect-in " + bubble_in_ms + "ms forwards,";
bubble_css += "bubble-effect-out " + opacity_out_ms + "ms ";
bubble_css += bubble_in_ms + "ms forwards;";
bubble_css += "background: ";
bubble_css += "rgba(" + bubble_color_rgb.r + "," + bubble_color_rgb.g + "," + bubble_color_rgb.b + ",";
bubble_css += args.bubble_opacity + ")";
bubble_css += "}";
bubble_css += ".bubble-wrap:after {-webkit-transition: ";
bubble_css += "opacity " + text_in_ms + "ms;";
bubble_css += "transition: ";
bubble_css += "opacity " + text_in_ms + "ms;";
bubble_css += "}";