[WIP] ssr style fix

src/lib/api/core/base-adapter.spec.ts

@@ -8,7 +8,8 @@
 import {ElementRef, Renderer2} from '@angular/core';
 import {BaseFxDirectiveAdapter} from './base-adapter';
 import {expect} from '../../utils/testing/custom-matchers';
-import {MediaMonitor} from '@angular/flex-layout/media-query';
+import {MediaMonitor} from '../../media-query/media-monitor';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
 
 export class MockElementRef extends ElementRef {
   constructor() {
@@ -21,7 +22,7 @@ export class MockElementRef extends ElementRef {
 describe('BaseFxDirectiveAdapter class', () => {
   let component;
   beforeEach(() => {
-    component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as Renderer2); // tslint:disable-line:max-line-length
+    component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as Renderer2, {}, {} as ServerStylesheet); // tslint:disable-line:max-line-length
   });
   describe('cacheInput', () => {
     it('should call _cacheInputArray when source is an array', () => {

src/lib/api/core/base-adapter.ts

@@ -5,12 +5,13 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {ElementRef, Renderer2} from '@angular/core';
+import {ElementRef, Inject, PLATFORM_ID, Renderer2} from '@angular/core';
 
 import {BaseFxDirective} from './base';
 import {ResponsiveActivation} from './responsive-activation';
 import {MediaQuerySubscriber} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
 
 
 /**
@@ -48,8 +49,10 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
   constructor(protected _baseKey: string,   // non-responsive @Input property name
               protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _renderer: Renderer2) {
-    super(_mediaMonitor, _elementRef, _renderer);
+              protected _renderer: Renderer2,
+              @Inject(PLATFORM_ID) protected _platformId: Object,
+              protected _serverStylesheet: ServerStylesheet) {
+    super(_mediaMonitor, _elementRef, _renderer, _platformId, _serverStylesheet);
   }
 
   /**

src/lib/api/core/base.ts

@@ -6,8 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {
-  ElementRef, OnDestroy, SimpleChanges, OnChanges,
-  SimpleChange, Renderer2
+  ElementRef,
+  OnDestroy,
+  SimpleChanges,
+  OnChanges,
+  SimpleChange,
+  Renderer2,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 
 import {buildLayoutCSS} from '../../utils/layout-validator';
@@ -16,12 +22,15 @@ import {
   lookupStyle,
   lookupInlineStyle,
   applyStyleToElement,
-  applyStyleToElements, lookupAttributeValue
+  applyStyleToElements,
+  lookupAttributeValue,
 } from '../../utils/style-utils';
 
 import {ResponsiveActivation, KeyOptions} from '../core/responsive-activation';
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {MediaQuerySubscriber} from '../../media-query/media-change';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
+import {isPlatformBrowser} from '@angular/common';
 
 /** Abstract base class for the Layout API styling directives. */
 export abstract class BaseFxDirective implements OnDestroy, OnChanges {
@@ -63,7 +72,9 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    */
   constructor(protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _renderer: Renderer2) {
+              protected _renderer: Renderer2,
+              @Inject(PLATFORM_ID) protected _platformId: Object,
+              protected _serverStylesheet: ServerStylesheet) {
   }
 
   // *********************************************
@@ -129,11 +140,16 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
 
   /**
    * Quick accessor to the current HTMLElement's `display` style
-   * Note: this allows use to preserve the original style
+   * Note: this allows us to preserve the original style
    * and optional restore it when the mediaQueries deactivate
    */
   protected _getDisplayStyle(source: HTMLElement = this.nativeElement): string {
-    return lookupStyle(source || this.nativeElement, 'display');
+    const query = 'display';
+    if (isPlatformBrowser(this._platformId)) {
+      return lookupStyle(this._platformId, source || this.nativeElement, query);
+    } else {
+      return this._serverStylesheet.getStyleForElement(source, query);
+    }
   }
 
   /**
@@ -152,13 +168,26 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    */
   protected _getFlowDirection(target: any, addIfMissing = false): string {
     let value = 'row';
+    let hasInlineValue = '';
+    const query = 'flex-direction';
 
     if (target) {
-      value = lookupStyle(target, 'flex-direction') || 'row';
-      let hasInlineValue = lookupInlineStyle(target, 'flex-direction');
+      if (isPlatformBrowser(this._platformId)) {
+        value = lookupStyle(this._platformId, target, query) || 'row';
+        hasInlineValue = lookupInlineStyle(target, query);
+      } else {
+        // TODO(CaerusKaru): platform-server has no implementation for getComputedStyle
+        value = this._serverStylesheet.getStyleForElement(target, query) || 'row';
+      }
 
       if (!hasInlineValue && addIfMissing) {
-        applyStyleToElements(this._renderer, buildLayoutCSS(value), [target]);
+        const style = buildLayoutCSS(value);
+        const elements = [target];
+        if (isPlatformBrowser(this._platformId)) {
+          applyStyleToElements(this._renderer, style, elements);
+        } else {
+          this._serverStylesheet.addStyleToElements(style, elements);
+        }
       }
     }
 
@@ -172,14 +201,22 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
                                  value?: string | number,
                                  nativeElement: any = this.nativeElement) {
     let element = nativeElement || this.nativeElement;
-    applyStyleToElement(this._renderer, element, style, value);
+    if (isPlatformBrowser(this._platformId)) {
+      applyStyleToElement(this._renderer, element, style, value);
+    } else {
+      this._serverStylesheet.addStyleToElement(element, style, value);
+    }
   }
 
   /**
    * Applies styles given via string pair or object map to the directive's element.
    */
   protected _applyStyleToElements(style: StyleDefinition, elements: HTMLElement[ ]) {
-    applyStyleToElements(this._renderer, style, elements || []);
+    if (isPlatformBrowser(this._platformId)) {
+      applyStyleToElements(this._renderer, style, elements || []);
+    } else {
+      this._serverStylesheet.addStyleToElements(style, elements || []);
+    }
   }
 
   /**

src/lib/api/ext/class.spec.ts

@@ -22,6 +22,7 @@ import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-regi
 
 import {ClassDirective} from './class';
 import {MediaQueriesModule} from '../../media-query/_module';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
 
 describe('class directive', () => {
   let fixture: ComponentFixture<any>;
@@ -47,7 +48,8 @@ describe('class directive', () => {
       declarations: [TestClassComponent, ClassDirective],
       providers: [
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
-        {provide: MatchMedia, useClass: MockMatchMedia}
+        {provide: MatchMedia, useClass: MockMatchMedia},
+        ServerStylesheet
       ]
     });
   });

src/lib/api/ext/class.ts

@@ -17,7 +17,10 @@ import {
   Optional,
   Renderer2,
   SimpleChanges,
-  Self, OnInit
+  Self,
+  OnInit,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 import {NgClass} from '@angular/common';
 
@@ -26,6 +29,7 @@ import {BaseFxDirectiveAdapter} from '../core/base-adapter';
 import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {RendererAdapter} from '../core/renderer-adapter';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
 
 /** NgClass allowed inputs **/
 export type NgClassType = string | string[] | Set<string> | {[klass: string]: any};
@@ -91,8 +95,10 @@ export class ClassDirective extends BaseFxDirective
               protected _keyValueDiffers: KeyValueDiffers,
               protected _ngEl: ElementRef,
               protected _renderer: Renderer2,
-              @Optional() @Self() private _ngClassInstance: NgClass ) {
-    super(monitor, _ngEl, _renderer);
+              @Optional() @Self() private _ngClassInstance: NgClass,
+              @Inject(PLATFORM_ID) protected _platformId: Object,
+              protected _serverStylesheet: ServerStylesheet) {
+    super(monitor, _ngEl, _renderer, _platformId, _serverStylesheet);
     this._configureAdapters();
   }
 
@@ -135,7 +141,12 @@ export class ClassDirective extends BaseFxDirective
    */
   protected _configureAdapters() {
     this._base = new BaseFxDirectiveAdapter(
-        'ngClass', this.monitor, this._ngEl, this._renderer
+      'ngClass',
+      this.monitor,
+      this._ngEl,
+      this._renderer,
+      this._platformId,
+      this._serverStylesheet,
     );
     if (!this._ngClassInstance) {
       // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on

src/lib/api/ext/hide.spec.ts

@@ -23,6 +23,7 @@ import {
 } from '../../utils/testing/helpers';
 import {ShowHideDirective} from './show-hide';
 import {MediaQueriesModule} from '../../media-query/_module';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
 
 describe('hide directive', () => {
   let fixture: ComponentFixture<any>;
@@ -60,7 +61,8 @@ describe('hide directive', () => {
       declarations: [TestHideComponent, ShowHideDirective],
       providers: [
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
-        {provide: MatchMedia, useClass: MockMatchMedia}
+        {provide: MatchMedia, useClass: MockMatchMedia},
+        ServerStylesheet
       ]
     });
   });

src/lib/api/ext/img-src.ts

@@ -11,11 +11,14 @@ import {
   Input,
   OnInit,
   OnChanges,
-  Renderer2
+  Renderer2,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 
 import {BaseFxDirective} from '../core/base';
 import {MediaMonitor} from '../../media-query/media-monitor';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
 
 /**
  * This directive provides a responsive API for the HTML <img> 'src' attribute
@@ -55,8 +58,12 @@ export class ImgSrcDirective extends BaseFxDirective implements OnInit, OnChange
   @Input('src.gt-lg')  set srcGtLg(val) { this._cacheInput('srcGtLg', val);  }
   /* tslint:enable */
 
-  constructor(elRef: ElementRef, renderer: Renderer2, monitor: MediaMonitor) {
-    super(monitor, elRef, renderer);
+  constructor(elRef: ElementRef,
+              renderer: Renderer2,
+              monitor: MediaMonitor,
+              @Inject(PLATFORM_ID) platformId: Object,
+              serverStylesheet: ServerStylesheet) {
+    super(monitor, elRef, renderer, platformId, serverStylesheet);
     this._cacheInput('src', elRef.nativeElement.getAttribute('src') || '');
   }
 

src/lib/api/ext/show-hide.ts

@@ -15,7 +15,9 @@ import {
   Renderer2,
   SimpleChanges,
   Self,
-  Optional
+  Optional,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 
 import {Subscription} from 'rxjs/Subscription';
@@ -24,6 +26,7 @@ import {BaseFxDirective} from '../core/base';
 import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {LayoutDirective} from '../flexbox/layout';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
 
 const FALSY = ['false', false, 0];
 
@@ -104,9 +107,11 @@ export class ShowHideDirective extends BaseFxDirective implements OnInit, OnChan
   constructor(monitor: MediaMonitor,
               @Optional() @Self() protected _layout: LayoutDirective,
               protected elRef: ElementRef,
-              protected renderer: Renderer2) {
+              protected renderer: Renderer2,
+              @Inject(PLATFORM_ID) protected platformId: Object,
+              protected serverStylesheet: ServerStylesheet) {
 
-    super(monitor, elRef, renderer);
+    super(monitor, elRef, renderer, platformId, serverStylesheet);
 
     if (_layout) {
       /**

src/lib/api/ext/show.spec.ts

@@ -18,6 +18,7 @@ import {FlexLayoutModule} from '../../module';
 
 import {customMatchers} from '../../utils/testing/custom-matchers';
 import {makeCreateTestComponent, expectNativeEl} from '../../utils/testing/helpers';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
 
 describe('show directive', () => {
   let fixture: ComponentFixture<any>;
@@ -39,7 +40,8 @@ describe('show directive', () => {
       declarations: [TestShowComponent],
       providers: [
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
-        {provide: MatchMedia, useClass: MockMatchMedia}
+        {provide: MatchMedia, useClass: MockMatchMedia},
+        ServerStylesheet
       ]
     });
   });

src/lib/api/ext/style.spec.ts

@@ -22,6 +22,7 @@ import {customMatchers} from '../../utils/testing/custom-matchers';
 import {
   makeCreateTestComponent, expectNativeEl
 } from '../../utils/testing/helpers';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
 
 describe('style directive', () => {
   let fixture: ComponentFixture<any>;
@@ -43,7 +44,8 @@ describe('style directive', () => {
       declarations: [TestStyleComponent, LayoutDirective, StyleDirective],
       providers: [
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
-        {provide: MatchMedia, useClass: MockMatchMedia}
+        {provide: MatchMedia, useClass: MockMatchMedia},
+        ServerStylesheet
       ]
     });
   });

src/lib/api/ext/style.ts

@@ -17,7 +17,10 @@ import {
   Renderer2,
   SecurityContext,
   Self,
-  SimpleChanges, OnInit,
+  SimpleChanges,
+  OnInit,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 import {NgStyle} from '@angular/common';
 
@@ -35,6 +38,7 @@ import {
   ngStyleUtils as _
 } from '../../utils/style-transforms';
 import {RendererAdapter} from '../core/renderer-adapter';
+import {ServerStylesheet} from '../../utils/server-stylesheet';
 
 
 /**
@@ -89,9 +93,11 @@ export class StyleDirective extends BaseFxDirective
               protected _ngEl: ElementRef,
               protected _renderer: Renderer2,
               protected _differs: KeyValueDiffers,
-              @Optional() @Self() private _ngStyleInstance: NgStyle) {
+              @Optional() @Self() private _ngStyleInstance: NgStyle,
+              @Inject(PLATFORM_ID) protected _platformId: Object,
+              protected _serverStylesheet: ServerStylesheet) {
 
-    super(monitor, _ngEl, _renderer);
+    super(monitor, _ngEl, _renderer, _platformId, _serverStylesheet);
     this._configureAdapters();
   }
 
@@ -134,9 +140,14 @@ export class StyleDirective extends BaseFxDirective
      */
     protected _configureAdapters() {
         this._base = new BaseFxDirectiveAdapter(
-            'ngStyle', this.monitor, this._ngEl, this._renderer
+          'ngStyle',
+          this.monitor,
+          this._ngEl,
+          this._renderer,
+          this._platformId,
+          this._serverStylesheet,
         );
-        if ( !this._ngStyleInstance ) {
+        if (!this._ngStyleInstance) {
           // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been
           // defined on the same host element; since the responsive variations may be defined...
           let adapter = new RendererAdapter(this._renderer);