Add support for style sheet assets

.github/workflows/publish.yml

@@ -0,0 +1,24 @@
+name: Publish
+
+on:
+  push:
+    tags:
+      - '*.*.*'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    # Setup .npmrc file to publish to npm
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+        registry-url: 'https://registry.npmjs.org'
+    - name: Build
+      run: |
+        npm install
+    - name: Publish
+      run: npm publish
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,20 @@
+name: Test
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  coverage:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        fetch-depth: 5
+    - name: Install and run tests
+      run: |
+        npm ci
+        npm test
+        bash <(curl -s https://codecov.io/bash)

lib/assets.js

@@ -131,6 +131,8 @@ const formatAssets = (includeContent, isStaticClient, asset, hashFileNames = tru
     props.content = content;
   }
 
+  props.type = asset.type || 'script';
+
   return merge({}, asset, props);
 };
 

lib/deploy-spa.js

@@ -11,13 +11,20 @@ async function deploy(settings) {
     settings.hashFileNames
   );
 
+  const scripts = assetsWithoutContent.filter(x => x.type === 'script');
+  const styleSheets = assetsWithoutContent.filter(x => x.type === 'styleSheet');
+
   const spa = {
     name: settings.name,
     package_config: settings.packageConfig,
-    scripts: assetsWithoutContent,
+    scripts,
     sky_ux_config: settings.skyuxConfig
   };
 
+  if (styleSheets.length) {
+    spa.styleSheets = styleSheets;
+  }
+
   if (settings.rootElementTagName) {
     spa.root_element_tag_name = settings.rootElementTagName;
   }

lib/deploy-static.js

@@ -13,14 +13,21 @@ async function register(settings, versionAssets, versionRowKey) {
     versionAssets
   );
 
+  const scripts = assetsWithoutContent.filter(x => x.type === 'script');
+  const styleSheets = assetsWithoutContent.filter(x => x.type === 'styleSheet');
+
   const entity = {
     PartitionKey: azure.generator.String(settings.name),
     RowKey: azure.generator.String(versionRowKey),
-    Scripts: azure.generator.String(JSON.stringify(assetsWithoutContent)),
+    Scripts: azure.generator.String(JSON.stringify(scripts)),
     PackageConfig: azure.generator.String(JSON.stringify(settings.packageConfig)),
     SkyUXConfig: azure.generator.String(JSON.stringify(settings.skyuxConfig))
   };
 
+  if (styleSheets.length) {
+    entity.StyleSheets = azure.generator.String(JSON.stringify(styleSheets));
+  }
+
   logger.info(`Registering ${versionAssets} as ${versionRowKey}.`);
   return await azure.registerEntityToTable(settings, entity);
 }

test/lib-assets.spec.js

@@ -70,6 +70,28 @@ describe('skyux-deploy lib assets', () => {
       expect(fs.statSync).toHaveBeenCalled();
     });
 
+    it('should set the asset type to "script" by default', () => {
+      spyOn(fs, 'existsSync').and.returnValue(true);
+      spyOn(fs, 'readFileSync').and.returnValue('');
+
+      let stubs = {};
+      stubs[path.join(process.cwd(), 'dist', 'metadata.json')] = [
+        {
+          name: 'custom-name.js'
+        },
+        {
+          name: 'styles.css',
+          type: 'styleSheet'
+        }
+      ];
+
+      const lib = proxyquire('../lib/assets', stubs);
+      const assets = lib.getDistAssets();
+
+      expect(assets[0].type).toEqual('script');
+      expect(assets[1].type).toEqual('styleSheet');
+    });
+
     it('should allow disabling the file name hash', () => {
       const readFileSync = fs.readFileSync;
       spyOn(fs, 'existsSync').and.returnValue(true);

test/lib-deploy-spa.spec.js

@@ -8,20 +8,24 @@ describe('skyux-deploy lib deploy SPA', () => {
   let assetsMock;
   let portalMock;
   let lib;
+  let mockAssets;
 
   beforeEach(() => {
     spyOn(logger, 'error');
     spyOn(logger, 'info');
 
+    mockAssets = [
+      {
+        name: 'my-asset.js',
+        content: 'my-content',
+        type: 'script'
+      }
+    ];
+
     assetsMock = {
       getDistAssets: jasmine.createSpy('getDistAssets')
         .and
-        .returnValue([
-          {
-            name: 'my-asset.js',
-            content: 'my-content'
-          }
-        ]),
+        .returnValue(mockAssets),
     };
 
     portalMock = {
@@ -62,7 +66,8 @@ describe('skyux-deploy lib deploy SPA', () => {
         scripts: [
           {
             name: 'my-asset.js',
-            content: 'my-content'
+            content: 'my-content',
+            type: 'script'
           }
         ]
       },
@@ -89,4 +94,28 @@ describe('skyux-deploy lib deploy SPA', () => {
     expect(actualTagName).toEqual('app-root');
   });
 
+  it('should call deploySpa with style sheets', async () => {
+    mockAssets.push({
+      name: 'styles.css',
+      type: 'styleSheet'
+    });
+
+    await lib(
+      {
+        azureStorageAccessKey: 'abc',
+        name: 'custom-name2',
+        version: 'custom-version2',
+        skyuxConfig: { test1: true },
+        packageConfig: { test2: true }
+      }
+    );
+
+    expect(portalMock.deploySpa.calls.mostRecent().args[1].styleSheets).toEqual([
+      {
+        name: 'styles.css',
+        type: 'styleSheet'
+      }
+    ]);
+  });
+
 });

test/lib-deploy-static.spec.js

@@ -5,13 +5,7 @@ describe('skyux-deploy lib deploy static', () => {
   const mock = require('mock-require');
   const logger = require('@blackbaud/skyux-logger');
 
-  const distAsset = [
-    {
-      name: 'my-asset.js',
-      content: 'my-content'
-    }
-  ];
-
+  let distAsset;
   let assetsMock;
   let azureMock;
   let lib;
@@ -20,6 +14,14 @@ describe('skyux-deploy lib deploy static', () => {
     spyOn(logger, 'error');
     spyOn(logger, 'info');
 
+    distAsset = [
+      {
+        name: 'my-asset.js',
+        content: 'my-content',
+        type: 'script'
+      }
+    ];
+
     assetsMock = {
       getDistAssets: jasmine.createSpy('getDistAssets').and.returnValue(distAsset)
     };
@@ -65,6 +67,28 @@ describe('skyux-deploy lib deploy static', () => {
     );
   });
 
+  it('should call registerEntityToTable with style sheets if they exist', async () => {
+    distAsset.push({
+      name: 'styles.css',
+      type: 'styleSheet'
+    });
+
+    const settings = {
+      azureStorageAccessKey: 'abc',
+      isStaticClient: true,
+      name: 'custom-name2',
+      version: 'custom-version2',
+      skyuxConfig: { test1: true },
+      packageConfig: { test2: true }
+    };
+
+    await lib(settings);
+
+    expect(azureMock.registerEntityToTable.calls.mostRecent().args[1].StyleSheets).toEqual(
+      '[{"name":"styles.css","type":"styleSheet"}]'
+    );
+  });
+
   it('should log a warning if version is invalid', async () => {
     const settings = {
       version: 'INVALID_VERSION'