move from function to object

Author: mic

demo.html

@@ -6,35 +6,32 @@
 	<title>jstyle</title>
 	<script src="jstyle.js"></script>
 	<script>
-		jstyle().addStyle({
-		/* 
-		*   Variables
-		*/
-			// assign a string value
-			$main:'#0C0', 
-			$space:'2em',
-
+		jstyle.setVars({
+			/* 
+			*   Variables
+			*/
+			main:'#0C0',
+			space:'2em',
 			// assign a value by a function
-			$mainLight:function(css){
+			mainLight:function(){
 				// css is a reference to this json itself
-				return css['$main'].replace(/0/g, '8');
-			},
-
+				return this.vars.main.replace(/0/g, '8');
+			}
+		}).addStyle({
 		/*
 		*   Style definition, css like but in JSON: 
 		*
 		*	with commas "," instead of semi-colons ";"
 		*	and some reserved js words can't be used as a property, i.e: "float" as below
 		*	to overcome this, place the property name between quotes/double quotes
 		*/
-
 			'body':{
 				background:'#121',
 				color:'$main'
 			},
 			'.hello':{
 				border:'solid 1px $mainLight',
-				background:'#040',
+				background:'#040', //normal assignment (no variable)
 				'float':'left',
 				padding:'$space',
 				margin:'$space'

jstyle.js

@@ -1,5 +1,5 @@
 /* JSTYLE - MIT License - (c) 2010 BeeBole.com  - rev 1.0 */
-window.jstyle = function(arg){
+window.jstyle = (function(arg){
 	var vars = {},
 		agent = navigator.userAgent.toLowerCase(),
 		browsers = {
@@ -8,31 +8,25 @@ window.jstyle = function(arg){
 			'Opera':agent.indexOf('opera') > -1,
 			'webkit':agent.indexOf('webkit') > -1
 		},
-		clean = function(s){
-			var t = s.replace(/^\s\s*/, ''),
-				w = /\s/, 
-				l = t.length;
-			while(w.test(t.charAt(l--)));
-			return t.slice(0, l + 1).replace(/\s*\n\s*/g, '').replace(/\t/g,'').replace(/\/\*[^\*]+\*\//m, '');
-		},
 		json2css = function(json){
-			var parseJSON = function(sub){
-				var a = [], prop, subProp, varCall = /(\$\S+)/, varVal;
+			var jstyle = this,
+				parseJSON = function(sub){
+				var a = [], 
+					prop, subProp, 
+					varCall = /(\$(\S+))/, varVal, vars = jstyle.vars;
 				for(prop in sub){
 					subProp = sub[prop];
-					subProp = typeof subProp === 'function' ? subProp(json) : subProp;
-					if(prop[0] === '$'){
-						vars[prop] = subProp;
+					if(typeof subProp === 'object'){
+						a.push(prop + '{' + parseJSON(subProp) + '}');
 					}else{
-						if(typeof subProp === 'object'){
-							a.push(prop + '{' + parseJSON(subProp) + '}');
-						}else{
-							if((varCall).test(subProp)){
-								varVal = vars[subProp.match(varCall)[0]];
+						if((varCall).test(subProp)){
+							varVal = vars[subProp.match(varCall)[2]];
+							varVal = typeof varVal === 'function' ? varVal.call(jstyle, json) : varVal;
+							if(subProp){
 								subProp = subProp.replace(varCall, varVal);
 							}
-							a.push(prop + ':' + subProp + ';');
 						}
+						a.push(prop + ':' + subProp + ';');
 					}
 				}
 				return a.join('');
@@ -58,7 +52,7 @@ window.jstyle = function(arg){
 		browsers:browsers,
 		json:{},
 		styleNode:{},
-		jstyle:arguments.callee,
+		vars:{},
 		addMethod:function(name, fn){
 			this[name] = fn;
 			return this;
@@ -81,7 +75,7 @@ window.jstyle = function(arg){
 			styleNode = document.createElement('STYLE');
 			styleNode.setAttribute('type', 'text/css');
 			add2head(styleNode);
-			this.css = json2css(this.json);
+			this.css = json2css.call(this, this.json);
 			styleNode.styleSheet ?
 				styleNode.styleSheet.cssText = this.css:
 				styleNode.appendChild( document.createTextNode(this.css) );
@@ -111,6 +105,17 @@ window.jstyle = function(arg){
 				this.json[rule] && delete this.json[rule];
 			}
 			return this;
+		},
+		setVars:function(varHash){
+			for(v in varHash){
+				if(this.vars[v]){
+					alert('The name ' + v + ' is already in use(' + this.vars[v] + '), please choose another one');
+					break;
+				}else{
+					this.vars[v] = varHash[v];
+				}
+			}
+			return this;
 		}
 	};
-};
+})();

jstylePlugins.js

@@ -1,9 +1,14 @@
-jstyle()
-
-.addMethod('css2json', function(css){
+jstyle.css2json = function(css){
 	var css2 = css || this.css, 
 		json = {},
-		s, e, k, v, i, ii, props;
+		s, e, k, v, i, ii, props,
+		clean = function(s){
+			var t = s.replace(/^\s\s*/, ''),
+				w = /\s/, 
+				l = t.length;
+			while(w.test(t.charAt(l--)));
+			return t.slice(0, l + 1).replace(/\s*\n\s*/g, '').replace(/\t/g,'').replace(/\/\*[^\*]+\*\//m, '');
+		};
 	while(css2){
 		s = css2.indexOf('{');
 		e = css2.indexOf('}', s);
@@ -28,15 +33,14 @@ jstyle()
 	};
 	this.json = json;
 	return this;
-})
+};
 
-.addMethod('dom2css', function(id){
-	id = id || domId;
-	var styleNodes = id ? [document.getElementById(id)]:document.getElementsByTagName('STYLE'),
-		i = 0, ii = styleNodes.length;
-	for(;i < ii; i++){
+jstyle.dom2css = function(){
+	var styleNodes = document.getElementsByTagName('STYLE'),
+		i = 0, ii = styleNodes.length, css;
+	do{
 		css += styleNodes[i].styleSheet ? styleNodes[i].styleSheet.cssText : styleNodes[i].innerHTML;
-	}
+	}while(++i < ii)
 	this.css = css;
 	return this;
-});
+};