dothtml-interfaces 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dothtml-interfaces",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Dependency injection interfaces for DOTHtml.",
   "main": "src/index.d.ts",
   "types": "src/index.d.ts",

package/src/styles/{i-filter-prop.d.ts → complex-css-types/i-filter-prop.d.ts}

@@ -1,6 +1,6 @@
-import AngleProp from "./mapped-types/angle-prop";
-import { Percentage, ValueOrReactive } from "./css-types";
-import LengthProp from "./mapped-types/length-prop";
+import AngleProp from "../mapped-types/angle-prop";
+import { Percentage, ValueOrReactive } from "../css-types";
+import LengthProp from "../mapped-types/length-prop";
 import IShadowProp from "./i-shadow-prop";
 
 export default interface IFilterProp extends

package/src/styles/{i-shadow-prop.d.ts → complex-css-types/i-shadow-prop.d.ts}

@@ -1,5 +1,5 @@
-import ColorProps from "./mapped-types/color-props.js";
-import LengthProp from "./mapped-types/length-prop.js";
+import ColorProps from "../mapped-types/color-props.js";
+import LengthProp from "../mapped-types/length-prop.js";
 
 
 export default interface IShadowProp extends

package/src/styles/{i-transformation-prop.d.ts → complex-css-types/i-transformation-prop.d.ts}

@@ -1,8 +1,10 @@
-import AngleProp from "./mapped-types/angle-prop";
-import { ValueOrReactive } from "./css-types";
-import LengthProp from "./mapped-types/length-prop";
+import AngleProp from "../mapped-types/angle-prop";
+import { ValueOrReactive } from "../css-types";
+import LengthProp from "../mapped-types/length-prop";
 
-export interface ITransformationProp extends
+// Transforms are special because the order matters and functions can be called mulitple times.
+// To support this functionality, we use an array of transform JSON specs.
+export default interface ITransformationProp extends
 	LengthProp<"translate", 1|2>, 
 	LengthProp<"translate3d", 3>,
 	LengthProp<"translateX">,

package/src/styles/i-css-prop.d.ts

@@ -1,9 +1,9 @@
 
 import { IReactive } from "../i-reactive";
 import { GKV, ValueOrReactive } from "./css-types";
-import IFilterProp from "./i-filter-prop";
-import IShadowProp from "./i-shadow-prop";
-import { ITransformationProp } from "./i-transformation-prop";
+import IFilterProp from "./complex-css-types/i-filter-prop";
+import IShadowProp from "./complex-css-types/i-shadow-prop";
+import ITransformationProp from "./complex-css-types/i-transformation-prop";
 import ColorProp from "./mapped-types/color-props";
 import LengthProp from "./mapped-types/length-prop";
 
@@ -79,7 +79,7 @@ export default interface IDotcssProp extends
 	content?: ValueOrReactive<string>;
 
 	//complex: 
-	transform?: ValueOrReactive<string>|ITransformationProp;
+	transform?: ValueOrReactive<string>|ITransformationProp|Array<ITransformationProp>;
 	filter?: ValueOrReactive<string>|IFilterProp;
 	backdropFilter?: ValueOrReactive<string>|IFilterProp;
 	

package/src/styles/mapped-types/angle-prop.d.ts

@@ -1,6 +1,6 @@
 import { IReactive } from "../../i-reactive";
 
-type V = IReactive<number|string> | number | string;
+type V = IReactive<any> | number | string;
 
 type AngleUnitSuffix = "" | "Deg" | "Grad" | "Rad" | "Turn";
 

package/src/styles/mapped-types/length-prop.d.ts

@@ -4,9 +4,9 @@ import { GKV } from "../css-types";
 
 type LengthUnitSuffix = "" | "Cm" | "Ch" | "Em" | "Ex" | "In" | "Mm" | "P" | "Pc" | "Pt" | "Px" | "Rem" | "Vh" | "Vw" | "VMax" | "VMin";
 
-type V<S> = IReactive<number|string> | number | S;
+type V<S> = IReactive<any> | number | S;
 
-type LengthProp<Prefix extends string, Qty extends 1|2|3|4 = 1, S extends string|IReactive<number|string> = GKV> = {
+type LengthProp<Prefix extends string, Qty extends 1|2|3|4 = 1, S extends string|IReactive<any> = GKV> = {
 	[Key in LengthUnitSuffix as `${Prefix}${Key}`]?: (
 		(Qty extends 1 ? V<S>|[V<S>] : void) |
 		(Qty extends 2 ? [V<S>, V<S>] : void) |