dothtml 5.0.4 → 5.1.1

package/src/component.ts

@@ -4,7 +4,7 @@ import { ClassPrefix, eachK, GlobalComponentStack, isF, sT } from "./dot-util";
 import ERR from "./err";
 import { IDotDocument, IDotElement, IDotElementDocument, IDotGenericElement } from "./i-dot";
 import { ArgCallback, ArrayArgCallback, AttrArgCallback } from "./arg-callback-obj";
-import IDotCss from "./i-dotcss";
+import IDotCss from "./styling/i-dotcss";
 
 interface IPropertyContainer{
 	activePropConstructor: Function;
@@ -19,6 +19,22 @@ interface IPropertyContainer{
 
 abstract class Component{
 
+	/**
+	 * Used internally to indicate the first time $updateStyles is called.
+	 * This method is called by the static component builder when the component is created.
+	 * If a prop is accessed within the style builder, the getter reads this field to mark $updateStyles as a dependency.
+	*/
+	#initializingStyles: boolean = false;
+	#initializingBuild: boolean = false;
+	// A bit messy but gets us to MVP for this feature.
+	// Ideally this should be made a singleton somehow, perhaps put in the property metadata.
+	#rebuildStylesOnPropChange: {[propName: string]: true} = {};
+	#rebuildBuilderOnPropChange: {[propName: string]: true} = {};
+
+	/**
+	 * Called once per component, on the first build.
+	 * TODO: this shouldn't require an instance of the component. Please experiment with fixing this.
+	*/
 	static initializeComponent<T extends Component>(obj: T): void{
 		if(!(obj.constructor as any).__dotComponentInitialized) {
 			(obj.constructor as any).__dotComponentInitialized = true;
@@ -36,7 +52,7 @@ abstract class Component{
 
 	}
 
-	static build<T extends Component>(obj: T): Element{
+	static build<T extends Component>(obj: T): HTMLElement{
 		Component.initializeComponent(obj);
 
 		GlobalComponentStack.push(obj);
@@ -87,20 +103,45 @@ abstract class Component{
 
 		Component.initializeEventHandlers(obj);
 	
+		Component.rebuild(obj);
+	
+		// TODO: would be great to do this without a timer, once the DOM is updated. 
+		// May require some type of queueing system within dot.
+		obj.ready && sT(()=>{
+			GlobalComponentStack.push(obj);
+			obj.ready();
+			GlobalComponentStack.pop()
+		}, 0);
+
+		GlobalComponentStack.pop();
+		
+		return obj.$el;
+	}
+
+	/**
+	 * Called any time the component needs to be completely rebuilt.
+	*/
+	static rebuild<T extends Component>(obj: T) {
+
+		let oldEl = obj.$el;
+		
+		if(!obj.__eventsInitialized) obj.#initializingBuild = true;
 		let ret = obj.builder(...obj.__args);
+		obj.#initializingBuild = false;
 	
 		let lst = ret.getLast();
 		(!lst || (lst.parentNode.childNodes.length > 1)) && ERR("C#", obj.name || obj.constructor.name || "(unnamed obj)");
 		
-	
-	
-		// Some weird ass logic to support legacy named components and the new syntax.
-		// if(classNumb || n) ret = (obj instanceof DotDocument ? obj : dot)._appendOrCreateDocument(dot.scopeClass(classNumb, ret));
-		// ret = ret.scopeClass(ret, (obj.constructor as any).__dotClassNumb);
-		
-		obj["__$el"] = obj.$el || lst;
+
+		// Note: I don't know what the justification was for using $obj.el, but all tests pass without it.
+		// It was removed to facilitate rebuilding the component (during a prop change).
+		obj["__$el"] = /*obj.$el ||*/ lst;
 		obj.$el["__dothtml_component"] = obj;
-	
+
+		if(oldEl){
+			// Clean it up and replace it with the new element!
+		}
+
 		// TODO: would there be a way to not have to create obj function for each instance?
 		if(obj.style) {
 			// obj will be the officially supported way to use dothtml.
@@ -115,23 +156,13 @@ abstract class Component{
 				obj.style(dot.css);
 				dot.css.unscope();
 			}
+			if(!obj.__eventsInitialized) obj.#initializingStyles = true;
 			obj.$updateStyles();
+			obj.#initializingStyles = false;
 			//styler();
 		}
 	
 		obj.built && obj.built();
-	
-		// TODO: would be great to do this without a timer, once the DOM is updated. 
-		// May require some type of queueing system within dot.
-		obj.ready && sT(()=>{
-			GlobalComponentStack.push(obj);
-			obj.ready();
-			GlobalComponentStack.pop()
-		}, 0);
-
-		GlobalComponentStack.pop();
-		
-		return obj.$el;
 	}
 
 	static initializeEventHandlers(obj){
@@ -238,6 +269,14 @@ abstract class Component{
 			if(!ar) ar = cc.__propContainer.propDependencies[name] = [];
 			ar.push(cb);
 		}
+
+		// Again I find this a weird way to do it that kind of side-steps the above approach, but it gets the job done and is dead simple.
+		if(cc.#initializingStyles){
+			cc.#rebuildStylesOnPropChange[name] = true;
+		}
+		if(cc.#initializingBuild){
+			cc.#rebuildBuilderOnPropChange[name] = true;
+		}
 	}
 	
 	static updateProp(obj: Component, name: string){
@@ -246,14 +285,21 @@ abstract class Component{
 	
 		// // {f:contentCallback,startNode:startNode, endNode:endNode,condition:condition}
 		let updateStyles = false;
-		for(let i = 0; i < (ar||[]).length; i++){
-			let arg = ar[i];
-			// TODO: this could be used to update attributes.
-			// But right now that relies exclusively on function setters. It's a bit weird.
-			arg.updateContent(dot, value);
-			
-			if(arg instanceof AttrArgCallback && arg.attr == "class"){
-				updateStyles = true;
+		if(false && obj.#rebuildBuilderOnPropChange[name] && !obj.#initializingBuild){
+			// Call the builder again.
+		}
+		else{
+			// Maybe update specific areas.
+			// This is admittedly more efficient.
+			for(let i = 0; i < (ar||[]).length; i++){
+				let arg = ar[i];
+				// TODO: this could be used to update attributes.
+				// But right now that relies exclusively on function setters. It's a bit weird.
+				arg.updateContent(dot, value);
+				
+				if(obj.#rebuildStylesOnPropChange[name] || (arg instanceof AttrArgCallback && arg.attr == "class")){
+					updateStyles = true;
+				}
 			}
 		}
 	
@@ -337,7 +383,7 @@ abstract class Component{
 		return this.__$el;
 	}
 
-	$refs: {[key: string]: Element} = {};
+	$refs: {[key: string]: HTMLElement} = {};
 
 	/**
 	 * Name of the component (optional). If provided, dot and the VDBO will be extended.

package/src/dot-util.ts

@@ -30,4 +30,40 @@ class _ClassPrefix{
 
 export const ClassPrefix = new _ClassPrefix()
 
-export const GlobalComponentStack: Array<Component> = [];
+export const GlobalComponentStack: Array<Component> = [];
+
+
+export type AnimationType = "geometric"|"exponential"|"ease"|"linear";
+
+export var floatRegex = new RegExp("[-+]?[0-9]*\\.?[0-9]+(?:[eE][-+]?[0-9]+)?", "g");
+
+/**
+ * Function that takes in a bunch of parameters and steps the start value toward the target based on timeRemaining and style.
+ * currentValue is the current value.
+ * targetValue is the target valaue.
+ * timeRemaining is the time remaining in ms.
+ * stepProgress is the size of this step.
+ * 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.
+*/
+export function numberStep(startValue: number, targetValue: number, currentTime: number, totalDuration: number, style: AnimationType){
+	
+	startValue = Number(startValue);
+	targetValue = Number(targetValue);
+
+	var timeRemaining  = totalDuration - currentTime;
+
+	switch(style){
+		case "geometric":
+		case "exponential"://This is kind of stupid now that we have ease. I might come back and add it in the future. For now assume ease.
+		//	var m = Math.exp(-1 / timeRemaining);
+		//	return  targetValue + m * (startValue - targetValue);
+		case "ease":
+			var m = (-Math.cos(Math.PI * (currentTime / totalDuration)) + 1) * 0.5;
+			return  startValue + m * (targetValue - startValue);
+		case "linear":
+		default:
+			return startValue + (targetValue - startValue) * (currentTime / totalDuration);
+	}
+}

package/src/dot.ts

@@ -1,7 +1,7 @@
 
 import eventBus from "./event-bus";
 import {IDotCore, IDotGenericElement} from "./i-dot";
-import dotcss from "./style-builder";
+import dotcss, { _Builder } from "./styling/style-builder";
 import ERR from "./err";
 import { DotContent, IDotElementDocument, IDotDocument } from "./i-dot";
 import { ClassPrefix, eachK, GlobalComponentStack, isF, sT, str } from "./dot-util";
@@ -706,7 +706,7 @@ ext("attr", function(attr, value, arg3?){
 			if (!isF(value)) {
 
 				// Objects (except for the css builder :/)
-				if(typeof value == "object" && !(value instanceof dot.css["_Builder"])){
+				if(typeof value == "object" && !(value instanceof _Builder)){
 					var originalValue = value;
 					var valueSetter = function(){
 						var str = "";

package/src/dothtml.ts

@@ -29,6 +29,6 @@ dot.Component = Component;
 export default dot;
 export {default as DotComponent} from "./component";
 export {IDotElement} from "./i-dot";
-export {default as IDotCss} from "./i-dotcss";
+export {default as IDotCss} from "./styling/i-dotcss";
 
 // https://www.youtube.com/JoshSideris

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;
+	}
+}