diff --git a/src/fetch.ts b/src/fetch.ts
index 9408f9d..733d80a 100644
--- 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
index e452ebf..8739bc3 100644
--- 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
index 67e7d37..a22fc4d 100644
--- 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 = `
-
+
@@ -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;');