Adopted @skyux/theme (#458)

Author: Blackbaud-SteveBrush

config/karma/dev-src-app.karma.conf.js

@@ -39,7 +39,7 @@ function getConfig(config) {
   webpackConfig.resolve.alias['@blackbaud/skyux-builder/runtime'] = runtimePath;
 
   // Instead of adding skyux2 as a dependency of skyux-builder
-  webpackConfig.resolve.alias['@blackbaud/skyux/dist/css/sky.css'] =
+  webpackConfig.resolve.alias['@skyux/theme/css/sky.css'] =
     '../../utils/runtime-test-skyux.css';
 
   // Remove sky-style-loader

config/webpack/alias-builder.js

@@ -41,7 +41,7 @@ module.exports = {
     // Order here is very important; the more specific CSS alias must go before
     // the more generic dist one.
     if (skyPagesConfig.skyux.cssPath) {
-      alias['@blackbaud/skyux/dist/css/sky.css'] = spaPath(skyPagesConfig.skyux.cssPath);
+      alias['@skyux/theme/css/sky.css'] = spaPath(skyPagesConfig.skyux.cssPath);
     }
 
     if (skyPagesConfig.skyux.importPath) {

package.json

@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/blackbaud/skyux-builder#readme",
   "peerDependencies": {
-    "@blackbaud/skyux": "^2.0.0"
+    "@blackbaud/skyux": "^2.21.0"
   },
   "dependencies": {
     "@angular/animations": "4.3.6",

runtime/style-loader.spec.ts

@@ -1,33 +1,3 @@
-import * as FontFaceObserver from 'fontfaceobserver';
-
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class SkyAppStyleLoader {
-  public static readonly LOAD_TIMEOUT: number = 3000;
-  public isLoaded: boolean = false;
-
-  public loadStyles(): Promise<any> {
-    const fontAwesome = new FontFaceObserver('FontAwesome');
-    const blackbaudSans = new FontFaceObserver('Blackbaud Sans');
-
-    return Promise
-      .all([
-        // Specify a character for FontAwesome since some browsers will fail to detect
-        // when the font is loaded unless a known character with a different width
-        // than the default is not specified.
-        fontAwesome.load('\uf0fc', SkyAppStyleLoader.LOAD_TIMEOUT),
-        blackbaudSans.load(undefined, SkyAppStyleLoader.LOAD_TIMEOUT)
-      ])
-      .then(() => {
-        this.isLoaded = true;
-      })
-      .catch((error) => {
-        // Errors loading the font should not stop the page from rendering.
-        // Passing the error along in case the client wants to do something with it.
-        return Promise.resolve({
-          error: error
-        });
-      });
-  }
-}
+export {
+  SkyAppStyleLoader
+} from '@skyux/theme/style-loader';

runtime/style-loader.ts

@@ -1,21 +1,3 @@
-import {
-  Injectable
-} from '@angular/core';
-
-import { ReplaySubject } from 'rxjs/ReplaySubject';
-
-/**
- * Provides information about the state of the application's viewport.
- */
-@Injectable()
-export class SkyAppViewportService {
-
-  /**
-   * Updated when the viewport becomes visible.  While the page is rendered, the
-   * viewport may remain hidden as fonts and styles are loaded asynchronously;
-   * this is done to avoid a FOUC (Flash Of Unstyled Content) before the fonts
-   * and styles are ready.
-   */
-  public visible = new ReplaySubject<boolean>(1);
-
-}
+export {
+  SkyAppViewportService
+} from '@skyux/theme/viewport.service';

runtime/viewport.service.ts

@@ -31,7 +31,7 @@ import {
   SkyAppWindowRef
 } from '@blackbaud/skyux-builder/runtime';
 
-require('style-loader!@blackbaud/skyux/dist/css/sky.css');
+require('style-loader!@skyux/theme/css/sky.css');
 require('style-loader!./app.component.scss');
 
 let omnibarLoaded: boolean;

src/app/app.component.ts

@@ -1,2 +1,2 @@
-import '@blackbaud/skyux/dist/css/sky.css';
+import '@skyux/theme/css/sky.css';
 import '@blackbaud/skyux/dist/core';

src/skyux.ts

@@ -88,7 +88,7 @@ describe('config webpack common', () => {
     alias = config.resolve.alias;
 
     expect(
-      alias['@blackbaud/skyux/dist/css/sky.css']
+      alias['@skyux/theme/css/sky.css']
     ).toBe(path.join(process.cwd(), cssPath));
   });
 

test/config-webpack-common.spec.js

@@ -18,8 +18,7 @@
     "types": [
       "core-js",
       "node",
-      "jasmine",
-      "fontfaceobserver"
+      "jasmine"
     ],
     "baseUrl": ".",
     "paths": {

tsconfig.json

@@ -2,7 +2,7 @@
 
 'use strict';
 
-var styleLoader = require('./sky-style-loader');
+const styleLoader = require('@skyux/theme/utils/node-js/style-loader');
 
 // A race condition exists in Firefox where tests can begin before styles are loaded.
 // This will ensure that styles are loaded before tests run by ensuring the style rule