fix: correct merge host and directive styling

closes #10

package/src/styler-component.ts

@@ -9,9 +9,12 @@ import {
   Renderer2,
   Self,
 } from '@angular/core';
+import 'rxjs/add/observable/combineLatest';
+import { CompilerService } from './compiler/compiler.service';
 import { ComponentStyle } from './meta/component';
 import { componentClassPrefix, componentStyle, elementDef, elementName } from './meta/tokens';
 import { StylerElement } from './styler-element';
+import { StylerDirective } from './styler.directive';
 import { StylerService } from './styler.service';
 
 /**
@@ -39,7 +42,9 @@ export class StylerComponent implements OnDestroy {
               private el: ElementRef,
               private renderer: Renderer2,
               private stylerService: StylerService,
-              private injector: Injector) {
+              private injector: Injector,
+              private compiler: CompilerService,
+              @Self() @Optional() private stylerDirective: StylerDirective) {
     this.stylerService.registerComponent(this);
     if (this.componentStyle) {
       this.register(this.componentStyle);
@@ -142,9 +147,15 @@ export class StylerComponent implements OnDestroy {
 
   private createHostElement(): StylerElement {
     const host = this.createElement('host');
-    host.sid$.subscribe(sid => {
-      this.setHostSid(sid);
-    });
+    if (this.stylerDirective) {
+      // push host def to directive
+      this.stylerDirective.registerHostDef(host.def$);
+    } else {
+      // default host styling
+      host.def$.subscribe(dif => {
+        this.setHostSid(this.compiler.renderElement(dif));
+      });
+    }
     host.classes$.subscribe(classes => {
       this.setElClasses(this.el.nativeElement, this.hostClasses, classes);
       this.hostClasses = new Set(classes);

package/src/styler-element.ts

@@ -11,6 +11,8 @@ import { componentClassPrefix, elementDef, elementName } from './meta/tokens';
 export class StylerElement {
   private _classes$ = new BehaviorSubject<Set<string>>(new Set());
 
+  private _def$ = new BehaviorSubject<StyleDef>({});
+
   private _sid$ = new BehaviorSubject<string>('');
 
   private _state: StateSetter = {};
@@ -29,6 +31,10 @@ export class StylerElement {
     return this._classes$.asObservable();
   }
 
+  get def$(): Observable<StyleDef> {
+    return this._def$.asObservable();
+  }
+
   get name(): string {
     return this.elementName;
   }
@@ -58,6 +64,7 @@ export class StylerElement {
     this.stateSize = Object.keys(this._state).length;
     // Update sid
     this._sid$.next(this.compiler.renderElement(this.compile()));
+    this._def$.next(this.compile());
     // Update class
     this.updateClasses();
   }

package/src/styler.directive.ts

@@ -12,7 +12,12 @@ import {
   Renderer2,
 } from '@angular/core';
 import { Router, RouterLink, RouterLinkWithHref } from '@angular/router';
-import { DirectiveSelector } from './meta/def';
+import 'rxjs/add/observable/combineLatest';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable } from 'rxjs/Observable';
+import { CompilerService } from './compiler/compiler.service';
+import { defMerge } from './helpers/def/def-merge';
+import { DirectiveSelector, StyleDef } from './meta/def';
 import { StylerComponent } from './styler-component';
 import { StylerElement } from './styler-element';
 import { isString } from './utils/is-string';
@@ -34,11 +39,14 @@ export class StylerDirective implements OnChanges, OnInit, OnDestroy, AfterViewI
 
   private elementName: string | null = null;
 
+  private hostDef$ = new BehaviorSubject<StyleDef>({});
+
   private sid: string;
 
   constructor(private component: StylerComponent,
               private el: ElementRef,
               private renderer: Renderer2,
+              private compiler: CompilerService,
               @Optional() private router: Router) {
   }
 
@@ -71,6 +79,10 @@ export class StylerDirective implements OnChanges, OnInit, OnDestroy, AfterViewI
     this.initUpdater();
   }
 
+  registerHostDef(def$: Observable<StyleDef>) {
+    def$.subscribe(this.hostDef$);
+  }
+
   private checkRouterLink() {
 //    if (this.router &&
 //        (this.links || this.linksWithHrefs) &&
@@ -87,10 +99,11 @@ export class StylerDirective implements OnChanges, OnInit, OnDestroy, AfterViewI
   }
 
   private initUpdater() {
-    this.element.sid$.subscribe(sid => {
-      this.checkRouterLink();
-      this.updateSid(sid);
-    });
+    Observable
+        .combineLatest(this.hostDef$, this.element.def$)
+        .subscribe((defs: StyleDef[]) => {
+          this.updateSid(this.compiler.renderElement(defMerge(defs)));
+        });
     this.element.classes$.subscribe(classes => {
       this.component.setElClasses(this.el.nativeElement, this.classes, classes);
       this.classes = new Set(classes);
@@ -102,24 +115,6 @@ export class StylerDirective implements OnChanges, OnInit, OnDestroy, AfterViewI
         router.isActive(link.urlTree, true);
   }
 
-  private updateClasses(classes: Set<string>) {
-    // remove classes
-    Array
-        .from(this.classes)
-        .filter(c => !classes.has(c))
-        .forEach(classToRemove => {
-          this.renderer.removeClass(this.el.nativeElement, classToRemove);
-        });
-    // add classes
-    Array
-        .from(classes)
-        .filter(c => !this.classes.has(c))
-        .forEach(classToAdd => {
-          this.renderer.addClass(this.el.nativeElement, classToAdd);
-        });
-    this.classes = new Set(classes);
-  }
-
   private updateSid(sid: string) {
     // check if changed
     if (this.sid !== sid) {

rollup_globals.js

@@ -5,4 +5,6 @@ module.exports = {
   "@angular/platform-browser": "ng.platform-browser",
   "@angular/router": "ng.router",
   "rxjs/BehaviorSubject": "Rx",
+  "rxjs/Observable": "Rx",
+  "rxjs/add/observable/combineLatest": "Rx",
 };