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