From e6c1dd440d6819de2f8a029a712b3af77b1ba484 Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Mon, 14 Oct 2024 16:12:14 -0400 Subject: [PATCH 1/3] Do not fetch disabled links; copy over all attributes to new link --- src/fetch.ts | 6 ++++++ src/transform.ts | 12 +++++++----- tests/unit/fetch.test.ts | 2 +- tests/unit/transform.test.ts | 3 ++- 4 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/fetch.ts b/src/fetch.ts index 9408f9d1..733d80ad 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 e452ebf9..8739bc34 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 67e7d37e..a22fc4d0 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;'); From ce662eacc8a64b26e8ec91fca2731ac33f406e23 Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Tue, 15 Oct 2024 11:50:29 -0400 Subject: [PATCH 2/3] Do not copy over crossorigin, integrity, referrerpolicy, or event handlers --- src/transform.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/transform.ts b/src/transform.ts index 8739bc34..380671e6 100644 --- a/src/transform.ts +++ b/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>, @@ -18,9 +25,11 @@ export async function transformCSS( const url = URL.createObjectURL(blob); const link = document.createElement('link'); for (const name of el.getAttributeNames()) { - const attr = el.getAttribute(name); - if (attr !== null && name !== 'href') { - link.setAttribute(name, attr); + if (!name.startsWith('on') && !excludeAttributes.includes(name)) { + const attr = el.getAttribute(name); + if (attr !== null) { + link.setAttribute(name, attr); + } } } link.setAttribute('href', url); From 28952556ff99d465113ec059bc50cbc3993dbc37 Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Tue, 15 Oct 2024 11:52:28 -0400 Subject: [PATCH 3/3] add test --- tests/unit/transform.test.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tests/unit/transform.test.ts b/tests/unit/transform.test.ts index a177d0bd..58d4fcfa 100644 --- 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 = ` - + @@ -43,6 +43,7 @@ describe('transformCSS', () => { 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;');