Make transit work with prefixers

Author: cvle

src/transit.spec.ts

@@ -6,15 +6,19 @@ import { transit, resolveTransit } from "./transit";
 describe("transit.ts", () => {
   describe("transit", () => {
     it("should parse shorthand order", () => {
-      const config = transit("100px", 50, "linear", 30);
-      assert.strictEqual(config.value, "100px");
-      assert.deepEqual(config.params, { duration: 50, timing: "linear", delay: 30 });
+      const obj = transit("100px", 50, "linear", 30);
+      assert.isArray(obj);
+      assert.lengthOf(obj, 1);
+      assert.strictEqual(obj[0], "100px");
+      assert.deepEqual(obj.transitParams, { duration: 50, timing: "linear", delay: 30 });
     });
 
     it("should use defaults", () => {
-      const config = transit("100px", 30);
-      assert.strictEqual(config.value, "100px");
-      assert.deepEqual(config.params, { duration: 30, timing: "ease", delay: 0 });
+      const obj = transit("100px", 30);
+      assert.isArray(obj);
+      assert.lengthOf(obj, 1);
+      assert.strictEqual(obj[0], "100px");
+      assert.deepEqual(obj.transitParams, { duration: 30, timing: "ease", delay: 0 });
     });
   });
   describe("resolveTransit()", () => {

src/transit.ts

@@ -8,34 +8,30 @@ interface TransitionParams {
   delay?: number;
 }
 
-class TransitionConfig {
-  public value: any;
-  public params: TransitionParams;
-
-  constructor(value: any, params: TransitionParams) {
-    this.value = value;
-    this.params = params;
-  }
-}
+interface AugmentedArray extends Array<any> {
+  transitParams: TransitionParams;
+};
 
 export function transit(value: any, duration: number, timing?: string, delay?: number): any {
-  return new TransitionConfig(value, {
+  const ret = [value];
+  (ret as AugmentedArray).transitParams = {
     duration,
     timing: timing || "ease",
     delay: delay !== undefined ? delay : 0,
-  });
+  };
+  return ret;
 }
 
 export function resolveTransit(style: CSSProperties, extraDelay = 0): CSSProperties {
   let transition = "";
   let processedStyle = { ...style };
   for (const property in style) {
     const val = style[property];
-    if (typeof val === "object") {
-      const {value, params: {duration, timing, delay}} = val as TransitionConfig;
+    if (Array.isArray(val) && (val as AugmentedArray).transitParams) {
+      const {duration, timing, delay} = (val as AugmentedArray).transitParams;
       if (transition !== "") { transition += ", "; }
       transition += `${convertToCSSPrefix(property)} ${duration}ms ${timing} ${delay + extraDelay}ms`;
-      processedStyle[property] = value;
+      processedStyle[property] = val[0];
     }
   }
   if (transition) {