From a9d531875b83cf1c6150d22c56c526c4535e8cb1 Mon Sep 17 00:00:00 2001
From: Victor Parra <victor.parra@bigcommerce.com>
Date: Fri, 22 May 2020 11:32:45 -0500
Subject: [PATCH] feat(core): CHECKOUT-4909 Pass in attributes to stylesheet

---
 src/stylesheet-loader.spec.ts | 12 ++++++++++++
 src/stylesheet-loader.ts      | 12 +++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/stylesheet-loader.spec.ts b/src/stylesheet-loader.spec.ts
index 7f11e10..1f82f19 100644
--- a/src/stylesheet-loader.spec.ts
+++ b/src/stylesheet-loader.spec.ts
@@ -67,6 +67,18 @@ describe('StylesheetLoader', () => {
             expect(document.head.appendChild)
                 .toHaveBeenCalledTimes(1);
         });
+
+        it('attaches script tag to document with data attributes', async () => {
+            await loader.loadStylesheet(
+                'https://code.jquery.com/jquery-3.2.1.min.js',
+                {prepend: true, attributes: {'data-attribute1': '1', 'data-attribute2': '2'}});
+
+            expect(stylesheet.attributes.getNamedItem('data-attribute1')!.value)
+                .toEqual('1');
+
+            expect(stylesheet.attributes.getNamedItem('data-attribute2')!.value)
+                .toEqual('2');
+        });
     });
 
     describe('when stylesheet fails to load', () => {
diff --git a/src/stylesheet-loader.ts b/src/stylesheet-loader.ts
index 1069e8b..dd2b032 100644
--- a/src/stylesheet-loader.ts
+++ b/src/stylesheet-loader.ts
@@ -4,12 +4,17 @@ import BrowserSupport from './browser-support';
 
 export interface LoadStylesheetOptions {
     prepend: boolean;
+    attributes: StylesheetAttributes;
 }
 
 export interface PreloadStylesheetOptions {
     prefetch: boolean;
 }
 
+export interface StylesheetAttributes {
+    [key: string]: string;
+}
+
 export default class StylesheetLoader {
     private _stylesheets: { [key: string]: Promise<void> } = {};
     private _preloadedStylesheets: { [key: string]: Promise<void> } = {};
@@ -26,7 +31,12 @@ export default class StylesheetLoader {
         if (!this._stylesheets[src]) {
             this._stylesheets[src] = new Promise((resolve, reject) => {
                 const stylesheet = document.createElement('link');
-                const { prepend = false } = options || {};
+                const { prepend = false, attributes = {} } = options || {};
+
+                Object.keys(attributes)
+                    .forEach(key => {
+                        stylesheet.setAttribute(key, attributes[key]);
+                    });
 
                 stylesheet.onload = () => resolve();
                 stylesheet.onerror = event => {