这是indexloc提供的服务，不要输入任何密码
Skip to content

Fix #242: keep id,media,title attributes on replaced link elements #243

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 13, 2024
Merged

Fix #242: keep id,media,title attributes on replaced link elements #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
feb6675
Fix #242: keep id,media,title attributes on replaced link elements
tuespetre Sep 12, 2024
c167df4
format cleanup to appease prettier --check
tuespetre Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/transform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,16 @@ export async function transformCSS(
if (el.tagName.toLowerCase() === 'style') {
// Handle inline stylesheets
el.innerHTML = css;
} else if (el.tagName.toLowerCase() === 'link') {
} else if (el instanceof HTMLLinkElement) {
// Create new link
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;
const promise = new Promise((res) => {
link.onload = res;
Comment on lines 25 to 26
Copy link
Member

@jgerigmeyer jgerigmeyer Sep 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine including disabled here without a test, but we'll need to adjust the promise since onload won't fire for a disabled link. Something e.g.:

Suggested change
const promise = new Promise((res) => {
link.onload = res;
link.disabled = el.disabled;
const promise = new Promise((res) => {
if (link.disabled) {
res(true);
} else {
link.onload = res;
}

Copy link
Contributor Author

@tuespetre tuespetre Sep 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking about this earlier too. I wonder if it might be better to change fetchCSS to just ignore stylesheets with disabled (both link and style)

Copy link
Member

@jgerigmeyer jgerigmeyer Sep 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's merge this, and could you open a new issue to consider what to do with disabled link/style elements? It would be a breaking change to ignore disabled stylesheets without a watcher of some sort, since removing the disabled attr would fetch the un-polyfilled styles.

});
Expand Down
18 changes: 18 additions & 0 deletions tests/unit/transform.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,22 @@ describe('transformCSS', () => {
expect(div.hasAttribute('data-has-inline-styles')).toBeFalsy();
expect(div2.hasAttribute('data-has-inline-styles')).toBeFalsy();
});

it('preserves id, media, and title attributes when replacing link elements', async () => {
document.head.innerHTML = `
<link id="the-link" media="screen" title="stylish" rel="stylesheet" href="/sample.css"/>
`;
let link = document.querySelector('link') as HTMLLinkElement;
const styleData = [{ el: link, css: 'html { margin: 0; }', changed: true }];
const inlineStyles = new Map();
const promise = transformCSS(styleData, inlineStyles, true);
link = document.querySelector('link') as HTMLLinkElement;
link.dispatchEvent(new Event('load'));
await promise;

expect(link.href).toContain('/updated.css');
expect(link.id).toBe('the-link');
expect(link.media).toBe('screen');
expect(link.title).toBe('stylish');
});
});