Merge pull request #243 from tuespetre/link-attributes

Fix #242: keep id,media,title attributes on replaced link elements

Author: jgerigmeyer

src/transform.ts

@@ -12,13 +12,16 @@ export async function transformCSS(
       if (el.tagName.toLowerCase() === 'style') {
         // Handle inline stylesheets
         el.innerHTML = css;
-      } else if (el.tagName.toLowerCase() === 'link') {
+      } else if (el instanceof HTMLLinkElement) {
         // Create new link
         const blob = new Blob([css], { type: 'text/css' });
         const url = URL.createObjectURL(blob);
         const link = document.createElement('link');
         link.rel = 'stylesheet';
         link.href = url;
+        link.id = el.id;
+        link.media = el.media;
+        link.title = el.title;
         const promise = new Promise((res) => {
           link.onload = res;
         });

tests/unit/transform.test.ts

@@ -49,4 +49,22 @@ describe('transformCSS', () => {
     expect(div.hasAttribute('data-has-inline-styles')).toBeFalsy();
     expect(div2.hasAttribute('data-has-inline-styles')).toBeFalsy();
   });
+
+  it('preserves id, media, and title attributes when replacing link elements', async () => {
+    document.head.innerHTML = `
+      <link id="the-link" media="screen" title="stylish" rel="stylesheet" href="/sample.css"/>
+    `;
+    let link = document.querySelector('link') as HTMLLinkElement;
+    const styleData = [{ el: link, css: 'html { margin: 0; }', changed: true }];
+    const inlineStyles = new Map();
+    const promise = transformCSS(styleData, inlineStyles, true);
+    link = document.querySelector('link') as HTMLLinkElement;
+    link.dispatchEvent(new Event('load'));
+    await promise;
+
+    expect(link.href).toContain('/updated.css');
+    expect(link.id).toBe('the-link');
+    expect(link.media).toBe('screen');
+    expect(link.title).toBe('stylish');
+  });
 });