feat(ssr): enhance support for Universal and SSR with stylesheets

* Add StylerService class to manage application and retrieval of styles from elements in a platform-agnostic manner
* 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

Fixes #373.

> See [Design Doc](https://docs.google.com/document/d/1fg04ihw42dJJHGd6fugdiBe39iJot8aErhiE7CjwfmQ/edit#)

Author: CaerusKaru

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

@@ -5,10 +5,15 @@
  * 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} 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';
+<<<<<<< Updated upstream
+import {StyleUtils} from '../../utils/style-utils';
+=======
+import {StylerService} from '../../utils/styling/styler';
+>>>>>>> Stashed changes
 
 export class MockElementRef extends ElementRef {
   constructor() {
@@ -21,7 +26,11 @@ 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
+<<<<<<< Updated upstream
+    component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as StyleUtils); // tslint:disable-line:max-line-length
+=======
+    component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as StylerService); // tslint:disable-line:max-line-length
+>>>>>>> Stashed changes
   });
   describe('cacheInput', () => {
     it('should call _cacheInputArray when source is an array', () => {

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

@@ -5,12 +5,17 @@
  * 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, Inject, PLATFORM_ID, Renderer2} from '@angular/core';
+import {ElementRef} 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';
+<<<<<<< Updated upstream
+import {StyleUtils} from '../../utils/style-utils';
+=======
+import {StylerService} from '../../utils/styling/styler';
+>>>>>>> Stashed changes
 
 
 /**
@@ -48,9 +53,13 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
   constructor(protected _baseKey: string,   // non-responsive @Input property name
               protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _renderer: Renderer2,
-              @Inject(PLATFORM_ID) protected _platformId: Object) {
-    super(_mediaMonitor, _elementRef, _renderer, _platformId);
+<<<<<<< Updated upstream
+              protected _styleUtils: StyleUtils) {
+    super(_mediaMonitor, _elementRef, _styleUtils);
+=======
+              protected _styler: StylerService) {
+    super(_mediaMonitor, _elementRef, _styler);
+>>>>>>> Stashed changes
   }
 
   /**

src/lib/api/core/base.ts

@@ -11,20 +11,18 @@ import {
   SimpleChanges,
   OnChanges,
   SimpleChange,
-  Renderer2,
-  Inject,
-  PLATFORM_ID,
 } from '@angular/core';
 
 import {buildLayoutCSS} from '../../utils/layout-validator';
 import {
   StyleDefinition,
-  lookupStyle,
-  lookupInlineStyle,
-  applyStyleToElement,
-  applyStyleToElements,
-  lookupAttributeValue,
+<<<<<<< Updated upstream
+  StyleUtils,
 } from '../../utils/style-utils';
+=======
+  StylerService,
+} from '../../utils/styling/styler';
+>>>>>>> Stashed changes
 
 import {ResponsiveActivation, KeyOptions} from '../core/responsive-activation';
 import {MediaMonitor} from '../../media-query/media-monitor';
@@ -70,8 +68,11 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    */
   constructor(protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _renderer: Renderer2,
-              @Inject(PLATFORM_ID) protected _platformId: Object) {
+<<<<<<< Updated upstream
+              protected _styleUtils: StyleUtils) {
+=======
+              protected _styler: StylerService) {
+>>>>>>> Stashed changes
   }
 
   // *********************************************
@@ -137,19 +138,28 @@ 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';
+<<<<<<< Updated upstream
+    return this._styleUtils.lookupStyle(source, query);
+=======
+    return this._styler.lookupStyle(source, query);
+>>>>>>> Stashed changes
   }
 
   /**
    * Quick accessor to raw attribute value on the target DOM element
    */
   protected _getAttributeValue(attribute: string,
                                source: HTMLElement = this.nativeElement): string {
-    return lookupAttributeValue(source || this.nativeElement, attribute);
+<<<<<<< Updated upstream
+    return this._styleUtils.lookupAttributeValue(source, attribute);
+=======
+    return this._styler.lookupAttributeValue(source, attribute);
+>>>>>>> Stashed changes
   }
 
   /**
@@ -158,15 +168,29 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    * Check inline style first then check computed (stylesheet) style.
    * And optionally add the flow value to element's inline style.
    */
-  protected _getFlowDirection(target: any, addIfMissing = false): string {
+  protected _getFlowDirection(target: HTMLElement, 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');
+
+<<<<<<< Updated upstream
+      value = this._styleUtils.lookupStyle(target, query) || 'row';
+      hasInlineValue = this._styleUtils.lookupInlineStyle(target, query);
+=======
+      value = this._styler.lookupStyle(target, query) || 'row';
+      hasInlineValue = this._styler.lookupInlineStyle(target, query);
+>>>>>>> Stashed changes
 
       if (!hasInlineValue && addIfMissing) {
-        applyStyleToElements(this._renderer, buildLayoutCSS(value), [target]);
+        const style = buildLayoutCSS(value);
+        const elements = [target];
+<<<<<<< Updated upstream
+        this._styleUtils.applyStyleToElements(style, elements);
+=======
+        this._styler.applyStyleToElements(style, elements);
+>>>>>>> Stashed changes
       }
     }
 
@@ -178,16 +202,23 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    */
   protected _applyStyleToElement(style: StyleDefinition,
                                  value?: string | number,
-                                 nativeElement: any = this.nativeElement) {
-    let element = nativeElement || this.nativeElement;
-    applyStyleToElement(this._renderer, element, style, value);
+                                 element: HTMLElement = this.nativeElement) {
+<<<<<<< Updated upstream
+    this._styleUtils.applyStyleToElement(element, style, value);
+=======
+    this._styler.applyStyleToElement(element, style, value);
+>>>>>>> Stashed changes
   }
 
   /**
    * 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 || []);
+  protected _applyStyleToElements(style: StyleDefinition, elements: HTMLElement[]) {
+<<<<<<< Updated upstream
+    this._styleUtils.applyStyleToElements(style, elements);
+=======
+    this._styler.applyStyleToElements(style, elements);
+>>>>>>> Stashed changes
   }
 
   /**

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

@@ -21,6 +21,13 @@ import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-regi
 
 import {ClassDirective} from './class';
 import {MediaQueriesModule} from '../../media-query/_module';
+<<<<<<< Updated upstream
+import {ServerStylesheet} from '../../utils/server-stylesheet';
+import {StyleUtils} from '../../utils/style-utils';
+=======
+import {ServerStylesheet} from '../../utils/styling/server-stylesheet';
+import {StylerService} from '../../utils/styling/styler';
+>>>>>>> Stashed changes
 
 describe('class directive', () => {
   let fixture: ComponentFixture<any>;
@@ -46,7 +53,13 @@ describe('class directive', () => {
       declarations: [TestClassComponent, ClassDirective],
       providers: [
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
-        {provide: MatchMedia, useClass: MockMatchMedia}
+        {provide: MatchMedia, useClass: MockMatchMedia},
+        ServerStylesheet,
+<<<<<<< Updated upstream
+        StyleUtils,
+=======
+        StylerService,
+>>>>>>> Stashed changes
       ]
     });
   });

src/lib/api/ext/class.ts

@@ -19,8 +19,6 @@ import {
   SimpleChanges,
   Self,
   OnInit,
-  Inject,
-  PLATFORM_ID,
 } from '@angular/core';
 import {NgClass} from '@angular/common';
 
@@ -29,6 +27,11 @@ 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';
+<<<<<<< Updated upstream
+import {StyleUtils} from '../../utils/style-utils';
+=======
+import {StylerService} from '../../utils/styling/styler';
+>>>>>>> Stashed changes
 
 /** NgClass allowed inputs **/
 export type NgClassType = string | string[] | Set<string> | {[klass: string]: any};
@@ -95,8 +98,13 @@ 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);
+<<<<<<< Updated upstream
+              protected _styleUtils: StyleUtils) {
+    super(monitor, _ngEl, _styleUtils);
+=======
+              protected _styler: StylerService) {
+    super(monitor, _ngEl, _styler);
+>>>>>>> Stashed changes
     this._configureAdapters();
   }
 
@@ -139,7 +147,14 @@ 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,
+<<<<<<< Updated upstream
+      this._styleUtils
+=======
+      this._styler
+>>>>>>> Stashed changes
     );
     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,13 @@ import {
 } from '../../utils/testing/helpers';
 import {ShowHideDirective} from './show-hide';
 import {MediaQueriesModule} from '../../media-query/_module';
+<<<<<<< Updated upstream
+import {ServerStylesheet} from '../../utils/server-stylesheet';
+import {StyleUtils} from '../../utils/style-utils';
+=======
+import {ServerStylesheet} from '../../utils/styling/server-stylesheet';
+import {StylerService} from '../../utils/styling/styler';
+>>>>>>> Stashed changes
 
 describe('hide directive', () => {
   let fixture: ComponentFixture<any>;
@@ -60,7 +67,13 @@ describe('hide directive', () => {
       declarations: [TestHideComponent, ShowHideDirective],
       providers: [
         BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
-        {provide: MatchMedia, useClass: MockMatchMedia}
+        {provide: MatchMedia, useClass: MockMatchMedia},
+        ServerStylesheet,
+<<<<<<< Updated upstream
+        StyleUtils,
+=======
+        StylerService,
+>>>>>>> Stashed changes
       ]
     });
   });

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

@@ -12,12 +12,15 @@ import {
   OnInit,
   OnChanges,
   Renderer2,
-  Inject,
-  PLATFORM_ID,
 } from '@angular/core';
 
 import {BaseFxDirective} from '../core/base';
 import {MediaMonitor} from '../../media-query/media-monitor';
+<<<<<<< Updated upstream
+import {StyleUtils} from '../../utils/style-utils';
+=======
+import {StylerService} from '../../utils/styling/styler';
+>>>>>>> Stashed changes
 
 /**
  * This directive provides a responsive API for the HTML <img> 'src' attribute
@@ -57,12 +60,17 @@ 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,
-              @Inject(PLATFORM_ID) platformId: Object) {
-    super(monitor, elRef, renderer, platformId);
-    this._cacheInput('src', elRef.nativeElement.getAttribute('src') || '');
+  constructor(protected _elRef: ElementRef,
+              protected _renderer: Renderer2,
+              protected _monitor: MediaMonitor,
+<<<<<<< Updated upstream
+              protected _styleUtils: StyleUtils) {
+    super(_monitor, _elRef, _styleUtils);
+=======
+              protected _styler: StylerService) {
+    super(_monitor, _elRef, _styler);
+>>>>>>> Stashed changes
+    this._cacheInput('src', _elRef.nativeElement.getAttribute('src') || '');
   }
 
   /**