Do not fetch disabled links; copy over all attributes to new link

oddbird · Oct 14, 2024 · e6c1dd4 · e6c1dd4
1 parent 8bacf91
commit e6c1dd4
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/src/fetch.ts b/src/fetch.ts
@@ -25,6 +25,12 @@ async function fetchLinkedStylesheets(
       if (!data.url) {
         return data as StyleData;
       }
+      // TODO: Add MutationObserver to watch for disabled links being enabled
+      // https://github.com/oddbird/css-anchor-positioning/issues/246
+      if ((data.el as HTMLLinkElement | undefined)?.disabled) {
+        // Do not fetch or parse disabled stylesheets
+        return null;
+      }
       // fetch css and add to array
       try {
         const response = await fetch(data.url.toString());

diff --git a/src/transform.ts b/src/transform.ts
@@ -17,11 +17,13 @@ export async function transformCSS(
         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;
+        for (const name of el.getAttributeNames()) {
+          const attr = el.getAttribute(name);
+          if (attr !== null && name !== 'href') {
+            link.setAttribute(name, attr);
+          }
+        }
+        link.setAttribute('href', url);
         const promise = new Promise((res) => {
           link.onload = res;
         });

diff --git a/tests/unit/fetch.test.ts b/tests/unit/fetch.test.ts
@@ -7,7 +7,7 @@ describe('fetch stylesheet', () => {
   beforeAll(() => {
     // Set up our document head
     document.head.innerHTML = `
-      <link type="text/css" href="/sample.css"/>
+      <link type="text/css" href="/sample.css" />
       <link rel="stylesheet" />
       <link />
       <style>

diff --git a/tests/unit/transform.test.ts b/tests/unit/transform.test.ts
@@ -7,7 +7,7 @@ describe('transformCSS', () => {
 
   it('parses and removes new anchor positioning CSS after transformation to JS', async () => {
     document.head.innerHTML = `
-      <link type="text/css" href="/sample.css"/>
+      <link type="text/css" href="/sample.css" data-link="true" />
       <style>
         p { color: red; }
       </style>
@@ -42,6 +42,7 @@ describe('transformCSS', () => {
     await promise;
 
     expect(link.href).toContain('/updated.css');
+    expect(link.getAttribute('data-link')).toBe('true');
     expect(style.innerHTML).toBe('html { padding: 0; }');
     expect(div.getAttribute('style')).toBe('--foo: var(--bar); color:blue;');
     expect(div2.getAttribute('style')).toBe('color: red;');