fix: add correct ssr styles

* Add virtual stylesheet to store server styles, which applies
  default styles when breakpoint overrides are not present
* Intercept all style calls and reroute them to the virtual
  stylesheet while not in the browser
* Add a new type of MediaQueryList similar to the MockMediaQueryList
  for the server that allows for manual activation/deactivation of
  breakpoints
* Update deps to Angular v5.2.x and TypeScript v2.6.x

Author: CaerusKaru

package-lock.json

@@ -26,58 +26,58 @@
     "node": ">= 5.4.1"
   },
   "dependencies": {
-    "@angular/core": "~5.1.0",
-    "@angular/common": "~5.1.0",
-    "@angular/compiler": "~5.1.0",
-    "@angular/platform-browser": "~5.1.0",
-    "core-js": "^2.4.1",
-    "rxjs": "^5.5.5",
+    "@angular/common": "^5.2.0",
+    "@angular/compiler": "^5.2.0",
+    "@angular/core": "^5.2.0",
+    "@angular/platform-browser": "^5.2.0",
+    "core-js": "^2.5.3",
+    "rxjs": "^5.5.6",
     "systemjs": "0.19.43",
     "tsickle": "^0.24.x",
-    "tslib": "^1.8.0",
-    "zone.js": "^0.8.18"
+    "tslib": "^1.8.1",
+    "zone.js": "^0.8.20"
   },
   "devDependencies": {
-    "@angular/animations": "~5.1.0",
-    "@angular/cdk": "^5.0.1",
-    "@angular/compiler-cli": "~5.1.0",
-    "@angular/forms": "~5.1.0",
-    "@angular/http": "~5.1.0",
-    "@angular/material": "^5.0.1",
-    "@angular/platform-browser-dynamic": "~5.1.0",
-    "@angular/platform-server": "~5.1.0",
-    "@angular/router": "~5.1.0",
+    "@angular/animations": "^5.2.0",
+    "@angular/cdk": "^5.0.4",
+    "@angular/compiler-cli": "^5.2.0",
+    "@angular/forms": "^5.2.0",
+    "@angular/http": "^5.2.0",
+    "@angular/material": "^5.0.4",
+    "@angular/platform-browser-dynamic": "^5.2.0",
+    "@angular/platform-server": "^5.2.0",
+    "@angular/router": "^5.2.0",
     "@angular/tsc-wrapped": "^4.4.6",
-    "@google-cloud/storage": "^1.4.0",
+    "@google-cloud/storage": "^1.5.2",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "^4.0.5",
-    "@types/glob": "^5.0.33",
+    "@types/glob": "^5.0.34",
     "@types/gulp": "3.8.32",
     "@types/hammerjs": "^2.0.34",
-    "@types/jasmine": "^2.6.3",
+    "@types/jasmine": "^2.8.3",
     "@types/merge2": "^0.3.30",
     "@types/minimist": "^1.2.0",
-    "@types/node": "^7.0.46",
+    "@types/node": "^7.0.52",
     "@types/run-sequence": "^0.0.29",
     "@types/rx": "2.5.33",
-    "axe-core": "^2.4.2",
-    "axe-webdriverjs": "^1.1.5",
+    "axe-core": "^2.6.1",
+    "axe-webdriverjs": "^1.2.1",
     "chalk": "^1.1.3",
     "cli-color": "^1.2.0",
     "dgeni": "^0.4.7",
     "dgeni-packages": "^0.22.0",
-    "firebase": "^4.6.0",
-    "firebase-admin": "^5.4.2",
-    "firebase-tools": "^3.13.1",
+    "firebase": "^4.8.1",
+    "firebase-admin": "^5.7.0",
+    "firebase-tools": "^3.16.0",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",
     "google-closure-compiler": "20170409.0.0",
     "gulp": "^3.9.1",
     "gulp-clean": "^0.3.2",
-    "gulp-clean-css": "^3.9.0",
+    "gulp-clean-css": "^3.9.2",
     "gulp-cli": "^1.3.0",
-    "gulp-connect": "^5.0.0",
-    "gulp-conventional-changelog": "^1.1.6",
+    "gulp-connect": "^5.2.0",
+    "gulp-conventional-changelog": "^1.1.7",
     "gulp-dom": "^0.9.17",
     "gulp-flatten": "^0.3.1",
     "gulp-highlight-files": "^0.0.5",
@@ -97,32 +97,32 @@
     "karma-browserstack-launcher": "^1.3.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.1",
-    "karma-firefox-launcher": "^1.0.1",
+    "karma-firefox-launcher": "^1.1.0",
     "karma-jasmine": "^1.1.1",
     "karma-sauce-launcher": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "madge": "^2.2.0",
     "magic-string": "^0.22.4",
-    "merge2": "^1.2.0",
+    "merge2": "^1.2.1",
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
     "prompt-sync": "^4.1.5",
-    "protractor": "^5.2.0",
+    "protractor": "^5.2.2",
     "request": "^2.83.0",
     "resolve-bin": "^0.4.0",
     "rollup": "^0.41.6",
     "rollup-plugin-alias": "^1.4.0",
-    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-node-resolve": "^3.0.2",
     "run-sequence": "^1.2.2",
-    "scss-bundle": "^2.0.1-beta.7",
+    "scss-bundle": "^2.1.1",
     "selenium-webdriver": "^3.6.0",
     "sorcery": "^0.10.0",
-    "stylelint": "^7.12.0",
+    "stylelint": "^8.4.0",
     "ts-node": "^3.0.4",
-    "tsconfig-paths": "^2.3.0",
-    "tslint": "^5.8.0",
-    "tsutils": "^2.13.0",
-    "typescript": "^2.4.2",
+    "tsconfig-paths": "^2.7.3",
+    "tslint": "^5.9.1",
+    "tsutils": "^2.16.0",
+    "typescript": "^2.6.2",
     "uglify-js": "^2.8.14"
   }
-}
+}

package.json

@@ -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.spec.ts

@@ -11,6 +11,7 @@ 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';
 
 
 /**
@@ -49,8 +50,9 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
               protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
               protected _renderer: Renderer2,
-              @Inject(PLATFORM_ID) protected _platformId: Object) {
-    super(_mediaMonitor, _elementRef, _renderer, _platformId);
+              @Inject(PLATFORM_ID) protected _platformId: Object,
+              protected _serverStylesheet: ServerStylesheet) {
+    super(_mediaMonitor, _elementRef, _renderer, _platformId, _serverStylesheet);
   }
 
   /**

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

@@ -29,6 +29,8 @@ import {
 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 {
@@ -71,7 +73,8 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
   constructor(protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
               protected _renderer: Renderer2,
-              @Inject(PLATFORM_ID) protected _platformId: Object) {
+              @Inject(PLATFORM_ID) protected _platformId: Object,
+              protected _serverStylesheet: ServerStylesheet) {
   }
 
   // *********************************************
@@ -137,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(this._platformId, 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);
+    }
   }
 
   /**
@@ -160,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(this._platformId, 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);
+        }
       }
     }
 
@@ -180,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/core/base.ts

@@ -22,7 +22,6 @@ import {MediaQuerySubscriber, MediaChange} from '../../media-query/media-change'
 describe('responsive-activation', () => {
   let monitor: MediaMonitor;
   let matchMedia: MockMatchMedia;
-  let breakPoints: BreakPointRegistry;
 
   /**
    * MediaQuery Change responder used to determine the activated input
@@ -52,9 +51,8 @@ describe('responsive-activation', () => {
 
   // Single async inject to save references; which are used in all tests below
   beforeEach(inject(
-      [BreakPointRegistry, MatchMedia, MediaMonitor],
-      (_breakPoints, _matchMedia, _mediaMonitor) => {
-        breakPoints = _breakPoints;    // Only used to look up mediaQuery by aliases
+      [MatchMedia, MediaMonitor],
+      (_matchMedia, _mediaMonitor) => {
         matchMedia = _matchMedia;      // Only used to manual/simulate activate a mediaQuery
         monitor = _mediaMonitor;
       }

src/lib/api/core/responsive-activation.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.spec.ts

@@ -29,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};
@@ -95,8 +96,9 @@ export class ClassDirective extends BaseFxDirective
               protected _ngEl: ElementRef,
               protected _renderer: Renderer2,
               @Optional() @Self() private _ngClassInstance: NgClass,
-              @Inject(PLATFORM_ID) protected _platformId: Object) {
-    super(monitor, _ngEl, _renderer, _platformId);
+              @Inject(PLATFORM_ID) protected _platformId: Object,
+              protected _serverStylesheet: ServerStylesheet) {
+    super(monitor, _ngEl, _renderer, _platformId, _serverStylesheet);
     this._configureAdapters();
   }
 
@@ -139,7 +141,12 @@ export class ClassDirective extends BaseFxDirective
    */
   protected _configureAdapters() {
     this._base = new BaseFxDirectiveAdapter(
-        'ngClass', this.monitor, this._ngEl, this._renderer, this._platformId
+      '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/class.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/hide.spec.ts

@@ -51,15 +51,13 @@ const DEFAULT_SRC = 'https://dummyimage.com/300x300/c72538/ffffff.png';
 describe('img-src directive', () => {
   let fixture: ComponentFixture<any>;
   let matchMedia: MockMatchMedia;
-  let breakpoints: BreakPointRegistry;
 
   let componentWithTemplate = (template: string) => {
     fixture = makeCreateTestComponent(() => TestSrcComponent)(template);
 
-    inject([MatchMedia, BreakPointRegistry],
-        (_matchMedia: MockMatchMedia, _breakpoints: BreakPointRegistry) => {
+    inject([MatchMedia],
+        (_matchMedia: MockMatchMedia) => {
           matchMedia = _matchMedia;
-          breakpoints = _breakpoints;
         })();
   };
 

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

@@ -18,6 +18,7 @@ import {
 
 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
@@ -60,8 +61,9 @@ export class ImgSrcDirective extends BaseFxDirective implements OnInit, OnChange
   constructor(elRef: ElementRef,
               renderer: Renderer2,
               monitor: MediaMonitor,
-              @Inject(PLATFORM_ID) platformId: Object) {
-    super(monitor, elRef, renderer, platformId);
+              @Inject(PLATFORM_ID) platformId: Object,
+              serverStylesheet: ServerStylesheet) {
+    super(monitor, elRef, renderer, platformId, serverStylesheet);
     this._cacheInput('src', elRef.nativeElement.getAttribute('src') || '');
   }