Merge pull request #262 from oddbird/link-attrs

Do not fetch disabled links, but copy over all attributes to new link.

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());

src/transform.ts

@@ -1,5 +1,12 @@
 import { type StyleData } from './utils.js';
 
+const excludeAttributes = [
+  'crossorigin',
+  'href',
+  'integrity',
+  'referrerpolicy',
+];
+
 export async function transformCSS(
   styleData: StyleData[],
   inlineStyles?: Map<HTMLElement, Record<string, string>>,
@@ -17,11 +24,15 @@ 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()) {
+          if (!name.startsWith('on') && !excludeAttributes.includes(name)) {
+            const attr = el.getAttribute(name);
+            if (attr !== null) {
+              link.setAttribute(name, attr);
+            }
+          }
+        }
+        link.setAttribute('href', url);
         const promise = new Promise((res) => {
           link.onload = res;
         });

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>

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" crossorigin="anonymous" />
       <style>
         p { color: red; }
       </style>
@@ -42,6 +42,8 @@ describe('transformCSS', () => {
     await promise;
 
     expect(link.href).toContain('/updated.css');
+    expect(link.getAttribute('data-link')).toBe('true');
+    expect(link.getAttribute('crossorigin')).toBeNull();
     expect(style.innerHTML).toBe('html { padding: 0; }');
     expect(div.getAttribute('style')).toBe('--foo: var(--bar); color:blue;');
     expect(div2.getAttribute('style')).toBe('color: red;');