css.text

function css(statement) {
	var rules="", r=function addRule(statement){ rules+=statement+";"; return r };
	r.output = "";
	r.applyTo = function applyCSSTo(selector) {
		this.output += selector + "{" + rules + "}";
		return this };
	return statement? r(statement) : r }

example:

mycss = css();
mycss("font-bold:true")
     ("margin-left:5px")
     ("border:1px solid rgba(0,0,0,0.2)")
     .applyTo(".speachbubble")
     ("border-radius:5px")
     .applyTo(".roundedBubble");

mycss.output produces:

.speachbubble {font-bold:true;margin-left:5px;border:1px solid rgba(0,0,0,0.2)}
.roundedBubble {font-bold:true;margin-left:5px;border:1px solid rgba(0,0,0,0.2);border-radius:5px}

more complex example :

css("padding: 3px 8px")
   ("font-style: italic; background: white")
   ("margin-left: 5px")
   ("border: 1px solid rgba(0,0,0,0.2)")
   .applyTo(".plainSpeechBubble")
   ("border-radius: 8px")
   .applyTo(".roundedBubble")
   ("background: url('sparklybackground.jpg'); font-weight: bold")
   .applyTo(".sparklyBubble")
   .output

produces:

.plainSpeechBubble {padding: 3px 8px;font-style: italic; background: white;margin-left: 5px;border: 1px solid rgba(0,0,0,0.2);}
.roundedBubble {padding: 3px 8px;font-style: italic; background: white;margin-left: 5px;border: 1px solid rgba(0,0,0,0.2);border-radius: 8px;}
.sparklyBubble {padding: 3px 8px;font-style: italic; background: white;margin-left: 5px;border: 1px solid rgba(0,0,0,0.2);border-radius: 8px;background: url('sparklybackground.jpg'); font-weight: bold;}

plain Speech Bubble 1 rounded Bubble 1 sparkly Bubble 1