feat: pick/toggle unwrap styles from function

Author: navix

package/src/meta/def.ts

@@ -11,8 +11,12 @@ export interface StyleReactiveDef {
   (state: any): StyleDef;
 }
 
+export interface WrappedStyleDef {
+  (): StyleDef;
+}
+
 export interface PickStyleDef {
-  [key: string]: StyleDef;
+  [key: string]: StyleDef | WrappedStyleDef;
 }
 
 export type DirectiveSelector = [string, StateSetter];

package/src/styler-def.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
-import { PickStyleDef, StyleDef } from './meta/def';
+import { PickStyleDef, StyleDef, WrappedStyleDef } from './meta/def';
+import { isFunction } from './utils/is-function';
 import { mergeDeepAll } from './utils/merge-deep';
 
 @Injectable()
@@ -13,17 +14,25 @@ export class StylerDefService {
 
   pick(state: string, styles: PickStyleDef, def: string | null = null): StyleDef {
     if (state) {
-      return styles[state];
+      return this.unwrap(styles[state]);
     } else if (def !== null) {
-      return styles[def];
+      return this.unwrap(styles[def]);
     } else {
       return {};
     }
   }
 
   toggle(state: boolean, styles: StyleDef, falseStyles?: StyleDef): StyleDef {
     return state
-        ? styles
-        : falseStyles || {};
+        ? this.unwrap(styles)
+        : this.unwrap(falseStyles || {});
+  }
+
+  unwrap(raw: StyleDef | WrappedStyleDef): StyleDef {
+    if (isFunction(raw)) {
+      return raw();
+    } else {
+      return raw;
+    }
   }
 }

package/src/utils/is-function.ts

@@ -0,0 +1,3 @@
+export function isFunction(x: any): x is Function {
+  return x !== null && typeof x === 'function';
+}