dothtml 4.8.6 → 5.0.0

package/src/{style-builder.js → style-builder.ts}

@@ -1,5 +1,7 @@
 "use strict";
 
+import IDotCss, { HideParams, LengthProp, ShowParams } from "./i-dotcss";
+
 //Latest Update.
 /*
 * - Wrapped code in anonymous function.
@@ -8,13 +10,15 @@
 * - Allowed 0-length animations.
 */
 
+const STATIC_SYLES_ATTR = "data-dot-static-styles";
 
-var dotcss = function(query){
+const dotcss: IDotCss = function(query){
 	//this.currentCss = "";
 	var target = null;
 	if(query){
 		// console.log(query, "?");
-		if(typeof query == "string" ) {
+		if( typeof query == "string" ) {
+			// Creating a style tag. Might not be supported forever.
 			if(query.length > 2 && query.indexOf("{}") == query.length - 2){
 				query = query.substring(0, query.length - 2);
 				target = [document.createElement("style")];
@@ -30,53 +34,60 @@ var dotcss = function(query){
 				// iff it is in the list of elements queried from its parent. 
 				// In addition to all of that, we don't want scoped styles to be applied to child components. 
 				var s0 = scopeStack[0];
-
+				// if(s0 instanceof Component){
+				// 	s0 = s0.$el;
+				// }
 				// If we're doing scoped, and it's an element.
 				if(s0 && s0.parentNode && s0.querySelectorAll){
-
+					// console.log(s0);
 					target = getScopedNodeList(query, s0);
 				}
 				else{
-					target = document.querySelectorAll(query);
+					target = document.querySelectorAll(query as string);
 				}
 				// target = referencePt.querySelectorAll(query);
 			}
 		}
+
 		if((query instanceof NodeList) || (query instanceof Array)) target = query;
 		if(query instanceof Node) target = [query]; //Doesn't need to be a NodeList. Just iterable.
 	}
-	dotcss._lastBuilder = new _Builder(target);
-	return dotcss._lastBuilder;
-};
+	dotcss2._lastBuilder = new _Builder(target);
+	return dotcss2._lastBuilder;
+} as IDotCss;
+
+// Easier way to extend dotcss with private methods without type concerns.
+const dotcss2 = dotcss as any;
 
-dotcss.version = "0.14.0";
+dotcss.version = "0.16.0";
 
 //Inverse of framerate in ms/frame.
-dotcss._fxInterval = 1000 / 60;
+dotcss2._fxInterval = 1000 / 60;
 
-dotcss._lastBuilder = null;
+dotcss2._lastBuilder = null;
 
-dotcss._floatRegex = new RegExp("[-+]?[0-9]*\\.?[0-9]+(?:[eE][-+]?[0-9]+)?", "g");
+dotcss2._floatRegex = new RegExp("[-+]?[0-9]*\\.?[0-9]+(?:[eE][-+]?[0-9]+)?", "g");
 
 var scopeStack = [];
 
-function getScopedNodeList(query, s0){
+function getScopedNodeList(query: String, s0: Element): Array<HTMLElement>{
 	// Get all of the matching child elements of the component. This will not include s0 itself, but it does include nested components.
 	// So we will need to manipulate this collection.
 	// querySelectorAll returns a NodeList, which we need to convert into an Array.
-	var target = Array.from(s0.querySelectorAll(query));
+	var target = Array.from(s0.querySelectorAll(query as any));
+	// console.log(query, s0.className);
 
 	// Exclude nested components.
 	for(var t = 0; t < target.length; t++){
 		var T = target[t];
 
 		// Is it a nested component??
-		if(T.__dothtml_component){
+		if(T["__dothtml_component"]){
 			// It's a component. Remove it, and all of it's descendants. 
 			target.splice(t, 1);
 			t--;
 			
-			var subTargets = T.querySelectorAll(query);
+			var subTargets = T.querySelectorAll(query as any);
 			for(var s = 0; s < subTargets.length; s++){
 				let S = subTargets[s];
 				target.splice(target.indexOf(S, t + 1), 1);
@@ -85,7 +96,7 @@ function getScopedNodeList(query, s0){
 	}
 
 	// Loop through all the sibling nodes until we find s0.
-	var parentTargets = Array.from(s0.parentNode.querySelectorAll(query));
+	var parentTargets = Array.from(s0.parentNode.querySelectorAll(query as any));
 
 	var p = parentTargets.indexOf(s0);
 	if(p != -1){
@@ -95,17 +106,17 @@ function getScopedNodeList(query, s0){
 	return target;
 }
 
-function _Builder(target){
+function _Builder(target?: string|Element){
 	this.currentCss = "";
 	this.target = target;
 }
 
-dotcss._Builder = _Builder;
+dotcss2._Builder = _Builder;
 
 var _b = _Builder.prototype;
 
 _b.toString = dotcss.prototype.toString = function(){
-	// console.log("CALLED TOSTRING!");
+	// console.log("CALLED TOSTRING!", this.currentCss);
 	return this.currentCss;
 };
 
@@ -121,16 +132,18 @@ _b.toString = dotcss.prototype.toString = function(){
 //	animationStyle: linear or exponential
 _b.hide = function(){
 	if(this.target){
-		var arg0 = arguments[0] || {};
-		var ops = {};
-		ops.duration = arg0.duration || (isNaN(arg0) ? 0 : arg0) || 0;
+		var arg0: HideParams|number = arguments[0] || {};
+		var arg0N = arg0 as number;
+		var arg0O = arg0 as HideParams;
+		var ops: HideParams = {};
+		ops.duration = arg0O.duration || (isNaN(arg0N) ? 0 : arg0N) || 0;
 		//ops.display = arg0.display || "none";
 		//ops.opacity = arg0.opacity || null;
 		//ops.width = arg0.width || null;
 		//ops.height = arg0.height || null;
-		ops.complete = arg0.complete || (typeof arguments[1] == "function" ? arguments[1] : (typeof arguments[2] == "function" ? arguments[2] : function(){}));
-		ops.hideStyle = arg0.hideStyle || "normal";
-		ops.animationStyle = arg0.animationStyle || (typeof arguments[1] == "string" ? arguments[1] : "ease");
+		ops.complete = arg0O.complete || (typeof arguments[1] == "function" ? arguments[1] : (typeof arguments[2] == "function" ? arguments[2] : function(){}));
+		ops.hideStyle = arg0O.hideStyle || "normal";
+		ops.animationStyle = arg0O.animationStyle || (typeof arguments[1] == "string" ? arguments[1] as any : "ease");
 
 		if(ops.duration > 0){
 			var doneCnt = 0;
@@ -191,15 +204,17 @@ _b.hide = function(){
 _b.show = function(){
 	if(this.target){
 		var arg0 = arguments[0] || {};
-		var ops = {};
-		ops.duration = arg0.duration || (isNaN(arg0) ? 0 : arg0) || 0;
-		ops.display = arg0.display || "block";
-		ops.opacity = arg0.opacity;
-		ops.width = arg0.width || null;
-		ops.height = arg0.height || null;
-		ops.complete = arg0.complete || (typeof arguments[1] == "function" ? arguments[1] : (typeof arguments[2] == "function" ? arguments[2] : function(){}));
-		ops.showStyle = arg0.showStyle || "normal";
-		ops.animationStyle = arg0.animationStyle || (typeof arguments[1] == "string" ? arguments[1] : "ease");
+		var arg0N = arg0 as number;
+		var arg0O = arg0 as ShowParams;
+		var ops: ShowParams = {};
+		ops.duration = arg0O.duration || (isNaN(arg0N) ? 0 : arg0N) || 0;
+		ops.display = arg0O.display || "block";
+		ops.opacity = arg0O.opacity;
+		ops.width = arg0O.width || null;
+		ops.height = arg0O.height || null;
+		ops.complete = arg0O.complete || (typeof arguments[1] == "function" ? arguments[1] : (typeof arguments[2] == "function" ? arguments[2] : function(){}));
+		ops.showStyle = arg0O.showStyle || "normal";
+		ops.animationStyle = arg0O.animationStyle || (typeof arguments[1] == "string" ? arguments[1] as any : "ease");
 
 		if(ops.duration > 0){
 			var doneCnt = 0;
@@ -256,7 +271,7 @@ _b.fadeIn = function(duration, complete){
 };
 
 //TYPES:
-dotcss._Url = function(value){
+dotcss2._Url = function(value){
 	this.type = "url";
 	this.url = null;
 	if(!value || value.length == 0 || (value.length == 1 && value[0] == "" || value[0] == "none" || value[0] == "initial" || value[0] == "inherit")){
@@ -267,10 +282,10 @@ dotcss._Url = function(value){
 		for(var i = 0; i < value.length; i++){
 			var currentURL = "";
 			if(value[i].toLowerCase().indexOf("url") === 0){
-				var url = value[i].substring(indexOf("("), lastIndexOf(")")).trim();
+				var url = value[i].substring(value[i].indexOf("("), value[i].lastIndexOf(")")).trim();
 				if((url.indexOf("\"") && url.lastIndexOf("\"") == url.length - 1) || 
 					(url.indexOf("'") && url.lastIndexOf("'") == url.length - 1)){
-					url = url.substring(1, ret.length - 1);
+					url = url.substring(1, url.length - 1);
 				}
 				this.url.push(url);
 			}
@@ -281,7 +296,7 @@ dotcss._Url = function(value){
 	}
 }
 
-dotcss._Url.prototype.toString = function(){
+dotcss2._Url.prototype.toString = function(){
 	if(!this.url) return "none";
 	else 
 	{
@@ -293,7 +308,7 @@ dotcss._Url.prototype.toString = function(){
 	}
 }
 
-dotcss._Color = function(value){
+dotcss2._Color = function(value){
 	this.type = "color";
 	this.r = 0;
 	this.g = 0;
@@ -506,7 +521,7 @@ dotcss._Color = function(value){
 	
 }
 
-dotcss._Color.prototype.toString = function(){
+dotcss2._Color.prototype.toString = function(){
 	var R = Math.round;
 	var X = Math.max;
 	var N = Math.min;
@@ -517,31 +532,31 @@ dotcss._Color.prototype.toString = function(){
 }
 
 //TODO: this should support multiple lengths.
-dotcss._Length = function(value){
+dotcss2._Length = function(value){
 	value = value || "0px";
 	if(!isNaN(value)) value = Math.round(value) + "px";
 	this.type = "length";
-	this.length = Number(value.match(dotcss._floatRegex)[0]);
-	this.units = value.split(dotcss._floatRegex)[1] || "px";
+	this.length = Number(value.match(dotcss2._floatRegex)[0]);
+	this.units = value.split(dotcss2._floatRegex)[1] || "px";
 }
 
-dotcss._Length.prototype.toString = function(){
+dotcss2._Length.prototype.toString = function(){
 	return this.length + this.units;
 }
 
-dotcss._Angle = function(value){
+dotcss2._Angle = function(value){
 	value = value || "0deg";
 	if(!isNaN(value)) value = Math.round(value) + "px";
 	this.type = "angle";
-	this.angle = Number(value.match(dotcss._floatRegex)[0]);
-	this.units = value.split(dotcss._floatRegex)[1] || "deg";
+	this.angle = Number(value.match(dotcss2._floatRegex)[0]);
+	this.units = value.split(dotcss2._floatRegex)[1] || "deg";
 }
 
-dotcss._Angle.prototype.toString = function(){
+dotcss2._Angle.prototype.toString = function(){
 	return this.angle + this.units;
 }
 
-dotcss._Transform = function(value){
+dotcss2._Transform = function(value){
 	this.type = "transformation";
 	this.transformations = [];
 	//this.finalMatrix = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
@@ -564,7 +579,7 @@ dotcss._Transform = function(value){
 	}
 }
 
-dotcss._Transform.prototype.toString = function(){
+dotcss2._Transform.prototype.toString = function(){
 	var ret = "";
 	for(var i = 0; i < this.transformations.length; i++){
 		var t = this.transformations[i];
@@ -578,7 +593,7 @@ dotcss._Transform.prototype.toString = function(){
 	return ret.trim();
 }
 
-dotcss._Transform.prototype._updateValue = function(transformation, args){
+dotcss2._Transform.prototype._updateValue = function(transformation, args){
 	//this.finalMatrix = dotcss.matrixMultiply3D(m, this.finalMatrix);
 	this.transformations.push({transformation: transformation, args: args});
 	/*if(this.value.length > 0) this.value += " ";
@@ -588,18 +603,18 @@ dotcss._Transform.prototype._updateValue = function(transformation, args){
 	}*/
 }
 
-dotcss._Transform.prototype.matrix3d = function(){
-	var p = arguments;
+dotcss2._Transform.prototype.matrix3d = function(...value: Array<number>){
+	var p = value;
 	if(p.length == 16){
 		this.finalMatrix = dotcss.matrixMultiply3D(p, this.finalMatrix);
-		this._updateValue("matrix3d", args);
+		this._updateValue("matrix3d", p);
 	}
 	else throw "matrix3d requires 16 parameters.";
 	return this;
 }
 
-dotcss._Transform.prototype.matrix = function(){
-	var p = arguments;
+dotcss2._Transform.prototype.matrix = function(...value: Array<number>){
+	var p = value;
 	if(p.length == 6){
 		this._updateValue("matrix", p/*, [p[0], p[1], 0, 0, p[2], p[3], 0, 0, 0, 0, 1, 0, p[4], p[5], 0, 1]*/);
 	}
@@ -610,68 +625,68 @@ dotcss._Transform.prototype.matrix = function(){
 	return this;
 }
 
-dotcss._Transform.prototype.translate = function(){
+dotcss2._Transform.prototype.translate = function(){
 	var p = arguments;
 	if(p.length == 1){
 		var x = dotcss.lengthToPx(p[0]);
-		this._updateValue("translate", [new dotcss._Length(x + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,0,0,1]*/);
+		this._updateValue("translate", [new dotcss2._Length(x + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,0,0,1]*/);
 	}
 	else if(p.length == 2){
 		var x = dotcss.lengthToPx(p[0]);
 		var y = dotcss.lengthToPx(p[1]);
-		this._updateValue("translate", [new dotcss._Length(x + "px"), new dotcss._Length(y + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,y,0,1]*/);
+		this._updateValue("translate", [new dotcss2._Length(x + "px"), new dotcss2._Length(y + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,y,0,1]*/);
 	}
 	else if(p.length == 3) this.translate3d.apply(this, p);
 	else throw "translate requires 1 or 2 parameters.";
 	return this;
 }
 
-dotcss._Transform.prototype.translate3d = function(){
+dotcss2._Transform.prototype.translate3d = function(){
 	var p = arguments;
 	if(p.length == 3){
 		var x = dotcss.lengthToPx(p[0]);
 		var y = dotcss.lengthToPx(p[1]);
 		var z = dotcss.lengthToPx(p[2]);
-		this._updateValue("translate3d", [new dotcss._Length(x + "px"), new dotcss._Length(y + "px"), new dotcss._Length(z + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1]*/);
+		this._updateValue("translate3d", [new dotcss2._Length(x + "px"), new dotcss2._Length(y + "px"), new dotcss2._Length(z + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1]*/);
 	}
 	else throw "translate3d requires 3 parameters.";
 	return this;
 }
 
-dotcss._Transform.prototype.translateX = function(){
+dotcss2._Transform.prototype.translateX = function(){
 	var p = arguments;
 	if(p.length == 1){
 		//var x = dotcss.lengthToPx(p[0]);
-		//this._updateValue("translateX", [new dotcss._Length(x + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,0,0,1]*/);
+		//this._updateValue("translateX", [new dotcss2._Length(x + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,0,0,1]*/);
 		this.translate(p[0], 0);
 	}
 	else throw "translateX requires 1 parameter.";
 	return this;
 }
 
-dotcss._Transform.prototype.translateY = function(){
+dotcss2._Transform.prototype.translateY = function(){
 	var p = arguments;
 	if(p.length == 1){
 		//var y = dotcss.lengthToPx(p[0]);
-		//this._updateValue("translateY", [new dotcss._Length(y + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,0,y,0,1]*/);
+		//this._updateValue("translateY", [new dotcss2._Length(y + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,0,y,0,1]*/);
 		this.translate(0, p[0]);
 	}
 	else throw "translateY requires 1 parameter.";
 	return this;
 }
 
-dotcss._Transform.prototype.translateZ = function(){
+dotcss2._Transform.prototype.translateZ = function(){
 	var p = arguments;
 	if(p.length == 1){
 		//var z = dotcss.lengthToPx(p[0]);
-		//this._updateValue("translateZ", [new dotcss._Length(z + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,0,0,z,1]*/);
+		//this._updateValue("translateZ", [new dotcss2._Length(z + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,0,0,z,1]*/);
 		this.translate3d(0, 0, p[0]);
 	}
 	else throw "translateZ requires 1 parameter.";
 	return this;
 }
 
-dotcss._Transform.prototype.scale = function(){
+dotcss2._Transform.prototype.scale = function(){
 	var p = arguments;
 	if(p.length == 2){
 		this._updateValue("scale", p/*, [p[0],0,0,0,0,p[1],0,0,0,0,1,0,0,0,0,1]*/);
@@ -681,7 +696,7 @@ dotcss._Transform.prototype.scale = function(){
 	return this;
 }
 
-dotcss._Transform.prototype.scale3d = function(){
+dotcss2._Transform.prototype.scale3d = function(){
 	var p = arguments;
 	if(p.length == 3){
 		this._updateValue("scale3d", p/*, [p[0],0,0,0,0,p[1],0,0,0,0,p[2],0,0,0,0,1]*/);
@@ -690,7 +705,7 @@ dotcss._Transform.prototype.scale3d = function(){
 	return this;
 }
 
-dotcss._Transform.prototype.scaleX = function(){
+dotcss2._Transform.prototype.scaleX = function(){
 	var p = arguments;
 	if(p.length == 1){
 		//this._updateValue("scaleX", p/*, [p[0],0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]*/);
@@ -700,7 +715,7 @@ dotcss._Transform.prototype.scaleX = function(){
 	return this;
 }
 
-dotcss._Transform.prototype.scaleY = function(){
+dotcss2._Transform.prototype.scaleY = function(){
 	var p = arguments;
 	if(p.length == 1){
 		//this._updateValue("scaleY", p/*, [1,0,0,0,0,p[0],0,0,0,0,1,0,0,0,0,1]*/);
@@ -710,7 +725,7 @@ dotcss._Transform.prototype.scaleY = function(){
 	return this;
 }
 
-dotcss._Transform.prototype.scaleZ = function(){
+dotcss2._Transform.prototype.scaleZ = function(){
 	var p = arguments;
 	if(p.length == 1){
 		//this._updateValue("scaleZ", p/*, [1,0,0,0,0,1,0,0,0,0,p[0],0,0,0,0,1]*/);
@@ -720,17 +735,17 @@ dotcss._Transform.prototype.scaleZ = function(){
 	return this;
 }
 
-dotcss._Transform.prototype.rotate = function(){
+dotcss2._Transform.prototype.rotate = function(){
 	var p = arguments;
 	if(p.length == 1){
 		var a = dotcss.angleToDeg(p[0]);
-		this._updateValue("rotate", [new dotcss._Angle(a + "deg")]/*, [Math.cos(a),Math.sin(a),0,0,-Math.sin(axxx),Math.cos(axxx),0,0,0,0,1,0,0,0,0,1]*/);
+		this._updateValue("rotate", [new dotcss2._Angle(a + "deg")]/*, [Math.cos(a),Math.sin(a),0,0,-Math.sin(axxx),Math.cos(axxx),0,0,0,0,1,0,0,0,0,1]*/);
 	}
 	else throw "scaleZ requires 1 parameter.";
 	return this;
 }
 
-dotcss._Transform.prototype.rotate3d = function(){
+dotcss2._Transform.prototype.rotate3d = function(){
 	var p = arguments;
 	if(p.length == 4){
 		var x = p[0];
@@ -739,7 +754,7 @@ dotcss._Transform.prototype.rotate3d = function(){
 		var a = dotcss.angleToDeg(p[3]);
 		/*var C = 1 - cos(axx);
 		var S = sin(axx);*/
-		this._updateValue("rotate3d", [x, y, z, new dotcss._Angle(a + "deg")]/*, 
+		this._updateValue("rotate3d", [x, y, z, new dotcss2._Angle(a + "deg")]/*, 
 			[1+C*(x*x-1),	z*S+x*y*C,		-y*S+x*z*C,		0,
 			-z*S+x*y*C,		1+C*(y*y-1),	x*S+y*z*C,		0,
 			y*S+x*z*C,		-x*S+y*z*C,		1+C*(z*z-1),	0,
@@ -750,80 +765,80 @@ dotcss._Transform.prototype.rotate3d = function(){
 	return this;
 }
 
-dotcss._Transform.prototype.rotateX = function(){
+dotcss2._Transform.prototype.rotateX = function(){
 	var p = arguments;
 	if(p.length == 1){
 		var a = dotcss.angleToDeg(p[0]);
-		this._updateValue("rotateX", [new dotcss._Angle(a + "deg")]/*, [1,0,0,0,0,Math.cos(axx),Math.sin(axx),0,0,-Math.sin(axx),Math.cos(axx),0,0,0,0,1]*/);
+		this._updateValue("rotateX", [new dotcss2._Angle(a + "deg")]/*, [1,0,0,0,0,Math.cos(axx),Math.sin(axx),0,0,-Math.sin(axx),Math.cos(axx),0,0,0,0,1]*/);
 		//this.rotate3d(1, 0, 0, p[0]);
 	}
 	else throw "rotateX requires 1 parameter.";
 	return this;
 }
 
-dotcss._Transform.prototype.rotateY = function(){
+dotcss2._Transform.prototype.rotateY = function(){
 	var p = arguments;
 	if(p.length == 1){
 		//this might be faster:
 		var a = dotcss.angleToDeg(p[0]);
-		this._updateValue("rotateY", [new dotcss._Angle(a + "deg")]/*, [Math.cos(xxa),0,-Math.sin(axxx),0,0,1,0,0,Math.sin(xxx),0,Math.cos(xxx),0,0,0,0,1]*/);
+		this._updateValue("rotateY", [new dotcss2._Angle(a + "deg")]/*, [Math.cos(xxa),0,-Math.sin(axxx),0,0,1,0,0,Math.sin(xxx),0,Math.cos(xxx),0,0,0,0,1]*/);
 		//this.rotate3d(0, 1, 0, p[0]);
 	}
 	else throw "rotateY requires 1 parameter.";
 	return this;
 }
 
-dotcss._Transform.prototype.rotateZ = function(){
+dotcss2._Transform.prototype.rotateZ = function(){
 	this.rotate.apply(this, arguments);
 	return this;
 }
 
-dotcss._Transform.prototype.skew = function(){
+dotcss2._Transform.prototype.skew = function(){
 	var p = arguments;
 	if(p.length == 1){
 		var ax = dotcss.angleToDeg(p[0]);
-		this._updateValue("skew", [new dotcss._Angle(ax + "deg")]/*, [1,0,0,0,Math.tan(axxxxx),1,0,0,0,0,1,0,0,0,0,1]*/);
+		this._updateValue("skew", [new dotcss2._Angle(ax + "deg")]/*, [1,0,0,0,Math.tan(axxxxx),1,0,0,0,0,1,0,0,0,0,1]*/);
 	}
 	else if(p.length == 2){
 		var ax = dotcss.angleToDeg(p[0]);
 		var ay = dotcss.angleToDeg(p[1]);
-		this._updateValue("skew", [new dotcss._Angle(ax + "deg"), new dotcss._Angle(ay + "deg")]/*, [1,Math.tan(axxxy),0,0,Math.tan(axxxx),1,0,0,0,0,1,0,0,0,0,1]*/);
+		this._updateValue("skew", [new dotcss2._Angle(ax + "deg"), new dotcss2._Angle(ay + "deg")]/*, [1,Math.tan(axxxy),0,0,Math.tan(axxxx),1,0,0,0,0,1,0,0,0,0,1]*/);
 	}
 	else throw "skew requires 1 or 2 parameters.";
 	return this;
 }
 
-dotcss._Transform.prototype.skewX = function(){
+dotcss2._Transform.prototype.skewX = function(){
 	var p = arguments;
 	if(p.length == 1) this.skew.apply(this, p) //Makes things easier.
 	else throw "skewX requires 1 parameter.";
 	return this;
 }
 
-dotcss._Transform.prototype.skewY = function(){
+dotcss2._Transform.prototype.skewY = function(){
 	var p = arguments;
 	if(p.length == 1) this.skew.apply(this, [0, p[0]]) //Makes things easier.
 	else throw "skewY requires 1 parameter.";
 	return this;
 }
 
-dotcss._Transform.prototype.perspective = function(){
+dotcss2._Transform.prototype.perspective = function(){
 	var p = arguments;
 	if(p.length == 1){
 		var d =  dotcss.lengthToPx(p[0]);
-		this._updateValue("perspective", [new dotcss._Length(d + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,0,0,dotcss.formatNumberValue(-1 / d),1]*/);
+		this._updateValue("perspective", [new dotcss2._Length(d + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,0,0,dotcss.formatNumberValue(-1 / d),1]*/);
 	}
 	else throw "perspective requires 1 parameter.";
 	return this;
 }
 
-dotcss._Complex = function(value){
+dotcss2._Complex = function(value){
 	this.type = "complex";
-	this.parts = (" " + value + " ").split(dotcss._floatRegex);
-	this.numbers = value.match(dotcss._floatRegex);
+	this.parts = (" " + value + " ").split(dotcss2._floatRegex);
+	this.numbers = value.match(dotcss2._floatRegex);
 }
 
-dotcss._Complex.prototype.toString = function(){
+dotcss2._Complex.prototype.toString = function(){
 	var ret = this.parts[0];
 	for(var i = 0; i < this.numbers.length; i++){
 		ret += this.numbers[i] + this.parts[i+1];
@@ -831,21 +846,21 @@ dotcss._Complex.prototype.toString = function(){
 	return ret;
 }
 
-dotcss._Number = function(value){
+dotcss2._Number = function(value){
 	this.type = "number";
 	this.value = Number(value);
 }
 
-dotcss._Number.prototype.toString = function(){
+dotcss2._Number.prototype.toString = function(){
 	return this.value;
 }
 
-dotcss._Unknown = function(value){
+dotcss2._Unknown = function(value){
 	this.type = "unknown";
 	this.value = value;
 }
 
-dotcss._Unknown.prototype.toString = function(){
+dotcss2._Unknown.prototype.toString = function(){
 	return this.value;
 }
 
@@ -856,15 +871,15 @@ function _StyleProperty(){
 
 //toString override gets the value.
 _StyleProperty.prototype.toString = function(){
-	if(dotcss._lastBuilder.target){
+	if(dotcss2._lastBuilder.target){
 		var ret = null;
-		if(dotcss._lastBuilder.target.length > 1){
+		if(dotcss2._lastBuilder.target.length > 1){
 			ret = [];
-			for(var i = 0; i < dotcss._lastBuilder.target.length; i++){
-				ret.push(dotcss._lastBuilder.target[i].style[this.jsFriendlyProp]);
+			for(var i = 0; i < dotcss2._lastBuilder.target.length; i++){
+				ret.push(dotcss2._lastBuilder.target[i].style[this.jsFriendlyProp]);
 			}
 		}
-		else ret = dotcss._lastBuilder.target[0].style[this.jsFriendlyProp];
+		else ret = dotcss2._lastBuilder.target[0].style[this.jsFriendlyProp];
 		return ret;
 	}
 	else return null;
@@ -872,20 +887,20 @@ _StyleProperty.prototype.toString = function(){
 
 //val is another special function that breaks the value into a special object.
 _StyleProperty.prototype.val = function(){
-	if(dotcss._lastBuilder.target){
+	if(dotcss2._lastBuilder.target){
 		var ret = null;
-		if(dotcss._lastBuilder.target.length > 1){
+		if(dotcss2._lastBuilder.target.length > 1){
 			ret = null;
-			for(var i = 0; i < dotcss._lastBuilder.target.length; i++){
-				if(dotcss._lastBuilder.target[0].style[this.jsFriendlyProp]){
-					ret.push(dotcss._convertStyleIntoDotCssObject(dotcss._lastBuilder.target[i].style[this.jsFriendlyProp], this.type));
+			for(var i = 0; i < dotcss2._lastBuilder.target.length; i++){
+				if(dotcss2._lastBuilder.target[0].style[this.jsFriendlyProp]){
+					ret.push(dotcss2._convertStyleIntoDotCssObject(dotcss2._lastBuilder.target[i].style[this.jsFriendlyProp], this.type));
 				}
 				else ret.push(null);
 			}
 		}
 		else{
-			if(dotcss._lastBuilder.target[0].style[this.jsFriendlyProp]){
-				ret = dotcss._convertStyleIntoDotCssObject(dotcss._lastBuilder.target[0].style[this.jsFriendlyProp], this.type)
+			if(dotcss2._lastBuilder.target[0].style[this.jsFriendlyProp]){
+				ret = dotcss2._convertStyleIntoDotCssObject(dotcss2._lastBuilder.target[0].style[this.jsFriendlyProp], this.type)
 			}
 			else ret = null;
 		}
@@ -898,19 +913,19 @@ _StyleProperty.prototype.val = function(){
 //complete does not get called if the animation was cancelled.
 _StyleProperty.prototype.animate = function(value, duration, style, complete){
 	duration = isNaN(duration) ? 400 : (duration || 0);
-	if(dotcss._lastBuilder && dotcss._lastBuilder.target){
+	if(dotcss2._lastBuilder && dotcss2._lastBuilder.target){
 		if(!complete && style && style.call && style.apply){ //Fix params.
 			complete = style;
 			style = undefined;
 		}
-		for(var i = 0; i < dotcss._lastBuilder.target.length; i++){
-			var target = dotcss._lastBuilder.target[i];
+		for(var i = 0; i < dotcss2._lastBuilder.target.length; i++){
+			var target = dotcss2._lastBuilder.target[i];
 			var oldValue = null;
 			var newValue = null;
 			var finalValue = null; //newValue might be in different units from the final value...
 
 			//Get the old and new values.
-			newValue = dotcss._convertStyleIntoDotCssObject(value, this.type);
+			newValue = dotcss2._convertStyleIntoDotCssObject(value, this.type);
 
 			//If it's a transformation, a little extra work is required.
 			//Need to frame all the rotations properly, and combine both the new and the old transformations.
@@ -918,10 +933,10 @@ _StyleProperty.prototype.animate = function(value, duration, style, complete){
 				//Special handling. We'd like to consider the transformation as a complex data type first, then if that's not possible, convert it into a matrix data type.
 				//Reason being: linear transformations on matrices are inaccurate. Rotations end up scaling the target.
 				//Don't want to get the computed value for transformations.
-				oldValue = dotcss._convertStyleIntoDotCssObject(target.style[this.jsFriendlyProp], this.type);
+				oldValue = dotcss2._convertStyleIntoDotCssObject(target.style[this.jsFriendlyProp], this.type);
 			}
 			if(!oldValue){ //Standard. Happens when the type is not a transformation.
-				oldValue = dotcss._convertStyleIntoDotCssObject(dotcss._computedStyleOrActualStyle(target, this.jsFriendlyProp), this.type);
+				oldValue = dotcss2._convertStyleIntoDotCssObject(dotcss2._computedStyleOrActualStyle(target, this.jsFriendlyProp), this.type);
 			}
 
 			finalValue = newValue.toString();
@@ -951,7 +966,7 @@ _StyleProperty.prototype.animate = function(value, duration, style, complete){
 
 						//Won't need this anymore.
 						//console.warn("Couldn't animate " + this.jsFriendlyProp + ". Inconsistent units.");
-						//return dotcss._lastBuilder;
+						//return dotcss2._lastBuilder;
 					}
 				}
 			}
@@ -994,8 +1009,8 @@ _StyleProperty.prototype.animate = function(value, duration, style, complete){
 							var filler = (transformToAdd.indexOf("scale") == -1) ? 0 : 1;
 							newTransformValues = [];
 							for(var j = 0; j < oldTransformValues.length; j++) newTransformValues.push(!isNaN(oldTransformValues[j]) ? filler : (
-								!isNaN(oldTransformValues[j].angle) ? new dotcss._Angle(0) : (
-									!isNaN(oldTransformValues[j].length) ? new dotcss._Length(0) : (0)
+								!isNaN(oldTransformValues[j].angle) ? new dotcss2._Angle(0) : (
+									!isNaN(oldTransformValues[j].length) ? new dotcss2._Length(0) : (0)
 								)));
 						}
 						oldIndex--;
@@ -1014,8 +1029,8 @@ _StyleProperty.prototype.animate = function(value, duration, style, complete){
 							var filler = (transformToAdd.indexOf("scale") == -1) ? 0 : 1;
 							oldTransformValues = [];
 							for(var j = 0; j < newTransformValues.length; j++) oldTransformValues.push(!isNaN(newTransformValues[j]) ? filler : (
-								!isNaN(newTransformValues[j].angle) ? new dotcss._Angle(0) : (
-									!isNaN(newTransformValues[j].length) ? new dotcss._Length(0) : (0)
+								!isNaN(newTransformValues[j].angle) ? new dotcss2._Angle(0) : (
+									!isNaN(newTransformValues[j].length) ? new dotcss2._Length(0) : (0)
 								)));
 						}
 						newIndex--;
@@ -1037,13 +1052,13 @@ _StyleProperty.prototype.animate = function(value, duration, style, complete){
 					startTransform = transformToAdd + "(" + startTransform.substring(1);
 					desiredTransform = transformToAdd + "(" + desiredTransform.substring(1);
 				}
-				oldValue = dotcss._convertStyleIntoDotCssObject(startTransform, "transformation");
-				newValue = dotcss._convertStyleIntoDotCssObject(desiredTransform, "transformation");
+				oldValue = dotcss2._convertStyleIntoDotCssObject(startTransform, "transformation");
+				newValue = dotcss2._convertStyleIntoDotCssObject(desiredTransform, "transformation");
 
 			}
 			else if(oldValue.type == "number" && newValue.type == "number"){} //OK
 			else if(oldValue.type == "complex" && newValue.type == "complex"){
-				if(!dotcss._compareComplexDataTypes(oldValue, newValue)){
+				if(!dotcss2._compareComplexDataTypes(oldValue, newValue)){
 					console.warn("Couldn't animate " + this.jsFriendlyProp + ". Value mismatch.");
 					continue;
 				}
@@ -1052,30 +1067,30 @@ _StyleProperty.prototype.animate = function(value, duration, style, complete){
 				console.warn("Couldn't animate " + this.jsFriendlyProp + ". Not a recognizable length, color, or number.");
 				continue;
 			}
-			dotcss._animate(target, this.jsFriendlyProp, oldValue.type || this.type, oldValue, newValue, finalValue, dotcss._fxInterval, duration, style || "ease", complete);
+			dotcss2._animate(target, this.jsFriendlyProp, oldValue.type || this.type, oldValue, newValue, finalValue, dotcss2._fxInterval, duration, style || "ease", complete);
 		}
 	}
-	return dotcss._lastBuilder;
+	return dotcss2._lastBuilder;
 };
 
 //Have to add these back since we're going to replace the __proto__ of a function with this new prototype.
 _StyleProperty.prototype.apply = Function.apply;
 _StyleProperty.prototype.call = Function.call;
 
-dotcss._animate = function(element, jsFriendlyProp, propType, startValue, targetValue, finalValue, currentTime, totalDuration, animationStyle, callback, lastValue){
+dotcss2._animate = function(element, jsFriendlyProp, propType, startValue, targetValue, finalValue, currentTime, totalDuration, animationStyle, callback, lastValue){
 	if(lastValue && element.style[jsFriendlyProp] != lastValue) return; //Animation can be cancelled any time by setting the value directly.
 
 	if(totalDuration - currentTime > 0){
 		switch(propType){
 			case "color":
-				var r = Math.round(dotcss._numberStep(startValue.r, targetValue.r, currentTime, totalDuration, animationStyle));
-				var g = Math.round(dotcss._numberStep(startValue.g, targetValue.g, currentTime, totalDuration, animationStyle ));
-				var b = Math.round(dotcss._numberStep(startValue.b, targetValue.b, currentTime, totalDuration, animationStyle ));
-				var a = dotcss.formatNumberValue(dotcss._numberStep(startValue.a, targetValue.a, currentTime, totalDuration, animationStyle )); //TODO: make sure this doesn't need to be rounded or something.
+				var r = Math.round(dotcss2._numberStep(startValue.r, targetValue.r, currentTime, totalDuration, animationStyle));
+				var g = Math.round(dotcss2._numberStep(startValue.g, targetValue.g, currentTime, totalDuration, animationStyle ));
+				var b = Math.round(dotcss2._numberStep(startValue.b, targetValue.b, currentTime, totalDuration, animationStyle ));
+				var a = dotcss.formatNumberValue(dotcss2._numberStep(startValue.a, targetValue.a, currentTime, totalDuration, animationStyle )); //TODO: make sure this doesn't need to be rounded or something.
 				dotcss(element)[jsFriendlyProp](r, g, b, a);
 				break;
 			case "length":
-				dotcss(element)[jsFriendlyProp](dotcss.formatNumberValue(dotcss._numberStep(startValue.length, targetValue.length, currentTime, totalDuration, animationStyle), startValue.units) + startValue.units);
+				dotcss(element)[jsFriendlyProp](dotcss.formatNumberValue(dotcss2._numberStep(startValue.length, targetValue.length, currentTime, totalDuration, animationStyle), startValue.units) + startValue.units);
 				break;
 			case "transformation":
 				var newTransform = "";
@@ -1090,7 +1105,7 @@ dotcss._animate = function(element, jsFriendlyProp, propType, startValue, target
 						var actualV1 = isNaN(v1) ? v1.length || v1.angle || v1.value || 0 : v1;
 						var actualV2 = isNaN(v2) ? v2.length || v2.angle || v2.value || 0 : v2;
 						var units = isNaN(v1) ? v1.units : "";
-						newTransform += dotcss.formatNumberValue(dotcss._numberStep(actualV1, actualV2, currentTime, totalDuration, animationStyle), units) + units + ",";
+						newTransform += dotcss.formatNumberValue(dotcss2._numberStep(actualV1, actualV2, currentTime, totalDuration, animationStyle), units) + units + ",";
 					}
 					newTransform = newTransform.substring(0, newTransform.length - 1);
 					newTransform += ") ";
@@ -1100,13 +1115,13 @@ dotcss._animate = function(element, jsFriendlyProp, propType, startValue, target
 			default:
 				switch(startValue.type){
 					case "number":
-						dotcss(element)[jsFriendlyProp](dotcss.formatNumberValue(dotcss._numberStep(startValue.value, targetValue.value, currentTime, totalDuration, animationStyle)));
+						dotcss(element)[jsFriendlyProp](dotcss.formatNumberValue(dotcss2._numberStep(startValue.value, targetValue.value, currentTime, totalDuration, animationStyle)));
 						break;
 					case "complex":
 						var newVal = "";
 						for(var i = 0; i < startValue.numbers.length; i++){
 							newVal += startValue.parts[i];
-							newVal += dotcss.formatNumberValue(dotcss._numberStep(startValue.numbers[i], targetValue.numbers[i], currentTime, totalDuration, animationStyle))
+							newVal += dotcss.formatNumberValue(dotcss2._numberStep(startValue.numbers[i], targetValue.numbers[i], currentTime, totalDuration, animationStyle))
 						}
 						newVal += startValue.parts[startValue.parts.length - 1];
 						
@@ -1123,14 +1138,14 @@ dotcss._animate = function(element, jsFriendlyProp, propType, startValue, target
 		//Because we're creating a lot of new functions. Are they being released?
 		var last = element.style[jsFriendlyProp];
 		var nextStep = function(timestamp){
-			var change = (now ? (window.performance.now() - now) : dotcss._fxInterval);
-			dotcss._animate(element, jsFriendlyProp, propType, startValue, targetValue, finalValue, currentTime + change, totalDuration, animationStyle, callback, last);
+			var change = (now ? (window.performance.now() - now) : dotcss2._fxInterval);
+			dotcss2._animate(element, jsFriendlyProp, propType, startValue, targetValue, finalValue, currentTime + change, totalDuration, animationStyle, callback, last);
 		}
 		if(window.requestAnimationFrame) {
 			window.requestAnimationFrame(nextStep);
 			//setTimeout(function(){if(!reachedAnimFrame) console.log("ERROR");}, 100);
 		}
-		else window.setTimeout(nextStep, dotcss._fxInterval);
+		else window.setTimeout(nextStep, dotcss2._fxInterval);
 	}
 	else{
 		//TODO: verify that decimal values are properly handled here.
@@ -1147,7 +1162,7 @@ dotcss._animate = function(element, jsFriendlyProp, propType, startValue, target
 //totalDuration is the duration of the entire animation from start to finish (not just this step).
 //style is the type of transition (geometric=exponential, ease, linear).
 //Returns the result.
-dotcss._numberStep = function(startValue, targetValue, currentTime, totalDuration, style){
+dotcss2._numberStep = function(startValue, targetValue, currentTime, totalDuration, style){
 	
 	startValue = Number(startValue);
 	targetValue = Number(targetValue);
@@ -1176,11 +1191,11 @@ dotcss.formatNumberValue = function(value, unit){
 };
 
 var _allProps = {
-	color: "color|background-Color|border-Bottom-Color|border-Color|border-Left-Color|border-Right-Color|border-Top-Color|text-Decoration-Color|outline-Color|column-Rule-Color",
-	length: "background-Size|border-Bottom-Left-Radius|border-Bottom-Right-Radius|border-Bottom-Width|border-Image-Width|border-Left-Width|border-Radius|border-Right-Width|border-Top-Left-Radius|border-Top-Right-Radius|border-Top-Width|border-Width|bottom|height|left|margin|margin-Bottom|margin-Left|margin-Right|margin-Top|max-Height|max-Width|min-Height|min-Width|padding|padding-Bottom|padding-Left|padding-Right|padding-Top|right|top|width|line-Height|font-Size",
-	url: "background-Image|border-Image|list-Style-Image|content|image-Orientation",
-	transformation: "transformation",
-	misc: "opacity|background|background-Attachment|background-Blend-Mode|background-Position|background-Repeat|background-Clip|background-Origin|border|border-Bottom|border-Bottom-Style|border-Image-Outset|border-Image-Repeat|border-Image-Slice|border-Image-Source|border-Left|border-Left-Style|border-Right|border-Right-Style|border-Style|border-Top|border-Top-Style|box-Decoration-Break|box-Shadow|clear|clip|display|float|overflow|box|overflow-X|overflow-Y|position|visibility|vertical-Align|z-Index|align-Content|align-Items|align-Self|flex|flex-Basis|flex-Direction|flex-Flow|flex-Grow|flex-Shrink|flex-Wrap|grid|grid-Area|grid-Auto-Columns|grid-auto-Rows|grid-Column|grid-Column-End|grid-Column-Gap|grid-Column-Start|grid-Gap|grid-Row|grid-Row-End|grid-Row-Gap|grid-Row-Start|grid-Template|grid-Template-Areas|grid-Template-Columns|grid-Template-Rows|justify-Content|order|hanging-Punctuation|hyphens|letter-Spacing|line-Break|overflow-Wrap|tab-Size|text-Align|text-Align-Last|text-Combine-Upright|text-Indent|text-Justify|text-Transform|white-Space|word-Break|word-Spacing|word-Wrap|text-Decoration|text-Decoration-Line|text-Decoration-Style|text-Shadow|text-Underline-Position|font|font-Family|font-Feature-Settings|font-Kerning|font-Language-Override|font-Size-Adjust|font-Stretch|font-Style|font-Synthesis|font-Variant|font-Variant-Alternates|font-Variant-Caps|font-Variant-East-Asian|font-Variant-Ligatures|font-Variant-Numeric|font-Variant-Position|font-Weight|direction|text-Orientation|text-Combine-Upright|unicode-Bidi|user-Select|writing-Mode|border-Collapse|border-Spacing|caption-Side|empty-Cells|table-Layout|counter-Increment|counter-Reset|list-Style|list-Style-Position|list-Style-Type|animation|animation-Delay|animation-Direction|animation-Duration|animation-Fill-Mode|animation-Iteration-Count|animation-Name|animation-Play-State|animation-Timing-Function|backface-Visibility|perspective2d|perspective-Origin|transform-Origin|transform-Style|transition|transition-Property|transition-Duration|transition-Timing-Function|transition-Delay|box-Sizing|cursor|ime-Mode|nav-Down|nav-Index|nav-Left|nav-Right|nav-Up|outline|outline-Offset|outline-Style|outline-Width|resize|text-Overflow|break-After|break-Before|break-Inside|column-Count|column-Fill|column-Gap|column-Rule|column-Rule-Style|column-Rule-Width|column-Span|column-Width|columns|widows|orphans|page-Break-After|page-Break-Before|page-Break-Inside|marks|quotes|filter|image-Rendering|image-Resolution|object-Fit|object-Position|mask|mask-Type|mark|mark-After|mark-Before|phonemes|rest|rest-After|rest-Before|voice-Balance|voice-Duration|voice-Pitch|voice-Pitch-Range|voice-Rate|voice-Stress|voice-Volume|marquee-Direction|marquee-Play-Count|marquee-Speed|marquee-Style|pointer-Events"
+		color: "color|background-Color|border-Bottom-Color|border-Color|border-Left-Color|border-Right-Color|border-Top-Color|text-Decoration-Color|outline-Color|column-Rule-Color",
+		length: "background-Size|border-Bottom-Left-Radius|border-Bottom-Right-Radius|border-Bottom-Width|border-Image-Width|border-Left-Width|border-Radius|border-Right-Width|border-Top-Left-Radius|border-Top-Right-Radius|border-Top-Width|border-Width|bottom|height|left|margin|margin-Bottom|margin-Left|margin-Right|margin-Top|max-Height|max-Width|min-Height|min-Width|padding|padding-Bottom|padding-Left|padding-Right|padding-Top|right|top|width|line-Height|font-Size",
+		url: "background-Image|border-Image|list-Style-Image|content|image-Orientation",
+		transformation: "transformation",
+		misc: "opacity|background|background-Attachment|background-Blend-Mode|background-Position|background-Repeat|background-Clip|background-Origin|border|border-Bottom|border-Bottom-Style|border-Image-Outset|border-Image-Repeat|border-Image-Slice|border-Image-Source|border-Left|border-Left-Style|border-Right|border-Right-Style|border-Style|border-Top|border-Top-Style|box-Decoration-Break|box-Shadow|clear|clip|display|float|overflow|box|overflow-X|overflow-Y|position|visibility|vertical-Align|z-Index|align-Content|align-Items|align-Self|flex|flex-Basis|flex-Direction|flex-Flow|flex-Grow|flex-Shrink|flex-Wrap|grid|grid-Area|grid-Auto-Columns|grid-auto-Rows|grid-Column|grid-Column-End|grid-Column-Gap|grid-Column-Start|grid-Gap|grid-Row|grid-Row-End|grid-Row-Gap|grid-Row-Start|grid-Template|grid-Template-Areas|grid-Template-Columns|grid-Template-Rows|justify-Content|order|hanging-Punctuation|hyphens|letter-Spacing|line-Break|overflow-Wrap|tab-Size|text-Align|text-Align-Last|text-Combine-Upright|text-Indent|text-Justify|text-Transform|white-Space|word-Break|word-Spacing|word-Wrap|text-Decoration|text-Decoration-Line|text-Decoration-Style|text-Shadow|text-Underline-Position|font|font-Family|font-Feature-Settings|font-Kerning|font-Language-Override|font-Size-Adjust|font-Stretch|font-Style|font-Synthesis|font-Variant|font-Variant-Alternates|font-Variant-Caps|font-Variant-East-Asian|font-Variant-Ligatures|font-Variant-Numeric|font-Variant-Position|font-Weight|direction|text-Orientation|text-Combine-Upright|unicode-Bidi|user-Select|writing-Mode|border-Collapse|border-Spacing|caption-Side|empty-Cells|table-Layout|counter-Increment|counter-Reset|list-Style|list-Style-Position|list-Style-Type|animation|animation-Delay|animation-Direction|animation-Duration|animation-Fill-Mode|animation-Iteration-Count|animation-Name|animation-Play-State|animation-Timing-Function|backface-Visibility|perspective2d|perspective-Origin|transform-Origin|transform-Style|transition|transition-Property|transition-Duration|transition-Timing-Function|transition-Delay|box-Sizing|cursor|ime-Mode|nav-Down|nav-Index|nav-Left|nav-Right|nav-Up|outline|outline-Offset|outline-Style|outline-Width|resize|text-Overflow|break-After|break-Before|break-Inside|column-Count|column-Fill|column-Gap|column-Rule|column-Rule-Style|column-Rule-Width|column-Span|column-Width|columns|widows|orphans|page-Break-After|page-Break-Before|page-Break-Inside|marks|quotes|filter|image-Rendering|image-Resolution|object-Fit|object-Position|mask|mask-Type|mark|mark-After|mark-Before|phonemes|rest|rest-After|rest-Before|voice-Balance|voice-Duration|voice-Pitch|voice-Pitch-Range|voice-Rate|voice-Stress|voice-Volume|marquee-Direction|marquee-Play-Count|marquee-Speed|marquee-Style|pointer-Events"
 }
 
 var _allLengthUnits = [
@@ -1225,7 +1240,7 @@ var _allTransforms = [
 	"perspective"
 ]
 
-dotcss.matrixMultiply3D = function(A, B){
+dotcss.matrixMultiply3D = function(A: Array<number>, B: Array<number>){
 	if(A.length != 16 || B.length != 16) throw "3D matrices must be arrays of 16 length.";
 	var ret = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
 	for(var y = 0; y < 4; y++)
@@ -1234,20 +1249,20 @@ dotcss.matrixMultiply3D = function(A, B){
 				ret[y + x * 4] += Number(A[y + i * 4]) * Number(B[i + x * 4]);
 	return ret;
 };
-dotcss.angleToDeg = function(a){
-	if(!isNaN(a)) return Number(a); //If there are no units, assume deg.
-	a = a.trim();
+dotcss.angleToDeg = function(a: number|string){
+	if(!isNaN(a as number)) return Number(a); //If there are no units, assume deg.
+	a = (a as string).trim();
 	if(a.indexOf("deg") != -1) return dotcss.formatNumberValue(Number(a.split("deg")[0]));
 	else if(a.indexOf("grad") != -1) return dotcss.formatNumberValue(Number(a.split("grad")[0]) * 0.9);
 	else if(a.indexOf("rad") != -1) return dotcss.formatNumberValue(Number(a.split("rad")[0]) * 180 / Math.PI);
 	else if(a.indexOf("turn") != -1) return dotcss.formatNumberValue(Number(a.split("turn")[0]) * 360);
 	else throw a + " does not have valid units for an angle."
 };
-dotcss.lengthToPx = function(l, prop, element){
+dotcss.lengthToPx = function(l: string|number, prop: LengthProp, element: Element){
 	var R = Math.round;
 	var N = Number;
-	if(!isNaN(l)) return R(N(l)); //If there are no units, assume px.
-	l = l.trim();
+	if(!isNaN(l as number)) return R(N(l)); //If there are no units, assume px.
+	l = (l as string).trim();
 	var S = l.split;
 	//Absolute:
 	if(l.indexOf("px") != -1) return R(N(l.split("px")[0]));
@@ -1260,15 +1275,15 @@ dotcss.lengthToPx = function(l, prop, element){
 	//Technically relative:
 	else if(l.indexOf("vw") != -1) return R(N(l.split("vw")[0]) * 0.01 * Math.max(document.documentElement.clientWidth, window.innerWidth || 0));
 	else if(l.indexOf("vh") != -1) return R(N(l.split("vh")[0]) * 0.01 * Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
-	else if(l.indexOf("vmin") != -1) return Math.min(dotcss.lengthToPx(R(N(l.split("vmin")[0]))) + "vw", R(N(l.split("vmin")[0])) + "vx"); //I know this is slow, but it's compact, and it's not like this is a common unit.
-	else if(l.indexOf("vmax") != -1) return Math.max(dotcss.lengthToPx(R(N(l.split("vmin")[0]))) + "vw", R(N(l.split("vmin")[0])) + "vx");
-	else if(l.indexOf("rem") != -1) return R(N(l.split("rem")[0]) * dotcss.lengthToPx(dotcss._computedStyleOrActualStyle(document.body, "fontSize"))); //Couldn't get a stack overflow if it's a computed value. Always in px.
+	else if(l.indexOf("vmin") != -1) return Math.min(dotcss.lengthToPx(R(N(l.split("vmin")[0]+ "vw"))), R(N(l.split("vmin")[0]+ "vx"))); //I know this is slow, but it's compact, and it's not like this is a common unit.
+	else if(l.indexOf("vmax") != -1) return Math.max(dotcss.lengthToPx(R(N(l.split("vmin")[0]+ "vw"))), R(N(l.split("vmin")[0]+ "vx")));
+	else if(l.indexOf("rem") != -1) return R(N(l.split("rem")[0]) * dotcss.lengthToPx(dotcss2._computedStyleOrActualStyle(document.body, "fontSize"))); //Couldn't get a stack overflow if it's a computed value. Always in px.
 
 	//Absolutely relative:
 	else if (prop && element) {
 		//If we're setting things relative to font sizes, that's easy.
 		//Can't animate ex or ch. Sorry.
-		if(l.indexOf("em") != -1) return R(N(l.split("em")[0]) * dotcss.lengthToPx(dotcss._computedStyleOrActualStyle(element, "fontSize")));
+		if(l.indexOf("em") != -1) return R(N(l.split("em")[0]) * dotcss.lengthToPx(dotcss2._computedStyleOrActualStyle(element, "fontSize")));
 
 		var ref = null;
 		switch(prop){
@@ -1278,7 +1293,7 @@ dotcss.lengthToPx = function(l, prop, element){
 			case "bottom":
 			case "height":
 				if(!element.parentNode) throw "Cannot convert " + l + " " + prop + " to px for an element that has no parent."
-				ref = dotcss.lengthToPx(dotcss._computedStyleOrActualStyle(element.parentNode, "height"));
+				ref = dotcss.lengthToPx(dotcss2._computedStyleOrActualStyle(element.parentNode, "height"));
 				break;
 			case "maxHidth":
 			case "minWidth":
@@ -1295,14 +1310,14 @@ dotcss.lengthToPx = function(l, prop, element){
 			case "paddingBottom":
 			case "paddingLeft":
 			case "paddingRight":
-				ref = dotcss.lengthToPx(dotcss._computedStyleOrActualStyle(element.parentNode, "width"));
+				ref = dotcss.lengthToPx(dotcss2._computedStyleOrActualStyle(element.parentNode, "width"));
 				if(!element.parentNode) throw "Cannot convert " + l + " " + prop + " to px for an element that has no parent."
 				break;
 			case "lineHeight": //Always relative to font. Would actually be nice to be able to set this relative to container though
-				ref = dotcss.lengthToPx(dotcss._computedStyleOrActualStyle(element, "fontSize"));
+				ref = dotcss.lengthToPx(dotcss2._computedStyleOrActualStyle(element, "fontSize"));
 				break;
 			case "fontSize": //Thought this is not strictly allowed in css, we'll assume it means relative to current element's height.
-				ref = dotcss.lengthToPx(dotcss._computedStyleOrActualStyle(element, "height"));
+				ref = dotcss.lengthToPx(dotcss2._computedStyleOrActualStyle(element, "height"));
 				break;
 			default:
 				throw "Unable to convert the value " + l + " to px for " + prop + ".";
@@ -1317,27 +1332,27 @@ dotcss.lengthToPx = function(l, prop, element){
 };
 
 //Returns a JSON object representation of value specific to the cssDataType passed in.
-dotcss._convertStyleIntoDotCssObject = function(value, cssDataType){
+dotcss2._convertStyleIntoDotCssObject = function(value, cssDataType){
 	//if(!value) return null;
 	if(!(value instanceof Array)) value = [value];
-	if(cssDataType == "color") return new dotcss._Color(value);
-	else if (cssDataType == "url") return new dotcss._Url(value);
-	else if (cssDataType == "length" && (!isNaN(value[0]) || (value[0].indexOf(" ") == -1 && value[0].replace(dotcss._floatRegex, "") != value[0]))) return new dotcss._Length(value[0]);
-	else if (cssDataType == "transformation") return new dotcss._Transform(value[0].toString())
+	if(cssDataType == "color") return new dotcss2._Color(value);
+	else if (cssDataType == "url") return new dotcss2._Url(value);
+	else if (cssDataType == "length" && (!isNaN(value[0]) || (value[0].indexOf(" ") == -1 && value[0].replace(dotcss2._floatRegex, "") != value[0]))) return new dotcss2._Length(value[0]);
+	else if (cssDataType == "transformation") return new dotcss2._Transform(value[0].toString())
 	else{
 		if(value[0] === "" 
 			|| (
 				(isNaN(value[0]))
-				&& ("" + value[0]).replace(dotcss._floatRegex, "") == value[0])
-			) return new dotcss._Unknown(value[0]); //No numbers.
-		if(isNaN(value[0])) return new dotcss._Complex(value[0]); //Numbers
-		else return new dotcss._Number(value[0]); //Just a number.
+				&& ("" + value[0]).replace(dotcss2._floatRegex, "") == value[0])
+			) return new dotcss2._Unknown(value[0]); //No numbers.
+		if(isNaN(value[0])) return new dotcss2._Complex(value[0]); //Numbers
+		else return new dotcss2._Number(value[0]); //Just a number.
 	}
 	
 };
 
 //Ensures that two complex values match.
-dotcss._compareComplexDataTypes = function(value1, value2){
+dotcss2._compareComplexDataTypes = function(value1, value2){
 	if(value1.type != "complex" || value2.type != "complex") return false;
 	if(value1.numbers.length != value2.numbers.length) return false;
 	if(value1.parts.length != value2.parts.length) return false;
@@ -1349,7 +1364,7 @@ dotcss._compareComplexDataTypes = function(value1, value2){
 
 //Adds a builder function directly to the dotcss object so that dotcss doesn't 
 //have to be used as a function when a target doesn't need to be specified.
-dotcss._addPropFunctionToDotCssObject = function(funcName){
+dotcss2._addPropFunctionToDotCssObject = function(funcName){
 	dotcss[funcName] = function(){
 		var n = new _Builder();
 		return n[funcName].apply(n, arguments);
@@ -1357,19 +1372,21 @@ dotcss._addPropFunctionToDotCssObject = function(funcName){
 };
 
 //Takes the property and generates all the dotcss and builder functions.
-dotcss._makeFunction = function(prop, jsFriendlyProp, type){
+dotcss2._makeFunction = function(prop, jsFriendlyProp, type){
 	//Create the new function.
 	_b[jsFriendlyProp] = function(){
-
 		
 		if(arguments.length == 0) return this;
 		var args = [];
 		for(var i = 0; i < arguments.length; i++) args.push(arguments[i]);
-		var value = dotcss._convertStyleIntoDotCssObject(args, type).toString();
+		var value = dotcss2._convertStyleIntoDotCssObject(args, type).toString();
+		
 		
 		var newCss = prop + ":" + value + ";";
 		this.currentCss += newCss;
-		
+		// console.log(`SETTING ${jsFriendlyProp}:`, this.toString());
+		// this.toString()
+
 		if(this.target){
 			for(var q = 0; q < this.target.length; q++){
 				//this.target[q].style += newCss;
@@ -1382,7 +1399,7 @@ dotcss._makeFunction = function(prop, jsFriendlyProp, type){
 		return this;
 	}
 	//Add the new function to the dotcss object so that it can be accessed without doing dotcss().
-	dotcss._addPropFunctionToDotCssObject(jsFriendlyProp);
+	dotcss2._addPropFunctionToDotCssObject(jsFriendlyProp);
 	
 	//Each unit of length will also have its own version of this function (assuming this is a length property).
 	if(type == "length"){
@@ -1394,7 +1411,7 @@ dotcss._makeFunction = function(prop, jsFriendlyProp, type){
 					return _b[jsFriendlyProp].apply(this, arguments);
 				}
 			})(uu);
-			dotcss._addPropFunctionToDotCssObject(jsFriendlyProp + (uu.jsName || uu.unit));
+			dotcss2._addPropFunctionToDotCssObject(jsFriendlyProp + (uu.jsName || uu.unit));
 		}
 	}
 	
@@ -1407,18 +1424,18 @@ dotcss._makeFunction = function(prop, jsFriendlyProp, type){
 	}
 };
 
-dotcss._makeTransformFunction = function(fn){
+dotcss2._makeTransformFunction = function(fn){
 	dotcss[fn] = function(){
-		var n = new dotcss._Transform();
+		var n = new dotcss2._Transform();
 		return n[fn].apply(n, arguments);
 	};
 }
 
-dotcss._computedStyleOrActualStyle = function(element, property){
+dotcss2._computedStyleOrActualStyle = function(element, property){
 	return window.getComputedStyle(element)[property] || element.style[property];
 };
 
-dotcss._modDeg = function(a){
+dotcss2._modDeg = function(a){
 	if(a < 0) a = 360 - ((-a) % 360);
 	return a % 360;
 };
@@ -1450,10 +1467,29 @@ dotcss.rgba = function(r, g, b, a){
 };
 
 dotcss.buildTransform = function(){
-	return new dotcss._Transform();
+	return new dotcss2._Transform();
 };
 
-dotcss.scopeToEl = function(el){
+dotcss["cacheScopedStaticStyles"] = function(el: HTMLElement){
+	let elements = getScopedNodeList("*", el);
+	for(let element of elements){
+		if(element.hasAttribute("style")){
+			element.setAttribute(STATIC_SYLES_ATTR, element.getAttribute("style"));
+		}
+	}
+}
+
+dotcss["clearDynamicStyles"] = function(el: HTMLElement){
+	let elements = getScopedNodeList("*", el);
+	for(let element of elements){
+		element.removeAttribute("style");
+		if(element.hasAttribute(STATIC_SYLES_ATTR)){
+			element.setAttribute("style", element.getAttribute(STATIC_SYLES_ATTR));
+		}
+	}
+}
+
+dotcss.scopeToEl = function(el: HTMLElement){
 	scopeStack.unshift(el);
 	return this;
 };
@@ -1466,10 +1502,10 @@ dotcss.unscope = function(){
 for(var k in _allProps) {
 	let P = _allProps[k].split("|");
 	for(var i in P){
-		dotcss._makeFunction(P[i].toLowerCase(), P[i].replace(new RegExp("-", "g"), ""), k);
+		dotcss2._makeFunction(P[i].toLowerCase(), P[i].replace(new RegExp("-", "g"), ""), k);
 	}
 }
-for(var i = 0; i < _allLengthUnits.length; i++) dotcss._makeTransformFunction(_allLengthUnits[i]);
+for(let i: number = 0; i < _allLengthUnits.length; i++) dotcss2._makeTransformFunction(_allLengthUnits[i]);
 //dotcss = new dotcss();
 
 // for (var k in _b) {