loadScript() takes a css option to load stylesheet by URL

CHANGELOG.md

@@ -4,6 +4,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Added
+- `loadScript()` takes a `css` option to load stylesheet by URL
 ### Changed
 ### Fixed
 ### Removed

src/esri-loader.ts

@@ -66,7 +66,7 @@ function handleScriptError(script, callback) {
 // interfaces
 export interface ILoadScriptOptions {
   url?: string;
-  // TODO: css?: string;
+  css?: string;
   dojoConfig?: { [propName: string]: any };
 }
 
@@ -136,6 +136,10 @@ export function loadScript(options: ILoadScriptOptions = {}): Promise<HTMLScript
         reject(new Error(`The ArcGIS API for JavaScript is already loaded.`));
       } else {
         // this is the first time attempting to load the API
+        if (options.css) {
+          // load the css before loading the script
+          loadCss(options.css);
+        }
         if (options.dojoConfig) {
           // set dojo configuration parameters before loading the script
           window['dojoConfig'] = options.dojoConfig;

test/esri-loader.spec.js

@@ -84,6 +84,7 @@ describe('esri-loader', function () {
           // trigger the onload event listeners
           el.dispatchEvent(new Event('load'));
         });
+        spyOn(document.head, 'appendChild');
         esriLoader.loadScript()
         .then((script) => {
           // hold onto script element for assertions below
@@ -97,6 +98,9 @@ describe('esri-loader', function () {
       it('should not have set dojoConfig', function () {
         expect(window.dojoConfig).not.toBeDefined();
       });
+      it('should not have called loadCss', function () {
+        expect(document.head.appendChild.calls.any()).toBeFalsy();
+      });
     });
     describe('with different API version', function () {
       var scriptEl;
@@ -121,6 +125,25 @@ describe('esri-loader', function () {
         expect(window.dojoConfig).not.toBeDefined();
       });
     });
+    describe('with css option', function () {
+      var cssUrl = 'https://js.arcgis.com/4.6/esri/css/main.css';
+      beforeAll(function (done) {
+        spyOn(document.body, 'appendChild').and.callFake(function (el) {
+          // trigger the onload event listeners
+          el.dispatchEvent(new Event('load'));
+        });
+        spyOn(document.head, 'appendChild').and.stub();
+        esriLoader.loadScript({
+          css: cssUrl
+        })
+        .then((script) => {
+          done();
+        });
+      });
+      it('should have called loadCss with the url', function () {
+        expect(document.head.appendChild.calls.argsFor(0)[0].href).toEqual(cssUrl);
+      });
+    });
     describe('with dojoConfig option', function () {
       var dojoConfig = {
         async: true,