dothtml 5.0.3 → 5.1.0

package/src/i-dot.ts

@@ -1,6 +1,6 @@
 import EventBus from "./event-bus";
 import type Component from "./component";
-import IDotCss, { IDotcssProp } from "./i-dotcss";
+import IDotCss, { IDotcssProp } from "./styling/i-dotcss";
 
 export type DotContentPrimitive = string|number|boolean;
 export type DotContentBasic = DotContentPrimitive|Node|Element|NodeList|Component|IDotDocument//typeof DotDocument;

package/src/styling/css-types.ts/css-angle.ts

@@ -0,0 +1,18 @@
+import { floatRegex } from "../../dot-util";
+import CssDataType from "./css-data-type";
+
+export default class CssAngle extends CssDataType{
+	angle: number;
+	units: string;
+	constructor(value: string|number){
+		super("angle");
+		value = value || "0deg";
+		if(!isNaN(value as number)) value = `${Math.round(value as number)}deg`;
+		this.angle = Number((value as string).match(floatRegex)[0]);
+		this.units = (value as string).split(floatRegex)[1] || "deg";
+	}
+
+	toString(){
+		return this.angle + this.units;
+	}
+}

package/src/styling/css-types.ts/css-color.ts

@@ -0,0 +1,229 @@
+import CssDataType from "./css-data-type";
+
+export default class CssColor extends CssDataType{
+	r: number;
+	g: number;
+	b: number;
+	a: number;
+	constructor(value){
+		super("color");
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		if(value.length == 1) {
+			value = value[0];
+			if(value == "" || value == "none" || value == "initial" || value == "inherit"){} //Nothing more needs to be done.
+			else if(!isNaN(value)){
+				this.b = value & 0xFF;
+				value >>= 8;
+				this.g = value & 0xFF;
+				value >>= 8;
+				this.r = value & 0xFF;
+			}
+			else if(value[0] == "#"){
+				var cH = value.split("#")[1];
+				if(cH.length == 3){
+					this.r = Number("0x" + cH[0] + "" + cH[0]);
+					this.g = Number("0x" + cH[1] + "" + cH[1]);
+					this.b = Number("0x" + cH[2] + "" + cH[2]);
+
+				}
+				else if(cH.length == 6){
+					this.r = Number("0x" + cH[0] + "" + cH[1]);
+					this.g = Number("0x" + cH[2] + "" + cH[3]);
+					this.b = Number("0x" + cH[4] + "" + cH[5]);
+				}
+				//else throw value + " is not a valid color"; //or just stick with black.
+			}
+			else if(value.toLowerCase().indexOf("rgb") === 0){
+				//This also handles rgba.
+				var cData = value.split("(")[1];
+				cData = cData.split(")")[0];
+				cData = cData.split(",");
+				if(cData.length == 3 || cData.length == 4){
+					this.r = Number(cData[0]);
+					this.g = Number(cData[1]);
+					this.b = Number(cData[2]);
+					this.a = Number(cData[3] || 1);
+				}
+			}
+			else{
+				var r = 0;
+				var g = 0;
+				var b = 0;
+				switch(value.toLowerCase()){
+					case 'aliceblue':r=0xF0;g=0xF8;b=0xFF;break;
+					case 'antiquewhite':r=0xFA;g=0xEB;b=0xD7;break;
+					case 'aqua':r=0x00;g=0xFF;b=0xFF;break;
+					case 'aquamarine':r=0x7F;g=0xFF;b=0xD4;break;
+					case 'azure':r=0xF0;g=0xFF;b=0xFF;break;
+					case 'beige':r=0xF5;g=0xF5;b=0xDC;break;
+					case 'bisque':r=0xFF;g=0xE4;b=0xC4;break;
+					case 'black':r=0x00;g=0x00;b=0x00;break;
+					case 'blanchedalmond':r=0xFF;g=0xEB;b=0xCD;break;
+					case 'blue':r=0x00;g=0x00;b=0xFF;break;
+					case 'blueviolet':r=0x8A;g=0x2B;b=0xE2;break;
+					case 'brown':r=0xA5;g=0x2A;b=0x2A;break;
+					case 'burlywood':r=0xDE;g=0xB8;b=0x87;break;
+					case 'cadetblue':r=0x5F;g=0x9E;b=0xA0;break;
+					case 'chartreuse':r=0x7F;g=0xFF;b=0x00;break;
+					case 'chocolate':r=0xD2;g=0x69;b=0x1E;break;
+					case 'coral':r=0xFF;g=0x7F;b=0x50;break;
+					case 'cornflowerblue':r=0x64;g=0x95;b=0xED;break;
+					case 'cornsilk':r=0xFF;g=0xF8;b=0xDC;break;
+					case 'crimson':r=0xDC;g=0x14;b=0x3C;break;
+					case 'cyan':r=0x00;g=0xFF;b=0xFF;break;
+					case 'darkblue':r=0x00;g=0x00;b=0x8B;break;
+					case 'darkcyan':r=0x00;g=0x8B;b=0x8B;break;
+					case 'darkgoldenrod':r=0xB8;g=0x86;b=0x0B;break;
+					case 'darkgray':r=0xA9;g=0xA9;b=0xA9;break;
+					case 'darkgrey':r=0xA9;g=0xA9;b=0xA9;break;
+					case 'darkgreen':r=0x00;g=0x64;b=0x00;break;
+					case 'darkkhaki':r=0xBD;g=0xB7;b=0x6B;break;
+					case 'darkmagenta':r=0x8B;g=0x00;b=0x8B;break;
+					case 'darkolivegreen':r=0x55;g=0x6B;b=0x2F;break;
+					case 'darkorange':r=0xFF;g=0x8C;b=0x00;break;
+					case 'darkorchid':r=0x99;g=0x32;b=0xCC;break;
+					case 'darkred':r=0x8B;g=0x00;b=0x00;break;
+					case 'darksalmon':r=0xE9;g=0x96;b=0x7A;break;
+					case 'darkseagreen':r=0x8F;g=0xBC;b=0x8F;break;
+					case 'darkslateblue':r=0x48;g=0x3D;b=0x8B;break;
+					case 'darkslategray':r=0x2F;g=0x4F;b=0x4F;break;
+					case 'darkslategrey':r=0x2F;g=0x4F;b=0x4F;break;
+					case 'darkturquoise':r=0x00;g=0xCE;b=0xD1;break;
+					case 'darkviolet':r=0x94;g=0x00;b=0xD3;break;
+					case 'deeppink':r=0xFF;g=0x14;b=0x93;break;
+					case 'deepskyblue':r=0x00;g=0xBF;b=0xFF;break;
+					case 'dimgray':r=0x69;g=0x69;b=0x69;break;
+					case 'dimgrey':r=0x69;g=0x69;b=0x69;break;
+					case 'dodgerblue':r=0x1E;g=0x90;b=0xFF;break;
+					case 'firebrick':r=0xB2;g=0x22;b=0x22;break;
+					case 'floralwhite':r=0xFF;g=0xFA;b=0xF0;break;
+					case 'forestgreen':r=0x22;g=0x8B;b=0x22;break;
+					case 'fuchsia':r=0xFF;g=0x00;b=0xFF;break;
+					case 'gainsboro':r=0xDC;g=0xDC;b=0xDC;break;
+					case 'ghostwhite':r=0xF8;g=0xF8;b=0xFF;break;
+					case 'gold':r=0xFF;g=0xD7;b=0x00;break;
+					case 'goldenrod':r=0xDA;g=0xA5;b=0x20;break;
+					case 'gray':r=0x80;g=0x80;b=0x80;break;
+					case 'grey':r=0x80;g=0x80;b=0x80;break;
+					case 'green':r=0x00;g=0x80;b=0x00;break;
+					case 'greenyellow':r=0xAD;g=0xFF;b=0x2F;break;
+					case 'honeydew':r=0xF0;g=0xFF;b=0xF0;break;
+					case 'hotpink':r=0xFF;g=0x69;b=0xB4;break;
+					case 'indianred':r=0xCD;g=0x5C;b=0x5C;break;
+					case 'indigo':r=0x4B;g=0x00;b=0x82;break;
+					case 'ivory':r=0xFF;g=0xFF;b=0xF0;break;
+					case 'khaki':r=0xF0;g=0xE6;b=0x8C;break;
+					case 'lavender':r=0xE6;g=0xE6;b=0xFA;break;
+					case 'lavenderblush':r=0xFF;g=0xF0;b=0xF5;break;
+					case 'lawngreen':r=0x7C;g=0xFC;b=0x00;break;
+					case 'lemonchiffon':r=0xFF;g=0xFA;b=0xCD;break;
+					case 'lightblue':r=0xAD;g=0xD8;b=0xE6;break;
+					case 'lightcoral':r=0xF0;g=0x80;b=0x80;break;
+					case 'lightcyan':r=0xE0;g=0xFF;b=0xFF;break;
+					case 'lightgoldenrodyellow':r=0xFA;g=0xFA;b=0xD2;break;
+					case 'lightgray':r=0xD3;g=0xD3;b=0xD3;break;
+					case 'lightgrey':r=0xD3;g=0xD3;b=0xD3;break;
+					case 'lightgreen':r=0x90;g=0xEE;b=0x90;break;
+					case 'lightpink':r=0xFF;g=0xB6;b=0xC1;break;
+					case 'lightsalmon':r=0xFF;g=0xA0;b=0x7A;break;
+					case 'lightseagreen':r=0x20;g=0xB2;b=0xAA;break;
+					case 'lightskyblue':r=0x87;g=0xCE;b=0xFA;break;
+					case 'lightslategray':r=0x77;g=0x88;b=0x99;break;
+					case 'lightslategrey':r=0x77;g=0x88;b=0x99;break;
+					case 'lightsteelblue':r=0xB0;g=0xC4;b=0xDE;break;
+					case 'lightyellow':r=0xFF;g=0xFF;b=0xE0;break;
+					case 'lime':r=0x00;g=0xFF;b=0x00;break;
+					case 'limegreen':r=0x32;g=0xCD;b=0x32;break;
+					case 'linen':r=0xFA;g=0xF0;b=0xE6;break;
+					case 'magenta':r=0xFF;g=0x00;b=0xFF;break;
+					case 'maroon':r=0x80;g=0x00;b=0x00;break;
+					case 'mediumaquamarine':r=0x66;g=0xCD;b=0xAA;break;
+					case 'mediumblue':r=0x00;g=0x00;b=0xCD;break;
+					case 'mediumorchid':r=0xBA;g=0x55;b=0xD3;break;
+					case 'mediumpurple':r=0x93;g=0x70;b=0xDB;break;
+					case 'mediumseagreen':r=0x3C;g=0xB3;b=0x71;break;
+					case 'mediumslateblue':r=0x7B;g=0x68;b=0xEE;break;
+					case 'mediumspringgreen':r=0x00;g=0xFA;b=0x9A;break;
+					case 'mediumturquoise':r=0x48;g=0xD1;b=0xCC;break;
+					case 'mediumvioletred':r=0xC7;g=0x15;b=0x85;break;
+					case 'midnightblue':r=0x19;g=0x19;b=0x70;break;
+					case 'mintcream':r=0xF5;g=0xFF;b=0xFA;break;
+					case 'mistyrose':r=0xFF;g=0xE4;b=0xE1;break;
+					case 'moccasin':r=0xFF;g=0xE4;b=0xB5;break;
+					case 'navajowhite':r=0xFF;g=0xDE;b=0xAD;break;
+					case 'navy':r=0x00;g=0x00;b=0x80;break;
+					case 'oldlace':r=0xFD;g=0xF5;b=0xE6;break;
+					case 'olive':r=0x80;g=0x80;b=0x00;break;
+					case 'olivedrab':r=0x6B;g=0x8E;b=0x23;break;
+					case 'orange':r=0xFF;g=0xA5;b=0x00;break;
+					case 'orangered':r=0xFF;g=0x45;b=0x00;break;
+					case 'orchid':r=0xDA;g=0x70;b=0xD6;break;
+					case 'palegoldenrod':r=0xEE;g=0xE8;b=0xAA;break;
+					case 'palegreen':r=0x98;g=0xFB;b=0x98;break;
+					case 'paleturquoise':r=0xAF;g=0xEE;b=0xEE;break;
+					case 'palevioletred':r=0xDB;g=0x70;b=0x93;break;
+					case 'papayawhip':r=0xFF;g=0xEF;b=0xD5;break;
+					case 'peachpuff':r=0xFF;g=0xDA;b=0xB9;break;
+					case 'peru':r=0xCD;g=0x85;b=0x3F;break;
+					case 'pink':r=0xFF;g=0xC0;b=0xCB;break;
+					case 'plum':r=0xDD;g=0xA0;b=0xDD;break;
+					case 'powderblue':r=0xB0;g=0xE0;b=0xE6;break;
+					case 'purple':r=0x80;g=0x00;b=0x80;break;
+					case 'rebeccapurple':r=0x66;g=0x33;b=0x99;break;
+					case 'red':r=0xFF;g=0x00;b=0x00;break;
+					case 'rosybrown':r=0xBC;g=0x8F;b=0x8F;break;
+					case 'royalblue':r=0x41;g=0x69;b=0xE1;break;
+					case 'saddlebrown':r=0x8B;g=0x45;b=0x13;break;
+					case 'salmon':r=0xFA;g=0x80;b=0x72;break;
+					case 'sandybrown':r=0xF4;g=0xA4;b=0x60;break;
+					case 'seagreen':r=0x2E;g=0x8B;b=0x57;break;
+					case 'seashell':r=0xFF;g=0xF5;b=0xEE;break;
+					case 'sienna':r=0xA0;g=0x52;b=0x2D;break;
+					case 'silver':r=0xC0;g=0xC0;b=0xC0;break;
+					case 'skyblue':r=0x87;g=0xCE;b=0xEB;break;
+					case 'slateblue':r=0x6A;g=0x5A;b=0xCD;break;
+					case 'slategray':r=0x70;g=0x80;b=0x90;break;
+					case 'slategrey':r=0x70;g=0x80;b=0x90;break;
+					case 'snow':r=0xFF;g=0xFA;b=0xFA;break;
+					case 'springgreen':r=0x00;g=0xFF;b=0x7F;break;
+					case 'steelblue':r=0x46;g=0x82;b=0xB4;break;
+					case 'tan':r=0xD2;g=0xB4;b=0x8C;break;
+					case 'teal':r=0x00;g=0x80;b=0x80;break;
+					case 'thistle':r=0xD8;g=0xBF;b=0xD8;break;
+					case 'tomato':r=0xFF;g=0x63;b=0x47;break;
+					case 'turquoise':r=0x40;g=0xE0;b=0xD0;break;
+					case 'violet':r=0xEE;g=0x82;b=0xEE;break;
+					case 'wheat':r=0xF5;g=0xDE;b=0xB3;break;
+					case 'white':r=0xFF;g=0xFF;b=0xFF;break;
+					case 'whitesmoke':r=0xF5;g=0xF5;b=0xF5;break;
+					case 'yellow':r=0xFF;g=0xFF;b=0x00;break;
+					case 'yellowgreen':r=0x9A;g=0xCD;b=0x32;break;
+				}
+				this.r = r;
+				this.g = g;
+				this.b = b;
+			}
+		}
+		else if(value.length == 3 || value.length == 4){
+			this.r = value[0];
+			this.g = value[1];
+			this.b = value[2];
+			if(value.length == 4){
+				this.a = value[3];
+			}
+		}
+	}
+
+	toString(){
+		var R = Math.round;
+		var X = Math.max;
+		var N = Math.min;
+		if(this.a == 1)
+			return "rgb(" + N(255, X(0, R(this.r))) + ", " + N(255, X(0, R(this.g))) + ", " + N(255, X(0, R(this.b))) + ")";
+		else
+			return "rgba(" + N(255, X(0, R(this.r))) + ", " + N(255, X(0, R(this.g))) + ", " + N(255, X(0, R(this.b))) + ", " + N(1, X(0, this.a)) + ")";
+	}
+}

package/src/styling/css-types.ts/css-complex.ts

@@ -0,0 +1,20 @@
+import { floatRegex } from "../../dot-util";
+import CssDataType from "./css-data-type";
+
+export default class CssComplex extends CssDataType{
+	parts: string[];
+	numbers: string;
+	constructor(value){
+		super("complex");
+		this.parts = (" " + value + " ").split(floatRegex);
+		this.numbers = value.match(floatRegex);
+	}
+	
+	toString(){
+		var ret = this.parts[0];
+		for(var i = 0; i < this.numbers.length; i++){
+			ret += this.numbers[i] + this.parts[i+1];
+		}
+		return ret;
+	}
+}

package/src/styling/css-types.ts/css-data-type.ts

@@ -0,0 +1,9 @@
+export declare type CssDataTypeToken = "url"|"number"|"length"|"angle"|"color"|"transformation"|"complex"|"unknown";
+
+export default abstract class CssDataType{
+	type: CssDataTypeToken;
+
+	constructor(type: CssDataTypeToken){
+		this.type = type;
+	}
+}

package/src/styling/css-types.ts/css-length.ts

@@ -0,0 +1,20 @@
+import { floatRegex } from "../../dot-util";
+import CssDataType from "./css-data-type";
+
+//TODO: this should support multiple lengths.
+// TODO: add some test cases to test these.
+export default class CssLength extends CssDataType{
+	length: number;
+	units: string;
+	constructor (value:string|number){
+		super("length")
+		value = value || "0px";
+		if(!isNaN(value as number)) value = Math.round(value as number) + "px";
+		this.length = Number((value as string).match(floatRegex)[0]);
+		this.units = (value as string).split(floatRegex)[1] || "px";
+	}
+	
+	toString(){
+		return `${this.length}${this.units}`;
+	}
+}

package/src/styling/css-types.ts/css-number.ts

@@ -0,0 +1,12 @@
+import CssDataType from "./css-data-type";
+
+export default class CssNumber extends CssDataType{
+	value: number;
+	constructor(value){
+		super("number");
+		this.value = Number(value);
+	}
+	toString(){
+		return this.value;
+	}
+}

package/src/styling/css-types.ts/css-transform.ts

@@ -0,0 +1,220 @@
+import { isF } from "../../dot-util";
+import {AllAngleUnits, AllLengthUnits} from "../unit-function-tables";
+import { BasicCommonValues, ITransformationContext, NumericAngle, NumericLength } from "../i-dotcss";
+import dotcss from "../style-builder";
+import CssAngle from "./css-angle";
+import CssDataType from "./css-data-type";
+import CssLength from "./css-length";
+
+export default class CssTransform extends CssDataType{
+	
+	transformations: Array<{
+		transformation: string,
+		args: Array<any>
+	}>;
+	finalMatrix: number[];
+	simpleValue: string;
+	
+	constructor(value){
+		super("transformation");
+		this.transformations = [];
+		//this.finalMatrix = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
+		if(typeof value == "string"){
+			//this.value = "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)";
+			this.simpleValue = value;
+			return; //?? Need a better way to handle this.
+		}
+		else if(isF(value)){
+			value(this);
+		}
+		//var ret = {value: value, type: cssDataType};
+
+		// The old way of doing transformations was that it was set up to accept a big string. The added complexity was to support animations.
+		// The new way is to use the builder. But I might want to come back and revisit the idea of accepting a string.
+		// For instance, a use case of accepting a string for a transformation is if we're trying to animate transforms generated by another framework.
+		// Not sure if that's realistic.
+		// var transformations = value.split(/\)\s*/); transformations.pop(); for(var i = 0; i < transformations.length; i++) transformations[i] += ")";
+		// // var cos = Math.cos; var sin = Math.sin; var tan = Math.tan;
+		// for(var t = 0; t < transformations.length; t++){
+		// 	var trans = transformations[t].trim();
+		// 	var parts = trans.split(/[\(\)]/);
+		// 	var func = parts[0]
+		// 	var p = parts[1].split(/\s*,\s*/)
+		
+		// 	if(this[func]){
+		// 		this[func].apply(this, p);
+		// 	}
+		// }
+	}
+	
+	toString(){
+		if(this.simpleValue){
+			return this.simpleValue;
+		}
+
+		var ret = "";
+		for(var i = 0; i < this.transformations.length; i++){
+			var t = this.transformations[i];
+			ret += t.transformation + "(";
+			for(var k = 0; k < t.args.length; k++){
+				ret += t.args[k].toString() + ",";
+			}
+			ret = ret.substring(0, ret.length - 1);
+			ret += ") ";
+		}
+		return ret.trim();
+	}
+	
+	private appendTransformString(transformation, args){
+		//this.finalMatrix = dotcss.matrixMultiply3D(m, this.finalMatrix);
+		this.transformations.push({transformation: transformation, args: args});
+		/*if(this.value.length > 0) this.value += " ";
+		this.value += transformation + "(";
+		for(var i = 0; i < args.length; i++){
+			this.value += args[i] + (i == args.length -1 ? "" : ",")
+		}*/
+		return this;
+	}
+	
+	matrix3d(a1:number, b1:number, c1:number, d1:number, a2:number, b2:number, c2:number, d2:number, a3:number, b3:number, c3:number, d3:number, a4:number, b4:number, c4:number, d4:number){
+		// Why do we need this again?
+		// Going to try to remove it to see what breaks. I believe it's used for animations.
+		// this.finalMatrix = dotcss.matrixMultiply3D(arguments as unknown as Array<number>, this.finalMatrix);
+		return this.appendTransformString("matrix3d", arguments);
+	}
+	
+	matrix(a: number, b: number, c: number, d: number, tx: number, ty: number){
+		return this.appendTransformString("matrix", arguments);
+	}
+	
+	translate(x:NumericLength,y?:NumericLength){
+		return arguments.length == 1 
+			? this.appendTransformString("translate", [new CssLength(x)]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,0,0,1]*/) 
+			: this.appendTransformString("translate", [new CssLength(x), new CssLength(y)]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,y,0,1]*/);
+	}
+	
+	translate3d(x:NumericLength,y:NumericLength,z:NumericLength){
+		return this.appendTransformString("translate3d", [new CssLength(x), new CssLength(y), new CssLength(z)]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1]*/);
+	}
+	
+	translateX(x:NumericLength){
+		
+		//var x = dotcss.lengthToPx(p[0]);
+		//this.updateValue("translateX", [new CssLength(x + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,x,0,0,1]*/);
+		return this.appendTransformString("translateX", [new CssLength(x)]);
+	}
+	
+	translateY(y:NumericLength){
+		//var y = dotcss.lengthToPx(p[0]);
+		//this.updateValue("translateY", [new CssLength(y + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,0,y,0,1]*/);
+		return this.appendTransformString("translateY", [new CssLength(y)]);
+	}
+	
+	translateZ(z:NumericLength){
+		
+		//var z = dotcss.lengthToPx(p[0]);
+		//this.updateValue("translateZ", [new CssLength(z + "px")]/*, [1,0,0,0,0,1,0,0,0,0,1,0,0,0,z,1]*/);
+		return this.appendTransformString("translateZ", [new CssLength(z)]);
+	}
+	
+	scale(x:number,y?:number){
+		return this.appendTransformString("scale", [x,y??1]/*, [x,0,0,0,0,y,0,0,0,0,1,0,0,0,0,1]*/);
+	}
+	
+	scale3d(x:number,y:number,z:number){
+		return this.appendTransformString("scale3d", [x,y,z]/*, [p[0],0,0,0,0,p[1],0,0,0,0,p[2],0,0,0,0,1]*/);
+	}
+	
+	scaleX(x:number){
+		//this.updateValue("scaleX", p/*, [p[0],0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]*/);
+		return this.appendTransformString("scaleX", [x]);
+	}
+	
+	scaleY(y:number){
+		//this.updateValue("scaleY", p/*, [1,0,0,0,0,p[0],0,0,0,0,1,0,0,0,0,1]*/);
+		return this.appendTransformString("scaleY", [y]);
+	}
+	
+	scaleZ(z:number){
+		//this.updateValue("scaleZ", p/*, [1,0,0,0,0,1,0,0,0,0,p[0],0,0,0,0,1]*/);
+		return this.appendTransformString("scaleZ", [z]);
+	}
+	
+	rotate(x: NumericAngle){
+		// var a = Util.angleToDeg(x);
+		return this.appendTransformString("rotate", [new CssAngle(x)]/*, [Math.cos(a),Math.sin(a),0,0,-Math.sin(axxx),Math.cos(axxx),0,0,0,0,1,0,0,0,0,1]*/);
+	}
+	
+	rotate3d(x: number, y: number, z: number, a: NumericAngle){
+		
+		return this.appendTransformString("rotate3d", [x, y, z, new CssAngle(a)]/*, 
+			[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,
+			0,				0,				0,				1]*/
+		);
+	}
+
+	// Manually create the 4 unit functions for rotate 3d since the arg structure is mixed.
+	rotate3dDeg(x: number, y: number, z: number, a: number){return this.rotate3d(x,y,z,a);}
+	rotate3dRad(x: number, y: number, z: number, a: number){return this.rotate3d(x,y,z,`${a}rad`);}
+	rotate3dGrad(x: number, y: number, z: number, a: number){return this.rotate3d(x,y,z,`${a}grad`);}
+	rotate3dTurn(x: number, y: number, z: number, a: number){return this.rotate3d(x,y,z,`${a}turn`);}
+	
+	rotateX(x: NumericAngle){
+		return this.appendTransformString("rotateX", [new CssAngle(x)]/*, [1,0,0,0,0,Math.cos(axx),Math.sin(axx),0,0,-Math.sin(axx),Math.cos(axx),0,0,0,0,1]*/);
+	}
+	
+	rotateY(y: NumericAngle){
+		return this.appendTransformString("rotateY", [new CssAngle(y)]);
+	}
+	
+	rotateZ(z: NumericAngle){
+		return this.appendTransformString("rotateZ", [new CssAngle(z)]);
+	}
+	
+	skew(x: NumericAngle, y?: NumericAngle){
+		
+		return arguments.length == 1 
+			? this.appendTransformString("skew", [new CssAngle(x)]/*, [1,0,0,0,Math.tan(axxxxx),1,0,0,0,0,1,0,0,0,0,1]*/)
+			: this.appendTransformString("skew", [new CssAngle(x), new CssAngle(y)]/*, [1,Math.tan(axxxy),0,0,Math.tan(axxxx),1,0,0,0,0,1,0,0,0,0,1]*/);
+	}
+	
+	skewX(x: NumericAngle){
+		return this.appendTransformString("skewX", [new CssAngle(x)]);
+	}
+	
+	skewY(y: NumericAngle){
+		return this.appendTransformString("skewY", [new CssAngle(y)]);
+	}
+	
+	perspective(d: NumericLength){
+		return this.appendTransformString("perspective", [new CssLength(d)]/*, [1,0,0,0,0,1,0,0,0,0,1,0,0,0,dotcss.formatNumberValue(-1 / d),1]*/);
+	}
+}
+
+// Extend the above with special length and degree functions.
+
+const lengthFuncs = "translate|translate3d|translateX|translateY|translateZ|perspective".split("|");
+const angleFuncs = "rotate|rotateX|rotateY|rotateZ|skew|skewX|skewY".split("|");
+
+for(let i = 0; i < lengthFuncs.length; i++){
+	let F = lengthFuncs[i];
+	for(let u = 0; u < AllLengthUnits.length; u++){
+		let uu = AllLengthUnits[u];
+		CssTransform.prototype[F + (uu.jsName || uu.unit)] = function(){
+			for(var i = 0; i < arguments.length; i++) arguments[i] = arguments[i] + uu.unit.toLowerCase();
+			return CssTransform.prototype[F].apply(this, arguments);
+		}
+	}
+}
+for(let i = 0; i < angleFuncs.length; i++){
+	let F = angleFuncs[i];
+	for(let u = 0; u < AllAngleUnits.length; u++){
+		let uu = AllAngleUnits[u];
+		CssTransform.prototype[F + (uu.unit)] = function(){
+			for(var i = 0; i < arguments.length; i++) arguments[i] = arguments[i] + uu.unit.toLowerCase();
+			return CssTransform.prototype[F].apply(this, arguments);
+		}
+	}
+}

package/src/styling/css-types.ts/css-unknown.ts

@@ -0,0 +1,13 @@
+import CssDataType from "./css-data-type";
+
+export default class CssUnknown extends CssDataType{
+	value: any;
+	constructor(value: any){
+		super("unknown");
+		this.value = value;
+	}
+
+	toString(){
+		return this.value;
+	}
+}

package/src/styling/css-types.ts/css-url.ts

@@ -0,0 +1,41 @@
+import CssDataType from "./css-data-type";
+
+export default class CssUrl extends CssDataType{
+	url: Array<string>;
+	constructor(value){
+		super("url");
+		this.url = null;
+		if(!value || value.length == 0 || (value.length == 1 && value[0] == "" || value[0] == "none" || value[0] == "initial" || value[0] == "inherit")){
+			this.url = null;
+		}
+		else{
+			this.url = [];
+			for(var i = 0; i < value.length; i++){
+				var currentURL = "";
+				if(value[i].toLowerCase().indexOf("url") === 0){
+					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, url.length - 1);
+					}
+					this.url.push(url);
+				}
+				else{
+					this.url.push(value[i]);
+				}
+			}
+		}
+	}
+	
+	toString(): string{
+		if(!this.url) return "none";
+		else 
+		{
+			var ret = [];
+			for(var i = 0; i < this.url.length; i++){
+				ret.push("url(\"" + this.url[i] + "\")");
+			}
+			return ret.join(", ");
+		}
+	}
+}